fix(core): wait until viewport helper is initialized

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

packages/core/src/composables/useViewport.ts

@@ -1,11 +1,15 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedGetters, D3Selection, GraphNode, State, ViewportFunctions } from '~/types'
 
+interface ExtendedViewport extends ViewportFunctions {
+  initialized: boolean
+}
+
 const DEFAULT_PADDING = 0.1
 
 const noop = () => {}
 
-const initialViewportHelper: ViewportFunctions = {
+const initialViewportHelper: ExtendedViewport = {
   zoomIn: noop,
   zoomOut: noop,
   zoomTo: noop,
@@ -15,6 +19,7 @@ const initialViewportHelper: ViewportFunctions = {
   project: (position) => position,
   setTransform: noop,
   getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
+  initialized: false,
 }
 
 export default (state: State, getters: ComputedGetters) => {
@@ -39,9 +44,10 @@ export default (state: State, getters: ComputedGetters) => {
     }
   }
 
-  return computed<ViewportFunctions>(() => {
-    if (d3Zoom && d3Selection) {
+  return computed<ExtendedViewport>(() => {
+    if (d3Zoom && d3Selection && dimensions.width && dimensions.height) {
       return {
+        initialized: true,
         zoomIn: (options) => {
           zoom(1.2, options?.duration)
         },

packages/core/src/container/Viewport/Transform.vue

@@ -2,23 +2,29 @@
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
-const { id, viewport, emits, ...rest } = useVueFlow()
+const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVueFlow()
 
 let isReady = $ref(false)
 
-onMounted(async () => {
-  setTimeout(() => {
-    emits.paneReady({
-      id,
-      viewport,
-      emits,
-      ...rest,
-    })
-
-    // hide graph until nodes are ready, so we don't have jumping nodes
-    isReady = true
-  }, 1)
-})
+until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0)
+  .toBeTruthy()
+  .then(() => {
+    setTimeout(() => {
+      // emit pane ready event
+      emits.paneReady({
+        id,
+        viewport,
+        emits,
+        d3Zoom,
+        d3Selection,
+        dimensions,
+        ...rest,
+      })
+
+      // hide graph until nodes are ready, so we don't have jumping nodes
+      isReady = true
+    }, 1)
+  })
 </script>
 
 <script lang="ts">

packages/core/src/store/actions.ts

@@ -25,6 +25,10 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
 
   const viewportHelper = $(useViewport(state, getters))
 
+  until(() => viewportHelper.initialized)
+    .toBe(true)
+    .then(() => {})
+
   const nodeIds = $computed(() => state.nodes.map((n) => n.id))
   const edgeIds = $computed(() => state.edges.map((e) => e.id))
 
@@ -632,26 +636,33 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
     getIntersectingNodes,
     isNodeIntersecting,
     panBy,
-    fitView: (params = { padding: 0.1 }) => {
+    fitView: async (params = { padding: 0.1 }) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.fitView(params)
     },
-    zoomIn: (options) => {
+    zoomIn: async (options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.zoomIn(options)
     },
-    zoomOut: (options) => {
+    zoomOut: async (options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.zoomOut(options)
     },
-    zoomTo: (zoomLevel, options) => {
+    zoomTo: async (zoomLevel, options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.zoomTo(zoomLevel, options)
     },
-    setTransform: (transform, options) => {
+    setTransform: async (transform, options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.setTransform(transform, options)
     },
     getTransform: () => viewportHelper.getTransform(),
-    setCenter: (x, y, options) => {
+    setCenter: async (x, y, options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.setCenter(x, y, options)
     },
-    fitBounds: (bounds, options) => {
+    fitBounds: async (bounds, options) => {
+      await until(() => viewportHelper.initialized).toBe(true)
       viewportHelper.fitBounds(bounds, options)
     },
     project: (position) => viewportHelper.project(position),