feat(edges,nodes): add removeNodes and removeEdges utilities to store

packages/vue-flow/src/store/actions.ts

@@ -4,11 +4,13 @@ import type {
   ComputedGetters,
   CoordinateExtent,
   EdgeChange,
+  EdgeRemoveChange,
   GraphEdge,
   GraphNode,
   NodeChange,
   NodeDimensionChange,
   NodePositionChange,
+  NodeRemoveChange,
   State,
 } from '~/types'
 import {
@@ -16,6 +18,7 @@ import {
   applyChanges,
   createAdditionChange,
   createGraphNodes,
+  createRemoveChange,
   createSelectionChange,
   getDimensions,
   getHandleBounds,
@@ -254,6 +257,26 @@ export default (state: State, getters: ComputedGetters): Actions => {
     if (changes.length) state.hooks.edgesChange.trigger(changes)
   }
 
+  const removeNodes: Actions['removeNodes'] = (nodes) => {
+    const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
+    const changes: NodeRemoveChange[] = []
+    curr.forEach((item) => {
+      changes.push(createRemoveChange(typeof item === 'string' ? item : item.id))
+    })
+
+    state.hooks.nodesChange.trigger(changes)
+  }
+
+  const removeEdges: Actions['removeEdges'] = (edges) => {
+    const curr = edges instanceof Function ? edges(state.edges) : edges
+    const changes: EdgeRemoveChange[] = []
+    curr.forEach((item) => {
+      changes.push(createRemoveChange(typeof item === 'string' ? item : item.id))
+    })
+
+    state.hooks.edgesChange.trigger(changes)
+  }
+
   const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) =>
     updateEdgeAction(oldEdge, newConnection, state.edges, addEdges)
 
@@ -297,6 +320,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
     setEdges,
     addNodes,
     addEdges,
+    removeNodes,
+    removeEdges,
     updateEdge,
     applyEdgeChanges,
     applyNodeChanges,

packages/vue-flow/src/types/store.ts

@@ -106,6 +106,8 @@ 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 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
 export type SetState = (
@@ -127,6 +129,10 @@ export interface Actions {
   addNodes: AddNodes
   /** parses edges and adds to state */
   addEdges: AddEdges
+  /** parses nodes and adds to state */
+  removeNodes: RemoveNodes
+  /** parses edges and adds to state */
+  removeEdges: RemoveEdges
   /** updates an edge */
   updateEdge: UpdateEdge
   /** applies default edge change handler */

packages/vue-flow/src/utils/changes.ts

@@ -3,6 +3,7 @@ import type {
   Edge,
   EdgeAddChange,
   EdgeChange,
+  EdgeRemoveChange,
   EdgeSelectionChange,
   ElementChange,
   FlowElement,
@@ -12,6 +13,7 @@ import type {
   Node,
   NodeAddChange,
   NodeChange,
+  NodeRemoveChange,
   NodeSelectionChange,
 } from '~/types'
 
@@ -155,6 +157,11 @@ export const createAdditionChange = <
     type: 'add',
   }
 
+export const createRemoveChange = (id: string): NodeRemoveChange | EdgeRemoveChange => ({
+  id,
+  type: 'remove',
+})
+
 export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
   return items.reduce((res, item) => {
     const willBeSelected = selectedIds.includes(item.id)