yet-another-react-lightbox 3.26.0 → 3.28.0

package/README.md

@@ -156,6 +156,21 @@ The following plugins are bundled in the package:
 - [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom
   feature
 
+## Sponsors
+
+This project is supported by the following companies, organizations and
+individuals who help make its continued development and maintenance possible.
+
+<p align="center">
+  <a target="_blank" rel="noreferrer noopener" href="https://cdn.jsdelivr.net/gh/igordanchenko/sponsors/sponsors.svg">
+    <img alt="Sponsors" src="https://cdn.jsdelivr.net/gh/igordanchenko/sponsors/sponsors.svg"/>
+  </a>
+</p>
+
+Support this project by becoming a
+[sponsor](https://github.com/sponsors/igordanchenko). Both recurring and
+one-time contributions are very much appreciated.
+
 ## License
 
 MIT © 2022 [Igor Danchenko](https://github.com/igordanchenko)

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

@@ -26,8 +26,10 @@ declare module "yet-another-react-lightbox" {
             keyboardMoveDistance?: number;
             /** wheel zoom distance factor */
             wheelZoomDistanceFactor?: number;
-            /** pinch zoom distance factor */
+            /** @deprecated - pinch zoom distance factor */
             pinchZoomDistanceFactor?: number;
+            /** if `true`, enables the experimental pinch zoom implementation slated for v4 */
+            pinchZoomV4?: boolean;
             /** if `true`, enables image zoom via scroll gestures for mouse and trackpad users */
             scrollToZoom?: boolean;
         };

package/dist/plugins/zoom/index.js

@@ -12,6 +12,7 @@ const defaultZoomProps = {
     keyboardMoveDistance: 50,
     wheelZoomDistanceFactor: 100,
     pinchZoomDistanceFactor: 100,
+    pinchZoomV4: false,
     scrollToZoom: false,
 };
 function validateMinZoom(minZoom) {
@@ -117,7 +118,7 @@ function useZoomImageRect(slideRect, imageDimensions) {
 }
 
 function distance(pointerA, pointerB) {
-    return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
+    return Math.hypot(pointerA.clientX - pointerB.clientX, pointerA.clientY - pointerB.clientY);
 }
 function scaleZoom(value, delta, factor = 100, clamp = 2) {
     return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
@@ -125,11 +126,11 @@ function scaleZoom(value, delta, factor = 100, clamp = 2) {
 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);
+    const pinchZoom = React.useRef(undefined);
     const { globalIndex } = useLightboxState();
     const { getOwnerWindow } = useDocumentContext();
     const { containerRef, subscribeSensors } = useController();
-    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, } = useZoomProps();
+    const { keyboardMoveDistance, zoomInMultiplier, wheelZoomDistanceFactor, scrollToZoom, doubleTapDelay, doubleClickDelay, doubleClickMaxStops, pinchZoomDistanceFactor, pinchZoomV4, } = useZoomProps();
     const translateCoordinates = React.useCallback((event) => {
         if (containerRef.current) {
             const { pageX, pageY } = event;
@@ -229,23 +230,28 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         }
         replacePointer(event);
         if (pointers.length === 2) {
-            pinchZoomDistance.current = distance(pointers[0], pointers[1]);
+            const initialDistance = distance(pointers[0], pointers[1]);
+            pinchZoom.current = {
+                previousDistance: initialDistance,
+                initialDistance: Math.max(initialDistance, 1),
+                initialZoom: zoom,
+            };
         }
     });
     const onPointerMove = useEventCallback((event) => {
         const pointers = activePointers.current;
         const activePointer = pointers.find((p) => p.pointerId === event.pointerId);
-        if (pointers.length === 2 && pinchZoomDistance.current) {
+        if (pointers.length === 2 && pinchZoom.current) {
             event.stopPropagation();
             replacePointer(event);
             const currentDistance = distance(pointers[0], pointers[1]);
-            const delta = currentDistance - pinchZoomDistance.current;
-            if (Math.abs(delta) > 0) {
-                changeZoom(scaleZoom(zoom, delta, pinchZoomDistanceFactor), true, ...pointers
-                    .map((x) => translateCoordinates(x))
-                    .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
-                pinchZoomDistance.current = currentDistance;
-            }
+            const targetZoom = pinchZoomV4
+                ? (pinchZoom.current.initialZoom / pinchZoom.current.initialDistance) * currentDistance
+                : scaleZoom(zoom, currentDistance - pinchZoom.current.previousDistance, pinchZoomDistanceFactor);
+            changeZoom(targetZoom, true, ...pointers
+                .map((x) => translateCoordinates(x))
+                .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
+            pinchZoom.current.previousDistance = currentDistance;
             return;
         }
         if (zoom > 1) {
@@ -261,7 +267,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
     const onPointerUp = React.useCallback((event) => {
         const pointers = activePointers.current;
         if (pointers.length === 2 && pointers.find((p) => p.pointerId === event.pointerId)) {
-            pinchZoomDistance.current = undefined;
+            pinchZoom.current = undefined;
         }
         clearPointer(event);
     }, [clearPointer]);
@@ -269,7 +275,7 @@ function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, chang
         const pointers = activePointers.current;
         pointers.splice(0, pointers.length);
         lastPointerDown.current = 0;
-        pinchZoomDistance.current = undefined;
+        pinchZoom.current = undefined;
     }, []);
     usePointerEvents(subscribeSensors, onPointerDown, onPointerMove, onPointerUp, disabled);
     React.useEffect(cleanupSensors, [globalIndex, cleanupSensors]);
@@ -306,9 +312,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, minZoom), maxZoom), 5);
-        if (newZoom === zoom)
-            return;
+        const newZoom = round(targetZoom + 0.01 < maxZoom ? (targetZoom - 0.01 > minZoom ? targetZoom : minZoom) : maxZoom, 5);
         if (!rapid) {
             animate();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.26.0",
+  "version": "3.28.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -139,13 +139,12 @@
     "*.css"
   ],
   "homepage": "https://yet-another-react-lightbox.com",
+  "funding": "https://github.com/sponsors/igordanchenko",
+  "bugs": "https://github.com/igordanchenko/yet-another-react-lightbox/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/igordanchenko/yet-another-react-lightbox.git"
   },
-  "bugs": {
-    "url": "https://github.com/igordanchenko/yet-another-react-lightbox/issues"
-  },
   "engines": {
     "node": ">=14"
   },