@sitebytom/use-zoom-pan 0.9.0

package/dist/index.mjs

@@ -0,0 +1,641 @@
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+
+// src/useZoomPan.ts
+var DEFAULT_OPTIONS = {
+  minScale: 1,
+  maxScale: 6,
+  zoomSensitivity: 2e-3,
+  clickZoomScale: 2.5,
+  dragThresholdMouse: 5,
+  dragThresholdTouch: 10,
+  swipeThreshold: 50,
+  boundsBuffer: 80,
+  manageCursor: true,
+  enableSwipe: true,
+  initialScale: void 0,
+  initialPosition: void 0
+};
+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 };
+};
+var clampPosition = (pos, targetScale, container, element, boundsBuffer) => {
+  const { xLimit, yLimit } = calculateBounds(targetScale, container, element, boundsBuffer);
+  return {
+    x: Math.max(-xLimit, Math.min(xLimit, pos.x)),
+    y: Math.max(-yLimit, Math.min(yLimit, pos.y))
+  };
+};
+var normalizeWheelDelta = (e, sensitivity) => {
+  const factor = e.deltaMode === 1 ? 20 : 1;
+  return -e.deltaY * factor * sensitivity;
+};
+var useZoomPan = ({
+  containerRef,
+  enableZoom = true,
+  onNext,
+  onPrev,
+  options = {}
+}) => {
+  const config = React.useMemo(() => ({
+    ...DEFAULT_OPTIONS,
+    ...options
+  }), [
+    options.minScale,
+    options.maxScale,
+    options.zoomSensitivity,
+    options.clickZoomScale,
+    options.dragThresholdMouse,
+    options.dragThresholdTouch,
+    options.swipeThreshold,
+    options.boundsBuffer,
+    options.manageCursor,
+    options.initialScale,
+    options.initialPosition
+  ]);
+  const contentRef = React.useRef(null);
+  const getContentElement = useCallback(() => {
+    return contentRef.current || containerRef.current?.firstElementChild;
+  }, [containerRef]);
+  const [scale, setScale] = useState(config.initialScale ?? config.minScale);
+  const [position, setPosition] = useState(config.initialPosition ?? { x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const dragStartRef = useRef({
+    x: 0,
+    y: 0,
+    hasDragged: false,
+    startX: 0,
+    startY: 0
+  });
+  const pinchRef = useRef({
+    startDist: 0,
+    initialScale: config.minScale,
+    startX: 0,
+    startY: 0,
+    startPos: { x: 0, y: 0 }
+  });
+  const touchStartXRef = useRef(0);
+  const swipeBlockedRef = useRef(false);
+  const stateRef = useRef({ scale, position, enableZoom, isDragging, config });
+  useEffect(() => {
+    stateRef.current = { scale, position, enableZoom, isDragging, config };
+  }, [scale, position, enableZoom, isDragging, config]);
+  useEffect(() => {
+    const handleGlobalUp = () => {
+      if (stateRef.current.isDragging) {
+        setIsDragging(false);
+      }
+    };
+    const handleBlur = () => {
+      setIsDragging(false);
+    };
+    window.addEventListener("mouseup", handleGlobalUp);
+    window.addEventListener("touchend", handleGlobalUp);
+    window.addEventListener("touchcancel", handleGlobalUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("mouseup", handleGlobalUp);
+      window.removeEventListener("touchend", handleGlobalUp);
+      window.removeEventListener("touchcancel", handleGlobalUp);
+      window.removeEventListener("blur", handleBlur);
+      setIsDragging(false);
+      dragStartRef.current.hasDragged = false;
+      setIsTransitioning(false);
+    };
+  }, []);
+  const updateBoundsAndClamp = useCallback(() => {
+    const container = containerRef.current;
+    const content = getContentElement();
+    if (!container || !content) return;
+    const currentPos = { x: stateRef.current.position.x, y: stateRef.current.position.y };
+    const clamped = clampPosition(currentPos, stateRef.current.scale, container, content, config.boundsBuffer);
+    if (clamped.x !== currentPos.x || clamped.y !== currentPos.y) {
+      setPosition(clamped);
+    }
+  }, [containerRef, config.boundsBuffer, getContentElement]);
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
+      updateBoundsAndClamp();
+    });
+    observer.observe(container);
+    const content = getContentElement();
+    if (content instanceof HTMLImageElement && !content.complete) {
+      content.addEventListener("load", updateBoundsAndClamp);
+    }
+    return () => {
+      observer.disconnect();
+      if (content instanceof HTMLImageElement) {
+        content.removeEventListener("load", updateBoundsAndClamp);
+      }
+    };
+  }, [containerRef, updateBoundsAndClamp, getContentElement]);
+  const getClampedPosition = useCallback(
+    (pos, targetScale, element) => {
+      return clampPosition(
+        pos,
+        targetScale,
+        containerRef.current,
+        element,
+        config.boundsBuffer
+      );
+    },
+    [containerRef, config.boundsBuffer]
+  );
+  const handleWheelManual = useCallback(
+    (e) => {
+      if (!stateRef.current.enableZoom) return;
+      setIsTransitioning(false);
+      e.preventDefault();
+      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
+          };
+          const clampedPosition = getClampedPosition(newPosition, newScale, content);
+          setPosition(clampedPosition);
+          setScale(newScale);
+        }
+      }
+    },
+    [getClampedPosition, containerRef, getContentElement, config.zoomSensitivity, config.minScale, config.maxScale]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("wheel", handleWheelManual, { passive: false });
+    return () => container.removeEventListener("wheel", handleWheelManual);
+  }, [containerRef, handleWheelManual]);
+  const reset = useCallback(() => {
+    setIsTransitioning(true);
+    setScale(config.minScale);
+    setPosition({ x: 0, y: 0 });
+    setIsDragging(false);
+    dragStartRef.current.hasDragged = false;
+    pinchRef.current = {
+      startDist: 0,
+      initialScale: config.minScale,
+      startX: 0,
+      startY: 0,
+      startPos: { x: 0, y: 0 }
+    };
+  }, [config.minScale]);
+  const handleFocalZoom = useCallback(
+    (e) => {
+      setIsTransitioning(true);
+      const container = containerRef.current;
+      const target = e.currentTarget;
+      if (!container || !target) 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 newPosition = {
+        x: mouseX * (1 - config.clickZoomScale),
+        y: mouseY * (1 - config.clickZoomScale)
+      };
+      const clampedPosition = getClampedPosition(newPosition, config.clickZoomScale, target);
+      setScale(config.clickZoomScale);
+      setPosition(clampedPosition);
+    },
+    [getClampedPosition, config.clickZoomScale, containerRef]
+  );
+  const onImageClick = useCallback(
+    (e) => {
+      if (dragStartRef.current.hasDragged) {
+        dragStartRef.current.hasDragged = false;
+        return;
+      }
+      if (scale > config.minScale) {
+        reset();
+      } else {
+        handleFocalZoom(e);
+      }
+    },
+    [scale, reset, handleFocalZoom, config.minScale]
+  );
+  const onImageDoubleClick = useCallback(
+    (e) => {
+      if (scale > config.minScale) {
+        reset();
+      } else {
+        handleFocalZoom(e);
+      }
+    },
+    [scale, reset, handleFocalZoom, config.minScale]
+  );
+  const getPinchPosition = 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;
+    return {
+      x: currentPinchX - pinchImageX * scaleRatio,
+      y: currentPinchY - pinchImageY * scaleRatio
+    };
+  }, []);
+  const onImageTouchStart = useCallback(
+    (e) => {
+      setIsTransitioning(false);
+      swipeBlockedRef.current = e.touches.length === 2;
+      if (e.touches.length === 2) {
+        const container = containerRef.current;
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+        const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+        const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        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
+        };
+      }
+    },
+    [scale, position, config.minScale, containerRef]
+  );
+  const onImageTouchMove = useCallback(
+    (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+        const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+        const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        const ratio = dist / pinchRef.current.startDist;
+        const newScale = Math.min(Math.max(config.minScale, pinchRef.current.initialScale * ratio), config.maxScale);
+        if (pinchRef.current.containerRect && newScale > config.minScale) {
+          const newPosition = getPinchPosition(
+            centerX,
+            centerY,
+            newScale
+          );
+          const clampedPosition = getClampedPosition(
+            newPosition,
+            newScale,
+            getContentElement()
+          );
+          setPosition(clampedPosition);
+        } else {
+          setPosition({ x: 0, y: 0 });
+        }
+        setScale(newScale);
+      } else if (e.touches.length === 1 && isDragging && scale > config.minScale) {
+        e.preventDefault();
+        const touchX = e.touches[0].clientX;
+        const touchY = e.touches[0].clientY;
+        if (!dragStartRef.current.hasDragged) {
+          const moveDist = Math.hypot(
+            touchX - dragStartRef.current.startX,
+            touchY - dragStartRef.current.startY
+          );
+          if (moveDist > config.dragThresholdTouch) {
+            dragStartRef.current.hasDragged = true;
+          }
+        }
+        if (dragStartRef.current.hasDragged) {
+          const newPosition = {
+            x: touchX - dragStartRef.current.x,
+            y: touchY - dragStartRef.current.y
+          };
+          const clampedPosition = getClampedPosition(newPosition, scale, e.currentTarget);
+          setPosition(clampedPosition);
+        }
+      }
+    },
+    [isDragging, scale, getClampedPosition, getContentElement, getPinchPosition, config.minScale, config.maxScale, config.dragThresholdTouch]
+  );
+  const onImageTouchEnd = useCallback(() => {
+    setIsDragging(false);
+    pinchRef.current = {
+      startDist: 0,
+      initialScale: scale,
+      startX: 0,
+      startY: 0,
+      startPos: { x: position.x, y: position.y }
+    };
+  }, [scale, position]);
+  const onImageMouseDown = useCallback(
+    (e) => {
+      setIsTransitioning(false);
+      if (scale > config.minScale) {
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartRef.current = {
+          x: e.clientX - position.x,
+          y: e.clientY - position.y,
+          hasDragged: false,
+          startX: e.clientX,
+          startY: e.clientY
+        };
+      }
+    },
+    [scale, position, config.minScale]
+  );
+  useCallback(
+    (targetX, targetY) => {
+      if (!config.enableSwipe) return;
+      const distanceX = Math.abs(targetX - dragStartRef.current.startX);
+      const distanceY = Math.abs(targetY - dragStartRef.current.startY);
+      if (distanceX > config.swipeThreshold && distanceX > distanceY) {
+        if (targetX < dragStartRef.current.startX) {
+          onNext?.();
+        } else {
+          onPrev?.();
+        }
+      }
+    },
+    [config.enableSwipe, config.swipeThreshold, onNext, onPrev]
+  );
+  const onImageMouseMove = useCallback(
+    (e) => {
+      if (isDragging && scale > config.minScale) {
+        e.preventDefault();
+        if (!dragStartRef.current.hasDragged) {
+          const moveDist = Math.hypot(
+            e.clientX - dragStartRef.current.startX,
+            e.clientY - dragStartRef.current.startY
+          );
+          if (moveDist > config.dragThresholdMouse) {
+            dragStartRef.current.hasDragged = true;
+          }
+        }
+        if (dragStartRef.current.hasDragged) {
+          const newPosition = {
+            x: e.clientX - dragStartRef.current.x,
+            y: e.clientY - dragStartRef.current.y
+          };
+          const clampedPosition = getClampedPosition(newPosition, scale, e.currentTarget);
+          setPosition(clampedPosition);
+        }
+      }
+    },
+    [isDragging, scale, getClampedPosition, config.minScale, config.dragThresholdMouse]
+  );
+  const onImageMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const onImageMouseLeave = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const onContainerTouchStart = useCallback(
+    (e) => {
+      if (scale > config.minScale) return;
+      const touch = e.changedTouches[0];
+      touchStartXRef.current = touch.clientX;
+    },
+    [scale, config.minScale]
+  );
+  const onContainerTouchEnd = useCallback(
+    (e) => {
+      if (swipeBlockedRef.current) {
+        swipeBlockedRef.current = false;
+        return;
+      }
+      if (scale > config.minScale) return;
+      const touch = e.changedTouches[0];
+      const startX = touchStartXRef.current;
+      const endX = touch.clientX;
+      const diff = startX - endX;
+      if (Math.abs(diff) > config.swipeThreshold) {
+        if (diff > 0) {
+          onNext?.();
+        } else {
+          onPrev?.();
+        }
+      }
+    },
+    [scale, onNext, onPrev, config.minScale, config.swipeThreshold]
+  );
+  const onContainerMouseDown = useCallback(
+    (e) => {
+      if (scale > config.minScale) return;
+      touchStartXRef.current = e.clientX;
+    },
+    [scale, config.minScale]
+  );
+  const onContainerMouseUp = useCallback(
+    (e) => {
+      if (scale > config.minScale) return;
+      const startX = touchStartXRef.current;
+      const endX = e.clientX;
+      const diff = startX - endX;
+      if (Math.abs(diff) > config.swipeThreshold) {
+        if (diff > 0) {
+          onNext?.();
+        } else {
+          onPrev?.();
+        }
+      }
+    },
+    [scale, onNext, onPrev, config.minScale, config.swipeThreshold]
+  );
+  const zoomTo = 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]
+  );
+  useEffect(() => {
+    if (!isTransitioning) return;
+    const timer = setTimeout(() => setIsTransitioning(false), TRANSITION_DURATION);
+    return () => clearTimeout(timer);
+  }, [isTransitioning]);
+  const contentStyle = React.useMemo(() => {
+    const style = {
+      transformOrigin: "center",
+      transition: isTransitioning ? `transform ${TRANSITION_DURATION}ms ${TRANSITION_CURVE}` : "none"
+    };
+    if (config.manageCursor) {
+      if (isDragging) {
+        style.cursor = "grabbing";
+      } else if (scale > config.minScale) {
+        style.cursor = "grab";
+      } else if (enableZoom) {
+        style.cursor = "zoom-in";
+      } else {
+        style.cursor = "default";
+      }
+    }
+    return style;
+  }, [isTransitioning, config.manageCursor, isDragging, scale, config.minScale, enableZoom]);
+  const contentProps = React.useMemo(() => ({
+    ref: contentRef,
+    // Cast to compatible ref type
+    style: contentStyle,
+    onClick: onImageClick,
+    onDoubleClick: onImageDoubleClick,
+    onTouchStart: onImageTouchStart,
+    onTouchMove: onImageTouchMove,
+    onTouchEnd: onImageTouchEnd,
+    onMouseDown: onImageMouseDown,
+    onMouseMove: onImageMouseMove,
+    onMouseUp: onImageMouseUp,
+    onMouseLeave: onImageMouseLeave
+  }), [
+    contentStyle,
+    onImageClick,
+    onImageDoubleClick,
+    onImageTouchStart,
+    onImageTouchMove,
+    onImageTouchEnd,
+    onImageMouseDown,
+    onImageMouseMove,
+    onImageMouseUp,
+    onImageMouseLeave
+  ]);
+  const containerProps = React.useMemo(() => ({
+    onTouchStart: onContainerTouchStart,
+    onTouchEnd: onContainerTouchEnd,
+    onMouseDown: onContainerMouseDown,
+    onMouseUp: onContainerMouseUp
+  }), [
+    onContainerTouchStart,
+    onContainerTouchEnd,
+    onContainerMouseDown,
+    onContainerMouseUp
+  ]);
+  return {
+    scale,
+    position,
+    isDragging,
+    reset,
+    zoomTo,
+    contentProps,
+    containerProps
+  };
+};
+var ZoomPan = ({
+  children,
+  className = "",
+  style = {},
+  contentClassName = "",
+  contentStyle = {},
+  enableZoom = true,
+  onNext,
+  onPrev,
+  options
+}) => {
+  const containerRef = useRef(null);
+  const { scale, position, contentProps, containerProps } = useZoomPan({
+    containerRef,
+    enableZoom,
+    onNext,
+    onPrev,
+    options
+  });
+  const defaultContainerStyle = {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: scale > 1 ? "grab" : enableZoom ? "zoom-in" : "default",
+    position: "relative",
+    ...style
+  };
+  const defaultContentStyle = {
+    transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+    ...contentProps.style,
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    touchAction: "none",
+    maxWidth: "100%",
+    maxHeight: "100%",
+    ...contentStyle
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: defaultContainerStyle,
+      ...containerProps
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: contentClassName,
+        ...contentProps,
+        style: {
+          ...defaultContentStyle,
+          ...contentProps.style
+        }
+      },
+      children
+    )
+  );
+};
+
+export { ZoomPan, useZoomPan };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map