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

refactor(nodes): remove flush timing from drag

Browse Source
This commit is contained in:
braks
2022-10-07 22:55:38 +02:00
committed by Braks
parent bf7594fdbb
commit 091c3dff31
1 changed files with 79 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/composables/useDrag.ts
+79 -82
View File
@@ -21,6 +21,7 @@ interface UseDragParams {
function useDrag(params: UseDragParams) { function useDrag(params: UseDragParams) {
const scope = effectScope() const scope = effectScope()
const dragging = scope.run(() => { const dragging = scope.run(() => {
const { const {
viewport, viewport,
@@ -62,102 +63,98 @@ function useDrag(params: UseDragParams) {
) )
} }
watch( watch([() => disabled, () => el], () => {
[() => disabled, () => el], if (el) {
() => { const selection = select(el)
if (el) { const node = id ? getNode(id) : undefined
const selection = select(el)
const node = id ? getNode(id) : undefined
if (disabled) { if (disabled) {
selection.on('.drag', null) selection.on('.drag', null)
} else { } else {
dragHandler = drag() dragHandler = drag()
.on('start', (event: UseDragEvent) => { .on('start', (event: UseDragEvent) => {
if (!selectNodesOnDrag && !multiSelectionActive && id) { if (!selectNodesOnDrag && !multiSelectionActive && id) {
if (!node?.selected) { if (!node?.selected) {
removeSelectedElements() removeSelectedElements()
}
} }
}
if (node && !disabled && selectNodesOnDrag) { if (node && !disabled && selectNodesOnDrag) {
handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive)) handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
} }
const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid) const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
dragItems = getDragItems(nodes, mousePos, getNode, id) dragItems = getDragItems(nodes, mousePos, getNode, id)
if (onStart && dragItems) { if (onStart && dragItems) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
})
onStart(event.sourceEvent, currentNode, nodes)
}
})
.on('drag', (event: UseDragEvent) => {
const snapGrid = hasSnapGrid(node?.snapGrid) as SnapGrid
const mousePos = getMousePosition(event, snapGrid)
// skip events without movement
if ((lastPos.x !== mousePos.x || lastPos.y !== mousePos.y) && dragItems) {
lastPos = mousePos
dragItems = dragItems.map((n) =>
updatePosition(
n,
mousePos,
!!snapGrid ?? snapToGrid,
snapGrid ?? globalSnapGrid,
n.parentNode ? getNode(n.parentNode) : undefined,
nodeExtent,
),
)
updateNodePositions(dragItems, true, true)
dragging.value = true
if (onDrag) {
const [currentNode, nodes] = getEventHandlerParams({ const [currentNode, nodes] = getEventHandlerParams({
id, id,
dragItems, dragItems,
getNode: $$(getNode), getNode: $$(getNode),
}) })
onStart(event.sourceEvent, currentNode, nodes) onDrag(event.sourceEvent, currentNode, nodes)
}
}
event.on('end', (event) => {
dragging.value = false
if (onStop && dragItems) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
})
onStop(event.sourceEvent, currentNode, nodes)
} }
}) })
.on('drag', (event: UseDragEvent) => { })
const snapGrid = hasSnapGrid(node?.snapGrid) as SnapGrid .filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
const target = event.target as HTMLDivElement
return (
!event.button &&
(!noDragClassName ||
(!hasSelector(target, `.${noDragClassName}`, $$(el)) &&
(!node?.dragHandle || hasSelector(target, node.dragHandle, $$(el)))))
)
})
const mousePos = getMousePosition(event, snapGrid) selection.call(dragHandler)
// skip events without movement
if ((lastPos.x !== mousePos.x || lastPos.y !== mousePos.y) && dragItems) {
lastPos = mousePos
dragItems = dragItems.map((n) =>
updatePosition(
n,
mousePos,
!!snapGrid ?? snapToGrid,
snapGrid ?? globalSnapGrid,
n.parentNode ? getNode(n.parentNode) : undefined,
nodeExtent,
),
)
updateNodePositions(dragItems, true, true)
dragging.value = true
if (onDrag) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
})
onDrag(event.sourceEvent, currentNode, nodes)
}
}
event.on('end', (event) => {
dragging.value = false
if (onStop && dragItems) {
updateNodePositions(dragItems, false, false)
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
})
onStop(event.sourceEvent, currentNode, nodes)
}
})
})
.filter((event: D3DragEvent<HTMLDivElement, null, SubjectPosition>['sourceEvent']) => {
const target = event.target as HTMLDivElement
return (
!event.button &&
(!noDragClassName ||
(!hasSelector(target, `.${noDragClassName}`, $$(el)) &&
(!node?.dragHandle || hasSelector(target, node.dragHandle, $$(el)))))
)
})
selection.call(dragHandler)
}
} }
}, }
{ flush: 'post' }, })
)
return dragging return dragging
}) })