feat(snap): snap initial nodes to grid

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,14 +10,20 @@ 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);
   const setEdges = useStoreActions(a => a.setEdges);
 
   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: {},