react-easy-panzoom - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

lib/PanZoom.js

@@ -520,5 +520,9 @@ "use strict";
       if (noStateUpdate) {
+        var _this$getBoundCoordin = _this.getBoundCoordinates(_this.prevPanPosition.x + dx, _this.prevPanPosition.y + dy, scale),
+            _boundX = _this$getBoundCoordin.boundX,
+            _boundY = _this$getBoundCoordin.boundY;
+
         _this.prevPanPosition = {
-          x: _this.prevPanPosition.x + dx,
-          y: _this.prevPanPosition.y + dy
+          x: _boundX,
+          y: _boundY
         };
@@ -529,5 +533,9 @@ _this.dragContainer.style.transform = "matrix(".concat(scale, ", 0, 0, ").concat(scale, ", ").concat(_this.prevPanPosition.x, ", ").concat(_this.prevPanPosition.y, ")");
 
+      var _this$getBoundCoordin2 = _this.getBoundCoordinates(x + dx, y + dy, scale),
+          boundX = _this$getBoundCoordin2.boundX,
+          boundY = _this$getBoundCoordin2.boundY;
+
       _this.setState({
-        x: x + dx,
-        y: y + dy
+        x: boundX,
+        y: boundY
       });
@@ -569,5 +577,9 @@ });
 
+      var _this$getBoundCoordin3 = _this.getBoundCoordinates(newX, newY, scale),
+          boundX = _this$getBoundCoordin3.boundX,
+          boundY = _this$getBoundCoordin3.boundY;
+
       _this.setState({
-        x: newX,
-        y: newY,
+        x: boundX,
+        y: boundY,
         scale: newScale
@@ -612,2 +624,49 @@ });
 
+    _defineProperty(_assertThisInitialized(_this), "getBoundCoordinates", function (x, y, newScale) {
+      var _this$props5 = _this.props,
+          enableBoundingBox = _this$props5.enableBoundingBox,
+          boundaryRatioVertical = _this$props5.boundaryRatioVertical,
+          boundaryRatioHorizontal = _this$props5.boundaryRatioHorizontal;
+      var scale = _this.state.scale;
+
+      if (!enableBoundingBox) {
+        return {
+          boundX: x,
+          boundY: y
+        };
+      }
+
+      var containerRect = _this.container.getBoundingClientRect();
+
+      var clientRect = _this.dragContainer.getBoundingClientRect();
+
+      var width = clientRect.width;
+      var height = clientRect.height;
+
+      if (newScale) {
+        width *= scale / newScale;
+        height *= scale / newScale;
+      }
+
+      var boundX = x;
+      var boundY = y;
+
+      if (boundY < -boundaryRatioVertical * height) {
+        boundY = -boundaryRatioVertical * height;
+      } else if (boundY > containerRect.height - (1 - boundaryRatioVertical) * height) {
+        boundY = containerRect.height - (1 - boundaryRatioVertical) * height;
+      }
+
+      if (boundX < -boundaryRatioHorizontal * width) {
+        boundX = -boundaryRatioHorizontal * width;
+      } else if (boundX > containerRect.width - (1 - boundaryRatioHorizontal) * width) {
+        boundX = containerRect.width - (1 - boundaryRatioHorizontal) * width;
+      }
+
+      return {
+        boundX: boundX,
+        boundY: boundY
+      };
+    });
+
     return _this;
