feat: 🎸 Enabled smooth zoom

Author: prc5

src/constants/state.constants.ts

@@ -19,11 +19,11 @@ export const initialSetup: LibrarySetup = {
   centerZoomedOut: false,
   centerOnInit: false,
   disablePadding: false,
+  smooth: true,
   wheel: {
     step: 0.2,
-    smooth: false,
-    smoothStep: 0.001,
     disabled: false,
+    smoothStep: 0.001,
     wheelDisabled: false,
     touchPadDisabled: false,
     activationKeys: [],

src/core/handlers/handlers.utils.ts

@@ -17,14 +17,16 @@ export const handleCalculateButtonZoom = (
 ): number => {
   const { scale } = contextInstance.transformState;
   const { wrapperComponent, setup } = contextInstance;
-  const { maxScale, minScale, zoomAnimation } = setup;
+  const { maxScale, minScale, zoomAnimation, smooth } = setup;
   const { size } = zoomAnimation;
 
   if (!wrapperComponent) {
     throw new Error("Wrapper is not mounted");
   }
 
-  const targetScale = scale + delta * step;
+  const targetScale = smooth
+    ? scale * Math.exp(delta * step)
+    : scale + delta * step;
 
   const newScale = checkZoomBounds(
     roundNumber(targetScale, 3),

src/core/wheel/wheel.logic.ts

@@ -44,9 +44,10 @@ export const handleWheelZoom = (
     zoomAnimation,
     wheel,
     disablePadding,
+    smooth,
   } = setup;
   const { size, disabled } = zoomAnimation;
-  const { step, smooth, smoothStep } = wheel;
+  const { step, smoothStep } = wheel;
 
   if (!contentComponent) {
     throw new Error("Component not mounted");

src/models/context.model.ts

@@ -66,10 +66,10 @@ export type ReactZoomPanPinchProps = {
   centerOnInit?: boolean;
   disablePadding?: boolean;
   customTransform?: (x: number, y: number, scale: number) => string;
+  smooth?: boolean;
   wheel?: {
     step?: number;
     smoothStep?: number;
-    smooth?: boolean;
     disabled?: boolean;
     wheelDisabled?: boolean;
     touchPadDisabled?: boolean;

src/stories/docs/props.tsx

@@ -165,6 +165,12 @@ export const wrapperPropsTable: ComponentProps = {
     description:
       "We can provide custom transform function to provide different way of handling our transform logic. If we need performance we can import getMatrixTransformStyles functions and replace default one. WARNING: default transform prevents svg blur on the safari.",
   },
+  smooth: {
+    type: ["boolean"],
+    defaultValue: String(initialSetup.smooth),
+    description:
+      "Enable smooth scrolling by multiplying the scroll delta with the smooth step factor.",
+  },
   wheel: {
     wheel: {
       type: [""],
@@ -182,12 +188,6 @@ export const wrapperPropsTable: ComponentProps = {
       description:
         "The sensitivity multiplier of zooming with the wheel/touchpad used, instead of the step value, when smooth scrolling is enabled.",
     },
-    smooth: {
-      type: ["boolean"],
-      defaultValue: String(initialSetup.wheel.smooth),
-      description:
-        "Enable smooth scrolling by multiplying the scroll delta with the smooth step factor.",
-    },
     disabled: {
       type: ["boolean"],
       defaultValue: String(initialSetup.wheel.disabled),

src/stories/types/args.types.ts

@@ -26,14 +26,6 @@ export const argsTypes = {
       defaultValue: { summary: "0" },
     },
   },
-  "wheel.smooth": {
-    defaultValue: initialSetup.wheel.smooth,
-    control: { type: "boolean" },
-    table: {
-      defaultValue: { summary: "false" },
-      type: { summary: "boolean" },
-    },
-  },
   "wheel.disabled": {
     defaultValue: initialSetup.wheel.disabled,
     control: { type: "boolean" },