From e14cf124ff26ee4f48e89976efd471a1add12c06 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 10 Apr 2022 15:43:20 +0200
Subject: [PATCH] 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                 |  2 +-
 package/src/composables/useZoomPanHelper.ts  | 10 ++----
 package/src/container/Viewport/Transform.vue | 37 +++++++++++++++++---
 package/src/store/getters.ts                 |  8 -----
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/examples/src/Basic/Basic.vue b/examples/src/Basic/Basic.vue
index 7ba916aa..529ed115 100644
--- a/examples/src/Basic/Basic.vue
+++ b/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 } },
diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts
index 6b59d634..d47e586d 100644
--- a/package/src/composables/useZoomPanHelper.ts
+++ b/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)
diff --git a/package/src/container/Viewport/Transform.vue b/package/src/container/Viewport/Transform.vue
index 96bff55b..fa0af717 100644
--- a/package/src/container/Viewport/Transform.vue
+++ b/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 />
diff --git a/package/src/store/getters.ts b/package/src/store/getters.ts
index 8a861148..20e4178c 100644
--- a/package/src/store/getters.ts
+++ b/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