Init

src/lib/components/PdfBackground.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { loadSource, renderPage } from '$lib/pdf/render';
+	import { vault } from '$lib/storage/vault.svelte';
+	import type { Origin } from '$lib/model/types';
+
+	interface Props {
+		origin: Origin;
+		width: number;
+		height: number;
+		/** Current zoom (screen px per PDF point). */
+		scale: number;
+	}
+
+	let { origin, width, height, scale }: Props = $props();
+	let canvas: HTMLCanvasElement;
+	let failed = $state(false);
+
+	// Render at a stepped resolution so zooming doesn't re-render constantly.
+	const STEPS = [0.25, 0.5, 1, 1.5, 2, 3, 4];
+	const MAX_PIXELS = 12_000_000;
+	const resolution = $derived.by(() => {
+		const want = scale * (window.devicePixelRatio || 1);
+		const step = STEPS.find((s) => s >= want) ?? STEPS[STEPS.length - 1];
+		const cap = Math.sqrt(MAX_PIXELS / (width * height));
+		return Math.min(step, cap);
+	});
+
+	$effect(() => {
+		const res = resolution;
+		const { sourceId, pageIndex } = origin;
+		let job: ReturnType<typeof renderPage> | null = null;
+		let cancelled = false;
+		const timer = setTimeout(async () => {
+			try {
+				const doc = await loadSource(sourceId, () => vault.getSource(sourceId));
+				if (cancelled) return;
+				job = renderPage(doc, pageIndex, canvas, res);
+				failed = false;
+			} catch {
+				failed = true;
+			}
+		}, 120);
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+			job?.cancel();
+		};
+	});
+</script>
+
+<canvas bind:this={canvas} class="bg" class:failed></canvas>
+{#if failed}
+	<div class="missing">Source PDF “{origin.name}” is not available</div>
+{/if}
+
+<style>
+	.bg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.missing {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: #999;
+		font-size: 12px;
+	}
+</style>