diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts index 3d9164ff..3bbc2d86 100644 --- a/packages/vue-flow/src/store/actions.ts +++ b/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, diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts index c72b2a23..30322c60 100644 --- a/packages/vue-flow/src/types/store.ts +++ b/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 */ diff --git a/packages/vue-flow/src/utils/changes.ts b/packages/vue-flow/src/utils/changes.ts index e1356614..9b06eb16 100644 --- a/packages/vue-flow/src/utils/changes.ts +++ b/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)