[FEAT] First functional version.

partitions/src/lib/components/PdfViewer.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import * as pdfjsLib from 'pdfjs-dist';
+	import { api } from '$lib/api';
+
+	pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';
+
+	interface Props {
+		pdfUrl: string;
+		title?: string;
+		key?: string;
+	}
+
+	let { pdfUrl, title = 'Partition', key = '' }: Props = $props();
+
+	// Force re-render when key changes
+	$effect(() => {
+		if (key) {
+			loadPdf();
+		}
+	});
+
+	let canvas: HTMLCanvasElement;
+	let pdfDoc: pdfjsLib.PDFDocumentProxy | null = null;
+	let currentPage = $state(1);
+	let totalPages = $state(0);
+	let scale = $state(1.2);
+	let loading = $state(true);
+	let error = $state('');
+	let rendering = $state(false);
+
+	async function loadPdf() {
+		loading = true;
+		error = '';
+		try {
+			// Load PDF via axios to include auth token
+			const path = pdfUrl.split('/download/')[1];
+			const response = await api.get(`/download/${path}`, {
+				responseType: 'blob'
+			});
+			const blob = new Blob([response.data], { type: 'application/pdf' });
+			const url = URL.createObjectURL(blob);
+			
+			const loadingTask = pdfjsLib.getDocument(url);
+			pdfDoc = await loadingTask.promise;
+			totalPages = pdfDoc.numPages;
+			await renderPage(currentPage);
+		} catch (err) {
+			console.error('Error loading PDF:', err);
+			error = 'Erreur lors du chargement du PDF';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function renderPage(pageNum: number) {
+		if (!pdfDoc || rendering) return;
+		rendering = true;
+
+		try {
+			const page = await pdfDoc.getPage(pageNum);
+			const viewport = page.getViewport({ scale });
+			const context = canvas.getContext('2d');
+
+			if (!context) return;
+
+			canvas.height = viewport.height;
+			canvas.width = viewport.width;
+
+			await page.render({
+				canvasContext: context,
+				viewport
+			}).promise;
+		} catch (err) {
+			console.error('Error rendering page:', err);
+		} finally {
+			rendering = false;
+		}
+	}
+
+	function prevPage() {
+		if (currentPage > 1) {
+			currentPage--;
+			renderPage(currentPage);
+		}
+	}
+
+	function nextPage() {
+		if (currentPage < totalPages) {
+			currentPage++;
+			renderPage(currentPage);
+		}
+	}
+
+	function zoomIn() {
+		scale = Math.min(scale + 0.2, 3);
+		renderPage(currentPage);
+	}
+
+	function zoomOut() {
+		scale = Math.max(scale - 0.2, 0.5);
+		renderPage(currentPage);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+			prevPage();
+		} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+			nextPage();
+		}
+	}
+
+	onMount(() => {
+		loadPdf();
+		window.addEventListener('keydown', handleKeydown);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', handleKeydown);
+		if (pdfDoc) {
+			pdfDoc.destroy();
+		}
+	});
+
+	$effect(() => {
+		if (pdfUrl) {
+			loadPdf();
+		}
+	});
+</script>
+
+<div class="flex flex-col h-full">
+	<div class="bg-ohmj-dark text-white px-4 py-2 flex items-center justify-between">
+		<div class="flex items-center gap-2">
+			<span class="font-semibold">{title}</span>
+			{#if totalPages > 0}
+				<span class="text-gray-400">| Page {currentPage} / {totalPages}</span>
+			{/if}
+		</div>
+		<div class="flex items-center gap-2">
+			<button
+				onclick={zoomOut}
+				class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"
+				title="Zoom -"
+			>
+				➖
+			</button>
+			<span class="text-sm w-16 text-center">{Math.round(scale * 100)}%</span>
+			<button
+				onclick={zoomIn}
+				class="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"
+				title="Zoom +"
+			>
+				➕
+			</button>
+		</div>
+	</div>
+
+	<div class="flex-1 overflow-auto bg-gray-800 flex items-start justify-center p-4">
+		{#if loading}
+			<div class="text-white">
+				<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
+				<p>Chargement du PDF...</p>
+			</div>
+		{:else if error}
+			<div class="text-red-400 text-center">
+				<p class="text-xl mb-2">⚠️</p>
+				<p>{error}</p>
+			</div>
+		{:else}
+			<canvas bind:this={canvas} class="shadow-2xl"></canvas>
+		{/if}
+	</div>
+
+	<div class="bg-ohmj-dark text-white px-4 py-3 flex items-center justify-center gap-4">
+		<button
+			onclick={prevPage}
+			disabled={currentPage <= 1}
+			class="px-4 py-2 bg-ohmj-primary hover:bg-ohmj-secondary disabled:opacity-50 disabled:cursor-not-allowed rounded transition-colors"
+		>
+			◀ Précédent
+		</button>
+		
+		<div class="flex gap-1">
+			{#each Array(Math.min(5, totalPages)) as _, i}
+				{@const pageNum = Math.max(1, Math.min(currentPage - 2, totalPages - 4)) + i}
+				{#if pageNum <= totalPages}
+					<button
+						onclick={() => { currentPage = pageNum; renderPage(pageNum); }}
+						class="w-8 h-8 rounded {currentPage === pageNum ? 'bg-ohmj-secondary text-ohmj-dark font-bold' : 'bg-gray-700 hover:bg-gray-600'}"
+					>
+						{pageNum}
+					</button>
+				{/if}
+			{/each}
+		</div>
+
+		<button
+			onclick={nextPage}
+			disabled={currentPage >= totalPages}
+			class="px-4 py-2 bg-ohmj-primary hover:bg-ohmj-secondary disabled:opacity-50 disabled:cursor-not-allowed rounded transition-colors"
+		>
+			Suivant ▶
+		</button>
+	</div>
+</div>