feat(snap): snap initial nodes to grid

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: {},