fix(core): correct pane pointer evt handlers (#1505)

This commit is contained in:
Braks
2024-07-01 09:44:55 +02:00
parent a52ac6e90e
commit e57f22c185
+14 -30
View File
@@ -2,7 +2,7 @@
import { ref, toRef, watch } from 'vue' import { ref, toRef, watch } from 'vue'
import UserSelection from '../../components/UserSelection/UserSelection.vue' import UserSelection from '../../components/UserSelection/UserSelection.vue'
import NodesSelection from '../../components/NodesSelection/NodesSelection.vue' import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
import { type GraphNode, SelectionMode } from '../../types' import { SelectionMode } from '../../types'
import { useKeyPress, useVueFlow } from '../../composables' import { useKeyPress, useVueFlow } from '../../composables'
import { getConnectedEdges, getNodesInside } from '../../utils' import { getConnectedEdges, getNodesInside } from '../../utils'
import { getMousePosition } from './utils' import { getMousePosition } from './utils'
@@ -54,28 +54,11 @@ watch(deleteKeyPressed, (isKeyPressed) => {
return return
} }
const nodesToRemove: GraphNode[] = [] removeNodes(getSelectedNodes.value)
for (const node of getNodes.value) {
if (!node.selected && node.parentNode && nodesToRemove.some((n) => n.id === node.parentNode)) {
nodesToRemove.push(node)
} else if (node.selected) {
nodesToRemove.push(node)
}
}
if (nodesToRemove || getSelectedEdges.value) { removeEdges(getSelectedEdges.value)
if (getSelectedEdges.value.length > 0) {
removeEdges(getSelectedEdges.value)
}
if (nodesToRemove.length > 0) { nodesSelectionActive.value = false
removeNodes(nodesToRemove)
}
nodesSelectionActive.value = false
removeSelectedElements()
}
}) })
watch(multiSelectKeyPressed, (isKeyPressed) => { watch(multiSelectKeyPressed, (isKeyPressed) => {
@@ -125,17 +108,14 @@ function onWheel(event: WheelEvent) {
} }
function onPointerDown(event: PointerEvent) { function onPointerDown(event: PointerEvent) {
if (!hasActiveSelection.value) {
return emits.paneMouseMove(event)
}
containerBounds.value = vueFlowRef.value?.getBoundingClientRect() containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
container.value?.setPointerCapture(event.pointerId) container.value?.setPointerCapture(event.pointerId)
if ( if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.value || !containerBounds.value) {
!hasActiveSelection.value ||
!elementsSelectable ||
!isSelecting ||
event.button !== 0 ||
event.target !== container.value ||
!containerBounds.value
) {
return return
} }
@@ -198,12 +178,16 @@ function onPointerMove(event: PointerEvent) {
} }
function onPointerUp(event: PointerEvent) { function onPointerUp(event: PointerEvent) {
if (!hasActiveSelection.value || event.button !== 0) { if (event.button !== 0) {
return return
} }
container.value?.releasePointerCapture(event.pointerId) container.value?.releasePointerCapture(event.pointerId)
if (!hasActiveSelection.value) {
return
}
// We only want to trigger click functions when in selection mode if // We only want to trigger click functions when in selection mode if
// the user did not move the mouse. // the user did not move the mouse.
if (!userSelectionActive.value && userSelectionRect.value && event.target === container.value) { if (!userSelectionActive.value && userSelectionRect.value && event.target === container.value) {