update: remove useHooks usage

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

src/composables/useHandle.ts

@@ -1,5 +1,4 @@
 import useStore from './useStore'
-import useHooks from './useHooks'
 import { getHostForElement } from '~/utils'
 import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
 
@@ -70,7 +69,6 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
 
 export default () => {
   const store = useStore()
-  const hooks = useHooks()
 
   return (
     event: MouseEvent,
@@ -107,7 +105,7 @@ export default () => {
       connectionHandleId: handleId,
       connectionHandleType: handleType,
     })
-    hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
+    store.hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
 
     function onMouseMove(event: MouseEvent) {
       store.connectionPosition.x = event.clientX - containerBounds.left
@@ -147,16 +145,16 @@ export default () => {
         doc,
       )
 
-      hooks.connectStop.trigger(event)
+      store.hooks.connectStop.trigger(event)
 
       if (isValid) {
-        hooks.connect.trigger(connection)
+        store.hooks.connect.trigger(connection)
         onEdgeUpdate?.(connection)
       }
 
-      hooks.connectEnd.trigger(event)
+      store.hooks.connectEnd.trigger(event)
 
-      if (elementEdgeUpdaterType) hooks.edgeUpdateEnd.trigger(event)
+      if (elementEdgeUpdaterType) store.hooks.edgeUpdateEnd.trigger(event)
 
       resetRecentHandle(recentHoveredHandle)
       store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })

src/composables/useHooks.ts

@@ -1,4 +1,3 @@
-import useStore from './useStore'
 import {
   Connection,
   Edge,
@@ -10,6 +9,7 @@ import {
   OnConnectStartParams,
   FlowInstance,
   FlowEvents,
+  FlowStore,
 } from '~/types'
 import { Hooks } from '~/context'
 
@@ -66,10 +66,9 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   }
 }
 
-export default (emit?: EmitFunc) => {
+export default (store: FlowStore, emit?: EmitFunc) => {
   let hooks = inject(Hooks)!
   if (!hooks) {
-    const store = useStore()
     if (import.meta.env.DEV) console.warn('hooks context not found; creating default hooks')
     hooks = store.hooks
     if (typeof emit === 'function') bind(emit, hooks)

src/composables/useStore.ts

@@ -1,16 +1,37 @@
-import { FlowOptions } from '~/types'
+import { FlowExportObject, FlowOptions } from '~/types'
 import { useFlowStore, initialState } from '~/store'
 import { Store } from '~/context'
+import { onLoadToObject } from '~/utils'
 
+let id = 0
 export default (options?: Partial<FlowOptions>) => {
   let store = inject(Store)!
+  const withStorage = options?.storageKey ?? false
 
   if (!store) {
     if (import.meta.env.DEV) console.warn('store context not found; creating default store')
-    store = useFlowStore({
-      ...initialState(),
+    let storedState = ref<FlowExportObject>()
+    const initial = initialState()
+    const storageKey = typeof options?.storageKey === 'string' ? options.storageKey : options?.id ?? `vue-flow-${id++}`
+    if (withStorage) {
+      storedState = useStorage(storageKey, {} as FlowExportObject)
+      if (storedState.value) {
+        initial.elements = storedState.value.elements ?? options?.elements ?? []
+        if (storedState.value.position && storedState.value.zoom)
+          initial.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
+      }
+    }
+    const preloadedState = {
+      ...initial,
       ...options,
-    })()
+    }
+    store = useFlowStore(storageKey, preloadedState)()
+    if (withStorage && storageKey === store.$id) {
+      const toObject = onLoadToObject(store)
+      store.$subscribe(() => {
+        storedState.value = toObject()
+      })
+    }
     provide(Store, store)
   }
 

src/composables/useVueFlow.ts

@@ -1,10 +1,10 @@
 import useHooks from './useHooks'
 import useStore from './useStore'
-import { EmitFunc } from '~/types'
+import { EmitFunc, FlowOptions } from '~/types'
 
-export const initFlow = (emit: EmitFunc) => {
-  const store = useStore()
-  const hooks = useHooks(emit)
+export const initFlow = (emit: EmitFunc, options: Partial<FlowOptions>) => {
+  const store = useStore(options)
+  const hooks = useHooks(store, emit)
 
   return {
     store,
@@ -12,4 +12,4 @@ export const initFlow = (emit: EmitFunc) => {
   }
 }
 
-export default () => useStore()
+export default (options?: Partial<FlowOptions>) => useStore(options)