feat(nodes): allow connected edges to be removed with removeNodes

packages/vue-flow/src/container/VueFlow/watch.ts

@@ -94,7 +94,6 @@ export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>
               if (pauseStore) pauseStore.pause()
               if (pauseModel) pauseModel.pause()
 
-              console.log('watcher', v)
               store.setEdges(v)
 
               pauseStore = watchPausable(

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) => {

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<GraphEdge[]>(() => {
-    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 },

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