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

fix(core): allow pan on drag when pan key is activated

Browse Source
This commit is contained in:
braks
2023-10-30 20:30:56 +01:00
committed by Braks
parent b1963a58e1
commit ffceea93a8
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/Viewport/Viewport.vue
+11 -14
View File
@@ -66,12 +66,9 @@ const selectionKeyPressed = useKeyPress(selectionKeyCode)
const zoomKeyPressed = useKeyPress(zoomActivationKeyCode) const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
const shouldPanOnDrag = toRef(() => !selectionKeyPressed.value && panOnDrag.value && panKeyPressed.value) const shouldPanOnDrag = toRef(() => !selectionKeyPressed.value && (panKeyPressed.value || panOnDrag.value))
const isSelecting = toRef( const isSelecting = toRef(() => selectionKeyPressed.value || (selectionKeyCode.value === true && shouldPanOnDrag.value !== true))
() =>
(selectionKeyCode.value !== true && selectionKeyPressed.value) || (selectionKeyCode.value === true && !shouldPanOnDrag.value),
)
useResizeObserver(viewportRef, setDimensions) useResizeObserver(viewportRef, setDimensions)
@@ -141,7 +138,7 @@ onMounted(() => {
paneDragging.value = false paneDragging.value = false
if (isRightClickPan(panOnDrag.value, mouseButton ?? 0) && !zoomedWithRightMouseButton) { if (isRightClickPan(shouldPanOnDrag.value, mouseButton ?? 0) && !zoomedWithRightMouseButton) {
emits.paneContextMenu(event.sourceEvent) emits.paneContextMenu(event.sourceEvent)
} }
@@ -162,7 +159,7 @@ onMounted(() => {
const pinchZoom = zoomOnPinch.value && event.ctrlKey const pinchZoom = zoomOnPinch.value && event.ctrlKey
if ( if (
(panOnDrag.value === true || (Array.isArray(panOnDrag.value) && panOnDrag.value.includes(1))) && (shouldPanOnDrag.value === true || (Array.isArray(shouldPanOnDrag.value) && shouldPanOnDrag.value.includes(1))) &&
event.button === 1 && event.button === 1 &&
event.type === 'mousedown' && event.type === 'mousedown' &&
((event.target as HTMLElement)?.closest('.vue-flow__node') || (event.target as HTMLElement)?.closest('.vue-flow__edge')) ((event.target as HTMLElement)?.closest('.vue-flow__node') || (event.target as HTMLElement)?.closest('.vue-flow__edge'))
@@ -171,7 +168,7 @@ onMounted(() => {
} }
// if all interactions are disabled, we prevent all zoom events // if all interactions are disabled, we prevent all zoom events
if (!panOnDrag.value && !zoomScroll && !panOnScroll.value && !zoomOnDoubleClick.value && !zoomOnPinch.value) { if (!shouldPanOnDrag.value && !zoomScroll && !panOnScroll.value && !zoomOnDoubleClick.value && !zoomOnPinch.value) {
return false return false
} }
@@ -208,14 +205,14 @@ onMounted(() => {
} }
// if the pane is not movable, we prevent dragging it with mousestart or touchstart // if the pane is not movable, we prevent dragging it with mousestart or touchstart
if (!panOnDrag.value && (event.type === 'mousedown' || event.type === 'touchstart')) { if (!shouldPanOnDrag.value && (event.type === 'mousedown' || event.type === 'touchstart')) {
return false return false
} }
// if the pane is only movable using allowed clicks // if the pane is only movable using allowed clicks
if ( if (
Array.isArray(panOnDrag.value) && Array.isArray(shouldPanOnDrag.value) &&
!panOnDrag.value.includes(event.button) && !shouldPanOnDrag.value.includes(event.button) &&
(event.type === 'mousedown' || event.type === 'touchstart') (event.type === 'mousedown' || event.type === 'touchstart')
) { ) {
return false return false
@@ -223,7 +220,7 @@ onMounted(() => {
// We only allow right clicks if pan on drag is set to right-click // We only allow right clicks if pan on drag is set to right-click
const buttonAllowed = const buttonAllowed =
(Array.isArray(panOnDrag.value) && panOnDrag.value.includes(event.button)) || !event.button || event.button <= 1 (Array.isArray(shouldPanOnDrag.value) && shouldPanOnDrag.value.includes(event.button)) || !event.button || event.button <= 1
// default filter for d3-zoom // default filter for d3-zoom
return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed
@@ -238,7 +235,7 @@ onMounted(() => {
const flowTransform = eventToFlowTransform(event.transform) const flowTransform = eventToFlowTransform(event.transform)
zoomedWithRightMouseButton = isRightClickPan(panOnDrag.value, mouseButton ?? 0) zoomedWithRightMouseButton = isRightClickPan(shouldPanOnDrag.value, mouseButton ?? 0)
emits.viewportChange(flowTransform) emits.viewportChange(flowTransform)
emits.move({ event, flowTransform }) emits.move({ event, flowTransform })
@@ -394,7 +391,7 @@ export default {
<div ref="viewportRef" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container"> <div ref="viewportRef" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
<Pane <Pane
:is-selecting="isSelecting" :is-selecting="isSelecting"
:class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: !!panOnDrag }" :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
> >
<Transform> <Transform>
<slot name="zoom-pane" /> <slot name="zoom-pane" />