From 9e51070144f6ec22f54e95a562966fff502f06e8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 21 Jan 2024 15:53:49 +0100
Subject: [PATCH] fix(core,viewport): watch `shouldPanOnScroll` &
 `shouldPanOnDrag`

---
 packages/core/src/container/Viewport/Viewport.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 558e5afc..b574a855 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -4,7 +4,7 @@ import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { onMounted, ref, watch } from 'vue'
 import { toRef, useEventListener, useResizeObserver } from '@vueuse/core'
-import type { CoordinateExtent, D3ZoomHandler, FlowOptions, ViewportTransform } from '../../types'
+import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress, useVueFlow, useWindow } from '../../composables'
 import { ErrorCode, VueFlowError, clamp, getDimensions, isMacOs, warn } from '../../utils'
@@ -229,7 +229,7 @@ onMounted(() => {
   })
 
   watch(
-    [userSelectionActive, panOnDrag],
+    [userSelectionActive, shouldPanOnDrag],
     () => {
       if (userSelectionActive.value && !isZoomingOrPanning.value) {
         d3Zoom.on('zoom', null)
@@ -250,7 +250,7 @@ onMounted(() => {
   )
 
   watch(
-    [userSelectionActive, panOnScroll, panOnScrollMode, zoomKeyPressed, zoomOnPinch, preventScrolling, noWheelClassName],
+    [userSelectionActive, shouldPanOnScroll, panOnScrollMode, zoomKeyPressed, zoomOnPinch, preventScrolling, noWheelClassName],
     () => {
       if (shouldPanOnScroll.value && !zoomKeyPressed.value && !userSelectionActive.value) {
         d3Selection.on(
@@ -343,7 +343,7 @@ onMounted(() => {
   )
 })
 
-function isRightClickPan(pan: FlowOptions['panOnDrag'], usedButton: number) {
+function isRightClickPan(pan: boolean | number[], usedButton: number) {
   return usedButton === 2 && Array.isArray(pan) && pan.includes(2)
 }