Add smooth and smooth step options to wheel (#386)

Author: joshuaKnauber

src/constants/state.constants.ts

@@ -21,6 +21,8 @@ export const initialSetup: LibrarySetup = {
   disablePadding: false,
   wheel: {
     step: 0.2,
+    smooth: false,
+    smoothStep: 0.001,
     disabled: false,
     wheelDisabled: false,
     touchPadDisabled: false,

src/core/wheel/wheel.logic.ts

@@ -46,7 +46,7 @@ export const handleWheelZoom = (
     disablePadding,
   } = setup;
   const { size, disabled } = zoomAnimation;
-  const { step } = wheel;
+  const { step, smooth, smoothStep } = wheel;
 
   if (!contentComponent) {
     throw new Error("Component not mounted");
@@ -56,10 +56,11 @@ export const handleWheelZoom = (
   event.stopPropagation();
 
   const delta = getDelta(event, null);
+  const zoomStep = smooth ? smoothStep * Math.abs(event.deltaY) : step;
   const newScale = handleCalculateWheelZoom(
     contextInstance,
     delta,
-    step,
+    zoomStep,
     !event.ctrlKey,
   );
 

src/models/context.model.ts

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

src/stories/docs/props.tsx

@@ -176,6 +176,18 @@ export const wrapperPropsTable: ComponentProps = {
       defaultValue: String(initialSetup.wheel.step),
       description: "The sensitivity of zooming with the wheel/touchpad.",
     },
+    smoothStep: {
+      type: ["number"],
+      defaultValue: String(initialSetup.wheel.smoothStep),
+      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

@@ -16,6 +16,24 @@ export const argsTypes = {
       defaultValue: { summary: "0" },
     },
   },
+  "wheel.smoothStep": {
+    defaultValue: initialSetup.wheel.smoothStep,
+    control: {
+      type: "number",
+      min: 0,
+    },
+    table: {
+      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" },