react-easy-panzoom - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/PanZoom.js

@@ -68,2 +68,7 @@ "use strict";
 
+    _defineProperty(_assertThisInitialized(_this), "prevPanPosition", {
+      x: 0,
+      y: 0
+    });
+
     _defineProperty(_assertThisInitialized(_this), "state", {
@@ -112,4 +117,9 @@ x: 0,
         x: offset.x,
-        y: offset.y
+        y: offset.y // keep the current pan value in memory to allow noStateUpdate panning
+
       };
+      _this.prevPanPosition = {
+        x: _this.state.x,
+        y: _this.state.y
+      };
       _this.panning = true;
@@ -125,3 +135,4 @@
       if (_this.panning) {
-        // TODO disable if using touch event
+        var noStateUpdate = _this.props.noStateUpdate; // TODO disable if using touch event
+
         _this.triggerOnPanStart(e);
@@ -138,3 +149,3 @@
 
-        _this.moveBy(dx, dy);
+        _this.moveBy(dx, dy, noStateUpdate);
 
@@ -146,2 +157,5 @@ _this.triggerOnPan(e);
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) {
+      // if using noStateUpdate we still need to set the new values in the state
+      _this.dispatchStateUpdateIfNeeded();
+
       _this.triggerOnPanEnd(e);
@@ -156,8 +170,2 @@
 
-    _defineProperty(_assertThisInitialized(_this), "onMouseOut", function (e) {
-      _this.triggerOnPanEnd(e);
-
-      _this.panning = false;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onWheel", function (e) {
@@ -271,4 +279,9 @@ if (_this.props.disabled) {
           x: offset.x,
-          y: offset.y
+          y: offset.y // keep the current pan value in memory to allow noStateUpdate panning
+
         };
+        _this.prevPanPosition = {
+          x: _this.state.x,
+          y: _this.state.y
+        };
         _this.touchInProgress = true;
@@ -287,3 +300,5 @@
     _defineProperty(_assertThisInitialized(_this), "onToucheMove", function (e) {
-      var realPinch = _this.props.realPinch;
+      var _this$props2 = _this.props,
+          realPinch = _this$props2.realPinch,
+          noStateUpdate = _this$props2.noStateUpdate;
 
@@ -308,3 +323,3 @@ if (e.touches.length === 1) {
 
-        _this.moveBy(dx, dy);
+        _this.moveBy(dx, dy, noStateUpdate);
 
@@ -343,3 +358,2 @@ _this.triggerOnPan(e);
         e.stopPropagation();
-        e.preventDefault();
       }
@@ -349,3 +363,3 @@ });
     _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
-      if (e.touches.length === 0) {
+      if (e.touches.length > 0) {
         var offset = _this.getOffset(e.touches[0]);
@@ -355,5 +369,13 @@
           x: offset.x,
-          y: offset.y
+          y: offset.y // when removing a finger we don't go through onTouchStart
+          // thus we need to set the prevPanPosition here
+
         };
+        _this.prevPanPosition = {
+          x: _this.state.x,
+          y: _this.state.y
+        };
       } else {
+        _this.dispatchStateUpdateIfNeeded();
+
         _this.touchInProgress = false;
@@ -367,2 +389,13 @@
 
+    _defineProperty(_assertThisInitialized(_this), "dispatchStateUpdateIfNeeded", function () {
+      var noStateUpdate = _this.props.noStateUpdate;
+
+      if (noStateUpdate) {
+        _this.setState({
+          x: _this.prevPanPosition.x,
+          y: _this.prevPanPosition.y
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "setMouseListeners", function () {
@@ -444,2 +477,5 @@ document.addEventListener('mousemove', _this.onMouseMove);
       var zoomLevel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      var _this$props3 = _this.props,
+          minZoom = _this$props3.minZoom,
+          maxZoom = _this$props3.maxZoom;
 
@@ -453,2 +489,11 @@ var containerRect = _this.container.getBoundingClientRect();
       var scale = Math.min(widthRatio, heightRatio) * zoomLevel;
+
+      if (scale < minZoom) {
+        console.warn("[PanZoom]: initial zoomLevel produces a scale inferior to minZoom, reverted to default: ".concat(minZoom, ". Consider using a zoom level > ").concat(minZoom));
+        scale = minZoom;
+      } else if (scale > maxZoom) {
+        console.warn("[PanZoom]: initial zoomLevel produces a scale superior to maxZoom, reverted to default: ".concat(maxZoom, ". Consider using a zoom level < ").concat(maxZoom));
+        scale = maxZoom;
+      }
+
       var x = (containerRect.width - clientRect.width * scale) / 2;
@@ -464,6 +509,20 @@ var y = (containerRect.height - clientRect.height * scale) / 2;
 
-    _defineProperty(_assertThisInitialized(_this), "moveBy", function (dx, dy) {
+    _defineProperty(_assertThisInitialized(_this), "moveBy", function (dx, dy, noStateUpdate) {
+      var _this$state = _this.state,
+          scale = _this$state.scale,
+          x = _this$state.x,
+          y = _this$state.y; // Allow better performance by not updating the state on every change
+
+      if (noStateUpdate) {
+        _this.prevPanPosition = {
+          x: _this.prevPanPosition.x + dx,
+          y: _this.prevPanPosition.y + dy
+        };
+        _this.dragContainer.style.transform = "matrix(".concat(scale, ", 0, 0, ").concat(scale, ", ").concat(_this.prevPanPosition.x, ", ").concat(_this.prevPanPosition.y, ")");
+        return;
+      }
+
       _this.setState({
-        x: _this.state.x + dx,
-        y: _this.state.y + dy
+        x: x + dx,
+        y: y + dy
       });
@@ -477,9 +536,9 @@ });
     _defineProperty(_assertThisInitialized(_this), "zoomTo", function (x, y, ratio) {
-      var _this$props2 = _this.props,
-          minZoom = _this$props2.minZoom,
-          maxZoom = _this$props2.maxZoom;
-      var _this$state = _this.state,
-          transformX = _this$state.x,
-          transformY = _this$state.y,
-          scale = _this$state.scale;
+      var _this$props4 = _this.props,
+          minZoom = _this$props4.minZoom,
+          maxZoom = _this$props4.maxZoom;
+      var _this$state2 = _this.state,
+          transformX = _this$state2.x,
+          transformY = _this$state2.y,
+          scale = _this$state2.scale;
       var newScale = scale * ratio;
@@ -546,7 +605,7 @@
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-          autoCenter = _this$props3.autoCenter,
-          autoCenterZoomLevel = _this$props3.autoCenterZoomLevel,
-          minZoom = _this$props3.minZoom,
-          maxZoom = _this$props3.maxZoom;
+      var _this$props5 = this.props,
+          autoCenter = _this$props5.autoCenter,
+          autoCenterZoomLevel = _this$props5.autoCenterZoomLevel,
+          minZoom = _this$props5.minZoom,
+          maxZoom = _this$props5.maxZoom;
 
@@ -580,11 +639,11 @@ if (maxZoom < minZoom) {
 
-      var _this$props4 = this.props,
-          children = _this$props4.children,
-          style = _this$props4.style,
-          disabled = _this$props4.disabled,
-          disableKeyInteraction = _this$props4.disableKeyInteraction;
-      var _this$state2 = this.state,
-          x = _this$state2.x,
-          y = _this$state2.y,
-          scale = _this$state2.scale;
+      var _this$props6 = this.props,
+          children = _this$props6.children,
+          style = _this$props6.style,
+          disabled = _this$props6.disabled,
+          disableKeyInteraction = _this$props6.disableKeyInteraction;
+      var _this$state3 = this.state,
+          x = _this$state3.x,
+          y = _this$state3.y,
+          scale = _this$state3.scale;
       return React.createElement("div", _extends({
@@ -627,2 +686,3 @@ ref: function ref(_ref2) {
   maxZoom: Infinity,
+  noStateUpdate: true,
   preventPan: function preventPan() {
@@ -629,0 +689,0 @@ return false;

package.json

 {
   "name": "react-easy-panzoom",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Wrapper to enable pan and zoom for any React component",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

 # react-easy-panzoom
+[![Code](https://img.shields.io/badge/sources-GitHub-c9510c.svg?style=plastic)](https://github.com/mnogueron/react-easy-panzoom)
+[![Code](https://img.shields.io/github/issues/mnogueron/react-easy-panzoom.svg?style=plastic)](https://github.com/mnogueron/react-easy-panzoom)
+[![npm](https://img.shields.io/npm/v/react-easy-panzoom.svg?maxAge=2592000&style=plastic)](https://www.npmjs.com/package/react-easy-panzoom)
+[![Code](https://img.shields.io/npm/dt/react-easy-panzoom.svg?style=plastic)](https://www.npmjs.com/package/react-easy-panzoom)
 
-React components that enables pan and zoom features for any component.
+React components that enables pan and zoom features for any component. Try out the live demo __[here](https://codesandbox.io/s/ll1xrz9mx9)__
 
@@ -111,2 +115,3 @@ ## Installation
 |maxZoom|`number`| |Sets the maximum zoom value|
+|noStateUpdate|`bool`|true|Disable state update for each new x,y,z transform value while panning. Enabling it while drastically increase the performances |
 |onPanStart|`func`| |Fired on pan start|
@@ -113,0 +118,0 @@ |onPan|`func`| |Fired on pan|

src/PanZoom.js

@@ -16,2 +16,3 @@ // @flow
   preventPan?: (event: SyntheticEvent, x: number, y: number) => boolean,
+  noStateUpdate?: boolean,
 
@@ -35,2 +36,7 @@ onPanStart?: (any) => void,
 
+  prevPanPosition = {
+    x: 0,
+    y: 0,
+  }
+
   state = {
@@ -101,2 +107,8 @@ x: 0,
 
+    // keep the current pan value in memory to allow noStateUpdate panning
+    this.prevPanPosition = {
+      x: this.state.x,
+      y: this.state.y,
+    }
+
     this.panning = true
@@ -112,2 +124,3 @@
     if (this.panning) {
+      const { noStateUpdate } = this.props
 
@@ -127,3 +140,3 @@ // TODO disable if using touch event
 
-      this.moveBy(dx, dy)
+      this.moveBy(dx, dy, noStateUpdate)
       this.triggerOnPan(e)
@@ -134,2 +147,5 @@ }
   onMouseUp = (e) => {
+    // if using noStateUpdate we still need to set the new values in the state
+    this.dispatchStateUpdateIfNeeded()
+
     this.triggerOnPanEnd(e)
@@ -141,8 +157,2 @@ this.cleanMouseListeners()
 
-  // TODO probably add zoom props to stop pan on parent container mouseout
-  onMouseOut = (e) => {
-    this.triggerOnPanEnd(e)
-    this.panning = false
-  }
-
   onWheel = (e) => {
@@ -210,2 +220,8 @@ if (this.props.disabled) {
 
+      // keep the current pan value in memory to allow noStateUpdate panning
+      this.prevPanPosition = {
+        x: this.state.x,
+        y: this.state.y,
+      }
+
       this.touchInProgress = true
@@ -222,3 +238,3 @@ this.setTouchListeners()
   onToucheMove = (e) => {
-    const { realPinch } = this.props
+    const { realPinch, noStateUpdate } = this.props
     if (e.touches.length === 1) {
@@ -228,2 +244,3 @@ e.stopPropagation()
       const offset = this.getOffset(touch)
+
       const dx = offset.x - this.mousePos.x
@@ -241,3 +258,3 @@ const dy = offset.y - this.mousePos.y
 
-      this.moveBy(dx, dy)
+      this.moveBy(dx, dy, noStateUpdate)
       this.triggerOnPan(e)
@@ -270,3 +287,2 @@ } else if (e.touches.length === 2) {
       e.stopPropagation()
-      e.preventDefault()
     }
@@ -276,3 +292,3 @@ }
   onTouchEnd = (e) => {
-    if (e.touches.length === 0) {
+    if (e.touches.length > 0) {
       const offset = this.getOffset(e.touches[0])
@@ -283,4 +299,13 @@ this.mousePos = {
       }
+
+      // when removing a finger we don't go through onTouchStart
+      // thus we need to set the prevPanPosition here
+      this.prevPanPosition = {
+        x: this.state.x,
+        y: this.state.y,
+      }
     } else {
+      this.dispatchStateUpdateIfNeeded()
       this.touchInProgress = false
+
       this.triggerOnPanEnd(e)
@@ -291,2 +316,9 @@ this.cleanTouchListeners()
 
+  dispatchStateUpdateIfNeeded = () => {
+    const { noStateUpdate } = this.props
+    if (noStateUpdate) {
+      this.setState(({ x: this.prevPanPosition.x, y: this.prevPanPosition.y }))
+    }
+  }
+
   setMouseListeners = () => {
@@ -365,2 +397,3 @@ document.addEventListener('mousemove', this.onMouseMove)
   autoCenter = (zoomLevel = 1) => {
+    const { minZoom, maxZoom } = this.props
     const containerRect = this.container.getBoundingClientRect()
@@ -370,3 +403,13 @@ const clientRect = this.dragContainer.getBoundingClientRect()
     const heightRatio = containerRect.height / clientRect.height
-    const scale = Math.min(widthRatio, heightRatio) * zoomLevel
+    let scale = Math.min(widthRatio, heightRatio) * zoomLevel
+
+    if (scale < minZoom) {
+      console.warn(`[PanZoom]: initial zoomLevel produces a scale inferior to minZoom, reverted to default: ${minZoom}. Consider using a zoom level > ${minZoom}`)
+      scale = minZoom
+    }
+    else if (scale > maxZoom) {
+      console.warn(`[PanZoom]: initial zoomLevel produces a scale superior to maxZoom, reverted to default: ${maxZoom}. Consider using a zoom level < ${maxZoom}`)
+      scale = maxZoom
+    }
+
     const x = (containerRect.width - (clientRect.width * scale)) / 2
@@ -377,4 +420,16 @@ const y = (containerRect.height - (clientRect.height * scale)) / 2
 
-  moveBy = (dx, dy) => {
-    this.setState(({ x: this.state.x + dx, y: this.state.y + dy }))
+  moveBy = (dx, dy, noStateUpdate) => {
+    const { scale, x, y } = this.state
+
+    // Allow better performance by not updating the state on every change
+    if (noStateUpdate) {
+      this.prevPanPosition = {
+        x: this.prevPanPosition.x + dx,
+        y: this.prevPanPosition.y + dy,
+      }
+      this.dragContainer.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${this.prevPanPosition.x}, ${this.prevPanPosition.y})`
+      return
+    }
+
+    this.setState(({ x: x + dx, y: y + dy }))
   }
@@ -470,2 +525,3 @@
   maxZoom: Infinity,
+  noStateUpdate: true,
 
@@ -472,0 +528,0 @@ preventPan: () => false,

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

43101

increased by12.73%

Lines of code

974

increased by10.68%

Number of lines in readme file

130

increased by4%

No dependency changes