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

fix(core): properly cleanup handlers when drag is disabled

Browse Source
This commit is contained in:
braks
2023-11-04 19:25:49 +01:00
committed by Braks
parent 1dfe68306b
commit c30ddc61ed
1 changed files with 115 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/composables/useDrag.ts
+115 -101
View File
@@ -121,7 +121,7 @@ export function useDrag(params: UseDragParams) {
}
}
const autoPan = (): void => {
const autoPan = () => {
if (!containerBounds) {
return
}
@@ -142,110 +142,114 @@ export function useDrag(params: UseDragParams) {
autoPanId = requestAnimationFrame(autoPan)
}
watch([() => toValue(disabled), el], ([isDisabled, nodeEl]) => {
const startDrag = (event: UseDragEvent, nodeEl: Element) => {
dragStarted = true
const node = findNode(id)
if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
if (!node.selected) {
// we need to reset selected nodes when selectNodesOnDrag=false
removeSelectedElements()
}
}
if (node && toValue(selectable) && selectNodesOnDrag.value) {
handleNodeClick(
node,
multiSelectionActive.value,
addSelectedNodes,
removeSelectedElements,
nodesSelectionActive,
false,
nodeEl as HTMLDivElement,
)
}
const pointerPos = getPointerPosition(event)
lastPos = pointerPos
dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
if (dragItems.length) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStart({ event: event.sourceEvent, node: currentNode, nodes })
}
}
const eventStart = (event: UseDragEvent, nodeEl: Element) => {
if (nodeDragThreshold.value === 0) {
startDrag(event, nodeEl)
}
lastPos = getPointerPosition(event)
containerBounds = vueFlowRef.value?.getBoundingClientRect() || null
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
}
const eventDrag = (event: UseDragEvent, nodeEl: Element) => {
const pointerPos = getPointerPosition(event)
if (!autoPanStarted && dragStarted && autoPanOnNodeDrag.value) {
autoPanStarted = true
autoPan()
}
if (!dragStarted) {
const x = pointerPos.xSnapped - (lastPos.x ?? 0)
const y = pointerPos.ySnapped - (lastPos.y ?? 0)
const distance = Math.sqrt(x * x + y * y)
if (distance > nodeDragThreshold.value) {
startDrag(event, nodeEl)
}
}
// skip events without movement
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length && dragStarted) {
dragEvent = event.sourceEvent as MouseEvent
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
updateNodes(pointerPos)
}
}
const eventEnd = (event: UseDragEvent) => {
if (!dragStarted) {
return
}
dragging.value = false
autoPanStarted = false
dragStarted = false
cancelAnimationFrame(autoPanId)
if (dragItems.length) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStop({ event: event.sourceEvent, node: currentNode, nodes })
}
}
watch([() => toValue(disabled), el], ([isDisabled, nodeEl], _, onCleanup) => {
if (nodeEl) {
const selection = select(nodeEl)
if (isDisabled) {
selection.on('.drag', null)
} else {
const startDrag = (event: UseDragEvent) => {
dragStarted = true
const node = findNode(id)
if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
if (!node.selected) {
// we need to reset selected nodes when selectNodesOnDrag=false
removeSelectedElements()
}
}
if (node && toValue(selectable) && selectNodesOnDrag.value) {
handleNodeClick(
node,
multiSelectionActive.value,
addSelectedNodes,
removeSelectedElements,
nodesSelectionActive,
false,
nodeEl as HTMLDivElement,
)
}
const pointerPos = getPointerPosition(event)
lastPos = pointerPos
dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
if (dragItems.length) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStart({ event: event.sourceEvent, node: currentNode, nodes })
}
}
if (!isDisabled) {
dragHandler = drag()
.on('start', (event: UseDragEvent) => {
if (nodeDragThreshold.value === 0) {
startDrag(event)
}
lastPos = getPointerPosition(event)
containerBounds = vueFlowRef.value?.getBoundingClientRect() || null
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
})
.on('drag', (event: UseDragEvent) => {
const pointerPos = getPointerPosition(event)
if (!autoPanStarted && dragStarted && autoPanOnNodeDrag.value) {
autoPanStarted = true
autoPan()
}
if (!dragStarted) {
const x = pointerPos.xSnapped - (lastPos.x ?? 0)
const y = pointerPos.ySnapped - (lastPos.y ?? 0)
const distance = Math.sqrt(x * x + y * y)
if (distance > nodeDragThreshold.value) {
startDrag(event)
}
}
// skip events without movement
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length && dragStarted) {
dragEvent = event.sourceEvent as MouseEvent
mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
updateNodes(pointerPos)
}
})
.on('end', (event: UseDragEvent) => {
if (!dragStarted) {
return
}
dragging.value = false
autoPanStarted = false
dragStarted = false
cancelAnimationFrame(autoPanId)
if (dragItems.length) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
findNode,
})
onStop({ event: event.sourceEvent, node: currentNode, nodes })
}
})
.on('start', (event: UseDragEvent) => eventStart(event, nodeEl))
.on('drag', (event: UseDragEvent) => eventDrag(event, nodeEl))
.on('end', (event: UseDragEvent) => eventEnd(event))
.filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
const target = event.target as HTMLDivElement
const unrefDragHandle = toValue(dragHandle)
@@ -260,6 +264,16 @@ export function useDrag(params: UseDragParams) {
selection.call(dragHandler)
}
onCleanup(() => {
selection.on('.drag', null)
if (dragHandler) {
dragHandler.on('start', null)
dragHandler.on('drag', null)
dragHandler.on('end', null)
}
})
}
})