From 8c1d390c8f84bfb216f324bf72e633e40de0efe2 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 23 Jan 2026 17:56:02 +0100 Subject: [PATCH] fix(core): disable selection on drag when panning mode is active (#2014) * fix(core): disable selection on drag when panning mode is active Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/green-games-cough.md | 5 +++++ packages/core/src/container/Viewport/Viewport.vue | 10 ++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 .changeset/green-games-cough.md diff --git a/.changeset/green-games-cough.md b/.changeset/green-games-cough.md new file mode 100644 index 00000000..c44ac3f7 --- /dev/null +++ b/.changeset/green-games-cough.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Disable selection on drag by setting the keycode to `true` when panning mode is active. diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue index 78e48dab..eaa920bb 100644 --- a/packages/core/src/container/Viewport/Viewport.vue +++ b/packages/core/src/container/Viewport/Viewport.vue @@ -61,9 +61,7 @@ let prevTransform: ViewportTransform = { } const panKeyPressed = useKeyPress(panActivationKeyCode) - const selectionKeyPressed = useKeyPress(selectionKeyCode) - const zoomKeyPressed = useKeyPress(zoomActivationKeyCode) const shouldPanOnDrag = toRef( @@ -74,7 +72,11 @@ const shouldPanOnDrag = toRef( const shouldPanOnScroll = toRef(() => panKeyPressed.value || panOnScroll.value) -const isSelecting = toRef(() => selectionKeyPressed.value || (selectionKeyCode.value === true && shouldPanOnDrag.value !== true)) +const shouldSelectOnDrag = toRef(() => selectionKeyCode.value === true && shouldPanOnDrag.value !== true) + +const isSelecting = toRef( + () => (selectionKeyPressed.value && selectionKeyCode.value !== true) || userSelectionActive.value || shouldSelectOnDrag.value, +) const connectionInProgress = toRef(() => connectionStartHandle.value !== null) @@ -229,7 +231,7 @@ onMounted(() => { } // if selection key code is true and panOnDrag tries to use left mouse button we prevent it - if (selectionKeyCode.value === true && Array.isArray(panOnDrag.value) && panOnDrag.value.includes(0) && eventButton === 0) { + if (shouldSelectOnDrag.value && Array.isArray(panOnDrag.value) && panOnDrag.value.includes(0) && eventButton === 0) { return false }