From 1e3acb197994df60f3ac76f54dd9b8b9794a1aa5 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Nov 2024 23:11:06 +0100
Subject: [PATCH] fix(core): if selection key code is true prevent pan on drag
 on left mouse btn (#1670)

* fix(core): if selection key code is true prevent pan on drag on left mouse btn

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(tests): correct viewport drag tests

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/hungry-pans-unite.md                 |  5 +++++
 .../core/src/container/Viewport/Viewport.vue    | 17 +++++++++--------
 .../2-vue-flow/{viewport.ts => viewport.cy.ts}  |  2 ++
 3 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/hungry-pans-unite.md
 rename tests/cypress/component/2-vue-flow/{viewport.ts => viewport.cy.ts} (91%)

diff --git a/.changeset/hungry-pans-unite.md b/.changeset/hungry-pans-unite.md
new file mode 100644
index 00000000..d313bc26
--- /dev/null
+++ b/.changeset/hungry-pans-unite.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+if selection key code is true prevent pan on drag on left mouse btn
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index a8fffcde..e2d9ba33 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -221,6 +221,11 @@ onMounted(() => {
       return false
     }
 
+    // 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) {
+      return false
+    }
+
     // if the pane is only movable using allowed clicks
     if (
       Array.isArray(shouldPanOnDrag.value) &&
@@ -230,16 +235,12 @@ onMounted(() => {
       return false
     }
 
-    const leftMouseBtnPanAllowed =
-      eventButton !== 0 || (selectionKeyCode.value === true && Array.isArray(panOnDrag.value) && !panOnDrag.value.includes(0))
-
     // We only allow right clicks if pan on drag is set to right-click
     const buttonAllowed =
-      leftMouseBtnPanAllowed &&
-      ((Array.isArray(panOnDrag.value) && panOnDrag.value.includes(eventButton)) ||
-        (selectionKeyCode.value === true && Array.isArray(panOnDrag.value) && !panOnDrag.value.includes(0)) ||
-        !eventButton ||
-        eventButton <= 1)
+      (Array.isArray(shouldPanOnDrag.value) && shouldPanOnDrag.value.includes(eventButton)) ||
+      (selectionKeyCode.value === true && Array.isArray(shouldPanOnDrag.value) && !shouldPanOnDrag.value.includes(0)) ||
+      !eventButton ||
+      eventButton <= 1
 
     // default filter for d3-zoom
     return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
diff --git a/tests/cypress/component/2-vue-flow/viewport.ts b/tests/cypress/component/2-vue-flow/viewport.cy.ts
similarity index 91%
rename from tests/cypress/component/2-vue-flow/viewport.ts
rename to tests/cypress/component/2-vue-flow/viewport.cy.ts
index 1f9469f4..5fe5d13c 100644
--- a/tests/cypress/component/2-vue-flow/viewport.ts
+++ b/tests/cypress/component/2-vue-flow/viewport.cy.ts
@@ -8,6 +8,7 @@ describe('Viewport drag / zoom', () => {
   beforeEach(() => {
     cy.vueFlow({
       nodes,
+      fitViewOnInit: false,
     })
   })
 
@@ -27,6 +28,7 @@ describe('Viewport drag / zoom', () => {
       await cy.tryAssertion(() => {
         cy.transformationPane()
           .should('exist')
+          .should('not.have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)')
           .should(
             'have.css',
             'transform',