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

Comparing version 3.1.1 to 3.2.0

dist/src/core/bounds/bounds.utils.d.ts

@@ -6,2 +6,4 @@ import { BoundsType, PositionType, ReactZoomPanPinchContext } from "../../models";
 export declare const calculateBounds: (contextInstance: ReactZoomPanPinchContext, newScale: number) => BoundsType;
+export declare function clamp(v: number, min: number, max: number): number;
+export declare function rubberbandIfOutOfBounds(position: number, min: number, max: number, constant?: number): number;
 /**
@@ -8,0 +10,0 @@ * Keeps value between given bounds, used for limiting view to given boundaries

package.json

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

src/core/bounds/bounds.utils.ts

@@ -94,2 +94,32 @@ /* eslint-disable no-param-reassign */
 
+export function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(v, max));
+}
+
+// Based on @aholachek ;)
+// https://twitter.com/chpwn/status/285540192096497664
+// iOS constant = 0.55
+
+// https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5
+
+function rubberband(distance: number, dimension: number, constant: number) {
+  if (dimension === 0 || Math.abs(dimension) === Infinity)
+    return distance ** (constant * 5);
+  return (distance * dimension * constant) / (dimension + constant * distance);
+}
+
+export function rubberbandIfOutOfBounds(
+  position: number,
+  min: number,
+  max: number,
+  constant = 0.15,
+) {
+  if (constant === 0) return clamp(position, min, max);
+  if (position < min)
+    return -rubberband(min - position, max - min, constant) + min;
+  if (position > max)
+    return +rubberband(position - max, max - min, constant) + max;
+  return position;
+}
+
 /**
@@ -144,4 +174,15 @@ * Keeps value between given bounds, used for limiting view to given boundaries
 
+  const rubberbandX = rubberbandIfOutOfBounds(
+    positionX,
+    minPositionX,
+    maxPositionX,
+  );
+  const rubberbandY = rubberbandIfOutOfBounds(
+    positionY,
+    minPositionY,
+    maxPositionY,
+  );
+
   const x = boundLimiter(
-    positionX,
+    rubberbandX,
     minPositionX - paddingX,
@@ -153,3 +194,3 @@ maxPositionX + paddingX,
   const y = boundLimiter(
-    positionY,
+    rubberbandY,
     minPositionY - paddingY,
@@ -156,0 +197,0 @@ maxPositionY + paddingY,

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

3402002

increased by0.24%

Lines of code

9870

increased by0.87%

No dependency changes