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 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);