familienarchiv/frontend/src/lib/components/AnnotationLayer.svelte

<script lang="ts">
type Annotation = {
	id: string;
	documentId: string;
	pageNumber: number;
	x: number;
	y: number;
	width: number;
	height: number;
	color: string;
	createdAt: string;
};

type DrawRect = {
	x: number;
	y: number;
	width: number;
	height: number;
};

let {
	annotations = [],
	canAnnotate,
	color,
	onDraw,
	onDelete
}: {
	annotations: Annotation[];
	canAnnotate: boolean;
	color: string;
	onDraw: (rect: { x: number; y: number; width: number; height: number }) => void;
	onDelete: (id: string) => void;
} = $props();

let drawStart = $state<{ x: number; y: number } | null>(null);
let drawRect = $state<DrawRect | null>(null);

function getNormalizedCoords(event: PointerEvent, element: HTMLElement): { x: number; y: number } {
	const rect = element.getBoundingClientRect();
	return {
		x: (event.clientX - rect.left) / rect.width,
		y: (event.clientY - rect.top) / rect.height
	};
}

function handlePointerDown(event: PointerEvent) {
	if (!canAnnotate) return;

	if ((event.target as HTMLElement).closest('[data-annotation]')) return;

	const container = event.currentTarget as HTMLElement;
	container.setPointerCapture(event.pointerId);

	const coords = getNormalizedCoords(event, container);
	drawStart = coords;
	drawRect = { x: coords.x, y: coords.y, width: 0, height: 0 };
}

function handlePointerMove(event: PointerEvent) {
	if (!canAnnotate || !drawStart) return;

	const container = event.currentTarget as HTMLElement;
	const coords = getNormalizedCoords(event, container);

	const x = Math.min(drawStart.x, coords.x);
	const y = Math.min(drawStart.y, coords.y);
	const width = Math.abs(coords.x - drawStart.x);
	const height = Math.abs(coords.y - drawStart.y);

	drawRect = { x, y, width, height };
}

function handlePointerUp(event: PointerEvent) {
	if (!canAnnotate || !drawStart || !drawRect) return;

	const container = event.currentTarget as HTMLElement;
	const coords = getNormalizedCoords(event, container);

	const x = Math.min(drawStart.x, coords.x);
	const y = Math.min(drawStart.y, coords.y);
	const width = Math.abs(coords.x - drawStart.x);
	const height = Math.abs(coords.y - drawStart.y);

	if (width > 0.01 && height > 0.01) {
		onDraw({ x, y, width, height });
	}

	drawStart = null;
	drawRect = null;
}

const containerStyle = $derived(
	`position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}`
);
</script>

<div
	style={containerStyle}
	role="presentation"
	onpointerdown={handlePointerDown}
	onpointermove={handlePointerMove}
	onpointerup={handlePointerUp}
>
	{#each annotations as annotation (annotation.id)}
		<div
			data-testid="annotation-{annotation.id}"
			data-annotation
			style="
				position: absolute;
				left: {annotation.x * 100}%;
				top: {annotation.y * 100}%;
				width: {annotation.width * 100}%;
				height: {annotation.height * 100}%;
				background-color: {annotation.color};
				opacity: 0.3;
				pointer-events: {canAnnotate ? 'auto' : 'none'};
			"
		>
			{#if canAnnotate}
				<button
					aria-label="Annotation löschen"
					onclick={(e) => {
						e.stopPropagation();
						onDelete(annotation.id);
					}}
					style="
						position: absolute;
						top: -8px;
						right: -8px;
						width: 16px;
						height: 16px;
						background-color: #ef4444;
						color: white;
						border: none;
						border-radius: 50%;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						line-height: 1;
						padding: 0;
						pointer-events: auto;
					">×</button
				>
			{/if}
		</div>
	{/each}

	{#if drawRect && drawRect.width > 0}
		<div
			style="
				position: absolute;
				left: {drawRect.x * 100}%;
				top: {drawRect.y * 100}%;
				width: {drawRect.width * 100}%;
				height: {drawRect.height * 100}%;
				border: 2px dashed {color};
				opacity: 0.3;
				pointer-events: none;
			"
		></div>
	{/if}
</div>