diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts index da626085..e56475ea 100644 --- a/src/hooks/useDrag/index.ts +++ b/src/hooks/useDrag/index.ts @@ -96,14 +96,14 @@ function useDrag({ } }) .on('drag', (event: UseDragEvent) => { - const { updateNodePositions, nodeInternals, nodeExtent, onNodeDrag, onSelectionDrag } = store.getState(); + const { updateNodePositions, snapToGrid, snapGrid, nodeInternals, nodeExtent, onNodeDrag, onSelectionDrag } = store.getState(); const pointerPos = getPointerPosition(event); // skip events without movement if ((lastPos.current.x !== pointerPos.x || lastPos.current.y !== pointerPos.y) && dragItems.current) { lastPos.current = pointerPos; dragItems.current = dragItems.current.map((n) => - updatePosition(n, pointerPos, nodeInternals, nodeExtent) + updatePosition(n, pointerPos, snapToGrid, snapGrid, nodeInternals, nodeExtent) ); const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag); diff --git a/src/hooks/useDrag/utils.ts b/src/hooks/useDrag/utils.ts index 9679a5c7..e071e810 100644 --- a/src/hooks/useDrag/utils.ts +++ b/src/hooks/useDrag/utils.ts @@ -59,11 +59,18 @@ export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, export function updatePosition( dragItem: NodeDragItem, mousePos: XYPosition, + snapToGrid: boolean, + [snapX, snapY]: [number, number], nodeInternals: NodeInternals, nodeExtent?: CoordinateExtent ): NodeDragItem { let currentExtent = dragItem.extent || nodeExtent; const nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y }; + if (snapToGrid) { + nextPosition.x = snapX * Math.round(nextPosition.x / snapX) + nextPosition.y = snapY * Math.round(nextPosition.y / snapY) + } + if (dragItem.extent === 'parent') { if (dragItem.parentNode && dragItem.width && dragItem.height) {