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

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
agent 2026-09-27 17:34:28 +00:00
parent 4acb3a614c
commit 138b797506
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;
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;