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

@@ -17,6 +17,7 @@ export const createHooks = (): FlowHooks => ({
   connectStart: createEventHook(),
   connectStop: createEventHook(),
   connectEnd: createEventHook(),
+  elementsProcessed: createEventHook(),
   load: createEventHook(),
   move: createEventHook(),
   moveStart: createEventHook(),

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

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