yet-another-react-lightbox 3.24.0 → 3.25.0

package/dist/plugins/zoom/index.d.ts

@@ -10,6 +10,8 @@ declare module "yet-another-react-lightbox" {
         zoom?: {
             /** Zoom plugin ref */
             ref?: React.ForwardedRef<ZoomRef>;
+            /** override minimum zoom level (default: 1.0) */
+            minZoom?: number;
             /** ratio of image pixels to physical pixels at maximum zoom level */
             maxZoomPixelRatio?: number;
             /** zoom-in multiplier */
@@ -70,6 +72,8 @@ declare module "yet-another-react-lightbox" {
     interface ZoomRef {
         /** current zoom level */
         zoom: number;
+        /** minimum zoom level */
+        minZoom: number;
         /** maximum zoom level */
         maxZoom: number;
         /** horizontal offset */

package/dist/plugins/zoom/index.js

@@ -3,6 +3,7 @@ import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffec
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_ZOOM } from '../../types.js';
 
 const defaultZoomProps = {
+    minZoom: 1,
     maxZoomPixelRatio: 1,
     zoomInMultiplier: 2,
     doubleTapDelay: 300,
@@ -13,10 +14,13 @@ const defaultZoomProps = {
     pinchZoomDistanceFactor: 100,
     scrollToZoom: false,
 };
-const resolveZoomProps = (zoom) => ({
-    ...defaultZoomProps,
-    ...zoom,
-});
+function validateMinZoom(minZoom) {
+    return Math.min(Math.max(minZoom, Number.EPSILON), 1);
+}
+function resolveZoomProps(zoom) {
+    const { minZoom, ...rest } = { ...defaultZoomProps, ...zoom };
+    return { minZoom: validateMinZoom(minZoom), ...rest };
+}
 
 function useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef) {
     const zoomAnimation = React.useRef(undefined);
@@ -118,7 +122,7 @@ function distance(pointerA, pointerB) {
 function scaleZoom(value, delta, factor = 100, clamp = 2) {
     return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
 }
-function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
+function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
     const pinchZoomDistance = React.useRef(undefined);
@@ -160,18 +164,17 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
                 move(keyboardMoveDistance, 0);
             }
         }
-        const handleChangeZoom = (zoomValue) => {
-            preventDefault();
-            changeZoom(zoomValue);
-        };
         if (key === "+" || (meta && key === "=")) {
-            handleChangeZoom(zoom * zoomInMultiplier);
+            preventDefault();
+            zoomIn();
         }
         else if (key === "-" || (meta && key === "_")) {
-            handleChangeZoom(zoom / zoomInMultiplier);
+            preventDefault();
+            zoomOut();
         }
         else if (meta && key === "0") {
-            handleChangeZoom(1);
+            preventDefault();
+            changeZoom(1);
         }
     });
     const onWheel = useEventCallback((event) => {
@@ -212,7 +215,14 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
         if (pointers.length === 0 &&
             timeStamp - lastPointerDown.current < (event.pointerType === "touch" ? doubleTapDelay : doubleClickDelay)) {
             lastPointerDown.current = 0;
-            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+            const targetZoom = zoom >= 1
+                ? zoom !== maxZoom
+                    ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1
+                : zoom !== minZoom
+                    ? zoom / Math.max(minZoom ** (-1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1;
+            changeZoom(targetZoom, false, ...translateCoordinates(event));
         }
         else {
             lastPointerDown.current = timeStamp;
@@ -278,7 +288,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
     const animate = useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef);
     const { currentSlide, globalIndex } = useLightboxState();
     const { containerRect, slideRect } = useController();
-    const { zoomInMultiplier } = useZoomProps();
+    const { minZoom, zoomInMultiplier } = useZoomProps();
     const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
     const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     useLayoutEffect(() => {
@@ -296,7 +306,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         setOffsetY(Math.min(Math.abs(newOffsetY), Math.max(maxOffsetY, 0)) * Math.sign(newOffsetY));
     }, [zoom, offsetX, offsetY, slideRect, imageRect.width, imageRect.height]);
     const changeZoom = React.useCallback((targetZoom, rapid, dx, dy) => {
-        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, 1), maxZoom), 5);
+        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, minZoom), maxZoom), 5);
         if (newZoom === zoom)
             return;
         if (!rapid) {
@@ -304,7 +314,7 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         }
         changeOffsets(dx ? dx * (1 / zoom - 1 / newZoom) : 0, dy ? dy * (1 / zoom - 1 / newZoom) : 0, newZoom);
         setZoom(newZoom);
-    }, [zoom, maxZoom, changeOffsets, animate]);
+    }, [zoom, minZoom, maxZoom, changeOffsets, animate]);
     const handleControllerRectChange = useEventCallback(() => {
         if (zoom > 1) {
             if (zoom > maxZoom) {
@@ -314,8 +324,14 @@ function useZoomState(imageRect, maxZoom, zoomWrapperRef) {
         }
     });
     useLayoutEffect(handleControllerRectChange, [containerRect.width, containerRect.height, handleControllerRectChange]);
-    const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
-    const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
+    const zoomIn = React.useCallback(() => {
+        const targetZoom = zoom * zoomInMultiplier;
+        changeZoom(zoom < 1 && targetZoom > 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
+    const zoomOut = React.useCallback(() => {
+        const targetZoom = zoom / zoomInMultiplier;
+        changeZoom(zoom > 1 && targetZoom < 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
     return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
 }
 
@@ -324,12 +340,13 @@ const useZoom = makeUseContext("useZoom", "ZoomControllerContext", ZoomControlle
 function ZoomContextProvider({ children }) {
     const [zoomWrapper, setZoomWrapper] = React.useState();
     const { slideRect } = useController();
+    const { ref, minZoom } = useZoomProps();
     const { imageRect, maxZoom } = useZoomImageRect(slideRect, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.imageDimensions);
     const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
     useZoomCallback(zoom, disabled);
-    useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
-    const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
-    React.useImperativeHandle(useZoomProps().ref, () => zoomRef, [zoomRef]);
+    useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    const zoomRef = React.useMemo(() => ({ zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
+    React.useImperativeHandle(ref, () => zoomRef, [zoomRef]);
     const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
     return React.createElement(ZoomControllerContext.Provider, { value: context }, children);
 }
@@ -341,9 +358,9 @@ const ZoomOutIcon = createIcon("ZoomOut", React.createElement("path", { d: "M15.
 const ZoomButton = React.forwardRef(function ZoomButton({ zoomIn, onLoseFocus }, ref) {
     const wasEnabled = React.useRef(false);
     const wasFocused = React.useRef(false);
-    const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom();
+    const { zoom, minZoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled, } = useZoom();
     const { render } = useLightboxProps();
-    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1);
+    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= minZoom);
     React.useEffect(() => {
         if (disabled && wasEnabled.current && wasFocused.current) {
             onLoseFocus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",