@marianmeres/stuic 2.43.0 → 2.45.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -75,6 +75,8 @@
 		) => void;
 		/** optional "do not display file name" switch flag */
 		noName?: boolean;
+		/** When true (default), panning is clamped to keep image within bounds */
+		clampPan?: boolean;
 	}
 
 	export function getAssetIcon(ext?: string) {
@@ -181,6 +183,7 @@
 		classControls = "",
 		onDelete,
 		noName,
+		clampPan = false,
 	}: Props = $props();
 
 	let assets: AssetPreviewNormalized[] = $derived(
@@ -192,8 +195,18 @@
 
 	// Zoom state
 	const ZOOM_LEVELS = [1, 1.5, 2, 3, 4] as const;
+	const MIN_ZOOM = ZOOM_LEVELS[0];
+	const MAX_ZOOM = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
 	let zoomLevelIdx = $state(0);
-	let zoomLevel = $derived(ZOOM_LEVELS[zoomLevelIdx]);
+
+	// Pinch zoom state
+	let isPinching = $state(false);
+	let initialPinchDistance = 0;
+	let initialPinchZoom = 1;
+	let continuousZoom = $state(1);
+
+	// Use continuous zoom during pinch, discrete levels otherwise
+	let zoomLevel = $derived(isPinching ? continuousZoom : ZOOM_LEVELS[zoomLevelIdx]);
 
 	// Pan state
 	let isPanning = $state(false);
@@ -229,11 +242,22 @@
 		}
 	});
 
+	// Wheel zoom handler
+	function handleWheel(e: WheelEvent) {
+		e.preventDefault();
+		if (e.deltaY > 0) {
+			zoomOut();
+		} else {
+			zoomIn();
+		}
+	}
+
 	// Svelte action for pan event listeners - guaranteed to run when element is created
 	function pannable(node: HTMLImageElement) {
 		imgEl = node;
 		node.addEventListener("mousedown", panStart);
 		node.addEventListener("touchstart", panStart, { passive: false });
+		node.addEventListener("wheel", handleWheel, { passive: false });
 
 		document.addEventListener("mousemove", panMove);
 		document.addEventListener("mouseup", panEnd);
@@ -246,6 +270,7 @@
 				imgEl = null;
 				node.removeEventListener("mousedown", panStart);
 				node.removeEventListener("touchstart", panStart);
+				node.removeEventListener("wheel", handleWheel);
 				document.removeEventListener("mousemove", panMove);
 				document.removeEventListener("mouseup", panEnd);
 				document.removeEventListener("touchmove", panMove);
@@ -256,7 +281,7 @@
 	}
 
 	// Clamp pan values to keep image within bounds
-	function clampPan(newPanX: number, newPanY: number): { x: number; y: number } {
+	function getClampedPan(newPanX: number, newPanY: number): { x: number; y: number } {
 		if (!imgEl || !containerEl) return { x: newPanX, y: newPanY };
 
 		const imgRect = imgEl.getBoundingClientRect();
@@ -297,12 +322,45 @@
 
 	function resetZoom() {
 		zoomLevelIdx = 0;
+		continuousZoom = 1;
 		panX = 0;
 		panY = 0;
+		isPinching = false;
+	}
+
+	// Pinch zoom helpers
+	function getDistance(touch1: Touch, touch2: Touch): number {
+		const dx = touch1.clientX - touch2.clientX;
+		const dy = touch1.clientY - touch2.clientY;
+		return Math.hypot(dx, dy);
+	}
+
+	function findNearestZoomLevelIdx(zoom: number): number {
+		let nearestIdx = 0;
+		let minDiff = Math.abs(ZOOM_LEVELS[0] - zoom);
+		for (let i = 1; i < ZOOM_LEVELS.length; i++) {
+			const diff = Math.abs(ZOOM_LEVELS[i] - zoom);
+			if (diff < minDiff) {
+				minDiff = diff;
+				nearestIdx = i;
+			}
+		}
+		return nearestIdx;
 	}
 
 	// Pan/drag handlers
 	function panStart(e: MouseEvent | TouchEvent) {
+		// Detect two-finger pinch gesture
+		if ("touches" in e && e.touches.length === 2) {
+			e.preventDefault();
+			isPinching = true;
+			isPanning = false;
+			initialPinchDistance = getDistance(e.touches[0], e.touches[1]);
+			initialPinchZoom = continuousZoom;
+			return;
+		}
+
+		// Single-finger pan (only when zoomed in)
 		if (zoomLevel <= 1) return;
 		e.preventDefault();
 		isPanning = true;
@@ -317,6 +375,16 @@
 	}
 
 	function panMove(e: MouseEvent | TouchEvent) {
+		// Handle pinch zoom
+		if ("touches" in e && e.touches.length === 2 && isPinching) {
+			e.preventDefault();
+			const currentDistance = getDistance(e.touches[0], e.touches[1]);
+			const scale = currentDistance / initialPinchDistance;
+			continuousZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, initialPinchZoom * scale));
+			return;
+		}
+
+		// Handle single-finger pan
 		if (!isPanning) return;
 		e.preventDefault();
 
@@ -326,12 +394,29 @@
 		const newPanX = startPanX + (clientX - startMouseX);
 		const newPanY = startPanY + (clientY - startMouseY);
 
-		const clamped = clampPan(newPanX, newPanY);
-		panX = clamped.x;
-		panY = clamped.y;
+		if (clampPan) {
+			const clamped = getClampedPan(newPanX, newPanY);
+			panX = clamped.x;
+			panY = clamped.y;
+		} else {
+			panX = newPanX;
+			panY = newPanY;
+		}
 	}
 
 	function panEnd() {
+		// Handle pinch end - snap to nearest discrete level
+		if (isPinching) {
+			isPinching = false;
+			zoomLevelIdx = findNearestZoomLevelIdx(continuousZoom);
+			continuousZoom = ZOOM_LEVELS[zoomLevelIdx];
+			// Reset pan when zoomed out to 1x
+			if (zoomLevelIdx === 0) {
+				panX = 0;
+				panY = 0;
+			}
+			return;
+		}
 		isPanning = false;
 	}
 
@@ -394,7 +479,7 @@
 	<Modal
 		bind:this={modal}
 		onEscape={modal?.close}
-		classBackdrop="p-4 md:p-4 {modalClassBackdrop}"
+		classBackdrop="p-2 md:p-2 {modalClassBackdrop}"
 		classInner="max-w-full h-full {modalClassInner}"
 		class="max-h-full md:max-h-full rounded-lg {modalClass}"
 		classMain="flex items-center justify-center relative stuic-assets-preview stuic-assets-preview-open {modalClassMain}"

package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts

@@ -24,6 +24,8 @@ export interface Props {
     }) => void;
     /** optional "do not display file name" switch flag */
     noName?: boolean;
+    /** When true (default), panning is clamped to keep image within bounds */
+    clampPan?: boolean;
 }
 export declare function getAssetIcon(ext?: string): CallableFunction;
 declare const AssetsPreview: import("svelte").Component<Props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.43.0",
+  "version": "2.45.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",