feat(flow): Add event listener to vueflow object

* event listener also exist in store state (hooksOn)
* add applyChangesHandlers to vueflow object, can be used to apply changes i.e. deleting etc.

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/composables/useVueFlow.ts

@@ -96,6 +96,8 @@ export default (options?: FlowOptions): UseVueFlow => {
   const store = useStore(options)
   return {
     store,
-    hooks: store.hooks,
+    applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes),
+    applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
+    ...store.hooksOn,
   }
 }

src/store/store.ts

@@ -2,7 +2,7 @@ import { getCurrentInstance } from 'vue'
 import useState, { initialState } from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowExportObject, FlowOptions, FlowState, FlowStore, Store } from '~/types'
+import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, FlowStore, Store } from '~/types'
 import { StoreSymbol } from '~/context'
 import { onLoadToObject } from '~/utils'
 
@@ -10,9 +10,15 @@ const useFlowStore = (id: string, preloadedState: FlowState): Store => {
   const state = reactive(useState(preloadedState))
   const getters = useGetters(state)
   const actions = useActions(state, getters)
+  const hooksOn: FlowHooksOn = <any>{}
+  Object.entries(state.hooks).forEach(([n, h]) => {
+    const name = `On${n.charAt(0).toUpperCase() + n.slice(1)}`
+    hooksOn[<keyof FlowHooksOn>name] = h.on as any
+  })
   return {
     id,
     state,
+    hooksOn,
     ...toRefs(state),
     ...getters,
     ...actions,

src/types/flow.ts

@@ -3,6 +3,8 @@ import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
+import { FlowStore } from './store'
+import { EdgeChange, FlowHooksOn, NodeChange } from './hooks'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
 export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
@@ -116,3 +118,9 @@ export interface FlowProps<N = any, E = N> {
 }
 
 export type FlowOptions<N = any, E = N> = FlowProps<N, E>
+
+export type UseVueFlow = {
+  store: FlowStore
+  applyNodeChanges: (changes: NodeChange[]) => void
+  applyEdgeChanges: (changes: EdgeChange[]) => void
+} & FlowHooksOn

src/types/hooks.ts

@@ -1,16 +1,42 @@
 import { EventHook } from '@vueuse/core'
 import { MouseTouchEvent } from '@braks/revue-draggable'
-import { FlowInstance, FlowElements } from './flow'
+import { FlowInstance, Dimensions, XYPosition, XYZPosition } from './flow'
 import { GraphEdge } from './edge'
-import { GraphNode } from './node'
+import { GraphNode, HandleBounds } from './node'
 import { Connection, OnConnectStartParams } from './connection'
 import { FlowTransform } from './zoom'
 
-export type FlowHook<T = any> = EventHook<T>
+export type NodeDimensionChange = {
+  id: string
+  type: 'dimensions'
+  dimensions?: Dimensions
+  position?: XYPosition
+  handleBounds?: HandleBounds
+  computedPosition?: XYZPosition
+  dragging?: boolean
+}
+
+export type NodeSelectionChange = {
+  id: string
+  type: 'select'
+  selected: boolean
+}
+
+export type NodeRemoveChange = {
+  id: string
+  type: 'remove'
+}
+
+export type NodeChange = NodeDimensionChange | NodeSelectionChange | NodeRemoveChange
+
+export type EdgeSelectionChange = NodeSelectionChange
+export type EdgeRemoveChange = NodeRemoveChange
+export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange
 
 export interface FlowEvents {
+  nodesChange: NodeChange[]
+  edgesChange: EdgeChange[]
   elementClick: { event: MouseTouchEvent; element: GraphNode | GraphEdge }
-  elementsRemove: FlowElements
   nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode }
   nodeClick: { event: MouseTouchEvent; node: GraphNode }
   nodeMouseEnter: { event: MouseEvent; node: GraphNode }
@@ -26,8 +52,7 @@ export interface FlowEvents {
   } & { [key in keyof OnConnectStartParams]: OnConnectStartParams[key] }
   connectStop: MouseEvent
   connectEnd: MouseEvent
-  load: FlowInstance
+  paneReady: FlowInstance
-  elementsProcessed: FlowElements
   move: FlowTransform | undefined
   moveStart: FlowTransform | undefined
   moveEnd: FlowTransform | undefined
@@ -50,6 +75,9 @@ export interface FlowEvents {
   edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge }
 }
 
+export type FlowHook<T = any> = EventHook<T>
+
 export type FlowHooks = { [key in keyof FlowEvents]: FlowHook<FlowEvents[key]> }
+export type FlowHooksOn = { [key in keyof FlowEvents as `On${Capitalize<key>}`]: FlowHook<FlowEvents[key]>['on'] }
 
 export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void

src/types/store.ts

@@ -6,7 +6,7 @@ import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connectio
 import { Edge, GraphEdge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
-import { FlowHooks } from './hooks'
+import { FlowHooks, FlowHooksOn } from './hooks'
 
 export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'> {
   hooks: FlowHooks
@@ -100,7 +100,7 @@ export interface FlowGetters<N = any, E = N> {
   getSelectedEdges: ComputedRef<GraphEdge<E>[]>
 }
 
-export type Store<N = any, E = N> = { id: string; state: FlowState<N, E> } & ToRefs<FlowState<N, E>> &
+export type Store<N = any, E = N> = { id: string; state: FlowState<N, E>; hooksOn: FlowHooksOn } & ToRefs<FlowState<N, E>> &
   FlowActions<N, E> &
   FlowGetters<N, E>
 export type FlowStore<N = any, E = N> = UnwrapNestedRefs<Store<N, E>>