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

Compare commits

base: reudy-net:4ab0d95cad5af2f13391a065d6d37a18014c894d
Branches Tags
reudy-net:main
reudy-net:canvas-polish
reudy-net:add-page-plus
reudy-net:build-version
reudy-net:flat-pages-grid
reudy-net:sw-bypass-http-cache
reudy-net:zero-gap
reudy-net:fix-pdf-worker
reudy-net:docker
..
compare: reudy-net:2d415d88a3dd81ac46231d77b774e8f76b5d5cd3
Branches Tags
reudy-net:main
reudy-net:canvas-polish
reudy-net:add-page-plus
reudy-net:build-version
reudy-net:flat-pages-grid
reudy-net:sw-bypass-http-cache
reudy-net:zero-gap
reudy-net:fix-pdf-worker
reudy-net:docker

No commits in common. "4ab0d95cad5af2f13391a065d6d37a18014c894d" and "2d415d88a3dd81ac46231d77b774e8f76b5d5cd3" have entirely different histories.
4ab0d95cad ... 2d415d88a3

1 changed files with 51 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount, untrack } from 'svelte'; import { onMount, untrack } from 'svelte';
import CirclePlusIcon from '@lucide/svelte/icons/circle-plus';
import DownloadIcon from '@lucide/svelte/icons/download'; import DownloadIcon from '@lucide/svelte/icons/download';
import EllipsisIcon from '@lucide/svelte/icons/ellipsis'; import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'; import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
@ -118,18 +117,15 @@
return rectBeside(a, slot.dir, s); return rectBeside(a, slot.dir, s);
} }
/** The add-page button: a 24 px circle centred on the anchor's free edge, 6 px out. */ /** Hit area of the add-page bar: a strip hugging the anchor's free edge. */
function plusRect(slot: Slot): Rect | null { function barRect(slot: Slot): Rect | null {
const a = doc.rectOf(slot.anchor); const a = doc.rectOf(slot.anchor);
if (!a) return null; if (!a) return null;
const d = 24 / viewport.scale; const t = 20 / viewport.scale;
const gap = 6 / viewport.scale; if (slot.dir === 'right') return { x: a.x + a.width, y: a.y, width: t, height: a.height };
const cx = a.x + (a.width - d) / 2; if (slot.dir === 'left') return { x: a.x - t, y: a.y, width: t, height: a.height };
const cy = a.y + (a.height - d) / 2; if (slot.dir === 'down') return { x: a.x, y: a.y + a.height, width: a.width, height: t };
if (slot.dir === 'right') return { x: a.x + a.width + gap, y: cy, width: d, height: d }; return { x: a.x, y: a.y - t, width: a.width, height: t };
if (slot.dir === 'left') return { x: a.x - gap - d, y: cy, width: d, height: d };
if (slot.dir === 'down') return { x: cx, y: a.y + a.height + gap, width: d, height: d };
return { x: cx, y: a.y - gap - d, width: d, height: d };
} }
/** Run a tree change without the anchor page jumping on screen. */ /** Run a tree change without the anchor page jumping on screen. */
@ -295,10 +291,10 @@
// Fingers ink only when enabled and no pen has been used; otherwise they pan/zoom. // Fingers ink only when enabled and no pen has been used; otherwise they pan/zoom.
const fingerInks = tools.inking && settings.data.fingerDraw && !palm.penSeen; const fingerInks = tools.inking && settings.data.fingerDraw && !palm.penSeen;
// Taps on an add-page button get the same palm policy as writing. // Taps on an add-page bar get the same palm policy as writing.
const plus = target.closest<HTMLElement>('.ghost'); const bar = target.closest<HTMLElement>('.ghost');
if (e.pointerType === 'touch') { if (e.pointerType === 'touch') {
const decision = palm.evaluate(e, fingerInks || plus ? 'draw' : 'navigate'); const decision = palm.evaluate(e, fingerInks || bar ? 'draw' : 'navigate');
if (!decision.accept) return; // palm: ignore entirely if (!decision.accept) return; // palm: ignore entirely
touches.set(e.pointerId, p); touches.set(e.pointerId, p);
if (touches.size >= 2) { if (touches.size >= 2) {
@ -309,9 +305,9 @@
} }
} }
if (plus && e.button === 0) { if (bar && e.button === 0) {
e.preventDefault(); e.preventDefault();
const slot = { anchor: plus.dataset.anchor!, dir: plus.dataset.dir as Dir }; const slot = { anchor: bar.dataset.anchor!, dir: bar.dataset.dir as Dir };
gesture = { kind: 'add', pointerId: e.pointerId, pointerType: e.pointerType, startX: p.x, startY: p.y, slot }; gesture = { kind: 'add', pointerId: e.pointerId, pointerType: e.pointerType, startX: p.x, startY: p.y, slot };
capture(e.pointerId); capture(e.pointerId);
return; return;
@ -401,7 +397,7 @@
} }
if (gesture.kind === 'add') { if (gesture.kind === 'add') {
// Dragging off the button is not a tap. // Dragging off the bar is not a tap.
if (Math.hypot(p.x - gesture.startX, p.y - gesture.startY) > 12) gesture = null; if (Math.hypot(p.x - gesture.startX, p.y - gesture.startY) > 12) gesture = null;
return; return;
} }
@ -597,7 +593,7 @@
{/each} {/each}
{#each ghostSlots as slot (slot.anchor + slot.dir)} {#each ghostSlots as slot (slot.anchor + slot.dir)}
{@const r = plusRect(slot)} {@const r = barRect(slot)}
{#if r} {#if r}
<!-- Pointer taps go through the palm-checked gesture; onclick only serves the keyboard. --> <!-- Pointer taps go through the palm-checked gesture; onclick only serves the keyboard. -->
<button <button
@ -607,9 +603,7 @@
style="left:{r.x}px; top:{r.y}px; width:{r.width}px; height:{r.height}px" style="left:{r.x}px; top:{r.y}px; width:{r.width}px; height:{r.height}px"
title="Add page ({slot.dir})" title="Add page ({slot.dir})"
onclick={(e) => e.detail === 0 && addPage(slot.anchor, slot.dir)} onclick={(e) => e.detail === 0 && addPage(slot.anchor, slot.dir)}
> ></button>
<CirclePlusIcon size="100%" strokeWidth={1.5} />
</button>
{/if} {/if}
{/each} {/each}
@ -732,18 +726,46 @@
} }
.ghost { .ghost {
position: absolute; position: absolute;
display: grid; background: none;
background: var(--bg-canvas);
border: 0; border: 0;
border-radius: 50%;
padding: 0; padding: 0;
color: var(--faint);
cursor: pointer; cursor: pointer;
transition: color 0.12s;
} }
.ghost:hover, /* The visible bar: 4 screen px thick, 6 px off the page edge. */
.ghost:focus-visible { .ghost::before {
color: var(--accent); content: '';
position: absolute;
background: var(--ghost-border);
border-radius: calc(2px / var(--s));
transition: background 0.12s;
}
.ghost[data-dir='left']::before,
.ghost[data-dir='right']::before {
top: 0;
bottom: 0;
width: calc(4px / var(--s));
}
.ghost[data-dir='up']::before,
.ghost[data-dir='down']::before {
left: 0;
right: 0;
height: calc(4px / var(--s));
}
.ghost[data-dir='right']::before {
left: calc(6px / var(--s));
}
.ghost[data-dir='left']::before {
right: calc(6px / var(--s));
}
.ghost[data-dir='down']::before {
top: calc(6px / var(--s));
}
.ghost[data-dir='up']::before {
bottom: calc(6px / var(--s));
}
.ghost:hover::before,
.ghost:focus-visible::before {
background: var(--accent);
} }
.slot { .slot {
position: absolute; position: absolute;