From 470ab3782afde2a040fbcd8415a59a0194071037 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Nov 2021 22:40:33 +0100
Subject: [PATCH] update: remove useHooks usage

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/EdgeWithButton/ButtonEdge.vue        |  7 ++---
 src/components/Edges/Edge.vue                 | 17 +++++------
 src/components/Handle/Handle.vue              |  5 ++--
 src/components/Nodes/Node.vue                 | 23 +++++++--------
 .../NodesSelection/NodesSelection.vue         | 11 ++++---
 src/composables/useHandle.ts                  | 12 ++++----
 src/composables/useHooks.ts                   |  5 ++--
 src/composables/useStore.ts                   | 29 ++++++++++++++++---
 src/composables/useVueFlow.ts                 | 10 +++----
 src/container/SelectionPane/SelectionPane.vue | 11 ++++---
 src/container/VueFlow/VueFlow.vue             | 20 ++++++-------
 src/container/ZoomPane/ZoomPane.vue           | 11 ++++---
 src/store/flowStore.ts                        |  8 +++--
 src/store/index.ts                            |  1 +
 src/types/store.ts                            |  7 +++--
 src/types/types.ts                            |  1 +
 16 files changed, 97 insertions(+), 81 deletions(-)

diff --git a/examples/EdgeWithButton/ButtonEdge.vue b/examples/EdgeWithButton/ButtonEdge.vue
index b286a54b..ec2f39ca 100644
--- a/examples/EdgeWithButton/ButtonEdge.vue
+++ b/examples/EdgeWithButton/ButtonEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useHooks, useStore, getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Edge, ElementId, Position } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Edge, ElementId, Position, useVueFlow } from '~/index'
 
 interface CustomEdgeProps<T = any> extends Edge<T> {
   id: ElementId
@@ -15,12 +15,11 @@ interface CustomEdgeProps<T = any> extends Edge<T> {
 }
 
 const props = defineProps<CustomEdgeProps>()
-const store = useStore()
-const hooks = useHooks()
+const store = useVueFlow()
 const onEdgeClick = (evt: Event, id: string) => {
   const edge = store.edges.find((edge) => edge.id === id)
   if (edge) {
-    hooks.elementsRemove.trigger([edge])
+    store.hooks.elementsRemove.trigger([edge])
   }
   evt.stopPropagation()
   alert(`remove ${id}`)
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 91f2d78e..9b30b3b9 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useHandle, useHooks, useStore } from '../../composables'
+import { useHandle, useStore } from '../../composables'
 import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '../../types'
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
@@ -15,7 +15,6 @@ interface EdgeProps {
 const props = withDefaults(defineProps<EdgeProps>(), {})
 
 const store = useStore()
-const hooks = useHooks()
 
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
@@ -23,20 +22,20 @@ const onEdgeClick = (event: MouseEvent) => {
     store.addSelectedElements([props.edge])
   }
 
-  hooks.edgeClick.trigger({ event, edge: props.edge })
+  store.hooks.edgeClick.trigger({ event, edge: props.edge })
 }
 
 const onEdgeContextMenu = (event: MouseEvent) =>
-  hooks.edgeContextMenu.trigger({
+  store.hooks.edgeContextMenu.trigger({
     event,
     edge: props.edge,
   })
 
-const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
+const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
 
-const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: props.edge })
+const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
 
-const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
+const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
 
 const handler = useHandle()
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
@@ -45,9 +44,9 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
-  hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
+  store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
   handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source', (connection) =>
-    hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
+    store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
   )
 }
 
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index e8669773..aad7a2d8 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useHandle, useHooks, useStore } from '../../composables'
+import { useHandle, useStore } from '../../composables'
 import { Position, ValidConnectionFunc } from '../../types'
