fix: Flow not properly pre-loading state

* pass key to initFlow to possibly find a pre-existing state

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

examples/Basic/Basic.vue

@@ -55,7 +55,6 @@ const toggleclasss = () => {
     return el
   })
 }
-useVueFlow()
 </script>
 <template>
   <VueFlow
@@ -64,6 +63,7 @@ useVueFlow()
     :default-zoom="1.5"
     :min-zoom="0.2"
     :max-zoom="4"
+    :zoom-on-scroll="false"
     @elements-remove="onElementsRemove"
     @connect="onConnect"
     @node-drag-stop="onNodeDragStop"

src/composables/useStore.ts

@@ -4,15 +4,15 @@ import { Store } from '~/context'
 import { onLoadToObject } from '~/utils'
 
 let id = 0
-export default (options?: Partial<FlowOptions>) => {
+export default (options?: Partial<FlowOptions>, key?: string) => {
   let store = inject(Store, null)
 
   if (!store) {
-    const withStorage = options?.storageKey ?? false
+    const withStorage = options?.storageKey ?? key ?? false
     if (import.meta.env.DEV) console.warn('store context not found; creating default store')
     let storedState = ref<FlowExportObject>()
     const initial = initialState()
-    const storageKey = typeof options?.storageKey === 'string' ? options.storageKey : options?.id ?? `vue-flow-${id++}`
+    const storageKey = key ?? `vue-flow-${id++}`
     const preloadedState = {
       ...initial,
       ...options,
@@ -24,6 +24,7 @@ export default (options?: Partial<FlowOptions>) => {
         if (storedState.value.position && storedState.value.zoom)
           preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
       }
+      console.log(storedState.value)
     }
     store = useStateStore(storageKey, preloadedState)()
     if (withStorage && storageKey === store.$id) {

src/composables/useVueFlow.ts

@@ -2,7 +2,7 @@ import useStore from './useStore'
 import useHooks from './useHooks'
 import { EmitFunc, FlowOptions, FlowStore } from '~/types'
 
-export const initFlow = (emit: EmitFunc, store = useStore()) => {
+export const initFlow = (emit: EmitFunc, key?: string, store = useStore(undefined, key)) => {
   useHooks(store, emit)
   return store
 }

src/container/VueFlow/VueFlow.vue

@@ -13,6 +13,7 @@ import {
   NodeTypes,
   EdgeTypes,
   FlowStore,
+  FlowState,
 } from '../../types'
 import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
@@ -100,28 +101,28 @@ const props = withDefaults(defineProps<FlowProps>(), {
   paneMoveable: true,
   edgeUpdaterRadius: 10,
 })
-const store = initFlow(emit, props.store)
+const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id, props.store)
 const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit)
 
-const options = Object.assign({}, props, store.$state)
+const options = Object.assign({}, props, store.$state, props)
 
 // if there are preloaded elements we overwrite the current elements with the stored ones
 if (store.elements.length) elements.value = store.elements
 
-const init = (opts: typeof props) => {
-  for (const opt of Object.keys(opts)) {
-    const val = opts[opt as keyof FlowProps]
-    if (val && typeof val !== 'undefined') {
+const init = (state: FlowState) => {
+  for (const opt of Object.keys(state)) {
+    const val = state[opt as keyof FlowState]
+    if (typeof val !== 'undefined') {
       if (typeof val === 'object' && !Array.isArray(val)) {
-        ;(store as any)[opt] = { ...(store.$state as any)[opt], ...val }
+        ;(store as any)[opt] = { ...(store as any)[opt], ...val }
       } else (store as any)[opt] = val
     }
   }
   store.setElements(elements.value)
-  store.setMinZoom(opts.minZoom)
-  store.setMaxZoom(opts.maxZoom)
-  store.setTranslateExtent(opts.translateExtent)
-  store.setNodeExtent(opts.nodeExtent)
+  store.setMinZoom(state.minZoom)
+  store.setMaxZoom(state.maxZoom)
+  store.setTranslateExtent(state.translateExtent)
+  store.setNodeExtent(state.nodeExtent)
 }
 onBeforeUnmount(() => store?.$dispose())
 
@@ -142,7 +143,7 @@ onMounted(() => {
     () => props,
     (val, oldVal) => {
       const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) init({ ...options, ...val })
+      if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
     },
     { flush: 'pre', deep: true },
   )