feat(snap): snap initial nodes to grid

dist/ReactFlow.esm.js

@@ -5890,17 +5890,23 @@ var addEdge = function (edgeParams, elements) {
             ? edgeParams.id
             : getEdgeId(edgeParams) }));
 };
-var pointToRendererPoint = function (_a, transform) {
+var pointToRendererPoint = function (_a, transform, snapToGrid, snapGrid) {
     var x = _a.x, y = _a.y;
-    var rendererX = (x - transform[0]) * (1 / transform[2]);
-    var rendererY = (y - transform[1]) * (1 / transform[2]);
-    return {
-        x: rendererX,
-        y: rendererY,
+    var position = {
+        x: (x - transform[0]) * (1 / transform[2]),
+        y: (y - transform[1]) * (1 / transform[2]),
     };
+    if (snapToGrid) {
+        var transformedGridSizeX = snapGrid[0] * transform[2];
+        var transformedGridSizeY = snapGrid[1] * transform[2];
+        position = {
+            x: transformedGridSizeX * Math.round(position.x / transformedGridSizeX),
+            y: transformedGridSizeY * Math.round(position.y / transformedGridSizeY),
+        };
+    }
+    return position;
 };
-var parseElement = function (element, transform) {
-    if (transform === void 0) { transform = [0, 0, 1]; }
+var parseElement = function (element, transform, snapToGrid, snapGrid) {
     if (!element.id) {
         throw new Error('All elements (nodes and edges) need to have an id.');
     }
@@ -5909,7 +5915,7 @@ var parseElement = function (element, transform) {
     }
     var nodeElement = element;
     return __assign(__assign({}, nodeElement), { id: nodeElement.id.toString(), type: nodeElement.type || 'default', __rg: {
-            position: pointToRendererPoint(nodeElement.position, transform),
+            position: pointToRendererPoint(nodeElement.position, transform, snapToGrid, snapGrid),
             width: null,
             height: null,
             handleBounds: {},
@@ -8242,12 +8248,18 @@ var useElementUpdater = function (elements) {
         nodes: s.nodes,
         edges: s.edges,
         transform: s.transform,
+        snapToGrid: s.snapToGrid,
+        snapGrid: s.snapGrid,
     }); });
     var setNodes = useStoreActions$1(function (a) { return a.setNodes; });
     var setEdges = useStoreActions$1(function (a) { return a.setEdges; });
     useEffect(function () {
         var nodes = elements.filter(isNode);
-        var edges = elements.filter(isEdge).map(function (e) { return parseElement(e); });
+        var edges = elements
+            .filter(isEdge)
+            .map(function (e) {
+            return parseElement(e, state.transform, state.snapToGrid, state.snapGrid);
+        });
         var nextNodes = nodes.map(function (propNode) {
             var existingNode = state.nodes.find(function (n) { return n.id === propNode.id; });
             if (existingNode) {
@@ -8255,7 +8267,7 @@ var useElementUpdater = function (elements) {
                     ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
                 return __assign(__assign({}, existingNode), { data: data });
             }
-            return parseElement(propNode, state.transform);
+            return parseElement(propNode, state.transform, state.snapToGrid, state.snapGrid);
         });
         var nodesChanged = !fastDeepEqual(state.nodes, nextNodes);
         var edgesChanged = !fastDeepEqual(state.edges, edges);

dist/ReactFlow.js

@@ -5897,17 +5897,23 @@ var addEdge = function (edgeParams, elements) {
             ? edgeParams.id
             : getEdgeId(edgeParams) }));
 };
-var pointToRendererPoint = function (_a, transform) {
+var pointToRendererPoint = function (_a, transform, snapToGrid, snapGrid) {
     var x = _a.x, y = _a.y;
-    var rendererX = (x - transform[0]) * (1 / transform[2]);
-    var rendererY = (y - transform[1]) * (1 / transform[2]);
-    return {
-        x: rendererX,
-        y: rendererY,
+    var position = {
+        x: (x - transform[0]) * (1 / transform[2]),
+        y: (y - transform[1]) * (1 / transform[2]),
     };
+    if (snapToGrid) {
+        var transformedGridSizeX = snapGrid[0] * transform[2];
+        var transformedGridSizeY = snapGrid[1] * transform[2];
+        position = {
+            x: transformedGridSizeX * Math.round(position.x / transformedGridSizeX),
+            y: transformedGridSizeY * Math.round(position.y / transformedGridSizeY),
+        };
+    }
+    return position;
 };
-var parseElement = function (element, transform) {
-    if (transform === void 0) { transform = [0, 0, 1]; }
+var parseElement = function (element, transform, snapToGrid, snapGrid) {
     if (!element.id) {
         throw new Error('All elements (nodes and edges) need to have an id.');
     }
@@ -5916,7 +5922,7 @@ var parseElement = function (element, transform) {
     }
     var nodeElement = element;
     return __assign(__assign({}, nodeElement), { id: nodeElement.id.toString(), type: nodeElement.type || 'default', __rg: {
-            position: pointToRendererPoint(nodeElement.position, transform),
+            position: pointToRendererPoint(nodeElement.position, transform, snapToGrid, snapGrid),
             width: null,
             height: null,
             handleBounds: {},
@@ -8249,12 +8255,18 @@ var useElementUpdater = function (elements) {
         nodes: s.nodes,
         edges: s.edges,
         transform: s.transform,
+        snapToGrid: s.snapToGrid,
+        snapGrid: s.snapGrid,
     }); });
     var setNodes = useStoreActions$1(function (a) { return a.setNodes; });
     var setEdges = useStoreActions$1(function (a) { return a.setEdges; });
     React.useEffect(function () {
         var nodes = elements.filter(isNode);
-        var edges = elements.filter(isEdge).map(function (e) { return parseElement(e); });
+        var edges = elements
+            .filter(isEdge)
+            .map(function (e) {
+            return parseElement(e, state.transform, state.snapToGrid, state.snapGrid);
+        });
         var nextNodes = nodes.map(function (propNode) {
             var existingNode = state.nodes.find(function (n) { return n.id === propNode.id; });
             if (existingNode) {
@@ -8262,7 +8274,7 @@ var useElementUpdater = function (elements) {
                     ? __assign(__assign({}, existingNode.data), propNode.data) : existingNode.data;
                 return __assign(__assign({}, existingNode), { data: data });
             }
-            return parseElement(propNode, state.transform);
+            return parseElement(propNode, state.transform, state.snapToGrid, state.snapGrid);
         });
         var nodesChanged = !fastDeepEqual(state.nodes, nextNodes);
         var edgesChanged = !fastDeepEqual(state.edges, edges);

dist/utils/graph.d.ts

@@ -4,7 +4,7 @@ export declare const isNode: (element: Node | Edge) => boolean;
 export declare const getOutgoers: (node: Node, elements: (Node | Edge)[]) => (Node | Edge)[];
 export declare const removeElements: (elementsToRemove: (Node | Edge)[], elements: (Node | Edge)[]) => (Node | Edge)[];
 export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (Node | Edge)[];
-export declare const parseElement: (element: Node | Edge, transform?: [number, number, number]) => Node | Edge;
+export declare const parseElement: (element: Node | Edge, transform: [number, number, number], snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
 export declare const getBoundingBox: (nodes: Node[]) => Rect;
 export declare const graphPosToZoomedPos: (pos: XYPosition, transform: [number, number, number]) => XYPosition;
 export declare const getNodesInside: (nodes: Node[], bbox: Rect, transform?: [number, number, number], partially?: boolean) => Node[];

src/hooks/useElementUpdater.ts

@@ -10,6 +10,8 @@ const useElementUpdater = (elements: Elements): void => {
     nodes: s.nodes,
     edges: s.edges,
     transform: s.transform,
+    snapToGrid: s.snapToGrid,
+    snapGrid: s.snapGrid,
   }));
 
   const setNodes = useStoreActions(a => a.setNodes);
@@ -17,7 +19,11 @@ const useElementUpdater = (elements: Elements): void => {
 
   useEffect(() => {
     const nodes = elements.filter(isNode) as Node[];
-    const edges = elements.filter(isEdge).map(e => parseElement(e)) as Edge[];
+    const edges = elements
+      .filter(isEdge)
+      .map(e =>
+        parseElement(e, state.transform, state.snapToGrid, state.snapGrid)
+      ) as Edge[];
 
     const nextNodes = nodes.map(propNode => {
       const existingNode = state.nodes.find(n => n.id === propNode.id);
@@ -33,7 +39,12 @@ const useElementUpdater = (elements: Elements): void => {
         };
       }
 
-      return parseElement(propNode, state.transform);
+      return parseElement(
+        propNode,
+        state.transform,
+        state.snapToGrid,
+        state.snapGrid
+      );
     }) as Node[];
 
     const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);

src/utils/graph.ts

@@ -65,20 +65,33 @@ export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
 
 const pointToRendererPoint = (
   { x, y }: XYPosition,
-  transform: Transform
+  transform: Transform,
+  snapToGrid: boolean,
+  snapGrid: [number, number]
 ): XYPosition => {
-  const rendererX = (x - transform[0]) * (1 / transform[2]);
-  const rendererY = (y - transform[1]) * (1 / transform[2]);
-
-  return {
-    x: rendererX,
-    y: rendererY,
+  let position: XYPosition = {
+    x: (x - transform[0]) * (1 / transform[2]),
+    y: (y - transform[1]) * (1 / transform[2]),
   };
+
+  if (snapToGrid) {
+    const transformedGridSizeX = snapGrid[0] * transform[2];
+    const transformedGridSizeY = snapGrid[1] * transform[2];
+
+    position = {
+      x: transformedGridSizeX * Math.round(position.x / transformedGridSizeX),
+      y: transformedGridSizeY * Math.round(position.y / transformedGridSizeY),
+    };
+  }
+
+  return position;
 };
 
 export const parseElement = (
   element: Node | Edge,
-  transform: Transform = [0, 0, 1]
+  transform: Transform,
+  snapToGrid: boolean,
+  snapGrid: [number, number]
 ): Node | Edge => {
   if (!element.id) {
     throw new Error('All elements (nodes and edges) need to have an id.');
@@ -99,7 +112,12 @@ export const parseElement = (
     id: nodeElement.id.toString(),
     type: nodeElement.type || 'default',
     __rg: {
-      position: pointToRendererPoint(nodeElement.position, transform),
+      position: pointToRendererPoint(
+        nodeElement.position,
+        transform,
+        snapToGrid,
+        snapGrid
+      ),
       width: null,
       height: null,
       handleBounds: {},