react-easy-panzoom - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/PanZoom.js

@@ -602,4 +602,4 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "getScaleMultiplier", function (delta) {
-      var speed = 0.065 * _this.props.zoomSpeed;
+    _defineProperty(_assertThisInitialized(_this), "getScaleMultiplier", function (delta, zoomSpeed) {
+      var speed = 0.065 * (zoomSpeed || _this.props.zoomSpeed);
       var scaleMultiplier = 1;
@@ -644,2 +644,3 @@
       var zoomLevel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
@@ -670,3 +671,17 @@ var container = _this.getContainer();
       var y = (containerRect.height - clientHeight * scale) / 2;
+      var afterStateUpdate = undefined;
 
+      if (!animate) {
+        var transition = dragContainer.style.transition;
+        dragContainer.style.transition = "none";
+
+        afterStateUpdate = function afterStateUpdate() {
+          setTimeout(function () {
+            var dragContainer = _this.getDragContainer();
+
+            dragContainer.style.transition = transition;
+          }, 0);
+        };
+      }
+
       _this.setState({
@@ -677,3 +692,3 @@ x: x,
         rotate: 0
-      });
+      }, afterStateUpdate);
     });
@@ -813,6 +828,6 @@
 
-    _defineProperty(_assertThisInitialized(_this), "centeredZoom", function (delta) {
+    _defineProperty(_assertThisInitialized(_this), "centeredZoom", function (delta, zoomSpeed) {
       var container = _this.getContainer();
 
-      var scaleMultiplier = _this.getScaleMultiplier(delta);
+      var scaleMultiplier = _this.getScaleMultiplier(delta, zoomSpeed);
 
@@ -833,8 +848,8 @@ var containerRect = container.getBoundingClientRect();
 
-    _defineProperty(_assertThisInitialized(_this), "zoomIn", function () {
-      _this.centeredZoom(-1);
+    _defineProperty(_assertThisInitialized(_this), "zoomIn", function (zoomSpeed) {
+      _this.centeredZoom(-1, zoomSpeed);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "zoomOut", function () {
-      _this.centeredZoom(1);
+    _defineProperty(_assertThisInitialized(_this), "zoomOut", function (zoomSpeed) {
+      _this.centeredZoom(1, zoomSpeed);
     });
@@ -965,3 +980,3 @@
       if (autoCenter) {
-        this.autoCenter(autoCenterZoomLevel);
+        this.autoCenter(autoCenterZoomLevel, false);
       }
@@ -968,0 +983,0 @@ }

package.json

 {
   "name": "react-easy-panzoom",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Wrapper to enable pan and zoom for any React component",
@@ -15,3 +15,3 @@ "main": "./lib/index.js",
     "clean": "rm -rf lib && mkdir lib",
-    "prepublish": "npm run lib",
+    "prepublishOnly": "npm run lib",
     "storybook": "start-storybook -p 6006",
@@ -51,8 +51,8 @@ "build": "webpack",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^5.1.3",
-    "@storybook/addon-knobs": "^5.1.3",
-    "@storybook/addon-links": "^5.1.3",
-    "@storybook/addons": "^5.1.3",
-    "@storybook/react": "^5.1.3",
-    "@storybook/theming": "^5.1.3",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/addon-links": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "@storybook/react": "^5.1.9",
+    "@storybook/theming": "^5.1.9",
     "babel-loader": "^8.0.5",
@@ -59,0 +59,0 @@ "cross-env": "^5.2.0",

README.md

@@ -166,5 +166,5 @@ # react-easy-panzoom
 |---|---|---|
-|zoomIn| |Zoom in from the center of the `PanZoom` container|
-|zoomOut| |Zoom out from the center of the `PanZoom` container|
-|autoCenter| |Center and resize the view to fit the `PanZoom` container|
+|zoomIn|`(zoomSpeed?: number)`|Zoom in from the center of the `PanZoom` container|
+|zoomOut|`(zoomSpeed?: number)`|Zoom out from the center of the `PanZoom` container|
+|autoCenter|`(zoom: number, animate?: boolean = true)`|Center and resize the view to fit the `PanZoom` container|
 |reset| |Reset the view to it's original state (will not auto center if `autoCenter` is enabled)|
@@ -171,0 +171,0 @@ |moveByRatio|`(x: number, y: number, moveSpeedRatio?: number)`|Move the view along `x` or/and `y` axis|

src/PanZoom.js

@@ -153,3 +153,3 @@ // @flow
     if (autoCenter) {
-      this.autoCenter(autoCenterZoomLevel)
+      this.autoCenter(autoCenterZoomLevel, false)
     }
@@ -525,4 +525,4 @@ }
 
-  getScaleMultiplier = (delta: number) => {
-    let speed = 0.065 * this.props.zoomSpeed
+  getScaleMultiplier = (delta: number, zoomSpeed?: number) => {
+    let speed = 0.065 * (zoomSpeed || this.props.zoomSpeed)
     let scaleMultiplier = 1
@@ -561,3 +561,3 @@ if (delta > 0) { // zoom out
 
-  autoCenter = (zoomLevel: number = 1) => {
+  autoCenter = (zoomLevel: number = 1, animate: boolean = true) => {
     const container = this.getContainer()
@@ -583,3 +583,16 @@ const dragContainer = this.getDragContainer()
     const y = (containerRect.height - (clientHeight * scale)) / 2
-    this.setState({ x, y, scale, rotate: 0 })
+    
+    let afterStateUpdate = undefined
+    if (!animate) {
+      const transition = dragContainer.style.transition
+      dragContainer.style.transition = "none"
+      afterStateUpdate = () => {
+        setTimeout(() => { 
+          const dragContainer = this.getDragContainer()
+          dragContainer.style.transition = transition
+        }, 0)
+      }
+    }
+
+    this.setState({ x, y, scale, rotate: 0 }, afterStateUpdate)
   }
@@ -678,5 +691,5 @@
 
-  centeredZoom = (delta: number) => {
+  centeredZoom = (delta: number, zoomSpeed?: number) => {
     const container = this.getContainer()
-    const scaleMultiplier = this.getScaleMultiplier(delta)
+    const scaleMultiplier = this.getScaleMultiplier(delta, zoomSpeed)
     const containerRect = container.getBoundingClientRect()
@@ -690,8 +703,8 @@ this.zoomTo(containerRect.width / 2, containerRect.height / 2, scaleMultiplier)
 
-  zoomIn = () => {
-    this.centeredZoom(-1)
+  zoomIn = (zoomSpeed?: number) => {
+    this.centeredZoom(-1, zoomSpeed)
   }
 
-  zoomOut = () => {
-    this.centeredZoom(1)
+  zoomOut = (zoomSpeed?: number) => {
+    this.centeredZoom(1, zoomSpeed)
   }
@@ -698,0 +711,0 @@

No alert changes

Improved metrics

Total package byte prevSize

78077

increased by1.62%

Lines of code

1654

increased by1.41%

No dependency changes