From b34ccd19e911765f5fde4a44888b05c35ddba1fa Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 13:44:25 +0100 Subject: [PATCH 1/2] refactor(nodes): only trigger drag event when change happened --- packages/core/src/hooks/useDrag/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/core/src/hooks/useDrag/index.ts b/packages/core/src/hooks/useDrag/index.ts index 3ab1d0bb..7f1228a9 100644 --- a/packages/core/src/hooks/useDrag/index.ts +++ b/packages/core/src/hooks/useDrag/index.ts @@ -108,6 +108,9 @@ function useDrag({ x: pointerPos.xSnapped, y: pointerPos.ySnapped, }; + + let hasChange = false; + dragItems.current = dragItems.current.map((n) => { const nextPosition = { x: pointerPos.x - n.distance.x, y: pointerPos.y - n.distance.y }; @@ -118,12 +121,20 @@ function useDrag({ const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin); + // we want to make sure that we only fire a change event when there is a changes + hasChange = + hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y; + n.position = updatedPos.position; n.positionAbsolute = updatedPos.positionAbsolute; return n; }); + if (!hasChange) { + return; + } + const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag); updateNodePositions(dragItems.current, true, true); From 23afb3abebdb42fad284f68bec164afac609563c Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 8 Dec 2022 13:50:01 +0100 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/swift-mayflies-wink.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/swift-mayflies-wink.md diff --git a/.changeset/swift-mayflies-wink.md b/.changeset/swift-mayflies-wink.md new file mode 100644 index 00000000..96bbef36 --- /dev/null +++ b/.changeset/swift-mayflies-wink.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Only trigger drag event when change happened