feat(annotations): resize and move annotations in document view #235

Merged
marcel merged 25 commits from feat/issue-233-annotation-resize-move into main 2026-04-14 14:55:28 +02:00
Showing only changes of commit 7097f991fe - Show all commits

View File

@@ -226,6 +226,17 @@ function handleKeyDown(event: KeyboardEvent): void {
}, 300);
}
const directionLabels: Record<HandleId, string> = {
nw: 'NW',
ne: 'NE',
sw: 'SW',
se: 'SE',
n: 'N',
s: 'S',
e: 'E',
w: 'W'
};
// Preview rect in pixel space (maps live normalized coords back to SVG pixel coordinates).
// Shown during pointer drag and during keyboard nudging (whenever live coords differ from stored).
let previewX = $derived(((liveX - annotation.x) / annotation.width) * svgWidth);
@@ -298,10 +309,15 @@ let hasLiveChanges = $derived(
{#each handles as handle (handle.id)}
<g
data-handle={handle.id}
role="none"
role="button"
tabindex="0"
aria-label={m.annotation_resize_handle({ direction: directionLabels[handle.id] })}
transform="translate({handle.cx}, {handle.cy})"
style="cursor: {handle.cursor}; pointer-events: all;"
onpointerdown={(e) => handlePointerDown(e, 'handle', handle.id)}
onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') e.preventDefault();
}}
>
<rect data-handle-hit x="-22" y="-22" width="44" height="44" fill="transparent" />
<path d={handle.path} fill="none" stroke="#002850" stroke-width="2" stroke-linecap="square" />