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;
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;