From ca2a72c3a8b2afd98e74a005f22560e8f4026b13 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 10 Apr 2022 17:06:02 +0200
Subject: [PATCH] fix: remove waiting for node dimensions in transformation
 pane

* Fixes node dimensions having 0 values when paneReady is fired
---
 package/src/composables/useZoomPanHelper.ts  |  2 +-
 package/src/container/Viewport/Transform.vue | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts
index eece81ac..e2d0c2e6 100644
--- a/package/src/composables/useZoomPanHelper.ts
+++ b/package/src/composables/useZoomPanHelper.ts
@@ -8,7 +8,7 @@ const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-export const untilDimensions = async (store: Store) => {
+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) {
diff --git a/package/src/container/Viewport/Transform.vue b/package/src/container/Viewport/Transform.vue
index a6adc184..969e2a3f 100644
--- a/package/src/container/Viewport/Transform.vue
+++ b/package/src/container/Viewport/Transform.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper, untilDimensions } 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()
 
+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)
+  }
+
+  return true
+}
+
 const ready = ref(false)
 onMounted(async () => {
   const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)