From 4740a2c8fe68bb9efcdfced0da6d8569a0c81576 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 26 Nov 2021 13:54:49 +0100
Subject: [PATCH] update(hooks): add elementsProcessed event hook

* triggered after elements have been processed and updated in store
* add missing selection change trigger to store

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/composables/useHooks.ts | 1 +
 src/store/stateStore.ts     | 3 +++
 src/types/hooks.ts          | 3 ++-
 3 files changed, 6 insertions(+), 1 deletion(-)

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[] }