update: remove useHooks usage

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

src/container/SelectionPane/SelectionPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElementId, FlowElement, KeyCode } from '../../types'
-import { useHooks, useStore, useKeyPress } from '../../composables'
+import { useStore, useKeyPress } from '../../composables'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import { getConnectedEdges, isNode } from '../../utils'
@@ -17,17 +17,16 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
 })
 
 const store = useStore()
-const hooks = useHooks()
 
 const onClick = (event: MouseEvent) => {
-  hooks.paneClick.trigger(event)
+  store.hooks.paneClick.trigger(event)
   store.unsetNodesSelection()
   store.resetSelectedElements()
 }
 
-const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event)
+const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger(event)
 
-const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
+const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
 
 const selectionKeyPresed = ref(false)
 
@@ -41,7 +40,7 @@ onMounted(() => {
         new Map<ElementId, FlowElement>(),
       )
 
-      hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
+      store.hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
       store.unsetNodesSelection()
       store.resetSelectedElements()
     }

src/container/VueFlow/VueFlow.vue

@@ -13,7 +13,6 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-  FlowEvents,
 } from '../../types'
 import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
@@ -21,7 +20,7 @@ import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
 import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { initFlow } from '~/composables'
+import { createHooks, initFlow } from '../../composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements
@@ -59,6 +58,7 @@ export interface FlowProps extends FlowOptions {
   edgeUpdaterRadius?: number
   edgeTypesId?: string
   nodeTypesId?: string
+  storage?: string
 }
 
 const props = withDefaults(defineProps<FlowProps>(), {
@@ -100,9 +100,8 @@ const props = withDefaults(defineProps<FlowProps>(), {
   edgeTypesId: '1',
   nodeTypesId: '1',
 })
-export type DefineFlowEvents = { (event: keyof FlowEvents, flowEvent: FlowEvents[keyof FlowEvents]): void }
 
-const emit = defineEmits<DefineFlowEvents>()
+const emit = defineEmits(Object.keys(createHooks()))
 
 const defaultNodeTypes: Record<string, NodeType> = {
   input: InputNode as NodeType,
@@ -117,11 +116,10 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
   smoothstep: SmoothStepEdge as EdgeType,
 }
 
-const { store, hooks } = initFlow(emit)
+const { store, hooks } = initFlow(emit, props)
 
 const init = (opts: typeof props) => {
-  store.$state = { ...store.$state, ...opts }
-  store.setElements(opts.elements)
+  store.$state = { ...store.$state, ...(props as any) }
   store.setMinZoom(opts.minZoom)
   store.setMaxZoom(opts.maxZoom)
   store.setTranslateExtent(opts.translateExtent)
@@ -147,10 +145,12 @@ invoke(async () => {
 watch(
   elements,
   (val, oldVal) => {
-    const hasDiff = diff(val, oldVal)
-    if (hasDiff.length > 0) store.setElements(val)
+    nextTick(() => {
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) store.setElements(val)
+    })
   },
-  { flush: 'pre', deep: true },
+  { flush: 'post', deep: true },
 )
 
 const nodeTypes = computed(() => {

src/container/ZoomPane/ZoomPane.vue

@@ -3,7 +3,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get, invoke } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
 import { FlowInstance, FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
+import { useKeyPress, useStore, useZoomPanHelper } from '../../composables'
 import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
 interface ZoomPaneProps {
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   paneMoveable: true,
 })
 const store = useStore()
-const hooks = useHooks()
 
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
@@ -75,7 +74,7 @@ invoke(async () => {
     if (viewChanged(transform.value, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
       transform.value = flowTransform
-      hooks.moveStart.trigger(flowTransform)
+      store.hooks.moveStart.trigger(flowTransform)
     }
   })
 
@@ -83,7 +82,7 @@ invoke(async () => {
     if (viewChanged(transform.value, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
       transform.value = flowTransform
-      hooks.moveEnd.trigger(flowTransform)
+      store.hooks.moveEnd.trigger(flowTransform)
     }
   })
 
@@ -95,7 +94,7 @@ invoke(async () => {
         if (viewChanged(transform.value, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform)
           transform.value = flowTransform
-          hooks.move.trigger(flowTransform)
+          store.hooks.move.trigger(flowTransform)
         }
       })
     }
@@ -196,7 +195,7 @@ invoke(async () => {
     getElements: onLoadGetElements(store),
     toObject: onLoadToObject(store),
   }
-  hooks.load.trigger(instance)
+  store.hooks.load.trigger(instance)
 })
 
 watch(