refac

src/lib/components/common/PptxPreview.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { onDestroy, onMount, tick } from 'svelte';
 	import panzoom, { type PanZoom } from 'panzoom';
+	import { clampDocumentTargetPage } from '$lib/utils/documentPreview';
 
 	export let slides: string[] = [];
 	export let currentSlide = 0;
 	export let className = '';
+	export let targetPage: number | null = null;
 
 	let rootEl: HTMLDivElement;
 	let stageEl: HTMLElement;
@@ -22,6 +24,8 @@
 	let wheelDelta = 0;
 	let lastWheelNavigationAt = 0;
 	let lastScrolledSlide = -1;
+	let appliedTargetPage: number | null = null;
+	let appliedTargetSlides: string[] | null = null;
 	let thumbnailButtons: Array<HTMLButtonElement | undefined> = [];
 	const slideShortcutKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 	const wheelNavigationThreshold = 80;
@@ -158,7 +162,7 @@
 		const transform = pzInstance?.getTransform();
 		if (transform && Math.abs(transform.scale - 1) >= 0.01) {
 			e.preventDefault();
-			pzInstance?.moveBy(-e.deltaX, -e.deltaY);
+			pzInstance?.moveBy(-e.deltaX, -e.deltaY, false);
 			zoomLevel = pzInstance?.getTransform().scale ?? 1;
 			return;
 		}
@@ -203,6 +207,18 @@
 		void tick().then(scrollSelectedThumbnailIntoView);
 	}
 
+	$: if (
+		mounted &&
+		targetPage &&
+		slides.length > 0 &&
+		(targetPage !== appliedTargetPage || slides !== appliedTargetSlides)
+	) {
+		appliedTargetPage = targetPage;
+		appliedTargetSlides = slides;
+		const page = clampDocumentTargetPage(targetPage, slides.length);
+		if (page) selectSlide(page - 1);
+	}
+
 	onDestroy(() => {
 		pzInstance?.dispose();
 		resizeObserver?.disconnect();