alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup of cond. statements by leveraging d3.drag.filter for handleSelector in useDrag

Browse Source
This commit is contained in:
Furkan Kalaycioglu
2022-04-27 22:43:55 +03:00
parent 5e501fab06
commit 5737d133d4
1 changed files with 34 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useDrag.ts
+34 -39
View File
@@ -71,62 +71,57 @@ function useDrag({
if (nodeRef?.current) { if (nodeRef?.current) {
const selection = select(nodeRef.current); const selection = select(nodeRef.current);
let isDragAllowedBySelector = true;
if (disabled) { if (disabled) {
selection.on('.drag', null); selection.on('.drag', null);
} else { } else {
const dragHandler = drag() const dragHandler = drag()
.on('start', (event: UseDragEvent) => { .on('start', (event: UseDragEvent) => {
if (handleSelector) { const { transform, nodeInternals } = store.getState();
isDragAllowedBySelector = selectorExistsTargetToNode(event.sourceEvent.target, handleSelector, nodeRef); const offset = getOffset(event, nodeRef);
} parentPos.current = getParentNodePosition(nodeInternals, nodeId);
if (isDragAllowedBySelector) {
const { transform, nodeInternals } = store.getState();
const offset = getOffset(event, nodeRef);
parentPos.current = getParentNodePosition(nodeInternals, nodeId);
startPos.current = { startPos.current = {
x: offset.x - transform[0], x: offset.x - transform[0],
y: offset.y - transform[1], y: offset.y - transform[1],
}; };
onStart(event); onStart(event);
}
}) })
.on('drag', (event: UseDragEvent) => { .on('drag', (event: UseDragEvent) => {
if (isDragAllowedBySelector) { const { transform, snapGrid, snapToGrid } = store.getState();
const { transform, snapGrid, snapToGrid } = store.getState(); const pos = pointToRendererPoint(
const pos = pointToRendererPoint( {
{ x: event.x - startPos.current.x,
x: event.x - startPos.current.x, y: event.y - startPos.current.y,
y: event.y - startPos.current.y, },
}, transform,
transform, snapToGrid,
snapToGrid, snapGrid
snapGrid );
);
pos.x -= parentPos.current.x; pos.x -= parentPos.current.x;
pos.y -= parentPos.current.y; pos.y -= parentPos.current.y;
// skip events without movement // skip events without movement
if (lastPos.current.x !== pos.x || lastPos.current.y !== pos.y) { if (lastPos.current.x !== pos.x || lastPos.current.y !== pos.y) {
lastPos.current = pos; lastPos.current = pos;
onDrag(event, { onDrag(event, {
dx: pos.x, dx: pos.x,
dy: pos.y, dy: pos.y,
}); });
}
event.on('end', (event) => { event.on('end', (event) => {
if (isDragAllowedBySelector) { onStop(event);
onStop(event);
}
}); });
} }
}) })
.filter((event: any) => !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName)); .filter((event: any) => {
const filter = !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName);
return handleSelector
? selectorExistsTargetToNode(event.target, handleSelector, nodeRef) && filter
: filter;
});
selection.call(dragHandler); selection.call(dragHandler);