From a8d0830dcd4c173e214e6fc5ab22981f74949b31 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 13:19:52 +0200
Subject: [PATCH] fix(viewpane): use resize observer to set viewpane dimensions

---
 .../src/container/Viewport/Viewport.vue       | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/vue-flow/src/container/Viewport/Viewport.vue b/packages/vue-flow/src/container/Viewport/Viewport.vue
index ec6b7804..441e6211 100644
--- a/packages/vue-flow/src/container/Viewport/Viewport.vue
+++ b/packages/vue-flow/src/container/Viewport/Viewport.vue
@@ -57,27 +57,22 @@ let transform = $ref({
   zoom: clampedZoom,
 })
 
-const { width, height } = useElementBounding(viewportEl)
+useResizeObserver(viewportEl, () => {
+  if (!viewportEl.value) return
 
-const stop = watch(
-  [width, height],
-  ([newWidth, newHeight]) => {
-    dimensions.width = newWidth
-    dimensions.height = newHeight
-  },
-  { immediate: true },
-)
+  const { width, height } = getDimensions(viewportEl.value)
+  dimensions.width = width
+  dimensions.height = height
+})
 
 const window = useWindow()
-if ('screen' in window) {
-  useEventListener(window, 'resize', () => {
-    if (!viewportEl.value) return
+useEventListener(window, 'resize', () => {
+  if (!viewportEl.value) return
 
-    const { width, height } = getDimensions(viewportEl.value)
-    dimensions.width = width
-    dimensions.height = height
-  })
-}
+  const { width, height } = getDimensions(viewportEl.value)
+  dimensions.width = width
+  dimensions.height = height
+})
 
 onBeforeUnmount(stop)