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

Merge pull request 'Replace page glow with a flat outline and add a canvas grid' (#6) from agent/flat-pages-grid into main

Browse source 
Reviewed-on: #6
This commit is contained in:
reudy 2026-09-27 19:29:27 +02:00
commit 5553e89b1b
3 changed files with 19 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -59,7 +59,8 @@
--success: #2f9e5c; --success: #2f9e5c;
--warn: #d9901b; --warn: #d9901b;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
--page-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); --page-line: rgba(0, 0, 0, 0.18);
--grid-line: rgba(0, 0, 0, 0.05);
--ghost: rgba(0, 0, 0, 0.045); --ghost: rgba(0, 0, 0, 0.045);
--ghost-border: rgba(0, 0, 0, 0.12); --ghost-border: rgba(0, 0, 0, 0.12);
--radius: 6px; --radius: 6px;
@ -85,7 +86,8 @@
--success: #44cf6e; --success: #44cf6e;
--warn: #e9973f; --warn: #e9973f;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
--page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.5); --page-line: rgba(255, 255, 255, 0.16);
--grid-line: rgba(255, 255, 255, 0.04);
--ghost: rgba(255, 255, 255, 0.04); --ghost: rgba(255, 255, 255, 0.04);
--ghost-border: rgba(255, 255, 255, 0.14); --ghost-border: rgba(255, 255, 255, 0.14);
color-scheme: dark; color-scheme: dark;

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

@ -28,6 +28,13 @@
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.
const gridStep = $derived.by(() => {
let step = 24 * viewport.scale;
while (step < 12) step *= 4;
return step;
});
// ---- autosave -------------------------------------------------------- // ---- autosave --------------------------------------------------------
$effect(() => { $effect(() => {
if (doc.version > 0) untrack(() => workspace.scheduleSave()); if (doc.version > 0) untrack(() => workspace.scheduleSave());
@ -522,6 +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"
onpointerdown={onPointerDown} onpointerdown={onPointerDown}
onpointermove={onPointerMove} onpointermove={onPointerMove}
onpointerup={onPointerUp} onpointerup={onPointerUp}
@ -660,7 +668,11 @@
touch-action: none; touch-action: none;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
background: var(--bg-canvas); background-color: var(--bg-canvas);
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) { .stage :global(.cm-content) {
user-select: text; user-select: text;

3
src/lib/components/PageView.svelte
View file

@ -49,7 +49,8 @@
inset: 0; inset: 0;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
box-shadow: var(--page-shadow); /* Crisp 1 screen-px outline, no blur. */
box-shadow: 0 0 0 calc(1px / var(--s)) var(--page-line);
} }
.paper.invert { .paper.invert {
filter: invert(0.88) hue-rotate(180deg); filter: invert(0.88) hue-rotate(180deg);