From af57b4e530217b7be64fee11d4ffae26ca331279 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 24 Mar 2026 11:26:25 +0100 Subject: [PATCH] =?UTF-8?q?feat(annotations):=20add=20hover=20effect=20?= =?UTF-8?q?=E2=80=94=20increased=20opacity=20and=20inset=20border=20on=20h?= =?UTF-8?q?over?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/components/AnnotationLayer.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte index 316e649a..e4c911c2 100644 --- a/frontend/src/lib/components/AnnotationLayer.svelte +++ b/frontend/src/lib/components/AnnotationLayer.svelte @@ -100,6 +100,8 @@ function handlePointerUp(event: PointerEvent) { drawRect = null; } +let hoveredId = $state(null); + const containerStyle = $derived( `position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}` ); @@ -120,14 +122,18 @@ const containerStyle = $derived( tabindex="0" onclick={() => onAnnotationClick?.(annotation.id)} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }} + onmouseenter={() => (hoveredId = annotation.id)} + onmouseleave={() => (hoveredId = null)} style=" position: absolute; left: {annotation.x * 100}%; top: {annotation.y * 100}%; width: {annotation.width * 100}%; height: {annotation.height * 100}%; - background-color: {hexToRgba(annotation.color, 0.3)}; + background-color: {hexToRgba(annotation.color, hoveredId === annotation.id ? 0.5 : 0.3)}; + box-shadow: {hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'}; pointer-events: auto; + transition: background-color 0.15s ease, box-shadow 0.15s ease; {onAnnotationClick && !canAnnotate ? 'cursor: pointer;' : ''} " >