From f434ab0f791a90abe0a6d363397f5e0f74724188 Mon Sep 17 00:00:00 2001 From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 6 Jun 2022 20:01:13 +0200 Subject: [PATCH] feat(nodes): allow connected edges to be removed with `removeNodes` --- .../vue-flow/src/container/VueFlow/watch.ts | 1 - packages/vue-flow/src/store/actions.ts | 24 ++++++++++++++----- packages/vue-flow/src/store/getters.ts | 10 ++++---- packages/vue-flow/src/types/store.ts | 9 ++++--- 4 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/vue-flow/src/container/VueFlow/watch.ts b/packages/vue-flow/src/container/VueFlow/watch.ts index 5beaefb3..cc560327 100644 --- a/packages/vue-flow/src/container/VueFlow/watch.ts +++ b/packages/vue-flow/src/container/VueFlow/watch.ts @@ -94,7 +94,6 @@ export default (models: ToRefs if (pauseStore) pauseStore.pause() if (pauseModel) pauseModel.pause() - console.log('watcher', v) store.setEdges(v) pauseStore = watchPausable( diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts index 3bbc2d86..cb789960 100644 --- a/packages/vue-flow/src/store/actions.ts +++ b/packages/vue-flow/src/store/actions.ts @@ -20,6 +20,7 @@ import { createGraphNodes, createRemoveChange, createSelectionChange, + getConnectedEdges, getDimensions, getHandleBounds, getSelectionChanges, @@ -184,8 +185,8 @@ export default (state: State, getters: ComputedGetters): Actions => { const missingSource = !sourceNode || typeof sourceNode === 'undefined' const missingTarget = !targetNode || typeof targetNode === 'undefined' - if (missingSource) console.warn(`[vueflow]: Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`) - if (missingTarget) console.warn(`[vueflow]: Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`) + if (missingSource) console.warn(`[vue-flow]: Couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`) + if (missingTarget) console.warn(`[vue-flow]: Couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`) if (missingSource || missingTarget) return res const storedEdge = getters.getEdge.value(edge.id) @@ -257,14 +258,25 @@ export default (state: State, getters: ComputedGetters): Actions => { if (changes.length) state.hooks.edgesChange.trigger(changes) } - const removeNodes: Actions['removeNodes'] = (nodes) => { + const removeNodes: Actions['removeNodes'] = (nodes, removeConnectedEdges = true) => { const curr = nodes instanceof Function ? nodes(state.nodes) : nodes - const changes: NodeRemoveChange[] = [] + const nodeChanges: NodeRemoveChange[] = [] + const edgeChanges: EdgeRemoveChange[] = [] curr.forEach((item) => { - changes.push(createRemoveChange(typeof item === 'string' ? item : item.id)) + nodeChanges.push(createRemoveChange(typeof item === 'string' ? item : item.id)) + if (removeConnectedEdges) { + const connections = getConnectedEdges([typeof item === 'string' ? ({ id: item } as any) : item], state.edges) + edgeChanges.push(...connections.map((connection) => createRemoveChange(connection.id))) + } }) - state.hooks.nodesChange.trigger(changes) + if (nodeChanges.length) { + state.hooks.nodesChange.trigger(nodeChanges) + } + + if (edgeChanges.length) { + state.hooks.edgesChange.trigger(edgeChanges) + } } const removeEdges: Actions['removeEdges'] = (edges) => { diff --git a/packages/vue-flow/src/store/getters.ts b/packages/vue-flow/src/store/getters.ts index 3fefaaf0..79caf392 100644 --- a/packages/vue-flow/src/store/getters.ts +++ b/packages/vue-flow/src/store/getters.ts @@ -52,9 +52,9 @@ export default (state: State): ComputedGetters => { : nodes ?? [] }) - const edgeHidden = (e: GraphEdge) => { - const source = getNode.value(e.source) - const target = getNode.value(e.target) + const edgeHidden = (e: GraphEdge, source?: GraphNode, target?: GraphNode) => { + source = source ?? getNode.value(e.source) + target = target ?? getNode.value(e.target) if (!source || !target) { console.warn(`[vue-flow]: Orphaned edge ${e.id} will be removed.`) @@ -75,14 +75,14 @@ export default (state: State): ComputedGetters => { ) } const getEdges = computed(() => { - if (!state.onlyRenderVisibleElements) return state.edges.filter(edgeHidden) + if (!state.onlyRenderVisibleElements) return state.edges.filter((edge) => edgeHidden(edge)) return state.edges.filter((e) => { const source = getNode.value(e.source)! const target = getNode.value(e.target)! return ( - edgeHidden(e) && + edgeHidden(e, source, target) && isEdgeVisible({ sourcePos: source.computedPosition || { x: 0, y: 0 }, targetPos: target.computedPosition || { x: 0, y: 0 }, diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts index 30322c60..65b58d3f 100644 --- a/packages/vue-flow/src/types/store.ts +++ b/packages/vue-flow/src/types/store.ts @@ -106,7 +106,10 @@ export type SetElements = (elements: Elements | ((elements: FlowElements) => Ele export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void export type AddNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void -export type RemoveNodes = (nodes: (Node[] | string[]) | ((nodes: GraphNode[]) => Node[] | string[])) => void +export type RemoveNodes = ( + nodes: (Node[] | string[]) | ((nodes: GraphNode[]) => Node[] | string[]), + removeConnectedEdges?: boolean, +) => void export type RemoveEdges = (edges: (Edge[] | string[]) | ((edges: GraphEdge[]) => Edge[] | string[])) => void export type AddEdges = (edgesOrConnections: (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection)[])) => void export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false @@ -129,9 +132,9 @@ export interface Actions { addNodes: AddNodes /** parses edges and adds to state */ addEdges: AddEdges - /** parses nodes and adds to state */ + /** remove nodes (and possibly connected edges) from state */ removeNodes: RemoveNodes - /** parses edges and adds to state */ + /** remove edges from state */ removeEdges: RemoveEdges /** updates an edge */ updateEdge: UpdateEdge