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) {
const scope = effectScope()
const dragging = scope.run(() => {
const {
viewport,
@@ -62,102 +63,98 @@ function useDrag(params: UseDragParams) {
)
}
watch(
[() => disabled, () => el],
() => {
if (el) {
const selection = select(el)
const node = id ? getNode(id) : undefined
watch([() => disabled, () => el], () => {
if (el) {
const selection = select(el)
const node = id ? getNode(id) : undefined
if (disabled) {
selection.on('.drag', null)
} else {
dragHandler = drag()
.on('start', (event: UseDragEvent) => {
if (!selectNodesOnDrag && !multiSelectionActive && id) {
if (!node?.selected) {
removeSelectedElements()
}
if (disabled) {
selection.on('.drag', null)
} else {
dragHandler = drag()
.on('start', (event: UseDragEvent) => {
if (!selectNodesOnDrag && !multiSelectionActive && id) {
if (!node?.selected) {
removeSelectedElements()
}
}
if (node && !disabled && selectNodesOnDrag) {
handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
}
if (node && !disabled && selectNodesOnDrag) {
handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
}
const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
dragItems = getDragItems(nodes, mousePos, getNode, id)
const mousePos = getMousePosition(event, hasSnapGrid(node?.snapGrid) as SnapGrid)
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({
id,
dragItems,
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)
// 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)
}
selection.call(dragHandler)
}
},
{ flush: 'post' },
)
}
})
return dragging
})