refactor(core): remove waiting for dimensions in zoom pan helper

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

packages/core/src/composables/useZoomPanHelper.ts

@@ -1,5 +1,5 @@
 import { zoomIdentity } from 'd3-zoom'
-import type { D3Selection, Dimensions, GraphNode, ViewportFunctions } from '~/types'
+import type { D3Selection, GraphNode, ViewportFunctions } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
@@ -7,24 +7,8 @@ const DEFAULT_PADDING = 0.1
  * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
  */
 export default (vueFlowId?: string): ViewportFunctions => {
-  const {
-    nodes,
-    d3Zoom,
-    d3Selection,
-    dimensions,
-    translateExtent,
-    minZoom,
-    maxZoom,
-    viewport,
-    snapToGrid,
-    snapGrid,
-    getNodes,
-    onPaneReady,
-  } = $(useVueFlow({ id: vueFlowId }))
-
-  let hasDimensions = $ref(false)
-
-  onPaneReady(() => (hasDimensions = true))
+  const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } =
+    $(useVueFlow({ id: vueFlowId }))
 
   return {
     zoomIn: async (options) => {
@@ -34,14 +18,11 @@ export default (vueFlowId?: string): ViewportFunctions => {
       await zoom(1 / 1.2, options?.duration)
     },
     zoomTo: async (zoomLevel, options) => {
-      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
-
       if (d3Selection && d3Zoom) {
         d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel)
       }
     },
     setTransform: async (transform, options) => {
-      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
       transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
     },
     getTransform: () => ({
@@ -56,8 +37,6 @@ export default (vueFlowId?: string): ViewportFunctions => {
         duration: 0,
       },
     ) => {
-      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
-
       if (!nodes.length) return
 
       const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
@@ -86,8 +65,6 @@ export default (vueFlowId?: string): ViewportFunctions => {
       transformViewport(x, y, zoom, options?.duration)
     },
     setCenter: async (x, y, options) => {
-      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
-
       const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
       const centerX = dimensions.width / 2 - x * nextZoom
       const centerY = dimensions.height / 2 - y * nextZoom
@@ -95,8 +72,6 @@ export default (vueFlowId?: string): ViewportFunctions => {
       transformViewport(centerX, centerY, nextZoom, options?.duration)
     },
     fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => {
-      if (!hasDimensions) await untilDimensions(dimensions, getNodes)
-
       const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, maxZoom, options.padding)
 
       transformViewport(x, y, zoom, options?.duration)
@@ -105,8 +80,6 @@ export default (vueFlowId?: string): ViewportFunctions => {
   }
 
   async function zoom(scale: number, duration?: number) {
-    if (!hasDimensions) await untilDimensions(dimensions, getNodes)
-
     if (d3Selection && d3Zoom) {
       d3Zoom.scaleBy(transition(d3Selection, duration), scale)
     }
@@ -127,16 +100,3 @@ export default (vueFlowId?: string): ViewportFunctions => {
 function transition(selection: D3Selection, ms = 0) {
   return selection.transition().duration(ms)
 }
-
-async function untilDimensions(dimensions: Dimensions, nodes: GraphNode[]) {
-  // if ssr we can't wait for dimensions, they'll never really exist
-  const window = useWindow()
-  if ('screen' in window) {
-    // if initial nodes are present, wait until the node dimensions have been established
-    if (nodes.length > 0) {
-      await until(nodes).toMatch((nodes) => nodes.filter((node) => node.initialized).length === nodes.length, { flush: 'pre' })
-    }
-  }
-
-  return true
-}

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

@@ -1,42 +1,28 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import type { Dimensions } from '../../types'
 
-const { id, viewport, dimensions, emits, onNodesInitialized, ...rest } = useVueFlow()
-
-const untilDimensions = async (dim: Dimensions) => {
-  // 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(dim).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-  }
-
-  return true
-}
+const { id, viewport, emits, onNodesInitialized, ...rest } = useVueFlow()
 
 let isReady = $ref(false)
 
 onNodesInitialized(() => {
   setTimeout(() => {
-    // hide graph until nodes are ready, so we don't have jumping graphs (ssr for example)
+    // hide graph until nodes are ready, so we don't have jumping nodes
     isReady = true
   }, 0)
 })
 
 onMounted(async () => {
-  // wait until proper dimensions have been established, otherwise fitView will have wrong bounds when called at paneReady
-  await untilDimensions(dimensions.value)
-
-  emits.paneReady({
-    id,
-    viewport,
-    dimensions,
-    emits,
-    onNodesInitialized,
-    ...rest,
-  })
+  setTimeout(() => {
+    emits.paneReady({
+      id,
+      viewport,
+      emits,
+      onNodesInitialized,
+      ...rest,
+    })
+  }, 1)
 })
 </script>