reudy-net/Papure
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Size the canvas grid to the active page #7

Merged
reudy merged 1 commit from agent/flat-pages-grid into main 2026-09-27 19:48:18 +02:00 AGit
Conversation 0 Commits 1 Files changed 1 +6 -7
1 changed files with 6 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/lib/components/CanvasView.svelte
View file

@ -28,11 +28,11 @@
let stage: HTMLDivElement; let stage: HTMLDivElement;
const cssVars = pageCssVars(); const cssVars = pageCssVars();
// Background grid: world-anchored, stepping up ×4 when zoomed out so lines never get denser than ~12px. // Background grid: one cell per active page, aligned to its edges (A4 at the origin if none).
const gridStep = $derived.by(() => { const grid = $derived.by(() => {
let step = 24 * viewport.scale; const r = (doc.activeId && doc.rects.get(doc.activeId)) || { x: 0, y: 0, ...A4 };
while (step < 12) step *= 4; const s = viewport.scale;
return step; return { w: r.width * s, h: r.height * s, x: viewport.x + r.x * s, y: viewport.y + r.y * s };
}); });
// ---- autosave -------------------------------------------------------- // ---- autosave --------------------------------------------------------
@ -529,7 +529,7 @@
class:panning class:panning
class:erasing={tools.tool === 'eraser'} class:erasing={tools.tool === 'eraser'}
bind:this={stage} 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} onpointerdown={onPointerDown}
onpointermove={onPointerMove} onpointermove={onPointerMove}
onpointerup={onPointerUp} onpointerup={onPointerUp}
@ -672,7 +672,6 @@
background-image: background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, 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) { .stage :global(.cm-content) {
user-select: text; user-select: text;