react-zoom-pan-pinch - npm Package Compare versions

Comparing version 3.0.8 to 3.1.0

dist/index.d.ts

@@ -153,4 +153,6 @@ import React from 'react';
     customTransform?: (x: number, y: number, scale: number) => string;
+    smooth?: boolean;
     wheel?: {
         step?: number;
+        smoothStep?: number;
         disabled?: boolean;
@@ -157,0 +159,0 @@ wheelDisabled?: boolean;

dist/src/models/context.model.d.ts

@@ -50,4 +50,6 @@ import React from "react";
     customTransform?: (x: number, y: number, scale: number) => string;
+    smooth?: boolean;
     wheel?: {
         step?: number;
+        smoothStep?: number;
         disabled?: boolean;
@@ -54,0 +56,0 @@ wheelDisabled?: boolean;

dist/src/stories/types/args.types.d.ts

@@ -19,2 +19,14 @@ export declare const argsTypes: {
     };
+    "wheel.smoothStep": {
+        defaultValue: number;
+        control: {
+            type: string;
+            min: number;
+        };
+        table: {
+            defaultValue: {
+                summary: string;
+            };
+        };
+    };
     "wheel.disabled": {
@@ -21,0 +33,0 @@ defaultValue: NonNullable<boolean | undefined>;

package.json

 {
   "name": "react-zoom-pan-pinch",
-  "version": "3.0.8",
+  "version": "3.1.0",
   "description": "Zoom and pan html elements in easy way",
@@ -5,0 +5,0 @@ "author": "prc5",

src/constants/state.constants.ts

@@ -22,5 +22,7 @@ import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
   disablePadding: false,
+  smooth: true,
   wheel: {
     step: 0.2,
     disabled: false,
+    smoothStep: 0.001,
     wheelDisabled: false,
@@ -27,0 +29,0 @@ touchPadDisabled: false,

src/core/handlers/handlers.utils.ts

@@ -20,3 +20,3 @@ import { ReactZoomPanPinchContext, ReactZoomPanPinchState } from "../../models";
   const { wrapperComponent, setup } = contextInstance;
-  const { maxScale, minScale, zoomAnimation } = setup;
+  const { maxScale, minScale, zoomAnimation, smooth } = setup;
   const { size } = zoomAnimation;
@@ -28,3 +28,5 @@
 
-  const targetScale = scale + delta * step;
+  const targetScale = smooth
+    ? scale * Math.exp(delta * step)
+    : scale + delta * step;
 
@@ -31,0 +33,0 @@ const newScale = checkZoomBounds(

src/core/wheel/wheel.logic.ts

@@ -47,5 +47,6 @@ /* eslint-disable no-param-reassign */
     disablePadding,
+    smooth,
   } = setup;
   const { size, disabled } = zoomAnimation;
-  const { step } = wheel;
+  const { step, smoothStep } = wheel;
 
@@ -60,6 +61,7 @@ if (!contentComponent) {
   const delta = getDelta(event, null);
+  const zoomStep = smooth ? smoothStep * Math.abs(event.deltaY) : step;
   const newScale = handleCalculateWheelZoom(
     contextInstance,
     delta,
-    step,
+    zoomStep,
     !event.ctrlKey,
@@ -66,0 +68,0 @@ );

src/models/context.model.ts

@@ -69,4 +69,6 @@ import React from "react";
   customTransform?: (x: number, y: number, scale: number) => string;
+  smooth?: boolean;
   wheel?: {
     step?: number;
+    smoothStep?: number;
     disabled?: boolean;
@@ -73,0 +75,0 @@ wheelDisabled?: boolean;

src/stories/types/args.types.ts

@@ -19,2 +19,12 @@ import { initialSetup } from "../../constants/state.constants";
   },
+  "wheel.smoothStep": {
+    defaultValue: initialSetup.wheel.smoothStep,
+    control: {
+      type: "number",
+      min: 0,
+    },
+    table: {
+      defaultValue: { summary: "0" },
+    },
+  },
   "wheel.disabled": {
@@ -21,0 +31,0 @@ defaultValue: initialSetup.wheel.disabled,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3393405

increased by0.09%

Lines of code

9776

increased by0.58%

No dependency changes