From 3e4433c175dc4db86675c2a177ecdd1679bf4fba Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 21 Nov 2021 18:48:24 +0100
Subject: [PATCH] fix: skip dimensions check when ssr

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue   | 14 ++++++--------
 src/container/ZoomPane/ZoomPane.vue |  5 +++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 99224d33..a5f88aab 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -21,7 +21,7 @@ import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
-import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
+import { createHooks, initFlow, useWindow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
 interface FlowProps {
@@ -137,9 +137,12 @@ invoke(async () => {
   await store.setElements(elements.value)
   store.isReady = true
 
-  await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
+  // 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)
 
+  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
     zoomIn,
@@ -174,11 +177,6 @@ const transitionName = computed(() => {
   return name
 })
 </script>
-<script lang="ts">
-export default {
-  name: 'VueFlow',
-}
-</script>
 <template>
   <div class="vue-flow">
     <Transition key="vue-flow-transition" :name="transitionName">
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index aa1e8a5c..57a31b07 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -3,7 +3,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get, invoke } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
 import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useKeyPress, useStore } from '../../composables'
+import { useKeyPress, useStore, useWindow } from '../../composables'
 import { clamp } from '../../utils'
 
 interface ZoomPaneProps {
@@ -182,7 +182,8 @@ store.dimensions = {
 }
 
 // skip waiting for ssr
-if (typeof window !== 'undefined') await until(() => store.isReady).toMatch((y) => y)
+const window = useWindow()
+if ('screen' in window) await until(() => store.isReady).toMatch((y) => y)
 
 watch(
   [width, height],