alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Braks
2024-11-01 23:11:06 +01:00
parent 00cff79717
commit 1e3acb1979
3 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hungry-pans-unite.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
if selection key code is true prevent pan on drag on left mouse btn

17
packages/core/src/container/Viewport/Viewport.vue
View File

@@ -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

2
tests/cypress/component/2-vue-flow/viewport.ts → tests/cypress/component/2-vue-flow/viewport.cy.ts
View File

@@ -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',