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 12:51:03 +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

5
.changeset/four-kiwis-judge.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
Allow Control key as pan activation key code.

5
.changeset/plenty-timers-change.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
Check `panOnDrag` for allowed drag buttons in d3 filter

5
.changeset/serious-trains-guess.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
Prevent browser context menu when triggering pane context menu event.

6
packages/core/src/composables/useKeyPress.ts
View File

@@ -1,5 +1,5 @@
import type { MaybeRefOrGetter } from 'vue'
import { onMounted, ref, toRef, toValue, watch } from 'vue'
import { ref, toRef, toValue, watch } from 'vue'
import type { KeyFilter, KeyPredicate } from '@vueuse/core'
import { onKeyStroke, useEventListener } from '@vueuse/core'
@@ -111,9 +111,7 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
},
)
onMounted(() => {
useEventListener(window, ['blur', 'contextmenu'], reset)
})
useEventListener(['blur', 'contextmenu'], reset)
onKeyStroke(
(...args) => currentFilter(...args),

7
packages/core/src/container/Pane/Pane.vue
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)
}

15
packages/core/src/container/Viewport/Viewport.vue
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