From 138b7975061671224049842e1591467ded2e72fc Mon Sep 17 00:00:00 2001 From: agent Date: Sun, 27 Sep 2026 17:34:28 +0000 Subject: [PATCH] Size the canvas grid to the active page Each grid cell is now the active page's size, aligned to its edges, so the grid marks where neighbouring pages would sit. Falls back to A4 at the origin when no page is active. Co-Authored-By: Claude Opus 5.5 --- src/lib/components/CanvasView.svelte | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/lib/components/CanvasView.svelte b/src/lib/components/CanvasView.svelte index d401e9b..0cfdd1f 100644 --- a/src/lib/components/CanvasView.svelte +++ b/src/lib/components/CanvasView.svelte @@ -28,11 +28,11 @@ let stage: HTMLDivElement; const cssVars = pageCssVars(); - // Background grid: world-anchored, stepping up ×4 when zoomed out so lines never get denser than ~12px. - const gridStep = $derived.by(() => { - let step = 24 * viewport.scale; - while (step < 12) step *= 4; - return step; + // Background grid: one cell per active page, aligned to its edges (A4 at the origin if none). + const grid = $derived.by(() => { + const r = (doc.activeId && doc.rects.get(doc.activeId)) || { x: 0, y: 0, ...A4 }; + const s = viewport.scale; + return { w: r.width * s, h: r.height * s, x: viewport.x + r.x * s, y: viewport.y + r.y * s }; }); // ---- autosave -------------------------------------------------------- @@ -529,7 +529,7 @@ class:panning class:erasing={tools.tool === 'eraser'} bind:this={stage} - style="--grid: {gridStep}px; background-position: {viewport.x}px {viewport.y}px" + style="background-size: {grid.w}px {grid.h}px; background-position: {grid.x}px {grid.y}px" onpointerdown={onPointerDown} onpointermove={onPointerMove} onpointerup={onPointerUp} @@ -672,7 +672,6 @@ background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); - background-size: var(--grid) var(--grid); } .stage :global(.cm-content) { user-select: text; -- 2.51.2