fix(core,viewport): allow panning on scroll when selection is active

packages/core/src/container/Viewport/Viewport.vue

@@ -2,7 +2,7 @@
 import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { onMounted, ref, watchEffect } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { toRef, useEventListener, useResizeObserver } from '@vueuse/core'
 import type { CoordinateExtent, D3ZoomHandler, FlowOptions, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
@@ -66,7 +66,9 @@ const selectionKeyPressed = useKeyPress(selectionKeyCode)
 
 const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
 
-const shouldPanOnDrag = toRef(() => !selectionKeyPressed.value && (panKeyPressed.value || panOnDrag.value))
+const shouldPanOnDrag = toRef(() => panKeyPressed.value || panOnDrag.value)
+
+const shouldPanOnScroll = toRef(() => panKeyPressed.value || panOnScroll.value)
 
 const isSelecting = toRef(() => selectionKeyPressed.value || (selectionKeyCode.value === true && shouldPanOnDrag.value !== true))
 
@@ -168,7 +170,7 @@ onMounted(() => {
     }
 
     // if all interactions are disabled, we prevent all zoom events
-    if (!shouldPanOnDrag.value && !zoomScroll && !panOnScroll.value && !zoomOnDoubleClick.value && !zoomOnPinch.value) {
+    if (!shouldPanOnDrag.value && !zoomScroll && !shouldPanOnScroll.value && !zoomOnDoubleClick.value && !zoomOnPinch.value) {
       return false
     }
 
@@ -190,7 +192,7 @@ onMounted(() => {
     // if the target element is inside an element with the nopan class, we prevent panning
     if (
       isWrappedWithClass(event, noPanClassName.value) &&
-      (event.type !== 'wheel' || (panOnScroll.value && event.type === 'wheel' && !zoomKeyPressed.value))
+      (event.type !== 'wheel' || (shouldPanOnScroll.value && event.type === 'wheel' && !zoomKeyPressed.value))
     ) {
       return false
     }
@@ -200,7 +202,7 @@ onMounted(() => {
     }
 
     // when there is no scroll handling enabled, we prevent all wheel events
-    if (!zoomScroll && !panOnScroll.value && !pinchZoom && event.type === 'wheel') {
+    if (!zoomScroll && !shouldPanOnScroll.value && !pinchZoom && event.type === 'wheel') {
       return false
     }
 
@@ -226,10 +228,12 @@ onMounted(() => {
     return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
   })
 
-  watchEffect(() => {
+  watch(
-    if (selectionKeyPressed.value && userSelectionActive.value && !isZoomingOrPanning.value) {
+    [userSelectionActive, panOnDrag],
+    () => {
+      if (userSelectionActive.value && !isZoomingOrPanning.value) {
         d3Zoom.on('zoom', null)
-    } else if (!selectionKeyPressed.value && !userSelectionActive.value) {
+      } else if (!userSelectionActive.value) {
         d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
           viewport.value = { x: event.transform.x, y: event.transform.y, zoom: event.transform.k }
 
@@ -241,10 +245,14 @@ onMounted(() => {
           emits.move({ event, flowTransform })
         })
       }
-  })
+    },
+    { immediate: true },
+  )
 
-  watchEffect(() => {
+  watch(
-    if (panKeyPressed.value || (panOnScroll.value && !zoomKeyPressed.value && !userSelectionActive.value)) {
+    [userSelectionActive, panOnScroll, panOnScrollMode, zoomKeyPressed, zoomOnPinch, preventScrolling, noWheelClassName],
+    () => {
+      if (shouldPanOnScroll.value && !zoomKeyPressed.value && !userSelectionActive.value) {
         d3Selection.on(
           'wheel.zoom',
           (event: WheelEvent) => {
@@ -259,7 +267,7 @@ onMounted(() => {
             const _isMacOs = isMacOs()
 
             // macOS sets ctrlKey=true for pinch gesture on a trackpad
-          if (event.ctrlKey && zoomOnPinch && _isMacOs) {
+            if (event.ctrlKey && zoomOnPinch.value && _isMacOs) {
               const point = pointer(event)
               const pinchDelta = wheelDelta(event)
               const zoom = currentZoom * 2 ** pinchDelta
@@ -319,19 +327,20 @@ onMounted(() => {
       } else if (typeof d3ZoomHandler !== 'undefined') {
         d3Selection.on(
           'wheel.zoom',
-        function (event: WheelEvent, d) {
+          function (this: any, event: WheelEvent, d: any) {
             if (!preventScrolling.value || isWrappedWithClass(event, noWheelClassName.value)) {
               return null
             }
 
             event.preventDefault()
-          // eslint-disable-next-line @typescript-eslint/no-invalid-this
             d3ZoomHandler.call(this, event, d)
           },
           { passive: false },
         )
       }
-  })
+    },
+    { immediate: true },
+  )
 })
 
 function isRightClickPan(pan: FlowOptions['panOnDrag'], usedButton: number) {
@@ -346,9 +355,9 @@ function wheelDelta(event: any) {
 
 function viewChanged(prevViewport: ViewportTransform, eventTransform: ZoomTransform) {
   return (
-    (prevViewport.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
+    (prevViewport.x !== eventTransform.x && !Number.isNaN(eventTransform.x)) ||
-    (prevViewport.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
+    (prevViewport.y !== eventTransform.y && !Number.isNaN(eventTransform.y)) ||
-    (prevViewport.zoom !== eventTransform.k && !isNaN(eventTransform.k))
+    (prevViewport.zoom !== eventTransform.k && !Number.isNaN(eventTransform.k))
   )
 }