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

fix(core): allow control key as pan activation key code (#1707)

Browse Source 
* 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>
This commit is contained in:
Braks
2024-12-07 16:39:07 +01:00
parent 7a022c89c6
commit f4f2494fd1
6 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/Pane/Pane.vue
+2 -5
View File
@@ -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)
}
packages/core/src/container/Viewport/Viewport.vue
+7 -8
View File
@@ -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