From 7c8741ef3665d7af79401dec342405b071329c9d Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Sat, 7 Mar 2026 00:26:58 +0100
Subject: [PATCH] gird

---
 src/App.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2952814..614a8b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,6 +32,12 @@ import { Moon, Sun } from 'lucide-react'
 // Generate short unique node ids when missing
 const genId = () => `node_${Math.random().toString(36).slice(2, 9)}`
 
+const SNAP_GRID: [number, number] = [15, 15]
+const snapToGrid = (x: number, y: number): { x: number; y: number } => ({
+  x: Math.round(x / SNAP_GRID[0]) * SNAP_GRID[0],
+  y: Math.round(y / SNAP_GRID[1]) * SNAP_GRID[1],
+})
+
 const initialNodes: Node[] = [
   {
     id: 'config-1',
@@ -107,6 +113,7 @@ export default function App() {
       } catch (e) {
         // ignore and use raw point
       }
+      position = snapToGrid(position.x, position.y)
 
       const id = genId()
       const typeMap: Record<string, Node['type']> = {
@@ -166,10 +173,12 @@ export default function App() {
                 onConnect={onConnect}
                 nodeTypes={nodeTypes}
                 colorMode={theme as ColorMode}
+                snapToGrid
+                snapGrid={SNAP_GRID}
                 fitView
                 onInit={onInit}
               >
-                <Background />
+                <Background variant="dots" gap={20} />
                 <Controls />
                 <MiniMap />
               </ReactFlow>