fix(core): allow control key as pan activation key code (#1707)

* fix(core): allow control key as pan activation key code

Signed-off-by: braks <[email protected]>

* chore(changeset): add

Signed-off-by: braks <[email protected]>

* fix(core): allow drag regardless of btn chosen

Signed-off-by: braks <[email protected]>

* fix(core): prevent browser ctx menu on pane right click

Signed-off-by: braks <[email protected]>

* chore(core): cleanup useKeyPress handler

Signed-off-by: braks <[email protected]>

* fix(core): check `panOnDrag` prop for allowed drag buttons

Signed-off-by: braks <[email protected]>

* chore(changeset): add

Signed-off-by: braks <[email protected]>

* chore(core): cleanup

Signed-off-by: braks <[email protected]>

---------

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

.changeset/four-kiwis-judge.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Allow Control key as pan activation key code.

.changeset/plenty-timers-change.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Check `panOnDrag` for allowed drag buttons in d3 filter

.changeset/serious-trains-guess.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prevent browser context menu when triggering pane context menu event.

packages/core/src/composables/useKeyPress.ts

@@ -1,5 +1,5 @@
 import type { MaybeRefOrGetter } from 'vue'
-import { onMounted, ref, toRef, toValue, watch } from 'vue'
+import { ref, toRef, toValue, watch } from 'vue'
 import type { KeyFilter, KeyPredicate } from '@vueuse/core'
 import { onKeyStroke, useEventListener } from '@vueuse/core'
 
@@ -111,9 +111,7 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
     },
   )
 
-  onMounted(() => {
-    useEventListener(window, ['blur', 'contextmenu'], reset)
-  })
+  useEventListener(['blur', 'contextmenu'], reset)
 
   onKeyStroke(
     (...args) => currentFilter(...args),

packages/core/src/container/Pane/Pane.vue

@@ -17,7 +17,6 @@ const {
   emits,
   userSelectionActive,
   removeSelectedElements,
-  panOnDrag,
   userSelectionRect,
   elementsSelectable,
   nodesSelectionActive,
@@ -101,10 +100,8 @@ function onClick(event: MouseEvent) {
 }
 
 function onContextMenu(event: MouseEvent) {
-  if (Array.isArray(panOnDrag.value) && panOnDrag.value?.includes(2)) {
-    event.preventDefault()
-    return
-  }
+  event.preventDefault()
+  event.stopPropagation()
 
   emits.paneContextMenu(event)
 }

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

@@ -165,10 +165,9 @@ onMounted(() => {
     const eventButton = (event as MouseEvent).button
 
     if (
-      (shouldPanOnDrag.value === true || (Array.isArray(shouldPanOnDrag.value) && shouldPanOnDrag.value.includes(1))) &&
       eventButton === 1 &&
       event.type === 'mousedown' &&
-      ((event.target as HTMLElement)?.closest('.vue-flow__node') || (event.target as HTMLElement)?.closest('.vue-flow__edge'))
+      (isWrappedWithClass(event, 'vue-flow__node') || isWrappedWithClass(event, 'vue-flow__edge'))
     ) {
       return true
     }
@@ -228,22 +227,22 @@ onMounted(() => {
 
     // if the pane is only movable using allowed clicks
     if (
-      Array.isArray(shouldPanOnDrag.value) &&
-      !shouldPanOnDrag.value.includes(eventButton) &&
+      Array.isArray(panOnDrag.value) &&
+      !panOnDrag.value.includes(eventButton) &&
       (event.type === 'mousedown' || event.type === 'touchstart')
     ) {
       return false
     }
 
     // We only allow right clicks if pan on drag is set to right-click
     const buttonAllowed =
-      (Array.isArray(shouldPanOnDrag.value) && shouldPanOnDrag.value.includes(eventButton)) ||
-      (selectionKeyCode.value === true && Array.isArray(shouldPanOnDrag.value) && !shouldPanOnDrag.value.includes(0)) ||
+      (Array.isArray(panOnDrag.value) && panOnDrag.value.includes(eventButton)) ||
+      (selectionKeyCode.value === true && Array.isArray(panOnDrag.value) && !panOnDrag.value.includes(0)) ||
       !eventButton ||
       eventButton <= 1
 
     // default filter for d3-zoom
-    return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
+    return (!event.ctrlKey || panKeyPressed.value || event.type === 'wheel') && buttonAllowed
   })
 
   watch(
@@ -293,7 +292,7 @@ onMounted(() => {
             const _isMacOs = isMacOs()
 
             // macOS sets ctrlKey=true for pinch gesture on a trackpad
-            if (event.ctrlKey && zoomOnPinch.value && _isMacOs) {
+            if (!panKeyPressed.value && event.ctrlKey && zoomOnPinch.value && _isMacOs) {
               const point = pointer(event)
               const pinchDelta = wheelDelta(event)
               const zoom = currentZoom * 2 ** pinchDelta