refactor: Add toggle double-click mode (#410)

* Add toggle double-click mode

* Extra nested ternary

Author: Cretezy

src/core/double-click/double-click.logic.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { ReactZoomPanPinchContext } from "../../models";
+import { LibrarySetup, ReactZoomPanPinchContext } from "../../models";
 import { animate } from "../animations/animations.utils";
 import { getMousePosition } from "../wheel/wheel.utils";
 import { handleZoomToPoint } from "../zoom/zoom.logic";
@@ -44,6 +44,17 @@ export const handleDoubleClickResetMode = (
   handleDoubleClickStop(contextInstance, event);
 };
 
+function getDoubleClickScale(
+  mode: LibrarySetup["doubleClick"]["mode"],
+  scale: number,
+) {
+  if (mode === "toggle") {
+    return scale === 1 ? 1 : -1;
+  }
+
+  return mode === "zoomOut" ? -1 : 1;
+}
+
 export function handleDoubleClick(
   contextInstance: ReactZoomPanPinchContext,
   event: MouseEvent | TouchEvent,
@@ -65,7 +76,7 @@ export function handleDoubleClick(
 
   if (!contentComponent) return console.error("No ContentComponent found");
 
-  const delta = mode === "zoomOut" ? -1 : 1;
+  const delta = getDoubleClickScale(mode, contextInstance.transformState.scale);
 
   const newScale = handleCalculateButtonZoom(contextInstance, delta, step);
 

src/models/context.model.ts

@@ -3,12 +3,12 @@ import React from "react";
 import { animations } from "../core/animations/animations.constants";
 import { DeepNonNullable } from "./helpers.model";
 import {
-  zoomIn,
-  zoomToElement,
   centerView,
   resetTransform,
   setTransform,
+  zoomIn,
   zoomOut,
+  zoomToElement,
 } from "../core/handlers/handlers.logic";
 import { ZoomPanPinch } from "../core/instance.core";
 
@@ -96,7 +96,7 @@ export type ReactZoomPanPinchProps = {
   doubleClick?: {
     disabled?: boolean;
     step?: number;
-    mode?: "zoomIn" | "zoomOut" | "reset";
+    mode?: "zoomIn" | "zoomOut" | "reset" | "toggle";
     animationTime?: number;
     animationType?: keyof typeof animations;
     excluded?: string[];

src/stories/docs/props.tsx

@@ -323,10 +323,10 @@ export const wrapperPropsTable: ComponentProps = {
         "The sensitivity of zooming in or out when the double click mode is set to 'zoomIn' or 'zoomOut'.",
     },
     mode: {
-      type: ["zoomIn", "zoomOut", "reset"],
+      type: ["zoomIn", "zoomOut", "reset", "toggle"],
       defaultValue: String(initialSetup.doubleClick.mode),
       description:
-        "The mode of the double click feature. Zoom in/Zoom out will change the scale with the given step settings. The reset functionality will take change transform to the initial values.",
+        "The mode of the double click feature. Zoom in/Zoom out will change the scale with the given step settings. The reset functionality will take change transform to the initial values. The toggle functionality will toggle between zooming in and out.",
     },
     animationTime: {
       type: ["number"],

src/typings.d.ts

@@ -7,4 +7,4 @@ declare module "*.css" {
   export default content;
 }
 
-type SvgrComponent = React.StatelessComponent<React.SVGAttributes<SVGElement>>
+type SvgrComponent = React.StatelessComponent<React.SVGAttributes<SVGElement>>;