@@ -619,7 +678,7 @@ }
     value: function componentDidMount() {
-      var _this$props5 = this.props,
-          autoCenter = _this$props5.autoCenter,
-          autoCenterZoomLevel = _this$props5.autoCenterZoomLevel,
-          minZoom = _this$props5.minZoom,
-          maxZoom = _this$props5.maxZoom;
+      var _this$props6 = this.props,
+          autoCenter = _this$props6.autoCenter,
+          autoCenterZoomLevel = _this$props6.autoCenterZoomLevel,
+          minZoom = _this$props6.minZoom,
+          maxZoom = _this$props6.maxZoom;
 
@@ -653,7 +712,7 @@ if (maxZoom < minZoom) {
 
-      var _this$props6 = this.props,
-          children = _this$props6.children,
-          style = _this$props6.style,
-          disabled = _this$props6.disabled,
-          disableKeyInteraction = _this$props6.disableKeyInteraction;
+      var _this$props7 = this.props,
+          children = _this$props7.children,
+          style = _this$props7.style,
+          disabled = _this$props7.disabled,
+          disableKeyInteraction = _this$props7.disableKeyInteraction;
       var _this$state3 = this.state,
@@ -702,2 +761,4 @@ x = _this$state3.x,
   noStateUpdate: true,
+  boundaryRatioVertical: 0.8,
+  boundaryRatioHorizontal: 0.8,
   preventPan: function preventPan() {
@@ -704,0 +765,0 @@ return false;

package.json

 {
   "name": "react-easy-panzoom",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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)
+[![npm](https://img.shields.io/npm/v/react-easy-panzoom.svg?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)
 
-<img src="https://github.com/mnogueron/react-easy-panzoom/blob/master/react-easy-panzoom-codepen.gif" width="500" height="390" />
+![react-easy-panzoom-demo](https://user-images.githubusercontent.com/8511318/55997819-2ff98700-5cbc-11e9-99f5-67ea295f4f92.gif)
 
@@ -104,2 +104,29 @@ React components that enables pan and zoom features for any component. Try out the live demo __[here](https://codesandbox.io/s/ll1xrz9mx9)__
 
+### Boundaries
+`PanZoom` supports the `enableBoundingBox` prop to restrict panning. The box is calculated based on the width and height of the inner content.
+A ratio is applied so that the bounding box allows panning up to a specific percentage of the inner content.
+By default this ratio is `0.8` but can be modified with `boundaryRatioVertical` and `boundaryRatioHorizontal`. In this case the pan content will be able to pan outside the parent container up to 80% of its size (the 20% remaining will always be visible).
+
+A negative ratio will create a padding, but combined with zooming it can produce strange behaviour.
+A ratio above 1 will allow the pan content to pan outside the parent container more than its size.
+
+To use the bounding box:
+```js
+import { PanZoom } from 'react-easy-panzoom'
+
+// ...
+render() {
+  return (
+    <PanZoom
+      boundaryRatioVertical={0.8} 
+      boundaryRatioHorizontal={0.8} 
+      enableBoundingBox
+    >
+      <div>{ 'This content can be panned and zoomed' }</div>
+    </PanZoom>
+  )
+}
+```
+
+
 ## Properties
@@ -118,2 +145,5 @@ |Name|Type|Default|Description|
 |maxZoom|`number`| |Sets the maximum zoom value|
+|enableBoundingBox|`boolean`|false|Enable bounding box for the panzoom element. The bounding box will contain the element based on a ratio of its size|
+|boundaryRatioVertical|`number`|0.8|Vertical ratio for the bounding box|
+|boundaryRatioHorizontal|`number`|0.8|Horizontal ratio for the bounding box|
 |noStateUpdate|`bool`|true|Disable state update for each new x, y, z transform value while panning. Enabling it drastically increases the performances |
@@ -120,0 +150,0 @@ |onPanStart|`func`| |Fired on pan start|

src/PanZoom.js

@@ -424,5 +424,6 @@ // @flow
     if (noStateUpdate) {
+      const { boundX, boundY } = this.getBoundCoordinates(this.prevPanPosition.x + dx, this.prevPanPosition.y + dy, scale)
       this.prevPanPosition = {
-        x: this.prevPanPosition.x + dx,
-        y: this.prevPanPosition.y + dy,
+        x: boundX,
+        y: boundY,
       }
@@ -433,3 +434,4 @@ this.dragContainer.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${this.prevPanPosition.x}, ${this.prevPanPosition.y})`
 
-    this.setState(({ x: x + dx, y: y + dy }))
+    const { boundX, boundY } = this.getBoundCoordinates(x + dx, y + dy, scale)
+    this.setState(({ x: boundX, y: boundY}))
   }
@@ -463,3 +465,5 @@
     const newY = y - ratio * (y - transformY)
-    this.setState({ x: newX, y: newY, scale: newScale })
+
+    const { boundX, boundY } = this.getBoundCoordinates(newX, newY, scale)
+    this.setState({ x: boundX, y: boundY, scale: newScale })
   }
@@ -492,2 +496,42 @@
 
+  getBoundCoordinates = (x, y, newScale) => {
+    const { enableBoundingBox, boundaryRatioVertical, boundaryRatioHorizontal } = this.props
+    const { scale } = this.state
+
+    if (!enableBoundingBox) {
+      return {
+        boundX: x,
+        boundY: y,
+      }
+    }
+
+    const containerRect = this.container.getBoundingClientRect()
+    const clientRect = this.dragContainer.getBoundingClientRect()
+    let width = clientRect.width
+    let height = clientRect.height
+
+    if (newScale) {
+      width *= (scale / newScale)
+      height *= (scale / newScale)
+    }
+
+    let boundX = x
+    let boundY = y
+    if (boundY < -boundaryRatioVertical * height) {
+      boundY = -boundaryRatioVertical * height
+    }
+    else if (boundY > containerRect.height - (1 - boundaryRatioVertical) * height) {
+      boundY = containerRect.height - (1 - boundaryRatioVertical) * height
+    }
+
+    if (boundX < -boundaryRatioHorizontal * width) {
+      boundX = -boundaryRatioHorizontal * width
+    }
+    else if (boundX > containerRect.width - (1 - boundaryRatioHorizontal) * width) {
+      boundX = containerRect.width - (1 - boundaryRatioHorizontal) * width
+    }
+
+    return { boundX, boundY }
+  }
+
   render() {
@@ -533,2 +577,4 @@ const { children, style, disabled, disableKeyInteraction } = this.props
   noStateUpdate: true,
+  boundaryRatioVertical: 0.8,
+  boundaryRatioHorizontal: 0.8,
 
@@ -535,0 +581,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

50222

increased by10.88%

Lines of code

1097

increased by8.51%

Number of lines in readme file

175

increased by20.69%

No dependency changes