@sitebytom/use-zoom-pan 1.0.1 → 1.0.3

package/README.md

@@ -4,16 +4,31 @@
 
 A **zero-dependency**, ultra-lightweight React hook and component for implementing smooth, high-performance zoom and pan interactions. Ideal for image viewers, galleries, maps, diagrams, and custom interactive canvases where you want full control without heavy dependencies.
 
-[**Live Demo & Technical Reference**](https://sitebytom.github.io/use-zoom-pan/)
+[**Live Demo & Documentation**](https://sitebytom.github.io/use-zoom-pan/)
+
+### Documentation
+- [Quick Start](https://sitebytom.github.io/use-zoom-pan/#getting-started)
+- [API Reference](https://sitebytom.github.io/use-zoom-pan/#api-reference)
+- [Gestures & Controls](https://sitebytom.github.io/use-zoom-pan/#interactions)
+- [Performance Optimization](https://sitebytom.github.io/use-zoom-pan/#performance)
+
+### Interactive Examples
+- [Simple Image Viewer](https://sitebytom.github.io/use-zoom-pan/#simple)
+- [Hook & Live Playground](https://sitebytom.github.io/use-zoom-pan/#hook)
+- [Gallery with Swipe Navigation](https://sitebytom.github.io/use-zoom-pan/#gallery)
+- [Interactive Map Pins](https://sitebytom.github.io/use-zoom-pan/#pins)
+- [SVG Blueprint Visualization](https://sitebytom.github.io/use-zoom-pan/#svg)
+- [Rich HTML Content Zoom](https://sitebytom.github.io/use-zoom-pan/#content)
 
 ## Features
 
 - **Ultra-Lightweight**: Zero dependencies, minimal bundle size.
 - **High Performance**: Uses ref-based interaction tracking and minimal state updates to keep zoom and pan interactions smooth and responsive.
 - **Mouse Controls**: Scroll to zoom at cursor, click to toggle zoom, drag to pan.
-- **Touch Controls**: Pinch to zoom at center, double tap to toggle, swipe to navigate.
-- **Smart Bounds**: Prevents over-panning with configurable buffer zones.
-- **Mobile First**: Optimized touch thresholds and native-feeling gestures.
+- **Touch Controls**: Pinch to zoom at center, double-tap to zoom/reset, swipe to navigate.
+- **Precision Focal Math**: Implemented with a top-left origin for rock-solid cursor tracking during zoom.
+- **Smart Bounds**: Prevents over-panning with configurable buffer zones and symmetrical clamping.
+- **Mobile First**: Optimized touch thresholds, double-tap gestures, and native-feeling interactions.
 - **Content Agnostic**: Works with images, SVG, canvas, or any HTML content.
 
 ## Quick Start
@@ -88,7 +103,7 @@ Spread `containerProps` onto your container element if you want the hook to mana
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `minScale` | `number` | `1` | Minimum zoom level. |
-| `maxScale` | `number` | `4` | Maximum zoom level. |
+| `maxScale` | `number` | `6` | Maximum zoom level. |
 | `zoomSensitivity` | `number` | `0.002` | Scaling multiplier for scroll wheel. |
 | `clickZoomScale` | `number` | `2.5` | Snap-to scale on double click/tap. |
 | `dragThresholdTouch` | `number` | `10` | Pixels to move before panning triggers (touch). |
@@ -109,7 +124,8 @@ The `useZoomPan` hook returns an object containing the current state and necessa
 | `scale` | `number` | Current zoom level (1-4 by default). |
 | `position` | `object` | Current pan coordinates `{ x, y }`. |
 | `isDragging` | `boolean` | True when the user is actively panning. |
-| `reset` | `function` | Resets zoom and pan to defaults. |
+| `reset` | `function` | Resets zoom and pan to centered defaults. |
+| `zoomTo` | `function` | Imperative zoom to `(x, y, scale)` in container coords. |
 | `contentProps` | `object` | Event handlers to spread on the zoomable content. |
 | `containerProps` | `object` | Event handlers to spread on the container element. |
 
@@ -138,8 +154,4 @@ The hook is designed to be **highly optimized** for smooth interactions on high-
 
 ### Design Philosophy
 
-The hook avoids continuous `requestAnimationFrame` loops and animation libraries, relying instead on native pointer events and direct transform updates for a predictable, lightweight, and low-latency experience.
-
----
-
-[@sitebytom](https://github.com/sitebytom)
+The hook avoids continuous `requestAnimationFrame` loops and animation libraries, relying instead on native pointer events and direct transform updates for a predictable, lightweight, and low-latency experience.

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
 
+/** Represents a 2D coordinate or translation offset */
 interface Position {
     x: number;
     y: number;
@@ -30,12 +31,20 @@ interface ZoomPanOptions {
     /** Whether to enable swipe navigation (default: true) */
     enableSwipe?: boolean;
 }
+/** Properties for the useZoomPan hook */
 interface ZoomPanProps$1 {
-    /** Reference to the container element (div, section, etc.) */
+    /**
+     * Reference to the container element that will host the zoomable content.
+     * The first child of this container is assumed to be the content unless contentRef is used.
+     */
     containerRef: React.RefObject<HTMLElement | null>;
+    /** Whether to enable zoom interactions (default: true) */
     enableZoom?: boolean;
+    /** Callback triggered on swipe-left (next) */
     onNext?: () => void;
+    /** Callback triggered on swipe-right (prev) */
     onPrev?: () => void;
+    /** Configuration options for zoom and pan behavior */
     options?: ZoomPanOptions;
 }
 /**
@@ -70,14 +79,23 @@ declare const useZoomPan: ({ containerRef, enableZoom, onNext, onPrev, options }
 };
 
 interface ZoomPanProps {
+    /** The content to be made zoomable and pannable (e.g., an <img> or <svg>) */
     children: React.ReactNode;
+    /** Optional CSS class for the wrapper container */
     className?: string;
+    /** Optional inline styles for the wrapper container */
     style?: CSSProperties;
+    /** Optional CSS class for the inner content wrapper */
     contentClassName?: string;
+    /** Optional inline styles for the inner content wrapper */
     contentStyle?: CSSProperties;
+    /** Whether to enable zoom/pan interactions (default: true) */
     enableZoom?: boolean;
+    /** Callback triggered when a swipe-left (next) is detected on the container */
     onNext?: () => void;
+    /** Callback triggered when a swipe-right (prev) is detected on the container */
     onPrev?: () => void;
+    /** Advanced configuration for zoom sensitivity, bounds, etc. */
     options?: ZoomPanOptions;
 }
 /**

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
 
+/** Represents a 2D coordinate or translation offset */
 interface Position {
     x: number;
     y: number;
@@ -30,12 +31,20 @@ interface ZoomPanOptions {
     /** Whether to enable swipe navigation (default: true) */
     enableSwipe?: boolean;
 }
+/** Properties for the useZoomPan hook */
 interface ZoomPanProps$1 {
-    /** Reference to the container element (div, section, etc.) */
+    /**
+     * Reference to the container element that will host the zoomable content.
+     * The first child of this container is assumed to be the content unless contentRef is used.
+     */
     containerRef: React.RefObject<HTMLElement | null>;
+    /** Whether to enable zoom interactions (default: true) */
     enableZoom?: boolean;
+    /** Callback triggered on swipe-left (next) */
     onNext?: () => void;
+    /** Callback triggered on swipe-right (prev) */
     onPrev?: () => void;
+    /** Configuration options for zoom and pan behavior */
     options?: ZoomPanOptions;
 }
 /**
@@ -70,14 +79,23 @@ declare const useZoomPan: ({ containerRef, enableZoom, onNext, onPrev, options }
 };
 
 interface ZoomPanProps {
+    /** The content to be made zoomable and pannable (e.g., an <img> or <svg>) */
     children: React.ReactNode;
+    /** Optional CSS class for the wrapper container */
     className?: string;
+    /** Optional inline styles for the wrapper container */
     style?: CSSProperties;
+    /** Optional CSS class for the inner content wrapper */
     contentClassName?: string;
+    /** Optional inline styles for the inner content wrapper */
     contentStyle?: CSSProperties;
+    /** Whether to enable zoom/pan interactions (default: true) */
     enableZoom?: boolean;
+    /** Callback triggered when a swipe-left (next) is detected on the container */
     onNext?: () => void;
+    /** Callback triggered when a swipe-right (prev) is detected on the container */
     onPrev?: () => void;
+    /** Advanced configuration for zoom sensitivity, bounds, etc. */
     options?: ZoomPanOptions;
 }
 /**

package/dist/index.js

@@ -24,22 +24,24 @@ var DEFAULT_OPTIONS = {
 var TRANSITION_DURATION = 400;
 var TRANSITION_CURVE = "cubic-bezier(0.2, 0, 0, 1)";
 var calculateBounds = (targetScale, container, element, boundsBuffer) => {
-  if (!container || !element) return { xLimit: 0, yLimit: 0 };
-  const containerWidth = container.clientWidth;
-  const containerHeight = container.clientHeight;
-  const elementWidth = element.offsetWidth || containerWidth;
-  const elementHeight = element.offsetHeight || containerHeight;
-  const scaledWidth = elementWidth * targetScale;
-  const scaledHeight = elementHeight * targetScale;
-  const xLimit = (scaledWidth <= containerWidth ? 0 : (scaledWidth - containerWidth) / 2) + boundsBuffer;
-  const yLimit = (scaledHeight <= containerHeight ? 0 : (scaledHeight - containerHeight) / 2) + boundsBuffer;
-  return { xLimit, yLimit };
+  if (!container || !element) return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+  const cw = container.clientWidth;
+  const ch = container.clientHeight;
+  const ew = element.offsetWidth || cw;
+  const eh = element.offsetHeight || ch;
+  const sw = ew * targetScale;
+  const sh = eh * targetScale;
+  const minX = sw <= cw ? (cw - sw) / 2 - boundsBuffer : cw - sw - boundsBuffer;
+  const maxX = sw <= cw ? (cw - sw) / 2 + boundsBuffer : boundsBuffer;
+  const minY = sh <= ch ? (ch - sh) / 2 - boundsBuffer : ch - sh - boundsBuffer;
+  const maxY = sh <= ch ? (ch - sh) / 2 + boundsBuffer : boundsBuffer;
+  return { minX, maxX, minY, maxY };
 };
 var clampPosition = (pos, targetScale, container, element, boundsBuffer) => {
-  const { xLimit, yLimit } = calculateBounds(targetScale, container, element, boundsBuffer);
+  const b = calculateBounds(targetScale, container, element, boundsBuffer);
   return {
-    x: Math.max(-xLimit, Math.min(xLimit, pos.x)),
-    y: Math.max(-yLimit, Math.min(yLimit, pos.y))
+    x: Math.max(b.minX, Math.min(b.maxX, pos.x)),
+    y: Math.max(b.minY, Math.min(b.maxY, pos.y))
   };
 };
 var normalizeWheelDelta = (e, sensitivity) => {
@@ -93,6 +95,8 @@ var useZoomPan = ({
   });
   const touchStartXRef = React.useRef(0);
   const swipeBlockedRef = React.useRef(false);
+  const lastTapTimeRef = React.useRef(0);
+  const cachedRectRef = React.useRef(null);
   const stateRef = React.useRef({ scale, position, enableZoom, isDragging, config });
   React.useEffect(() => {
     stateRef.current = { scale, position, enableZoom, isDragging, config };
@@ -102,9 +106,11 @@ var useZoomPan = ({
       if (stateRef.current.isDragging) {
         setIsDragging(false);
       }
+      cachedRectRef.current = null;
     };
     const handleBlur = () => {
       setIsDragging(false);
+      cachedRectRef.current = null;
     };
     window.addEventListener("mouseup", handleGlobalUp);
     window.addEventListener("touchend", handleGlobalUp);
@@ -115,6 +121,7 @@ var useZoomPan = ({
       window.removeEventListener("touchend", handleGlobalUp);
       window.removeEventListener("touchcancel", handleGlobalUp);
       window.removeEventListener("blur", handleBlur);
+      cachedRectRef.current = null;
       setIsDragging(false);
       dragStartRef.current.hasDragged = false;
       setIsTransitioning(false);
@@ -132,12 +139,23 @@ var useZoomPan = ({
   }, [containerRef, config.boundsBuffer, getContentElement]);
   React__default.default.useLayoutEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    const content = getContentElement();
+    if (!container || !content) return;
+    if (position.x === 0 && position.y === 0 && scale === (config.initialScale ?? config.minScale)) {
+      const cw = container.clientWidth;
+      const ch = container.clientHeight;
+      const iw = content.offsetWidth || cw;
+      const ih = content.offsetHeight || ch;
+      const s = scale;
+      setPosition({
+        x: (cw - iw * s) / 2,
+        y: (ch - ih * s) / 2
+      });
+    }
     const observer = new ResizeObserver(() => {
       updateBoundsAndClamp();
     });
     observer.observe(container);
-    const content = getContentElement();
     if (content instanceof HTMLImageElement && !content.complete) {
       content.addEventListener("load", updateBoundsAndClamp);
     }
@@ -147,7 +165,7 @@ var useZoomPan = ({
         content.removeEventListener("load", updateBoundsAndClamp);
       }
     };
-  }, [containerRef, updateBoundsAndClamp, getContentElement]);
+  }, [containerRef, getContentElement, config.initialScale, config.minScale, scale, position.x, position.y, updateBoundsAndClamp]);
   const getClampedPosition = React.useCallback(
     (pos, targetScale, element) => {
       return clampPosition(
@@ -168,33 +186,45 @@ var useZoomPan = ({
       const { scale: currentScale, position: currentPosition, config: config2 } = stateRef.current;
       const delta = normalizeWheelDelta(e, config2.zoomSensitivity);
       const newScale = Math.min(Math.max(config2.minScale, currentScale + delta), config2.maxScale);
-      if (newScale === config2.minScale) {
-        setScale(config2.minScale);
-        setPosition({ x: 0, y: 0 });
-      } else {
-        const container = containerRef.current;
-        const content = getContentElement();
-        if (container && content) {
-          const rect = container.getBoundingClientRect();
-          const containerWidth = rect.width;
-          const containerHeight = rect.height;
-          const centerX = containerWidth / 2;
-          const centerY = containerHeight / 2;
-          const mouseX = e.clientX - (rect.left + centerX);
-          const mouseY = e.clientY - (rect.top + centerY);
-          const contentX = (mouseX - currentPosition.x) / currentScale;
-          const contentY = (mouseY - currentPosition.y) / currentScale;
-          const newPosition = {
-            x: mouseX - contentX * newScale,
-            y: mouseY - contentY * newScale
-          };
+      if (newScale === currentScale) return;
+      const container = containerRef.current;
+      const content = getContentElement();
+      if (container && content) {
+        let rect = cachedRectRef.current;
+        if (!rect || !container) {
+          rect = container?.getBoundingClientRect() ?? null;
+          cachedRectRef.current = rect;
+        }
+        if (!rect) return;
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const px = (mouseX - currentPosition.x) / currentScale;
+        const py = (mouseY - currentPosition.y) / currentScale;
+        const newPosition = {
+          x: mouseX - px * newScale,
+          y: mouseY - py * newScale
+        };
+        if (isNaN(newPosition.x) || isNaN(newPosition.y) || !isFinite(newPosition.x) || !isFinite(newPosition.y)) {
+          console.warn("Invalid zoom position calculated");
+          return;
+        }
+        if (newScale === config2.minScale) {
+          const cw = rect.width;
+          const ch = rect.height;
+          const iw = content.offsetWidth || cw;
+          const ih = content.offsetHeight || ch;
+          setPosition({
+            x: (cw - iw * newScale) / 2,
+            y: (ch - ih * newScale) / 2
+          });
+        } else {
           const clampedPosition = getClampedPosition(newPosition, newScale, content);
           setPosition(clampedPosition);
-          setScale(newScale);
         }
+        setScale(newScale);
       }
     },
-    [getClampedPosition, containerRef, getContentElement, config.zoomSensitivity, config.minScale, config.maxScale]
+    [getClampedPosition, containerRef, getContentElement]
   );
   React.useEffect(() => {
     const container = containerRef.current;
@@ -205,9 +235,23 @@ var useZoomPan = ({
   const reset = React.useCallback(() => {
     setIsTransitioning(true);
     setScale(config.minScale);
-    setPosition({ x: 0, y: 0 });
+    const container = containerRef.current;
+    const content = getContentElement();
+    if (container && content) {
+      const cw = container.clientWidth;
+      const ch = container.clientHeight;
+      const iw = content.offsetWidth || cw;
+      const ih = content.offsetHeight || ch;
+      setPosition({
+        x: (cw - iw * config.minScale) / 2,
+        y: (ch - ih * config.minScale) / 2
+      });
+    } else {
+      setPosition({ x: 0, y: 0 });
+    }
     setIsDragging(false);
     dragStartRef.current.hasDragged = false;
+    cachedRectRef.current = null;
     pinchRef.current = {
       startDist: 0,
       initialScale: config.minScale,
@@ -215,29 +259,53 @@ var useZoomPan = ({
       startY: 0,
       startPos: { x: 0, y: 0 }
     };
-  }, [config.minScale]);
+  }, [config.minScale, containerRef, getContentElement]);
+  const zoomTo = React.useCallback(
+    (x, y, targetScale) => {
+      setIsTransitioning(true);
+      const container = containerRef.current;
+      const content = getContentElement();
+      if (!container || !content) return;
+      const ts = targetScale ?? config.clickZoomScale;
+      const px = (x - position.x) / scale;
+      const py = (y - position.y) / scale;
+      const np = {
+        x: x - px * ts,
+        y: y - py * ts
+      };
+      if (isNaN(np.x) || isNaN(np.y) || !isFinite(np.x) || !isFinite(np.y)) {
+        return;
+      }
+      const clamped = getClampedPosition(np, ts, content);
+      setScale(ts);
+      setPosition(clamped);
+    },
+    [containerRef, scale, position, config.clickZoomScale, getClampedPosition, getContentElement]
+  );
   const handleFocalZoom = React.useCallback(
     (e) => {
       setIsTransitioning(true);
       const container = containerRef.current;
-      const target = e.currentTarget;
-      if (!container || !target) return;
+      const content = e.currentTarget;
+      if (!container || !content) return;
       const rect = container.getBoundingClientRect();
-      const containerWidth = container.clientWidth;
-      const containerHeight = container.clientHeight;
-      const centerX = containerWidth / 2;
-      const centerY = containerHeight / 2;
-      const mouseX = e.clientX - (rect.left + centerX);
-      const mouseY = e.clientY - (rect.top + centerY);
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const px = (mouseX - position.x) / scale;
+      const py = (mouseY - position.y) / scale;
+      const targetScale = config.clickZoomScale;
       const newPosition = {
-        x: mouseX * (1 - config.clickZoomScale),
-        y: mouseY * (1 - config.clickZoomScale)
+        x: mouseX - px * targetScale,
+        y: mouseY - py * targetScale
       };
-      const clampedPosition = getClampedPosition(newPosition, config.clickZoomScale, target);
-      setScale(config.clickZoomScale);
-      setPosition(clampedPosition);
+      if (isNaN(newPosition.x) || isNaN(newPosition.y) || !isFinite(newPosition.x) || !isFinite(newPosition.y)) {
+        return;
+      }
+      const clamped = getClampedPosition(newPosition, targetScale, content);
+      setScale(targetScale);
+      setPosition(clamped);
     },
-    [getClampedPosition, config.clickZoomScale, containerRef]
+    [containerRef, scale, position, config.clickZoomScale, getClampedPosition]
   );
   const onImageClick = React.useCallback(
     (e) => {
@@ -266,18 +334,15 @@ var useZoomPan = ({
   const getPinchPosition = React.useCallback((centerX, centerY, newScale) => {
     const { containerRect, startX, startY, initialScale, startPos } = pinchRef.current;
     if (!containerRect) return { x: 0, y: 0 };
-    const containerCenterX = containerRect.width / 2;
-    const containerCenterY = containerRect.height / 2;
-    const currentPinchX = centerX - (containerRect.left + containerCenterX);
-    const currentPinchY = centerY - (containerRect.top + containerCenterY);
-    const startPinchX = startX - (containerRect.left + containerCenterX);
-    const startPinchY = startY - (containerRect.top + containerCenterY);
-    const scaleRatio = newScale / initialScale;
-    const pinchImageX = startPinchX - startPos.x;
-    const pinchImageY = startPinchY - startPos.y;
+    const currentPinchX = centerX - containerRect.left;
+    const currentPinchY = centerY - containerRect.top;
+    const startPinchX = startX - containerRect.left;
+    const startPinchY = startY - containerRect.top;
+    const contentUnderStartX = (startPinchX - startPos.x) / initialScale;
+    const contentUnderStartY = (startPinchY - startPos.y) / initialScale;
     return {
-      x: currentPinchX - pinchImageX * scaleRatio,
-      y: currentPinchY - pinchImageY * scaleRatio
+      x: currentPinchX - contentUnderStartX * newScale,
+      y: currentPinchY - contentUnderStartY * newScale
     };
   }, []);
   const onImageTouchStart = React.useCallback(
@@ -292,26 +357,55 @@ var useZoomPan = ({
         );
         const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
         const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        const containerRect = container?.getBoundingClientRect() ?? null;
+        cachedRectRef.current = containerRect;
         pinchRef.current = {
           startDist: dist,
           initialScale: scale,
           startX: centerX,
           startY: centerY,
           startPos: { x: position.x, y: position.y },
-          containerRect: container?.getBoundingClientRect()
-        };
-      } else if (e.touches.length === 1 && scale > config.minScale) {
-        setIsDragging(true);
-        dragStartRef.current = {
-          x: e.touches[0].clientX - position.x,
-          y: e.touches[0].clientY - position.y,
-          hasDragged: false,
-          startX: e.touches[0].clientX,
-          startY: e.touches[0].clientY
+          containerRect
         };
+      } else if (e.touches.length === 1) {
+        const now = Date.now();
+        const DOUBLE_TAP_MS = 300;
+        if (now - lastTapTimeRef.current < DOUBLE_TAP_MS) {
+          e.preventDefault();
+          if (scale > config.minScale) {
+            reset();
+          } else {
+            const touch = e.touches[0];
+            const container = containerRef.current;
+            const rect = container?.getBoundingClientRect();
+            if (rect) {
+              zoomTo(
+                touch.clientX - rect.left,
+                touch.clientY - rect.top,
+                config.clickZoomScale
+              );
+            }
+          }
+          setTimeout(() => {
+            lastTapTimeRef.current = 0;
+          }, 100);
+          return;
+        }
+        lastTapTimeRef.current = now;
+        if (scale > config.minScale) {
+          setIsDragging(true);
+          cachedRectRef.current = containerRef.current?.getBoundingClientRect() ?? null;
+          dragStartRef.current = {
+            x: e.touches[0].clientX - position.x,
+            y: e.touches[0].clientY - position.y,
+            hasDragged: false,
+            startX: e.touches[0].clientX,
+            startY: e.touches[0].clientY
+          };
+        }
       }
     },
-    [scale, position, config.minScale, containerRef]
+    [scale, position, config.minScale, config.clickZoomScale, containerRef, reset, zoomTo, getContentElement, getClampedPosition]
   );
   const onImageTouchMove = React.useCallback(
     (e) => {
@@ -331,6 +425,9 @@ var useZoomPan = ({
             centerY,
             newScale
           );
+          if (isNaN(newPosition.x) || isNaN(newPosition.y) || !isFinite(newPosition.x) || !isFinite(newPosition.y)) {
+            return;
+          }
           const clampedPosition = getClampedPosition(
             newPosition,
             newScale,
@@ -338,7 +435,20 @@ var useZoomPan = ({
           );
           setPosition(clampedPosition);
         } else {
-          setPosition({ x: 0, y: 0 });
+          const container = containerRef.current;
+          const content = getContentElement();
+          if (container && content) {
+            const cw = pinchRef.current.containerRect?.width ?? container?.clientWidth ?? 0;
+            const ch = pinchRef.current.containerRect?.height ?? container?.clientHeight ?? 0;
+            const iw = content.offsetWidth || cw;
+            const ih = content.offsetHeight || ch;
+            setPosition({
+              x: (cw - iw * newScale) / 2,
+              y: (ch - ih * newScale) / 2
+            });
+          } else {
+            setPosition({ x: 0, y: 0 });
+          }
         }
         setScale(newScale);
       } else if (e.touches.length === 1 && isDragging && scale > config.minScale) {
@@ -491,25 +601,6 @@ var useZoomPan = ({
     },
     [scale, onNext, onPrev, config.minScale, config.swipeThreshold]
   );
-  const zoomTo = React.useCallback(
-    (x, y, targetScale) => {
-      setIsTransitioning(true);
-      const container = containerRef.current;
-      const content = contentRef.current || container?.firstElementChild;
-      if (!container || !content) return;
-      const scaleToUse = targetScale ?? config.clickZoomScale;
-      const contentWidth = content.offsetWidth;
-      const contentHeight = content.offsetHeight;
-      const newPosition = {
-        x: (contentWidth / 2 - x) * scaleToUse,
-        y: (contentHeight / 2 - y) * scaleToUse
-      };
-      const clampedPosition = getClampedPosition(newPosition, scaleToUse, content);
-      setScale(scaleToUse);
-      setPosition(clampedPosition);
-    },
-    [getClampedPosition, config.clickZoomScale, containerRef]
-  );
   React.useEffect(() => {
     if (!isTransitioning) return;
     const timer = setTimeout(() => setIsTransitioning(false), TRANSITION_DURATION);
@@ -517,7 +608,7 @@ var useZoomPan = ({
   }, [isTransitioning]);
   const contentStyle = React__default.default.useMemo(() => {
     const style = {
-      transformOrigin: "center",
+      transformOrigin: "0 0",
       transition: isTransitioning ? `transform ${TRANSITION_DURATION}ms ${TRANSITION_CURVE}` : "none",
       touchAction: "none",
       userSelect: "none",
@@ -605,9 +696,6 @@ var ZoomPan = ({
     width: "100%",
     height: "100%",
     overflow: "hidden",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
     cursor: scale > 1 ? "grab" : enableZoom ? "zoom-in" : "default",
     position: "relative",
     ...style
@@ -618,8 +706,9 @@ var ZoomPan = ({
     userSelect: "none",
     WebkitUserSelect: "none",
     touchAction: "none",
-    maxWidth: "100%",
-    maxHeight: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
     ...contentStyle
   };
   return /* @__PURE__ */ React__default.default.createElement(