-import { NodeId } from '~/context'
+import { NodeId } from '../../context'
 
 interface HandleProps {
   id?: string
@@ -19,7 +19,6 @@ const props = withDefaults(defineProps<HandleProps>(), {
 })
 
 const store = useStore()
-const hooks = useHooks()
 const nodeId = inject(NodeId)!
 
 const handler = useHandle()
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 791d2d63..f33acd83 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { useHooks, useStore } from '../../composables'
+import { useStore } from '../../composables'
 import { Node, NodeType, SnapGrid } from '../../types'
-import { NodeId } from '~/context'
+import { NodeId } from '../../context'
 
 interface NodeProps {
   node: Node
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<NodeProps>(), {
 })
 
 const store = useStore()
-const hooks = useHooks()
 provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -33,15 +32,15 @@ const connectable = computed(() =>
 const scale = computed(() => store.transform[2])
 
 const onMouseEnterHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
-const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
+const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
 
 const onSelectNodeHandler = (event: MouseEvent) => {
   if (!draggable.value) {
@@ -51,13 +50,13 @@ const onSelectNodeHandler = (event: MouseEvent) => {
 
       if (!props.selected) store.addSelectedElements([n])
     }
-    hooks.nodeClick.trigger({ event, node: n })
+    store.hooks.nodeClick.trigger({ event, node: n })
   }
 }
 
 const onDragStart: DraggableEventListener = ({ event }) => {
   const n = props.node
-  hooks.nodeDragStart.trigger({ event, node: n })
+  store.hooks.nodeDragStart.trigger({ event, node: n })
 
   if (props.selectNodesOnDrag && selectable) {
     store.unsetNodesSelection()
@@ -73,7 +72,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
   const n = props.node
   n.position.x += data.deltaX
   n.position.y += data.deltaY
-  hooks.nodeDrag.trigger({ event, node: n })
+  store.hooks.nodeDrag.trigger({ event, node: n })
 
   store.updateNodePosDiff({
     id: props.node.id,
@@ -93,7 +92,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
     if (selectable.value && !props.selectNodesOnDrag && !props.selected) {
       store.addSelectedElements([n])
     }
-    hooks.nodeClick.trigger({ event, node: n })
+    store.hooks.nodeClick.trigger({ event, node: n })
 
     return
   }
@@ -103,7 +102,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
     isDragging: false,
   })
 
-  hooks.nodeDragStop.trigger({ event, node: n })
+  store.hooks.nodeDragStop.trigger({ event, node: n })
 }
 
 onMounted(() => {
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index dec0f9f5..87193fc2 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { useHooks, useStore } from '../../composables'
+import { useStore } from '../../composables'
 import { Node } from '../../types'
 import { getRectOfNodes, isNode } from '../../utils'
 
 const store = useStore()
-const hooks = useHooks()
 
 const selectedNodes = store.selectedElements
   ? store.selectedElements.filter(isNode).map((selectedNode) => {
@@ -29,12 +28,12 @@ const innerStyle = {
 
 const onStart: DraggableEventListener = ({ event }) => {
   const nodes = selectedNodes
-  hooks.selectionDragStart.trigger({ event, nodes })
+  store.hooks.selectionDragStart.trigger({ event, nodes })
 }
 
 const onDrag: DraggableEventListener = ({ event, data }) => {
   const nodes = selectedNodes
-  hooks.selectionDrag.trigger({ event, nodes })
+  store.hooks.selectionDrag.trigger({ event, nodes })
   store.updateNodePosDiff({
     diff: {
       x: data.deltaX,
@@ -46,7 +45,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
 
 const onStop: DraggableEventListener = ({ event }) => {
   const nodes = selectedNodes
-  hooks.selectionDragStop.trigger({ event, nodes })
+  store.hooks.selectionDragStop.trigger({ event, nodes })
   store.updateNodePosDiff({
     isDragging: false,
   })
@@ -54,7 +53,7 @@ const onStop: DraggableEventListener = ({ event }) => {
 
 const onContextMenu = (event: MouseEvent) => {
   const nodes = selectedNodes
-  hooks.selectionContextMenu.trigger({ event, nodes })
+  store.hooks.selectionContextMenu.trigger({ event, nodes })
 }
 
 const transform = computed(() => store.transform)
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index 7f6e41c2..573ee10d 100644
--- a/src/composables/useHandle.ts
+++ b/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 })
diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts
index 1d610efe..b1cec8d2 100644
--- a/src/composables/useHooks.ts
+++ b/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)
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
index bff64b11..da659a57 100644
--- a/src/composables/useStore.ts
+++ b/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)
   }
 
diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
index 4636227c..e27ffbf9 100644
--- a/src/composables/useVueFlow.ts
+++ b/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)
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 9d92e82b..cff5dfe8 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/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()
     }
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 868076c7..0a4044ef 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/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(() => {
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 7dbb6f46..5e3a189d 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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(
diff --git a/src/store/flowStore.ts b/src/store/flowStore.ts
index 08e9d756..86a100ba 100644
--- a/src/store/flowStore.ts
+++ b/src/store/flowStore.ts
@@ -19,7 +19,6 @@ type NextElements = {
   nextEdges: Edge[]
 }
 const pinia = createPinia()
-let id = 0
 
 const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
   const nextElements: NextElements = {
@@ -68,11 +67,14 @@ const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExt
   return nextElements
 }
 
-export default function flowStore(preloadedState: FlowState): StoreDefinition<string, FlowState, any, FlowActions> {
+export default function flowStore(id: string, preloadedState: FlowState): StoreDefinition<string, FlowState, any, FlowActions> {
   setActivePinia(pinia)
+  const { nextEdges, nextNodes } = parseElements(preloadedState.elements, [], [], preloadedState.nodeExtent)
+  preloadedState.nodes = nextNodes
+  preloadedState.edges = nextEdges
 
   return defineStore({
-    id: `vue-flow-${id++}`,
+    id: id ?? 'vue-flow',
     state: () => ({
       ...preloadedState,
     }),
diff --git a/src/store/index.ts b/src/store/index.ts
index c0591b49..3e6f0bde 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -59,6 +59,7 @@ export const initialState = (): FlowState => ({
 
   isReady: false,
   hooks: createHooks(),
+  storageKey: undefined,
 
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
diff --git a/src/types/store.ts b/src/types/store.ts
index 734dc5ec..84859ae3 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -1,14 +1,14 @@
 import { Store } from 'pinia'
-import { Dimensions, ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
+import { Dimensions, ElementId, Elements, FlowOptions, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
 import { HandleType } from './handle'
 import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
 import { FlowActions } from './actions'
 import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
-import { FlowHooks } from '~/types/hooks'
+import { FlowHooks } from './hooks'
 
-export interface FlowState {
+export interface FlowState extends FlowOptions {
   dimensions: Dimensions
   transform: Transform
   elements: Elements
@@ -56,6 +56,7 @@ export interface FlowState {
 
   isReady: boolean
   hooks: FlowHooks
+  storageKey?: string
 }
 
 export type FlowStore = Store<string, FlowState, any, FlowActions>
diff --git a/src/types/types.ts b/src/types/types.ts
index 89e562f6..04e0623c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -124,4 +124,5 @@ export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
   edgeUpdaterRadius?: number
   nodeTypesId?: string
   edgeTypesId?: string
+  storageKey?: string
 }