fix(viewport): emit paneReady when dimensions are ready

* Wait for viewport & nodes to have their dimensions established before emitting paneReady
* Avoids getting 0 values for dimensions on paneReady

examples/src/Basic/Basic.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow/src/index'
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },

package/src/composables/useZoomPanHelper.ts

@@ -1,6 +1,5 @@
 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'
 
@@ -22,18 +21,13 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => ({
     y: store.viewport.y,
     zoom: store.viewport.zoom,
   }),
-  fitView: async (
+  fitView: (
     options = {
       padding: DEFAULT_PADDING,
       includeHiddenNodes: false,
       duration: 0,
     },
   ) => {
-    // if ssr we can't wait for dimensions, they'll never really exist
-    const window = useWindow()
-    if ('screen' in window)
-      await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-
     if (!store.getNodes.length) return
 
     let nodes: GraphNode[] = []
@@ -43,6 +37,7 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => ({
     if (!nodes || !nodes.length) {
       nodes = options.includeHiddenNodes ? store.nodes : store.getNodes
     }
+
     const bounds = getRectOfNodes(nodes)
     const { x, y, zoom } = getTransformForBounds(
       bounds,
@@ -53,6 +48,7 @@ export default (store: Store = useVueFlow().store): ViewportFuncs => ({
       options.padding ?? DEFAULT_PADDING,
       options.offset,
     )
+
     const transform = zoomIdentity.translate(x, y).scale(zoom)
 
     store.d3Selection && store.d3Zoom?.transform(transition(store.d3Selection, options?.duration), transform)

package/src/container/Viewport/Transform.vue

@@ -1,13 +1,34 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper } from '../../composables'
-import { FlowInstance } from '../../types'
+import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
+import { FlowInstance, Store } from '../../types'
 import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
 const { id, store } = useVueFlow()
 
-onMounted(() => {
+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)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -24,6 +45,10 @@ onMounted(() => {
     getEdges: onLoadGetEdges(store),
     toObject: onLoadToObject(store),
   }
+
+  await untilDimensions(store)
+
+  ready.value = true
   store.instance = instance
   store.fitViewOnInit && instance.fitView()
   store.hooks.paneReady.trigger(instance)
@@ -37,7 +62,11 @@ export default {
 }
 </script>
 <template>
-  <div :key="`transformation-pane-${id}`" class="vue-flow__transformationpane vue-flow__container" :style="{ transform }">
+  <div
+    :key="`transformation-pane-${id}`"
+    class="vue-flow__transformationpane vue-flow__container"
+    :style="{ transform, opacity: ready ? undefined : 0 }"
+  >
     <NodeRenderer :key="`node-renderer-${id}`" />
     <EdgeRenderer :key="`edge-renderer-${id}`" />
     <slot />

package/src/store/getters.ts

@@ -3,10 +3,6 @@ import { State, GraphEdge, GraphNode, ComputedGetters } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
 export default (state: State): ComputedGetters => {
-  const paneReady = ref(false)
-
-  state.hooks.paneReady.on(() => (paneReady.value = true))
-
   const getEdgeTypes = computed(() => {
     const edgeTypes: Record<string, any> = {
       ...defaultEdgeTypes,
@@ -28,8 +24,6 @@ export default (state: State): ComputedGetters => {
   })
 
   const getNodes = computed<GraphNode[]>(() => {
-    if (!paneReady.value) return []
-
     const nodes = state.nodes.filter((n) => !n.hidden)
     return state.onlyRenderVisibleElements
       ? nodes &&
@@ -48,8 +42,6 @@ export default (state: State): ComputedGetters => {
   })
 
   const getEdges = computed<GraphEdge[]>(() => {
-    if (!paneReady.value) return []
-
     if (!state.onlyRenderVisibleElements)
       return state.edges.filter((e) => !e.hidden && e.targetNode && !e.targetNode.hidden && e.sourceNode && !e.sourceNode.hidden)
     else