From 2a407f59e3494c443db1738018dbfd764e635cd8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 19 Oct 2023 13:38:57 +0200
Subject: [PATCH] refactor(core): add stub for `addEventListener` in
 `useWindow`

---
 packages/core/src/composables/useKeyPress.ts  |  8 ++---
 packages/core/src/composables/useWindow.ts    |  7 ++++-
 .../core/src/container/Viewport/Viewport.vue  | 29 +++++++++----------
 packages/core/src/utils/graph.ts              |  7 +++--
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index c2907a19..fa682b3c 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -72,11 +72,9 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onCha
   watch(
     () => toValue(keyFilter),
     (nextKeyFilter, previousKeyFilter) => {
-      if (window && typeof window.addEventListener !== 'undefined') {
-        useEventListener(window, 'blur', () => {
-          isPressed.value = false
-        })
-      }
+      useEventListener(window, 'blur', () => {
+        isPressed.value = false
+      })
 
       // if the previous keyFilter was a boolean but is now something else, we need to reset the isPressed value
       if (isBoolean(previousKeyFilter) && !isBoolean(nextKeyFilter)) {
diff --git a/packages/core/src/composables/useWindow.ts b/packages/core/src/composables/useWindow.ts
index d2553ead..a84cd292 100644
--- a/packages/core/src/composables/useWindow.ts
+++ b/packages/core/src/composables/useWindow.ts
@@ -4,6 +4,11 @@ export function useWindow(): UseWindow {
   if (typeof window !== 'undefined') {
     return window as UseWindow
   } else {
-    return { chrome: false } as UseWindow
+    return {
+      chrome: false,
+      addEventListener(..._: Parameters<Window['addEventListener']>) {
+        // do nothing
+      },
+    } as UseWindow
   }
 }
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 263ea534..0dbec52e 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -2,8 +2,8 @@
 import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { computed, onMounted, ref, watchEffect } from 'vue'
-import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { onMounted, ref, watchEffect } from 'vue'
+import { toRef, useEventListener, useResizeObserver } from '@vueuse/core'
 import type { CoordinateExtent, D3ZoomHandler, FlowOptions, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress, useVueFlow, useWindow } from '../../composables'
@@ -11,6 +11,8 @@ import { ErrorCode, VueFlowError, clamp, getDimensions, isMacOs } from '../../ut
 import Pane from '../Pane/Pane.vue'
 import Transform from './Transform.vue'
 
+const window = useWindow()
+
 const {
   id,
   minZoom,
@@ -50,7 +52,7 @@ const isZoomingOrPanning = ref(false)
 
 const isPanScrolling = ref(false)
 
-const panScrollTimeout = ref<ReturnType<typeof setTimeout>>()
+let panScrollTimeout: ReturnType<typeof setTimeout> | null = null
 
 let zoomedWithRightMouseButton = false
 
@@ -64,19 +66,16 @@ let prevTransform: ViewportTransform = {
 
 const panKeyPressed = useKeyPress(panActivationKeyCode)
 
-const shouldPanOnDrag = computed(() => !selectionKeyPressed.value && panOnDrag.value && panKeyPressed.value)
+const shouldPanOnDrag = toRef(() => !selectionKeyPressed.value && panOnDrag.value && panKeyPressed.value)
 
-const isSelecting = computed(
+const isSelecting = toRef(
   () =>
     (selectionKeyCode.value !== true && selectionKeyPressed.value) || (selectionKeyCode.value === true && !shouldPanOnDrag.value),
 )
 
-onMounted(() => {
-  useResizeObserver(viewportEl, setDimensions)
+useResizeObserver(viewportEl, setDimensions)
 
-  const window = useWindow()
-  useEventListener(window, 'resize', setDimensions)
-})
+useEventListener(window, 'resize', setDimensions)
 
 onMounted(() => {
   const viewportElement = viewportEl.value!
@@ -221,7 +220,9 @@ onMounted(() => {
 
           const nextViewport = eventToFlowTransform(d3Selection.property('__zoom'))
 
-          clearTimeout(panScrollTimeout.value)
+          if (panScrollTimeout) {
+            clearTimeout(panScrollTimeout)
+          }
 
           // for pan on scroll we need to handle the event calls on our own
           // we can't use the start, zoom and end events from d3-zoom
@@ -231,13 +232,11 @@ onMounted(() => {
 
             emits.moveStart({ event, flowTransform: nextViewport })
             emits.viewportChangeStart(nextViewport)
-          }
-
-          if (isPanScrolling.value) {
+          } else {
             emits.move({ event, flowTransform: nextViewport })
             emits.viewportChange(nextViewport)
 
-            panScrollTimeout.value = setTimeout(() => {
+            panScrollTimeout = setTimeout(() => {
               emits.moveEnd({ event, flowTransform: nextViewport })
               emits.viewportChangeEnd(nextViewport)
 
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 4f83aeb0..f1931367 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -59,13 +59,14 @@ export function clampPosition(position: XYPosition, extent: CoordinateExtent): X
 
 export function getHostForElement(element: HTMLElement): Document {
   const doc = element.getRootNode() as Document
-  const window = useWindow()
 
   if ('elementFromPoint' in doc) {
     return doc
-  } else {
-    return window.document
   }
+
+  const window = useWindow()
+
+  return window.document
 }
 
 // todo: refactor generic to use MaybeElement