From 71ba9053480db8f49558412740d7dca70dd69f22 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 21 Nov 2021 12:49:44 +0100
Subject: [PATCH] fix: zoom values being initialized before zoom is ready

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue | 3 ++-
 src/store/stateStore.ts           | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 6546eda1..0668c950 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -115,7 +115,7 @@ if (store.elements.length) elements.value = store.elements
 
 const options = Object.assign({}, store.$state, props)
 
-const init = (state: FlowState) => {
+const init = async (state: FlowState) => {
   // set state variables
   for (const opt of Object.keys(state)) {
     const val = state[opt as keyof FlowState]
@@ -125,6 +125,7 @@ const init = (state: FlowState) => {
       } else (store as any)[opt] = val
     }
   }
+  await until(() => store.d3Zoom).not.toBeUndefined()
   store.setMinZoom(state.minZoom)
   store.setMaxZoom(state.maxZoom)
   store.setTranslateExtent(state.translateExtent)
diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts
index f1c9e778..ba592dae 100644
--- a/src/store/stateStore.ts
+++ b/src/store/stateStore.ts
@@ -1,5 +1,5 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
-import diff from 'microdiff'
+import microDiff from 'microdiff'
 import { parseElements, defaultNodeTypes, defaultEdgeTypes, deepUnref, NextElements } from './utils'
 import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge } from '~/types'
 import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils'
@@ -212,7 +212,7 @@ export default function flowStore(
       },
       addSelectedElements(elements) {
         const selectedElementsArr = Array.isArray(elements) ? elements : [elements]
-        const selectedElementsUpdated = diff(selectedElementsArr, this.selectedElements ?? []).length
+        const selectedElementsUpdated = microDiff(selectedElementsArr, this.selectedElements ?? []).length
         this.selectedElements = selectedElementsUpdated ? selectedElementsArr : this.selectedElements
       },
       initD3Zoom({ d3ZoomHandler, d3Zoom, d3Selection }) {