diff --git a/canvas/src/store/__tests__/canvas-events.test.ts b/canvas/src/store/__tests__/canvas-events.test.ts index b4867cd3..60b47256 100644 --- a/canvas/src/store/__tests__/canvas-events.test.ts +++ b/canvas/src/store/__tests__/canvas-events.test.ts @@ -192,7 +192,7 @@ describe("handleCanvasEvent – WORKSPACE_PROVISIONING", () => { const n = newNodes[0]; expect(n.id).toBe("ws-new"); expect(n.type).toBe("workspaceNode"); - expect(n.position).toEqual({ x: 0, y: 0 }); + expect(n.position).toEqual({ x: 100, y: 100 }); expect(n.data.name).toBe("Brand New"); expect(n.data.tier).toBe(3); expect(n.data.status).toBe("provisioning"); diff --git a/canvas/src/store/canvas-events.ts b/canvas/src/store/canvas-events.ts index 81a3eb0e..a012a282 100644 --- a/canvas/src/store/canvas-events.ts +++ b/canvas/src/store/canvas-events.ts @@ -88,13 +88,15 @@ export function handleCanvasEvent( ), }); } else { - // Spread new nodes in a grid so they don't stack - const GRID_COL_WIDTH = 320; - const GRID_ROW_HEIGHT = 160; + // Spread new nodes in a grid so they don't stack at the viewport origin const GRID_COLS = 4; - const rootIndex = nodes.filter((n) => !n.data.parentId).length; - const x = (rootIndex % GRID_COLS) * GRID_COL_WIDTH; - const y = Math.floor(rootIndex / GRID_COLS) * GRID_ROW_HEIGHT; + const COL_SPACING = 320; + const ROW_SPACING = 160; + const GRID_ORIGIN_X = 100; + const GRID_ORIGIN_Y = 100; + const idx = nodes.length; + const x = GRID_ORIGIN_X + (idx % GRID_COLS) * COL_SPACING; + const y = GRID_ORIGIN_Y + Math.floor(idx / GRID_COLS) * ROW_SPACING; set({ nodes: [