fix: zoom values being initialized before zoom is ready

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

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)

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 }) {