feat(autolayout): add snap-to-grid support (#3031)

* feat(autolayout): add snap-to-grid support

* fix(autolayout): recalculate dimensions after grid snapping

* fix(autolayout): correct dimension calculation and propagate gridSize

Author: waleedlatif1

apps/sim/app/api/workflows/[id]/autolayout/route.ts

@@ -35,8 +35,7 @@ const AutoLayoutRequestSchema = z.object({
     })
     .optional()
     .default({}),
-  // Optional: if provided, use these blocks instead of loading from DB
-  // This allows using blocks with live measurements from the UI
+  gridSize: z.number().min(0).max(50).optional(),
   blocks: z.record(z.any()).optional(),
   edges: z.array(z.any()).optional(),
   loops: z.record(z.any()).optional(),
@@ -53,7 +52,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
   const { id: workflowId } = await params
 
   try {
-    // Get the session
     const session = await getSession()
     if (!session?.user?.id) {
       logger.warn(`[${requestId}] Unauthorized autolayout attempt for workflow ${workflowId}`)
@@ -62,15 +60,13 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
 
     const userId = session.user.id
 
-    // Parse request body
     const body = await request.json()
     const layoutOptions = AutoLayoutRequestSchema.parse(body)
 
     logger.info(`[${requestId}] Processing autolayout request for workflow ${workflowId}`, {
       userId,
     })
 
-    // Fetch the workflow to check ownership/access
     const accessContext = await getWorkflowAccessContext(workflowId, userId)
     const workflowData = accessContext?.workflow
 
@@ -79,7 +75,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Workflow not found' }, { status: 404 })
     }
 
-    // Check if user has permission to update this workflow
     const canUpdate =
       accessContext?.isOwner ||
       (workflowData.workspaceId
@@ -94,8 +89,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
-    // Use provided blocks/edges if available (with live measurements from UI),
-    // otherwise load from database
     let currentWorkflowData: NormalizedWorkflowData | null
 
     if (layoutOptions.blocks && layoutOptions.edges) {
@@ -125,6 +118,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
         y: layoutOptions.padding?.y ?? DEFAULT_LAYOUT_PADDING.y,
       },
       alignment: layoutOptions.alignment,
+      gridSize: layoutOptions.gridSize,
     }
 
     const layoutResult = applyAutoLayout(

apps/sim/app/api/yaml/autolayout/route.ts

@@ -34,6 +34,7 @@ export function layoutContainers(
       : DEFAULT_CONTAINER_HORIZONTAL_SPACING,
     verticalSpacing: options.verticalSpacing ?? DEFAULT_VERTICAL_SPACING,
     padding: { x: CONTAINER_PADDING_X, y: CONTAINER_PADDING_Y },
+    gridSize: options.gridSize,
   }
 
   for (const [parentId, childIds] of children.entries()) {
@@ -56,18 +57,15 @@ export function layoutContainers(
       continue
     }
 
-    // Use the shared core layout function with container options
     const { nodes, dimensions } = layoutBlocksCore(childBlocks, childEdges, {
       isContainer: true,
       layoutOptions: containerOptions,
     })
 
-    // Apply positions back to blocks
     for (const node of nodes.values()) {
       blocks[node.id].position = node.position
     }
 
-    // Update container dimensions
     const calculatedWidth = dimensions.width
     const calculatedHeight = dimensions.height