feat: add double-click zoom gesture

igordanchenko · Sep 19, 2024 · a990a5b · a990a5b
1 parent 100ff49
commit a990a5b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/components/useSensors.ts b/src/components/useSensors.ts
@@ -26,7 +26,7 @@ export default function useSensors() {
   const activePointers = useRef<PointerEvent[]>([]);
   const pinchZoomDistance = useRef<number>();
 
-  const { zoom, changeZoom, changeOffsets } = useZoom();
+  const { zoom, maxZoom, changeZoom, changeOffsets } = useZoom();
   const { carouselRef } = useZoomInternal();
   const { prev, next, close } = useController();
 
@@ -222,20 +222,26 @@ export default function useSensors() {
       }
     };
 
+    const onDoubleClick = (event: MouseEvent) => {
+      changeZoom(zoom < maxZoom ? scaleZoom(zoom, 2, 1) : 1, event);
+    };
+
     return {
       onKeyDown,
       onPointerDown,
       onPointerMove,
       onPointerUp,
       onPointerLeave: onPointerUp,
       onPointerCancel: onPointerUp,
+      onDoubleClick,
       onWheel,
     };
   }, [
     prev,
     next,
     close,
     zoom,
+    maxZoom,
     changeZoom,
     changeOffsets,
     carouselRef,

diff --git a/test/Lightbox.spec.tsx b/test/Lightbox.spec.tsx
@@ -383,6 +383,21 @@ describe("Lightbox", () => {
     expectToBeZoomedOut();
   });
 
+  it("supports double-click zoom", async () => {
+    const user = userEvent.setup();
+
+    renderLightbox();
+
+    await user.dblClick(getController());
+    expectToBeZoomedIn();
+
+    for (let i = 0; i < 3; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await user.dblClick(getController());
+    }
+    expectToBeZoomedOut();
+  });
+
   it("supports zoom on custom slides", () => {
     let maxZoom: number | undefined;