marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(annotation): add dimmed prop to AnnotationLayer

Browse Source 
Hides block number badges and disables hover/active visual feedback
when dimmed=true. Click handlers remain active for scroll-sync.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-07 11:07:23 +02:00
parent 3279342ea7
commit d070ae2612
2 changed files with 73 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/AnnotationLayer.svelte
View File

@@ -14,6 +14,7 @@ let {
color,
blockNumbers = {},
activeAnnotationId = null,
dimmed = false,
onDraw,
onAnnotationClick
}: {
@@ -22,6 +23,7 @@ let {
color: string;
blockNumbers?: Record<string, number>;
activeAnnotationId?: string | null;
dimmed?: boolean;
onDraw: (rect: DrawRect) => void;
onAnnotationClick?: (id: string) => void;
} = $props();
@@ -123,15 +125,15 @@ const containerStyle = $derived(
top: {annotation.y * 100}%;
width: {annotation.width * 100}%;
height: {annotation.height * 100}%;
background-color: {hexToRgba(annotation.color, hoveredId === annotation.id || annotation.id === activeAnnotationId ? 0.5 : 0.3)};
box-shadow: {annotation.id === activeAnnotationId ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none'};
opacity: {activeAnnotationId && annotation.id !== activeAnnotationId ? 0.3 : 1};
background-color: {hexToRgba(annotation.color, dimmed ? 0.3 : (hoveredId === annotation.id || annotation.id === activeAnnotationId ? 0.5 : 0.3))};
box-shadow: {dimmed ? 'none' : (annotation.id === activeAnnotationId ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : hoveredId === annotation.id ? `inset 0 0 0 2px ${hexToRgba(annotation.color, 0.8)}` : 'none')};
opacity: {dimmed ? 1 : (activeAnnotationId && annotation.id !== activeAnnotationId ? 0.3 : 1)};
pointer-events: auto;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
"
>
{#if blockNumbers[annotation.id]}
{#if !dimmed && blockNumbers[annotation.id]}
<div
style="
position: absolute;