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

Comparing version 1.4.0 to 1.4.1

dist/index.es.js

@@ -84,3 +84,3 @@ import React, { Component } from 'react';
         panPaddingShiftTime: 50,
-        panAnimationType: "easeOut",
+        panAnimationType: "linear",
         lockAxisX: false,
@@ -92,3 +92,3 @@ lockAxisY: false,
         velocityActiveScale: 1,
-        velocityMinSpeed: 0.2,
+        velocityMinSpeed: 1.2,
         velocityBaseTime: 1800,
@@ -759,3 +759,3 @@ limitToWrapperBounds: false,
 
-var throttleTime = 10;
+var throttleTime = 30;
 function velocityTimeSpeed(speed, animationTime) {
@@ -801,3 +801,3 @@ var velocityEqualToMove = this.stateProvider.pan.velocityEqualToMove;
     var _this = this;
-    var _a = this.stateProvider, scale = _a.scale, disabled = _a.options.disabled, _b = _a.pan, velocity = _b.velocity, velocitySensitivity = _b.velocitySensitivity, velocityActiveScale = _b.velocityActiveScale;
+    var _a = this.stateProvider, scale = _a.scale, disabled = _a.options.disabled, _b = _a.pan, velocity = _b.velocity, velocitySensitivity = _b.velocitySensitivity, velocityActiveScale = _b.velocityActiveScale, wrapperComponent = _a.wrapperComponent;
     if (!velocity || velocityActiveScale >= scale || disabled)
@@ -811,5 +811,7 @@ return;
             return console.error("No mouse or touch position detected");
+        var windowToWrapperScaleX = getWindowScale(window.innerWidth / wrapperComponent.offsetWidth);
+        var windowToWrapperScaleY = getWindowScale(window.innerHeight / wrapperComponent.offsetHeight);
         var clientX = position_1.clientX, clientY = position_1.clientY;
-        var distanceX = (clientX - this.lastMousePosition.clientX) * scale;
-        var distanceY = (clientY - this.lastMousePosition.clientY) * scale;
+        var distanceX = (clientX - this.lastMousePosition.clientX) * scale * windowToWrapperScaleX;
+        var distanceY = (clientY - this.lastMousePosition.clientY) * scale * windowToWrapperScaleY;
         var interval = now - this.velocityTime;
@@ -831,2 +833,8 @@ var velocityX = (distanceX / interval) * velocitySensitivity;
 }
+function getWindowScale(scale) {
+    if (scale < 1) {
+        return Math.max(3 - scale, 1);
+    }
+    return scale;
+}
 
@@ -833,0 +841,0 @@ // We want to make event listeners non-passive, and to do so have to check

dist/index.js

@@ -91,3 +91,3 @@ 'use strict';
         panPaddingShiftTime: 50,
-        panAnimationType: "easeOut",
+        panAnimationType: "linear",
         lockAxisX: false,
@@ -99,3 +99,3 @@ lockAxisY: false,
         velocityActiveScale: 1,
-        velocityMinSpeed: 0.2,
+        velocityMinSpeed: 1.2,
         velocityBaseTime: 1800,
@@ -766,3 +766,3 @@ limitToWrapperBounds: false,
 
-var throttleTime = 10;
+var throttleTime = 30;
 function velocityTimeSpeed(speed, animationTime) {
@@ -808,3 +808,3 @@ var velocityEqualToMove = this.stateProvider.pan.velocityEqualToMove;
     var _this = this;
-    var _a = this.stateProvider, scale = _a.scale, disabled = _a.options.disabled, _b = _a.pan, velocity = _b.velocity, velocitySensitivity = _b.velocitySensitivity, velocityActiveScale = _b.velocityActiveScale;
+    var _a = this.stateProvider, scale = _a.scale, disabled = _a.options.disabled, _b = _a.pan, velocity = _b.velocity, velocitySensitivity = _b.velocitySensitivity, velocityActiveScale = _b.velocityActiveScale, wrapperComponent = _a.wrapperComponent;
     if (!velocity || velocityActiveScale >= scale || disabled)
@@ -818,5 +818,7 @@ return;
             return console.error("No mouse or touch position detected");
+        var windowToWrapperScaleX = getWindowScale(window.innerWidth / wrapperComponent.offsetWidth);
+        var windowToWrapperScaleY = getWindowScale(window.innerHeight / wrapperComponent.offsetHeight);
         var clientX = position_1.clientX, clientY = position_1.clientY;
-        var distanceX = (clientX - this.lastMousePosition.clientX) * scale;
-        var distanceY = (clientY - this.lastMousePosition.clientY) * scale;
+        var distanceX = (clientX - this.lastMousePosition.clientX) * scale * windowToWrapperScaleX;
+        var distanceY = (clientY - this.lastMousePosition.clientY) * scale * windowToWrapperScaleY;
         var interval = now - this.velocityTime;
@@ -838,2 +840,8 @@ var velocityX = (distanceX / interval) * velocitySensitivity;
 }
+function getWindowScale(scale) {
+    if (scale < 1) {
+        return Math.max(3 - scale, 1);
+    }
+    return scale;
+}
 
@@ -840,0 +848,0 @@ // We want to make event listeners non-passive, and to do so have to check

package.json

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

README.md

@@ -162,7 +162,6 @@ # react-zoom-pan-pinch
 | panPaddingShiftTime  |   50    |                                          number |
-| panAnimationType     | easeOut |                                          string |
 | velocity             |  false  |                                         boolean |
 | velocityEqualToMove  |  false  |                                         boolean |
 | velocitySensitivity  |    1    |                                          number |
-| velocityMinSpeed     |   0.2   |                                          number |
+| velocityMinSpeed     |   1.2   |                                          number |
 | velocityBaseTime     |  1800   |                                          number |
@@ -169,0 +168,0 @@ | limitToWrapperBounds |  false  |                                         boolean |

No alert changes

Improved metrics

Total package byte prevSize

380753

0.6%

Lines of code

3170

0.51%

Worsened metrics

Number of lines in readme file

275

-0.36%

No dependency changes