From 6a1571e6e30a0efffb89113626b9c701c13bfe43 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 20 Nov 2021 00:40:42 +0100
Subject: [PATCH] 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          |  2 +-
 src/composables/useStore.ts       |  7 ++++---
 src/composables/useVueFlow.ts     |  2 +-
 src/container/VueFlow/VueFlow.vue | 25 +++++++++++++------------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index ae9a8af7..95134077 100644
--- a/examples/Basic/Basic.vue
+++ b/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"
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
index f138384d..255c8305 100644
--- a/src/composables/useStore.ts
+++ b/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) {
diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
index 29f1f0cd..a89c5915 100644
--- a/src/composables/useVueFlow.ts
+++ b/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
 }
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index d79c08de..483a5381 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/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 },
   )