diff --git a/.changeset/hungry-pans-unite.md b/.changeset/hungry-pans-unite.md new file mode 100644 index 000000000..d313bc26b --- /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 a8fffcde7..e2d9ba33e 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 1f9469f4b..5fe5d13c3 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',