uix-image-magnify 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -5,18 +5,28 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/ImageMagnify.tsx
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+var useIsoLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 function useImageMagnify(options = {}) {
   const {
     src,
     zoomSrc,
     zoomScale = 2,
+    minZoomScale = 1.5,
+    maxZoomScale = 5,
     zoomType = "hover",
+    mode = "side-by-side",
+    dragMode = "follow",
     lensSize = 150,
+    followOffset = 0,
     zoomPreload = true,
+    disabled = false,
+    resetOnLeave = false,
     onZoomStart,
-    onZoomEnd
+    onZoomEnd,
+    onZoomChange
   } = options;
   const [isZoomed, setIsZoomed] = react.useState(false);
+  const [currentScale, setCurrentScale] = react.useState(zoomScale);
   const isZoomedRef = react.useRef(false);
   const containerRef = react.useRef(null);
   const imageRef = react.useRef(null);
@@ -25,18 +35,60 @@ function useImageMagnify(options = {}) {
   const cursorRef = react.useRef(null);
   const pointerRef = react.useRef({ x: 0, y: 0 });
   const rafRef = react.useRef(0);
-  const lastTouchRef = react.useRef(0);
+  const scaleRef = react.useRef(zoomScale);
+  const modeRef = react.useRef(mode);
+  const lensSizeRef = react.useRef(lensSize);
+  const followOffsetRef = react.useRef(followOffset);
+  const dragModeRef = react.useRef(dragMode);
+  const txRef = react.useRef(0);
+  const tyRef = react.useRef(0);
+  const dragStartRef = react.useRef(null);
   const bgImage = zoomSrc || src;
-  const isRecentTouch = () => Date.now() - lastTouchRef.current < 700;
+  useIsoLayoutEffect(() => {
+    scaleRef.current = zoomScale;
+    setCurrentScale(zoomScale);
+  }, [zoomScale]);
+  useIsoLayoutEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+  useIsoLayoutEffect(() => {
+    lensSizeRef.current = lensSize;
+  }, [lensSize]);
+  useIsoLayoutEffect(() => {
+    followOffsetRef.current = followOffset;
+  }, [followOffset]);
+  useIsoLayoutEffect(() => {
+    dragModeRef.current = dragMode;
+  }, [dragMode]);
+  const updatePointer = react.useCallback((clientX, clientY) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    pointerRef.current = {
+      x: clamp(clientX - rect.left, 0, rect.width),
+      y: clamp(clientY - rect.top, 0, rect.height)
+    };
+  }, []);
   const setZoomed = react.useCallback(
     (z) => {
+      if (disabled) return;
       if (isZoomedRef.current === z) return;
       isZoomedRef.current = z;
       setIsZoomed(z);
-      if (z) onZoomStart?.();
-      else onZoomEnd?.();
+      if (z) {
+        onZoomStart?.();
+      } else {
+        if (zoomType === "wheel") {
+          scaleRef.current = zoomScale;
+          setCurrentScale(zoomScale);
+        }
+        txRef.current = 0;
+        tyRef.current = 0;
+        onZoomEnd?.();
+      }
     },
-    [onZoomStart, onZoomEnd]
+    [disabled, onZoomStart, onZoomEnd, zoomType, zoomScale]
   );
   const apply = react.useCallback(() => {
     const container = containerRef.current;
@@ -44,27 +96,51 @@ function useImageMagnify(options = {}) {
     const rect = container.getBoundingClientRect();
     if (!rect.width || !rect.height) return;
     const { x, y } = pointerRef.current;
-    const xPct = clamp(x / rect.width, 0, 1);
-    const yPct = clamp(y / rect.height, 0, 1);
+    const scale = scaleRef.current;
+    const ls = lensSizeRef.current;
+    const md = modeRef.current;
+    const fo = followOffsetRef.current;
+    const img = imageRef.current;
+    if (md === "inner" && img) {
+      if (!isZoomedRef.current) {
+        img.style.transform = "";
+      } else {
+        const minTx = rect.width * (1 - scale);
+        const minTy = rect.height * (1 - scale);
+        let tx;
+        let ty;
+        if (dragModeRef.current === "pan") {
+          tx = clamp(txRef.current, minTx, 0);
+          ty = clamp(tyRef.current, minTy, 0);
+        } else {
+          tx = x * (1 - scale);
+          ty = y * (1 - scale);
+          tx = clamp(tx, minTx, 0);
+          ty = clamp(ty, minTy, 0);
+        }
+        txRef.current = tx;
+        tyRef.current = ty;
+        img.style.transform = `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`;
+      }
+    }
     const lens = lensRef.current;
     if (lens) {
-      const maxX = Math.max(0, rect.width - lensSize);
-      const maxY = Math.max(0, rect.height - lensSize);
-      const lx = clamp(x - lensSize / 2, 0, maxX);
-      const ly = clamp(y - lensSize / 2, 0, maxY);
-      const cx = lx + lensSize / 2;
-      const cy = ly + lensSize / 2;
+      const maxX = Math.max(0, rect.width - ls);
+      const maxY = Math.max(0, rect.height - ls);
+      const offset = md === "follow" ? fo : 0;
+      const lx = clamp(x - ls / 2 + offset, 0, maxX);
+      const ly = clamp(y - ls / 2 + offset, 0, maxY);
       lens.style.transform = `translate3d(${lx}px, ${ly}px, 0)`;
-      lens.style.backgroundPosition = `${lensSize / 2 - cx * zoomScale}px ${lensSize / 2 - cy * zoomScale}px`;
+      lens.style.backgroundPosition = `${ls / 2 - x * scale}px ${ls / 2 - y * scale}px`;
     }
     const pane = paneRef.current;
     if (pane) {
       const pw = pane.offsetWidth;
       const ph = pane.offsetHeight;
-      const bgW = rect.width * zoomScale;
-      const bgH = rect.height * zoomScale;
-      let bgX = pw / 2 - xPct * bgW;
-      let bgY = ph / 2 - yPct * bgH;
+      const bgW = rect.width * scale;
+      const bgH = rect.height * scale;
+      let bgX = pw / 2 - x / rect.width * bgW;
+      let bgY = ph / 2 - y / rect.height * bgH;
       if (bgW > pw) bgX = clamp(bgX, pw - bgW, 0);
       else bgX = (pw - bgW) / 2;
       if (bgH > ph) bgY = clamp(bgY, ph - bgH, 0);
@@ -75,7 +151,7 @@ function useImageMagnify(options = {}) {
     if (cursor) {
       cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
     }
-  }, [zoomScale, lensSize]);
+  }, []);
   const schedule = react.useCallback(() => {
     if (rafRef.current) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -83,9 +159,42 @@ function useImageMagnify(options = {}) {
       apply();
     });
   }, [apply]);
+  const setScale = react.useCallback(
+    (next) => {
+      const clamped = clamp(next, minZoomScale, maxZoomScale);
+      if (scaleRef.current === clamped) return;
+      scaleRef.current = clamped;
+      setCurrentScale(clamped);
+      onZoomChange?.(clamped);
+      const container = containerRef.current;
+      if (container) {
+        const rect = container.getBoundingClientRect();
+        if (rect.width && rect.height) {
+          const size = `${rect.width * clamped}px ${rect.height * clamped}px`;
+          if (lensRef.current) lensRef.current.style.backgroundSize = size;
+          if (paneRef.current) paneRef.current.style.backgroundSize = size;
+        }
+      }
+      schedule();
+    },
+    [minZoomScale, maxZoomScale, onZoomChange, schedule]
+  );
   react.useEffect(() => {
-    if (isZoomed) schedule();
-  }, [isZoomed, schedule]);
+    if (isZoomed) {
+      schedule();
+    } else if (mode === "inner" && imageRef.current) {
+      imageRef.current.style.transform = "";
+      txRef.current = 0;
+      tyRef.current = 0;
+    }
+  }, [isZoomed, schedule, mode]);
+  react.useEffect(() => {
+    if (disabled && isZoomedRef.current) {
+      isZoomedRef.current = false;
+      setIsZoomed(false);
+      onZoomEnd?.();
+    }
+  }, [disabled, onZoomEnd]);
   react.useEffect(() => {
     if (!bgImage) return;
     const url = `url("${bgImage}")`;
@@ -98,7 +207,8 @@ function useImageMagnify(options = {}) {
     const update = () => {
       const rect = container.getBoundingClientRect();
       if (!rect.width || !rect.height) return;
-      const size = `${rect.width * zoomScale}px ${rect.height * zoomScale}px`;
+      const s = scaleRef.current;
+      const size = `${rect.width * s}px ${rect.height * s}px`;
       if (lensRef.current) lensRef.current.style.backgroundSize = size;
       if (paneRef.current) paneRef.current.style.backgroundSize = size;
     };
@@ -106,7 +216,7 @@ function useImageMagnify(options = {}) {
     const ro = new ResizeObserver(update);
     ro.observe(container);
     return () => ro.disconnect();
-  }, [zoomScale, isZoomed]);
+  }, [isZoomed, zoomScale]);
   react.useEffect(() => {
     if (!zoomPreload || !bgImage) return;
     const img = new Image();
@@ -118,85 +228,155 @@ function useImageMagnify(options = {}) {
     },
     []
   );
-  const updatePointer = (clientX, clientY) => {
+  react.useEffect(() => {
+    if (zoomType !== "wheel" || disabled) return;
     const container = containerRef.current;
     if (!container) return;
-    const rect = container.getBoundingClientRect();
-    if (!rect.width || !rect.height) return;
-    pointerRef.current = {
-      x: clamp(clientX - rect.left, 0, rect.width),
-      y: clamp(clientY - rect.top, 0, rect.height)
+    const onWheel = (e) => {
+      e.preventDefault();
+      updatePointer(e.clientX, e.clientY);
+      const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+      setScale(scaleRef.current * factor);
+      setZoomed(true);
+    };
+    container.addEventListener("wheel", onWheel, { passive: false });
+    return () => container.removeEventListener("wheel", onWheel);
+  }, [zoomType, disabled, setScale, setZoomed, updatePointer]);
+  const beginDrag = (e) => {
+    if (modeRef.current !== "inner" || dragModeRef.current !== "pan") return;
+    if (!isZoomedRef.current) return;
+    const el = e.currentTarget;
+    el.setPointerCapture?.(e.pointerId);
+    const rect = el.getBoundingClientRect();
+    const s = scaleRef.current;
+    dragStartRef.current = {
+      cursorX: e.clientX,
+      cursorY: e.clientY,
+      tx: clamp(txRef.current, rect.width * (1 - s), 0),
+      ty: clamp(tyRef.current, rect.height * (1 - s), 0)
     };
   };
   const handlers = {
-    onMouseEnter: (e) => {
-      if (isRecentTouch()) return;
+    onPointerEnter: (e) => {
+      if (disabled || e.pointerType === "touch") return;
       updatePointer(e.clientX, e.clientY);
       if (zoomType === "hover") setZoomed(true);
       schedule();
     },
-    onMouseMove: (e) => {
-      if (isRecentTouch()) return;
-      updatePointer(e.clientX, e.clientY);
-      if (isZoomedRef.current) schedule();
-    },
-    onMouseLeave: () => {
-      if (isRecentTouch()) return;
+    onPointerLeave: (e) => {
+      if (disabled || e.pointerType === "touch") return;
+      if (dragStartRef.current) return;
       if (zoomType === "hover") setZoomed(false);
+      else if (resetOnLeave) setZoomed(false);
     },
-    onClick: (e) => {
-      if (isRecentTouch()) return;
-      if (zoomType !== "click") return;
+    onPointerDown: (e) => {
+      if (disabled) return;
       updatePointer(e.clientX, e.clientY);
-      setZoomed(!isZoomedRef.current);
+      const isTouch = e.pointerType === "touch";
+      if (isZoomedRef.current) {
+        beginDrag(e);
+        if (dragStartRef.current) return;
+      }
+      if (zoomType === "hold") {
+        setZoomed(true);
+      } else if (isTouch) {
+        setZoomed(!isZoomedRef.current);
+      } else if (zoomType === "click") {
+        setZoomed(!isZoomedRef.current);
+      } else if (zoomType === "wheel") {
+        setZoomed(!isZoomedRef.current);
+      }
       schedule();
     },
-    onDoubleClick: (e) => {
-      if (isRecentTouch()) return;
-      if (zoomType !== "double-click") return;
+    onPointerMove: (e) => {
+      if (disabled) return;
+      if (dragStartRef.current) {
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const s = scaleRef.current;
+        const dx = e.clientX - dragStartRef.current.cursorX;
+        const dy = e.clientY - dragStartRef.current.cursorY;
+        txRef.current = clamp(
+          dragStartRef.current.tx + dx,
+          rect.width * (1 - s),
+          0
+        );
+        tyRef.current = clamp(
+          dragStartRef.current.ty + dy,
+          rect.height * (1 - s),
+          0
+        );
+        schedule();
+        return;
+      }
       updatePointer(e.clientX, e.clientY);
-      setZoomed(!isZoomedRef.current);
-      schedule();
+      if (isZoomedRef.current) schedule();
     },
-    onTouchStart: (e) => {
-      lastTouchRef.current = Date.now();
-      const t = e.touches[0];
-      if (!t) return;
-      updatePointer(t.clientX, t.clientY);
-      if (zoomType === "hover") setZoomed(true);
-      else setZoomed(!isZoomedRef.current);
-      schedule();
+    onPointerUp: (e) => {
+      if (dragStartRef.current) {
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        dragStartRef.current = null;
+      }
+      if (zoomType === "hold") setZoomed(false);
     },
-    onTouchMove: (e) => {
-      lastTouchRef.current = Date.now();
-      const t = e.touches[0];
-      if (!t) return;
-      updatePointer(t.clientX, t.clientY);
-      schedule();
+    onPointerCancel: () => {
+      dragStartRef.current = null;
+      if (zoomType === "hold") setZoomed(false);
     },
-    onTouchEnd: () => {
-      lastTouchRef.current = Date.now();
-      if (zoomType === "hover") setZoomed(false);
+    onDoubleClick: (e) => {
+      if (disabled || zoomType !== "double-click") return;
+      updatePointer(e.clientX, e.clientY);
+      setZoomed(!isZoomedRef.current);
+      schedule();
     },
     onKeyDown: (e) => {
+      if (disabled) return;
       const container = containerRef.current;
       if (!container) return;
       const rect = container.getBoundingClientRect();
       const step = 20;
-      const { x, y } = pointerRef.current;
+      if (!isZoomedRef.current && pointerRef.current.x === 0 && pointerRef.current.y === 0) {
+        pointerRef.current.x = rect.width / 2;
+        pointerRef.current.y = rect.height / 2;
+      }
       let handled = true;
       switch (e.key) {
         case "ArrowLeft":
-          pointerRef.current.x = clamp(x - step, 0, rect.width);
+          pointerRef.current.x = clamp(
+            pointerRef.current.x - step,
+            0,
+            rect.width
+          );
           break;
         case "ArrowRight":
-          pointerRef.current.x = clamp(x + step, 0, rect.width);
+          pointerRef.current.x = clamp(
+            pointerRef.current.x + step,
+            0,
+            rect.width
+          );
           break;
         case "ArrowUp":
-          pointerRef.current.y = clamp(y - step, 0, rect.height);
+          pointerRef.current.y = clamp(
+            pointerRef.current.y - step,
+            0,
+            rect.height
+          );
           break;
         case "ArrowDown":
-          pointerRef.current.y = clamp(y + step, 0, rect.height);
+          pointerRef.current.y = clamp(
+            pointerRef.current.y + step,
+            0,
+            rect.height
+          );
+          break;
+        case "+":
+        case "=":
+          if (zoomType === "wheel") setScale(scaleRef.current * 1.2);
+          break;
+        case "-":
+        case "_":
+          if (zoomType === "wheel") setScale(scaleRef.current / 1.2);
           break;
         case "Enter":
         case " ":
@@ -214,7 +394,7 @@ function useImageMagnify(options = {}) {
       }
     },
     onFocus: () => {
-      if (isRecentTouch()) return;
+      if (disabled) return;
       if (zoomType === "hover") setZoomed(true);
     },
     onBlur: () => {
@@ -223,6 +403,8 @@ function useImageMagnify(options = {}) {
   };
   return {
     isZoomed,
+    zoomScale: currentScale,
+    bgImage,
     containerRef,
     imageRef,
     lensRef,
@@ -253,18 +435,29 @@ var ImageMagnify = react.forwardRef(
       lensSize = 150,
       lensShape = "circle",
       zoomType = "hover",
+      disabled,
+      imageProps,
+      onLoad,
+      onError,
       ...hookOptions
     } = props;
     const {
       isZoomed,
+      bgImage,
       containerRef,
       imageRef,
       lensRef,
       paneRef,
       cursorRef,
       handlers
-    } = useImageMagnify({ src, zoomType, lensSize, ...hookOptions });
-    const bgImage = props.zoomSrc || src;
+    } = useImageMagnify({
+      src,
+      zoomType,
+      lensSize,
+      mode,
+      disabled,
+      ...hookOptions
+    });
     const paneOffset = {};
     if (panePosition === "right") {
       paneOffset.left = "calc(100% + 12px)";
@@ -279,6 +472,11 @@ var ImageMagnify = react.forwardRef(
       paneOffset.left = 0;
       paneOffset.top = "calc(100% + 12px)";
     }
+    const isInner = mode === "inner";
+    const showLens = (mode === "lens" || mode === "follow") && isZoomed;
+    const showPane = mode === "side-by-side" && isZoomed;
+    const showCursor = mode === "side-by-side" && isZoomed;
+    const cursorStyle = disabled ? "default" : zoomType === "hover" || zoomType === "hold" || zoomType === "wheel" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -299,12 +497,14 @@ var ImageMagnify = react.forwardRef(
               tabIndex: 0,
               role: "img",
               "aria-label": alt,
+              "aria-disabled": disabled || void 0,
               style: {
                 position: "relative",
                 overflow: "hidden",
                 width: "100%",
-                cursor: zoomType === "hover" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in",
-                touchAction: "none",
+                cursor: cursorStyle,
+                // Only block scrolling while zoomed so page scrolling still works.
+                touchAction: isZoomed ? "none" : "pan-y",
                 outline: "none",
                 lineHeight: 0
               },
@@ -313,27 +513,34 @@ var ImageMagnify = react.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
+                    ...imageProps,
                     ref: imageRef,
                     src,
-                    alt,
+                    alt: "",
+                    "aria-hidden": "true",
                     loading: lazy ? "lazy" : void 0,
                     draggable: false,
                     className: imageClassName,
+                    onLoad,
+                    onError,
                     style: {
                       display: "block",
                       width: "100%",
                       height: "auto",
                       userSelect: "none",
                       pointerEvents: "none",
+                      transformOrigin: "0 0",
+                      willChange: isInner ? "transform" : void 0,
                       ...imageStyle
                     }
                   }
                 ),
-                mode === "lens" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+                showLens && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     ref: lensRef,
                     className: lensClassName,
+                    "aria-hidden": "true",
                     style: {
                       position: "absolute",
                       top: 0,
@@ -351,10 +558,11 @@ var ImageMagnify = react.forwardRef(
                     }
                   }
                 ),
-                mode === "side-by-side" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+                showCursor && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     ref: cursorRef,
+                    "aria-hidden": "true",
                     style: {
                       position: "absolute",
                       top: 0,
@@ -375,7 +583,7 @@ var ImageMagnify = react.forwardRef(
               ]
             }
           ),
-          mode === "side-by-side" && isZoomed && /* @__PURE__ */ jsxRuntime.jsx(
+          showPane && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: paneRef,