Merge pull request #2410 from wardoost/node-snap-relative-to-center

Snap node to grid relative to 0,0 instead start position of node

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

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