From f4f2494fd13baebe3df73e9e49c4dd7e71e566dc Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sat, 7 Dec 2024 12:51:03 +0100 Subject: [PATCH] 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 <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): allow drag regardless of btn chosen Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): prevent browser ctx menu on pane right click Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(core): cleanup useKeyPress handler Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * fix(core): check `panOnDrag` prop for allowed drag buttons Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(core): cleanup Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/four-kiwis-judge.md | 5 +++++ .changeset/plenty-timers-change.md | 5 +++++ .changeset/serious-trains-guess.md | 5 +++++ packages/core/src/composables/useKeyPress.ts | 6 ++---- packages/core/src/container/Pane/Pane.vue | 7 ++----- packages/core/src/container/Viewport/Viewport.vue | 15 +++++++-------- 6 files changed, 26 insertions(+), 17 deletions(-) create mode 100644 .changeset/four-kiwis-judge.md create mode 100644 .changeset/plenty-timers-change.md create mode 100644 .changeset/serious-trains-guess.md diff --git a/.changeset/four-kiwis-judge.md b/.changeset/four-kiwis-judge.md new file mode 100644 index 00000000..65d577b3 --- /dev/null +++ b/.changeset/four-kiwis-judge.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Allow Control key as pan activation key code. diff --git a/.changeset/plenty-timers-change.md b/.changeset/plenty-timers-change.md new file mode 100644 index 00000000..e754f3e6 --- /dev/null +++ b/.changeset/plenty-timers-change.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Check `panOnDrag` for allowed drag buttons in d3 filter diff --git a/.changeset/serious-trains-guess.md b/.changeset/serious-trains-guess.md new file mode 100644 index 00000000..674c4239 --- /dev/null +++ b/.changeset/serious-trains-guess.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Prevent browser context menu when triggering pane context menu event. diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts index a38afdf7..ee238b9a 100644 --- a/packages/core/src/composables/useKeyPress.ts +++ b/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 { - useEventListener(window, ['blur', 'contextmenu'], reset) - }) + useEventListener(['blur', 'contextmenu'], reset) onKeyStroke( (...args) => currentFilter(...args), diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue index 3a709053..e13a5484 100644 --- a/packages/core/src/container/Pane/Pane.vue +++ b/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) } diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue index e2d9ba33..69830713 100644 --- a/packages/core/src/container/Viewport/Viewport.vue +++ b/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,8 +227,8 @@ 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 @@ -237,13 +236,13 @@ onMounted(() => { // 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