refactor(core): add stub for addEventListener in useWindow

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', () => {
-        useEventListener(window, 'blur', () => {
+        isPressed.value = false
-          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)) {

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
   }
 }

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 { onMounted, ref, watchEffect } from 'vue'
-import { useEventListener, useResizeObserver } from '@vueuse/core'
+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)
-          }
+          } else {
-
-          if (isPanScrolling.value) {
             emits.move({ event, flowTransform: nextViewport })
             emits.viewportChange(nextViewport)
 
-            panScrollTimeout.value = setTimeout(() => {
+            panScrollTimeout = setTimeout(() => {
               emits.moveEnd({ event, flowTransform: nextViewport })
               emits.viewportChangeEnd(nextViewport)
 

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