fix(viewport): await dimensions before using zoompan utils

package/src/composables/index.ts

@@ -1,5 +1,5 @@
 export { default as useHandle } from './useHandle'
 export { default as useKeyPress } from './useKeyPress'
-export { default as useZoomPanHelper } from './useZoomPanHelper'
+export { default as useZoomPanHelper, untilDimensions } from './useZoomPanHelper'
 export { default as useWindow } from './useWindow'
 export { default as useVueFlow } from './useVueFlow'

package/src/composables/useZoomPanHelper.ts

@@ -1,5 +1,6 @@
 import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
+import useWindow from './useWindow'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
 import { GraphNode, Store, ViewportFuncs, D3Selection } from '~/types'
 
@@ -7,72 +8,131 @@ const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-export default (store: Store = useVueFlow().store): ViewportFuncs => ({
+export const untilDimensions = async (store: Store) => {
-  zoomIn: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1.2),
+  // if ssr we can't wait for dimensions, they'll never really exist
-  zoomOut: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1 / 1.2),
+  const window = useWindow()
-  zoomTo: (zoomLevel, options) =>
+  if ('screen' in window) {
-    store.d3Selection && store.d3Zoom?.scaleTo(transition(store.d3Selection, options?.duration), zoomLevel),
+    // wait until viewport dimensions has been established
-  setTransform: (transform, options) => {
+    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-    const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom)
+
-    store.d3Selection && store.d3Zoom?.transform(transition(store.d3Selection, options?.duration), nextTransform)
+    // if initial nodes are present, wait until the node dimensions have been established
-  },
+    if (store.getNodes.length > 0) {
-  getTransform: () => ({
+      await until(store.getNodes).toMatch(
-    x: store.viewport.x,
+        (nodes) =>
-    y: store.viewport.y,
+          !!nodes.filter(({ dimensions: { width, height } }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-    zoom: store.viewport.zoom,
+            .length,
-  }),
+      )
-  fitView: (
+    }
-    options = {
+  }
-      padding: DEFAULT_PADDING,
+
-      includeHiddenNodes: false,
+  return true
-      duration: 0,
+}
+
+export default (store: Store = useVueFlow().store): ViewportFuncs => {
+  const hasDimensions = ref(false)
+  store.hooks.paneReady.on(() => (hasDimensions.value = true))
+
+  const zoomTo: ViewportFuncs['zoomTo'] = async (zoomLevel, options) => {
+    if (!hasDimensions.value) await untilDimensions(store)
+
+    if (store.d3Selection && store.d3Zoom) {
+      store.d3Zoom.scaleTo(transition(store.d3Selection, options?.duration), zoomLevel)
+    }
+  }
+
+  const zoom = async (scale: number, duration?: number) => {
+    if (!hasDimensions.value) await untilDimensions(store)
+
+    if (store.d3Selection && store.d3Zoom) {
+      store.d3Zoom.scaleTo(transition(store.d3Selection, duration), scale)
+    }
+  }
+
+  const zoomIn: ViewportFuncs['zoomIn'] = async (options) => {
+    await zoom(1.2, options?.duration)
+  }
+
+  const zoomOut: ViewportFuncs['zoomOut'] = async (options) => {
+    await zoom(1 / 1.2, options?.duration)
+  }
+
+  const transformViewport = (x: number, y: number, zoom: number, duration?: number) => {
+    const nextTransform = zoomIdentity.translate(x, y).scale(zoom)
+    if (store.d3Selection && store.d3Zoom) {
+      store.d3Zoom.transform(transition(store.d3Selection, duration), nextTransform)
+    }
+  }
+
+  return {
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform: async (transform, options) => {
+      if (!hasDimensions.value) await untilDimensions(store)
+      transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
     },
-  ) => {
+    getTransform: () => ({
-    if (!store.getNodes.length) return
+      x: store.viewport.x,
+      y: store.viewport.y,
+      zoom: store.viewport.zoom,
+    }),
+    fitView: async (
+      options = {
+        padding: DEFAULT_PADDING,
+        includeHiddenNodes: false,
+        duration: 0,
+      },
+    ) => {
+      if (!hasDimensions.value) await untilDimensions(store)
 
-    let nodes: GraphNode[] = []
+      if (!store.getNodes.length) return
-    if (options.nodes) {
-      nodes = store.nodes.filter((n) => options.nodes?.includes(n.id))
-    }
-    if (!nodes || !nodes.length) {
-      nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
-    }
 
-    const bounds = getRectOfNodes(nodes)
+      let nodes: GraphNode[] = []
-    const { x, y, zoom } = getTransformForBounds(
+      if (options.nodes) {
-      bounds,
+        nodes = store.nodes.filter((n) => options.nodes?.includes(n.id))
-      store.dimensions.width,
+      }
-      store.dimensions.height,
-      options.minZoom ?? store.minZoom,
-      options.maxZoom ?? store.maxZoom,
-      options.padding ?? DEFAULT_PADDING,
-      options.offset,
-    )
 
-    const transform = zoomIdentity.translate(x, y).scale(zoom)
+      if (!nodes || !nodes.length) {
+        nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
+      }
 
-    store.d3Selection && store.d3Zoom?.transform(transition(store.d3Selection, options?.duration), transform)
+      const bounds = getRectOfNodes(nodes)
-  },
-  setCenter: (x, y, options) => {
-    const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom
-    const centerX = store.dimensions.width / 2 - x * nextZoom
-    const centerY = store.dimensions.height / 2 - y * nextZoom
-    const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom)
 
-    store.d3Selection && store.d3Zoom?.transform(transition(store.d3Selection, options?.duration), transform)
+      const { x, y, zoom } = getTransformForBounds(
-  },
+        bounds,
-  fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
+        store.dimensions.width,
-    const { x, y, zoom } = getTransformForBounds(
+        store.dimensions.height,
-      bounds,
+        options.minZoom ?? store.minZoom,
-      store.dimensions.width,
+        options.maxZoom ?? store.maxZoom,
-      store.dimensions.height,
+        options.padding ?? DEFAULT_PADDING,
-      store.minZoom,
+        options.offset,
-      store.maxZoom,
+      )
-      options.padding,
-    )
-    const transform = zoomIdentity.translate(x, y).scale(zoom)
 
-    store.d3Selection && store.d3Zoom?.transform(transition(store.d3Selection, options.duration), transform)
+      transformViewport(x, y, zoom, options?.duration)
-  },
+    },
-  project: (position) => pointToRendererPoint(position, store.viewport, store.snapToGrid, store.snapGrid),
+    setCenter: async (x, y, options) => {
-})
+      if (!hasDimensions.value) await untilDimensions(store)
+
+      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom
+      const centerX = store.dimensions.width / 2 - x * nextZoom
+      const centerY = store.dimensions.height / 2 - y * nextZoom
+
+      transformViewport(centerX, centerY, nextZoom, options?.duration)
+    },
+    fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => {
+      if (!hasDimensions.value) await untilDimensions(store)
+
+      const { x, y, zoom } = getTransformForBounds(
+        bounds,
+        store.dimensions.width,
+        store.dimensions.height,
+        store.minZoom,
+        store.maxZoom,
+        options.padding,
+      )
+
+      transformViewport(x, y, zoom, options?.duration)
+    },
+    project: (position) => pointToRendererPoint(position, store.viewport, store.snapToGrid, store.snapGrid),
+  }
+}

package/src/container/Viewport/Transform.vue

@@ -1,32 +1,12 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
+import { useVueFlow, useZoomPanHelper, untilDimensions } from '../../composables'
-import { FlowInstance, Store } from '../../types'
+import { FlowInstance } from '../../types'
 import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
 const { id, store } = useVueFlow()
 
-const untilDimensions = async (store: Store) => {
-  // if ssr we can't wait for dimensions, they'll never really exist
-  const window = useWindow()
-  if ('screen' in window) {
-    // wait until viewport dimensions has been established
-    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-
-    // if initial nodes are present, wait until the node dimensions have been established
-    if (store.getNodes.length > 0) {
-      await until(store.getNodes).toMatch(
-        (nodes) =>
-          !!nodes.filter(({ dimensions: { width, height } }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-            .length,
-      )
-    }
-  }
-
-  return true
-}
-
 const ready = ref(false)
 onMounted(async () => {
   const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)