diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts index d67da42a..ace4b256 100644 --- a/src/composables/useHooks.ts +++ b/src/composables/useHooks.ts @@ -17,6 +17,7 @@ export const createHooks = (): FlowHooks => ({ connectStart: createEventHook(), connectStop: createEventHook(), connectEnd: createEventHook(), + elementsProcessed: createEventHook(), load: createEventHook(), move: createEventHook(), moveStart: createEventHook(), diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts index 8096b41b..396e874b 100644 --- a/src/store/stateStore.ts +++ b/src/store/stateStore.ts @@ -91,6 +91,7 @@ export default (id: string, preloadedState: FlowState) => { await processElements([...nodes, ...edges], (processed) => { this.elements = [...this.elements, ...processed] }) + this.hooks.elementsProcessed.trigger(this.elements) }, setUserSelection(mousePos) { this.selectionActive = true @@ -128,6 +129,7 @@ export default (id: string, preloadedState: FlowState) => { if (!this.getSelectedNodes || this.getSelectedNodes.length === 0) { this.selectedElements = undefined + this.hooks.selectionChange.trigger(undefined) this.nodesSelectionActive = false } else { this.selectedNodesBbox = getRectOfNodes(this.getSelectedNodes) @@ -138,6 +140,7 @@ export default (id: string, preloadedState: FlowState) => { const selectedElementsArr = Array.isArray(elements) ? elements : [elements] const selectedElementsUpdated = microDiff(selectedElementsArr, this.selectedElements ?? []).length this.selectedElements = selectedElementsUpdated ? selectedElementsArr : this.selectedElements + if (selectedElementsUpdated) this.hooks.selectionChange.trigger(selectedElementsArr) }, initD3Zoom({ d3ZoomHandler, d3Zoom, d3Selection }) { this.d3Zoom = d3Zoom diff --git a/src/types/hooks.ts b/src/types/hooks.ts index 82a898bd..0eac2397 100644 --- a/src/types/hooks.ts +++ b/src/types/hooks.ts @@ -25,10 +25,11 @@ export interface FlowEvents { connectStop: MouseEvent connectEnd: MouseEvent load: FlowInstance + elementsProcessed: FlowElements move: FlowTransform | undefined moveStart: FlowTransform | undefined moveEnd: FlowTransform | undefined - selectionChange: FlowElements | null + selectionChange: FlowElements | undefined selectionDragStart: { event: MouseEvent; nodes: GraphNode[] } selectionDrag: { event: MouseEvent; nodes: GraphNode[] } selectionDragStop: { event: MouseEvent; nodes: GraphNode[] }