chore: re-apply node extent only if flow is ready

packages/vue-flow/src/composables/useVueFlow.ts

@@ -52,6 +52,7 @@ export class Storage {
     })
 
     actions.setState(reactiveState)
+
     if (preloadedState) {
       if (preloadedState.modelValue) actions.setElements(preloadedState.modelValue)
       if (preloadedState.nodes) actions.setNodes(preloadedState.nodes)

packages/vue-flow/src/store/actions.ts

@@ -41,6 +41,24 @@ export default (state: State, getters: ComputedGetters): Actions => {
     state.hooks.updateNodeInternals.trigger(ids)
   }
 
+  const zoomPanHelper = ref<ReturnType<typeof useZoomPanHelper>>()
+
+  state.hooks.paneReady.on(({ id }) => {
+    zoomPanHelper.value = useZoomPanHelper(id)
+  })
+
+  const paneReady = async () => {
+    return new Promise<ReturnType<typeof useZoomPanHelper>>((resolve) => {
+      if (!zoomPanHelper.value) {
+        until(zoomPanHelper)
+          .not.toBeUndefined()
+          .then(() => resolve(zoomPanHelper.value!))
+      } else {
+        resolve(zoomPanHelper.value)
+      }
+    })
+  }
+
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
     const changes: NodePositionChange[] = []
 
@@ -175,10 +193,13 @@ export default (state: State, getters: ComputedGetters): Actions => {
     state.translateExtent = translateExtent
   }
 
-  const setNodeExtent: Actions['setNodeExtent'] = (nodeExtent) => {
+  const setNodeExtent: Actions['setNodeExtent'] = async (nodeExtent) => {
     state.nodeExtent = nodeExtent
-    const nodeIds = getters.getNodes.value.map((n) => n.id)
-    updateNodeInternals(nodeIds)
+
+    if (zoomPanHelper.value) {
+      const nodeIds = getters.getNodes.value.map((n) => n.id)
+      updateNodeInternals(nodeIds)
+    }
   }
 
   const setInteractive: Actions['setInteractive'] = (isInteractive) => {
@@ -358,13 +379,15 @@ export default (state: State, getters: ComputedGetters): Actions => {
       const option = opts[o as keyof typeof opts]
       if (!skip.includes(o as keyof typeof opts) && isDef(option)) (<any>state)[o] = option
     })
-    if (!state.d3Zoom)
+
+    if (!state.d3Zoom) {
       until(() => state.d3Zoom)
         .not.toBeUndefined()
         .then(setSkippedOptions)
-    else {
+    } else {
       setSkippedOptions()
     }
+
     if (!state.initialized) state.initialized = true
   }
 
@@ -380,24 +403,6 @@ export default (state: State, getters: ComputedGetters): Actions => {
     )
   }
 
-  let zoomPanHelper: ReturnType<typeof useZoomPanHelper>
-
-  state.hooks.paneReady.on(({ id }) => {
-    zoomPanHelper = useZoomPanHelper(id)
-  })
-
-  const paneReady = async () => {
-    return new Promise<typeof zoomPanHelper>((resolve) => {
-      if (!zoomPanHelper) {
-        until(() => zoomPanHelper)
-          .toBeTruthy()
-          .then(() => resolve(zoomPanHelper))
-      } else {
-        resolve(zoomPanHelper)
-      }
-    })
-  }
-
   return {
     updateNodePositions,
     updateNodeDimensions,