refac

src/lib/components/common/PanzoomContainer.svelte

@@ -5,8 +5,8 @@
 	const defaultOpts: PanZoomOptions = {
 		bounds: true,
 		boundsPadding: 0.1,
-		zoomSpeed: 0.18,
+		pinchSpeed: 3.5,
-		pinchSpeed: 3.5
+		beforeWheel: () => true
 	};
 
 	export let className = '';
@@ -20,6 +20,27 @@
 		zoomLevel = instance?.getTransform().scale ?? 1;
 	};
 
+	const handleWheel = (e: WheelEvent) => {
+		if (!instance || !containerElement) return;
+
+		if (!e.ctrlKey && !e.metaKey) {
+			const transform = instance.getTransform();
+			if (Math.abs(transform.scale - 1) < 0.01) return;
+			if (Math.abs(e.deltaY) >= Math.abs(e.deltaX)) return;
+
+			e.preventDefault();
+			instance.moveBy(-e.deltaX, -e.deltaY);
+			updateZoomLevel();
+			return;
+		}
+
+		e.preventDefault();
+
+		const rect = containerElement.getBoundingClientRect();
+		instance.zoomTo(e.clientX - rect.left, e.clientY - rect.top, Math.exp(-e.deltaY * 0.002));
+		updateZoomLevel();
+	};
+
 	const center = () => ({
 		x: containerElement?.clientWidth ? containerElement.clientWidth / 2 : 0,
 		y: containerElement?.clientHeight ? containerElement.clientHeight / 2 : 0
@@ -56,6 +77,6 @@
 	});
 </script>
 
-<div bind:this={containerElement} class={className}>
+<div bind:this={containerElement} class={className} on:wheel|nonpassive={handleWheel}>
 	<slot />
 </div>

src/lib/components/common/PptxPreview.svelte

@@ -68,7 +68,7 @@
 		pzInstance = panzoom(sceneEl, {
 			bounds: true,
 			boundsPadding: 0.1,
-			zoomSpeed: 0.065,
+			pinchSpeed: 3.5,
 			filterKey: (e?: KeyboardEvent) => !!e && slideShortcutKeys.includes(e.key),
 			beforeWheel: () => true,
 			beforeMouseDown: () => {
@@ -144,8 +144,31 @@
 	};
 
 	const handleStageWheel = (e: WheelEvent) => {
+		if (e.ctrlKey || e.metaKey) {
+			if (!pzInstance || !sceneEl) return;
+
+			e.preventDefault();
+
+			const rect = sceneEl.getBoundingClientRect();
+			pzInstance.zoomTo(e.clientX - rect.left, e.clientY - rect.top, Math.exp(-e.deltaY * 0.002));
+			zoomLevel = pzInstance.getTransform().scale;
+			return;
+		}
+
+		const transform = pzInstance?.getTransform();
+		if (
+			transform &&
+			Math.abs(transform.scale - 1) >= 0.01 &&
+			Math.abs(e.deltaX) > Math.abs(e.deltaY)
+		) {
+			e.preventDefault();
+			pzInstance?.moveBy(-e.deltaX, -e.deltaY);
+			zoomLevel = pzInstance?.getTransform().scale ?? 1;
+			return;
+		}
+
 		e.preventDefault();
-		if (e.ctrlKey || e.metaKey || slides.length <= 1) return;
+		if (slides.length <= 1) return;
 
 		const multiplier = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? stageEl.clientHeight : 1;
 		const dominantDelta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;