react-easy-panzoom - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

lib/PanZoom.js

@@ -191,3 +191,3 @@ "use strict";
           x: 0,
-          y: 1,
+          y: -1,
           z: 0
@@ -198,3 +198,3 @@ },
           x: 0,
-          y: -1,
+          y: 1,
           z: 0
@@ -204,3 +204,3 @@ },
         '37': {
-          x: 1,
+          x: -1,
           y: 0,
@@ -211,3 +211,3 @@ z: 0
         '39': {
-          x: -1,
+          x: 1,
           y: 0,
@@ -269,2 +269,4 @@ z: 0
     _defineProperty(_assertThisInitialized(_this), "onTouchStart", function (e) {
+      var preventPan = _this.props.preventPan;
+
       if (e.touches.length === 1) {
@@ -276,2 +278,6 @@ // Drag
 
+        if (preventPan(e, offset.x, offset.y)) {
+          return;
+        }
+
         _this.mousePos = {
@@ -473,2 +479,3 @@ x: offset.x,
           maxZoom = _this$props3.maxZoom;
+      var prevScale = _this.state.scale;
 
@@ -481,3 +488,3 @@ var containerRect = _this.container.getBoundingClientRect();
       var heightRatio = containerRect.height / clientRect.height;
-      var scale = Math.min(widthRatio, heightRatio) * zoomLevel;
+      var scale = Math.min(widthRatio, heightRatio) * zoomLevel * prevScale;
 
@@ -492,4 +499,4 @@ if (scale < minZoom) {
 
-      var x = (containerRect.width - clientRect.width * scale) / 2;
-      var y = (containerRect.height - clientRect.height * scale) / 2;
+      var x = (containerRect.width - clientRect.width / prevScale * scale) / 2;
+      var y = (containerRect.height - clientRect.height / prevScale * scale) / 2;
 
@@ -503,2 +510,14 @@ _this.setState({
 
+    _defineProperty(_assertThisInitialized(_this), "moveByRatio", function (x, y) {
+      var moveSpeedRatio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.05;
+
+      var containerRect = _this.container.getBoundingClientRect();
+
+      var offset = Math.min(containerRect.width, containerRect.height);
+      var dx = offset * moveSpeedRatio * x;
+      var dy = offset * moveSpeedRatio * y;
+
+      _this.moveBy(dx, dy);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "moveBy", function (dx, dy, noStateUpdate) {
@@ -573,2 +592,10 @@ var _this$state = _this.state,
 
+    _defineProperty(_assertThisInitialized(_this), "reset", function () {
+      _this.setState({
+        x: 0,
+        y: 0,
+        scale: 1
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "zoomIn", function () {
@@ -662,2 +689,3 @@ _this.centeredZoom(-1);
         style: {
+          display: 'inline-block',
           transformOrigin: '0 0 0',
@@ -664,0 +692,0 @@ transform: "matrix(".concat(scale, ", 0, 0, ").concat(scale, ", ").concat(x, ", ").concat(y, ")"),

package.json

 {
   "name": "react-easy-panzoom",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Wrapper to enable pan and zoom for any React component",
@@ -57,2 +57,3 @@ "main": "./lib/index.js",
     "react-dom": "^16.8.4",
+    "react-jss": "^8.6.1",
     "terser-webpack-plugin": "^1.2.3",
@@ -59,0 +60,0 @@ "webpack": "^4.29.6",

README.md

@@ -7,2 +7,4 @@ # react-easy-panzoom
 
+<img src="https://github.com/mnogueron/react-easy-panzoom/blob/master/react-easy-panzoom-codepen.gif" width="500" height="390" />
+
 React components that enables pan and zoom features for any component. Try out the live demo __[here](https://codesandbox.io/s/ll1xrz9mx9)__
@@ -116,3 +118,3 @@
 |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 |
+|noStateUpdate|`bool`|true|Disable state update for each new x, y, z transform value while panning. Enabling it drastically increases the performances |
 |onPanStart|`func`| |Fired on pan start|
@@ -124,2 +126,15 @@ |onPan|`func`| |Fired on pan|
 
+## Methods
+By using `ref`, methods from `PanZoom` can be accessed and called to trigger manipulation functions.
+
+Available methods are listed below:
+
+|Name|Parameters|Description|
+|---|---|---|
+|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|
+|reset| |Reset the view to it's original state (will not auto center if `autoCenter` is enabled)|
+|moveByRatio|`(x: number, y: number, moveSpeedRatio?: number)`|Move the view along `x` or/and `y` axis|
+
 ## Thanks
@@ -126,0 +141,0 @@ This react library is based on the awesome [panzoom][panzoom] by @anvaka.

src/PanZoom.js

@@ -170,6 +170,6 @@ // @flow
     const keys = {
-      '38': { x: 0, y: 1, z: 0 }, // up
-      '40': { x: 0, y: -1, z: 0 }, // down
-      '37': { x: 1, y: 0, z: 0 }, // left
-      '39': { x: -1, y: 0, z: 0 }, // right
+      '38': { x: 0, y: -1, z: 0 }, // up
+      '40': { x: 0, y: 1, z: 0 }, // down
+      '37': { x: -1, y: 0, z: 0 }, // left
+      '39': { x: 1, y: 0, z: 0 }, // right
       '189': { x: 0, y: 0, z: 1 }, // zoom out
@@ -205,2 +205,3 @@ '109': { x: 0, y: 0, z: 1 }, // zoom out
   onTouchStart = (e) => {
+    const { preventPan } = this.props
     if (e.touches.length === 1) {
@@ -210,2 +211,7 @@ // Drag
       const offset = this.getOffset(touch)
+
+      if (preventPan(e, offset.x, offset.y)) {
+        return
+      }
+
       this.mousePos = {
@@ -386,2 +392,3 @@ x: offset.x,
     const { minZoom, maxZoom } = this.props
+    const { scale: prevScale } = this.state
     const containerRect = this.container.getBoundingClientRect()
@@ -391,3 +398,3 @@ const clientRect = this.dragContainer.getBoundingClientRect()
     const heightRatio = containerRect.height / clientRect.height
-    let scale = Math.min(widthRatio, heightRatio) * zoomLevel
+    let scale = Math.min(widthRatio, heightRatio) * zoomLevel * prevScale
 
@@ -403,7 +410,16 @@ if (scale < minZoom) {
 
-    const x = (containerRect.width - (clientRect.width * scale)) / 2
-    const y = (containerRect.height - (clientRect.height * scale)) / 2
+    const x = (containerRect.width - (clientRect.width/prevScale * scale)) / 2
+    const y = (containerRect.height - (clientRect.height/prevScale * scale)) / 2
     this.setState({ x, y, scale })
   }
 
+  moveByRatio = (x, y, moveSpeedRatio = 0.05) => {
+    const containerRect = this.container.getBoundingClientRect()
+    const offset = Math.min(containerRect.width, containerRect.height)
+    const dx = offset * moveSpeedRatio * x
+    const dy = offset * moveSpeedRatio * y
+
+    this.moveBy(dx, dy)
+  }
+
   moveBy = (dx, dy, noStateUpdate) => {
@@ -460,2 +476,6 @@ const { scale, x, y } = this.state
 
+  reset = () => {
+    this.setState({ x: 0, y: 0, scale: 1 })
+  }
+
   zoomIn = () => {
@@ -497,2 +517,3 @@ this.centeredZoom(-1)
           style={{
+            display: 'inline-block',
             transformOrigin: '0 0 0',
@@ -499,0 +520,0 @@ transform: `matrix(${scale}, 0, 0, ${scale}, ${x}, ${y})`,

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

45296

increased by5.09%

Lines of code

1011

increased by3.8%

Number of lines in readme file

145

increased by11.54%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes