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

Comparing version 1.1.1 to 1.2.0

lib/viewer-helper.js

@@ -113,3 +113,3 @@ 'use strict';
     key: 'updatePan',
-    value: function updatePan(value, x, y) {
+    value: function updatePan(value, x, y, panLimit, SVGWidth, SVGHeight, viewerWidth, viewerHeight) {
 
@@ -137,2 +137,9 @@ if (value.mode !== _constants.MODE_PANNING) throw new Error('update pan not allowed in this mode ' + value.mode);
 
+      //apply pan limits
+      matrix.e = Math.min(matrix.e, viewerWidth - panLimit);
+      matrix.e = Math.max(matrix.e, panLimit - SVGWidth * zoomLevel);
+
+      matrix.f = Math.min(matrix.f, viewerHeight - panLimit);
+      matrix.f = Math.max(matrix.f, panLimit - SVGHeight * zoomLevel);
+
       return (0, _reactAddonsUpdate2.default)(value, {
@@ -277,2 +284,7 @@ $merge: {
     }
+  }, {
+    key: 'isPointInsideSVG',
+    value: function isPointInsideSVG(x, y, SVGWidth, SVGHeight) {
+      return 0 <= x && x <= SVGWidth && 0 <= y && y <= SVGHeight;
+    }
   }]);
@@ -279,0 +291,0 @@

lib/viewer-responsive.js

@@ -48,9 +48,12 @@ 'use strict';
       var containerHeight = _props.containerHeight;
+      var width = _props.width;
+      var height = _props.height;
       var children = _props.children;
 
-      var props = _objectWithoutProperties(_props, ['containerWidth', 'containerHeight', 'children']);
+      var props = _objectWithoutProperties(_props, ['containerWidth', 'containerHeight', 'width', 'height', 'children']);
 
+      width = width || containerWidth;height = height || containerHeight;
       return _react2.default.createElement(
         _viewer2.default,
-        _extends({}, props, { width: containerWidth, height: containerHeight }),
+        _extends({}, props, { width: width, height: height }),
         children
@@ -57,0 +60,0 @@ );

lib/viewer.js

@@ -77,3 +77,8 @@ 'use strict';
       var onChange = _props2.onChange;
+      var width = _props2.width;
+      var height = _props2.height;
+      var children = _props2.children;
 
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
 
@@ -86,3 +91,3 @@ if (tool !== _constants.TOOL_PAN) return;
 
-      var nextValue = forceExit ? _viewerHelper2.default.stopPan(value) : _viewerHelper2.default.updatePan(value, x, y);
+      var nextValue = forceExit ? _viewerHelper2.default.stopPan(value) : _viewerHelper2.default.updatePan(value, x, y, 20, SVGWidth, SVGHeight, width, height);
 
@@ -120,3 +125,6 @@ event.preventDefault();
       var onChange = _props4.onChange;
+      var children = _props4.children;
 
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
 
@@ -126,2 +134,5 @@ if (tool !== _constants.TOOL_ZOOM) return;
 
+      var point = _viewerHelper2.default.getSVGPoint(value, x, y);
+      if (!_viewerHelper2.default.isPointInsideSVG(point.x, point.y, SVGWidth, SVGHeight)) return;
+
       var nextValue = _viewerHelper2.default.startZoomSelection(value, x, y);
@@ -199,7 +210,14 @@
       var onClick = _props7.onClick;
+      var children = _props7.children;
 
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
+
       if (tool !== _constants.TOOL_NONE) return;
       if (!onClick) return;
 
-      onClick(new _viewerEvent2.default(event, value));
+      var viewerEvent = new _viewerEvent2.default(event, value);
+      if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+      onClick(viewerEvent);
     }
@@ -213,7 +231,16 @@ }, {
       var onMouseUp = _props8.onMouseUp;
+      var children = _props8.children;
 
+      var x = event.offsetX,
+          y = event.offsetY;
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
+
       if (tool !== _constants.TOOL_NONE) return;
       if (!onMouseUp) return;
 
-      onMouseUp(new _viewerEvent2.default(event, value));
+      var viewerEvent = new _viewerEvent2.default(event, value);
+      if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+      onMouseUp(viewerEvent);
     }
@@ -227,7 +254,16 @@ }, {
       var onMouseDown = _props9.onMouseDown;
+      var children = _props9.children;
 
+      var x = event.offsetX,
+          y = event.offsetY;
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
+
       if (tool !== _constants.TOOL_NONE) return;
       if (!onMouseDown) return;
 
-      onMouseDown(new _viewerEvent2.default(event, value));
+      var viewerEvent = new _viewerEvent2.default(event, value);
+      if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+      onMouseDown(viewerEvent);
     }
@@ -241,7 +277,16 @@ }, {
       var onMouseMove = _props10.onMouseMove;
+      var children = _props10.children;
 
+      var x = event.offsetX,
+          y = event.offsetY;
+      var SVGWidth = children.props.width,
+          SVGHeight = children.props.height;
+
       if (tool !== _constants.TOOL_NONE) return;
       if (!onMouseMove) return;
 
-      onMouseMove(new _viewerEvent2.default(event, value));
+      var viewerEvent = new _viewerEvent2.default(event, value);
+      if (!_viewerHelper2.default.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+      onMouseMove(viewerEvent);
     }
@@ -291,4 +336,5 @@ }, {
       var style = {};
+      var gStyle = { pointerEvents: "none" };
       if (tool === _constants.TOOL_PAN) style.cursor = (0, _cursor2.default)(mode === _constants.MODE_PANNING ? 'grabbing' : 'grab');
-      if (tool === _constants.TOOL_ZOOM) style.cursor = (0, _cursor2.default)(specialKeyEnabled ? 'zoom-out' : 'zoom-in');
+      if (tool === _constants.TOOL_ZOOM) gStyle.cursor = (0, _cursor2.default)(specialKeyEnabled ? 'zoom-out' : 'zoom-in');
 
@@ -341,6 +387,8 @@ var zoomSelectionRect = void 0;
           width: this.props.width,
-          height: this.props.height }),
+          height: this.props.height,
+          style: { pointerEvents: "none" }
+        }),
         _react2.default.createElement(
           'g',
-          { ref: 'originalSvg', transform: matrixStr },
+          { ref: 'originalSvg', transform: matrixStr, style: gStyle },
           _react2.default.createElement('rect', {
@@ -415,2 +463,5 @@ fill: this.props.SVGBackground,
     }
+    if (!prop.props.hasOwnProperty('width') || !prop.props.hasOwnProperty('height')) {
+      return new Error('SVG should have props `width` and `height`');
+    }
   }
@@ -417,0 +468,0 @@ };

package.json

 {
   "name": "react-svg-pan-zoom",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A React component that adds pan and zoom features to SVG",
@@ -8,8 +8,9 @@ "main": "./lib/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --inline",
-    "build": "npm run build:node && npm run build:browser",
-    "build:node": "babel src --out-dir lib",
-    "build:browser": "webpack",
-    "clean": "rm ./build/* && rm ./lib/*",
-    "preversion": "npm run build && git add ."
+    "start": "webpack-dev-server --inline --config demo/webpack.config.dev.js",
+    "build": "npm run build:lib && npm run build:dist && npm run build:demo",
+    "build:lib": "babel src --out-dir lib",
+    "build:dist": "webpack",
+    "build:demo": "webpack --config demo/webpack.config.dev.js",
+    "clean": "rm ./dist/* && rm ./lib/* && rm ./demo/build/*",
+    "version": "npm run build && git add -A dist  && git add -A lib && git add -A demo/build"
   },
@@ -16,0 +17,0 @@ "repository": {

src/viewer-helper.js

@@ -10,3 +10,5 @@ import {Matrix} from 'transformation-matrix-js';
 
-let matrix2obj = matrix => {return {a: matrix.a, b: matrix.b, c: matrix.c, d: matrix.d, e: matrix.e, f: matrix.f}};
+let matrix2obj = matrix => {
+  return {a: matrix.a, b: matrix.b, c: matrix.c, d: matrix.d, e: matrix.e, f: matrix.f}
+};
 
@@ -76,3 +78,3 @@ export default class ViewerHelper {
 
-  static updatePan(value, x, y) {
+  static updatePan(value, x, y, panLimit, SVGWidth, SVGHeight, viewerWidth, viewerHeight) {
 
@@ -93,2 +95,9 @@ if (value.mode !== MODE_PANNING) throw new Error('update pan not allowed in this mode ' + value.mode);
 
+    //apply pan limits
+    matrix.e = Math.min(matrix.e, viewerWidth - panLimit);
+    matrix.e = Math.max(matrix.e, panLimit - SVGWidth * zoomLevel);
+
+    matrix.f = Math.min(matrix.f, viewerHeight - panLimit);
+    matrix.f = Math.max(matrix.f, panLimit - SVGHeight * zoomLevel);
+
     return update(value, {
@@ -206,2 +215,9 @@ $merge: {
 
+  static isPointInsideSVG(x, y, SVGWidth, SVGHeight){
+    return 0 <= x
+        && x <= SVGWidth
+        && 0 <= y
+        && y <= SVGHeight;
+  }
+
 }

src/viewer-responsive.js

@@ -7,5 +7,6 @@ import React from 'react';
   render() {
-    let {containerWidth, containerHeight, children, ...props} = this.props;
+    let {containerWidth, containerHeight, width, height, children, ...props} = this.props;
+    width = width || containerWidth; height = height || containerHeight;
     return (
-      <Viewer {...props} width={containerWidth} height={containerHeight}>
+      <Viewer {...props} width={width} height={height}>
         {children}
@@ -12,0 +13,0 @@ </Viewer>

src/viewer.js

@@ -17,3 +17,3 @@ import React from 'react';
 
-  constructor(props){
+  constructor(props) {
     super(props);
@@ -38,3 +38,4 @@ this.handleSpecialKeyChange = this.handleSpecialKeyChange.bind(this);
     let x = event.nativeEvent.offsetX, y = event.nativeEvent.offsetY;
-    let {value, tool, onChange} = this.props;
+    let {value, tool, onChange, width, height, children} = this.props;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
 
@@ -47,3 +48,5 @@ if (tool !== TOOL_PAN) return;
 
-    let nextValue = forceExit ? ViewerHelper.stopPan(value) : ViewerHelper.updatePan(value, x, y);
+    let nextValue = forceExit ?
+      ViewerHelper.stopPan(value) :
+      ViewerHelper.updatePan(value, x, y, 20, SVGWidth, SVGHeight, width, height);
 
@@ -69,3 +72,4 @@ event.preventDefault();
     let x = event.nativeEvent.offsetX, y = event.nativeEvent.offsetY;
-    let {value, tool, onChange} = this.props;
+    let {value, tool, onChange, children} = this.props;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
 
@@ -75,2 +79,5 @@ if (tool !== TOOL_ZOOM) return;
 
+    let point = ViewerHelper.getSVGPoint(value, x, y);
+    if(!ViewerHelper.isPointInsideSVG(point.x, point.y, SVGWidth, SVGHeight)) return;
+
     let nextValue = ViewerHelper.startZoomSelection(value, x, y);
@@ -109,9 +116,9 @@
 
-    let selectionMode = abs(startX - endX) > 2 && abs(startY-endY) > 2;
+    let selectionMode = abs(startX - endX) > 2 && abs(startY - endY) > 2;
 
     let nextValue;
 
-    if(selectionMode){
+    if (selectionMode) {
       nextValue = ViewerHelper.stopZoomSelection(value, width, height);
-    }else{
+    } else {
       let scaleFactor = specialKeyEnabled ? 0.9 : 1.1;
@@ -126,34 +133,57 @@ nextValue = ViewerHelper.zoom(value, scaleFactor, x, y);
   handleClick(event) {
-    let {value, tool, onClick} = this.props;
+    let {value, tool, onClick, children} = this.props;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
+
     if (tool !== TOOL_NONE) return;
     if (!onClick) return;
 
-    onClick(new ViewerEvent(event, value));
+    let viewerEvent = new ViewerEvent(event, value);
+    if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+    onClick(viewerEvent);
   }
 
   handleMouseUp(event) {
-    let {value, tool, onMouseUp} = this.props;
+    let {value, tool, onMouseUp, children} = this.props;
+    let x = event.offsetX, y = event.offsetY;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
+
     if (tool !== TOOL_NONE) return;
     if (!onMouseUp) return;
 
-    onMouseUp(new ViewerEvent(event, value));
+    let viewerEvent = new ViewerEvent(event, value);
+    if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+    onMouseUp(viewerEvent);
   }
 
   handleMouseDown(event) {
-    let {value, tool, onMouseDown} = this.props;
+    let {value, tool, onMouseDown, children} = this.props;
+    let x = event.offsetX, y = event.offsetY;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
+
     if (tool !== TOOL_NONE) return;
     if (!onMouseDown) return;
 
-    onMouseDown(new ViewerEvent(event, value));
+    let viewerEvent = new ViewerEvent(event, value);
+    if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+    onMouseDown(viewerEvent);
   }
 
   handleMouseMove(event) {
-    let {value, tool, onMouseMove} = this.props;
+    let {value, tool, onMouseMove, children} = this.props;
+    let x = event.offsetX, y = event.offsetY;
+    let SVGWidth = children.props.width, SVGHeight = children.props.height;
+
     if (tool !== TOOL_NONE) return;
     if (!onMouseMove) return;
 
-    onMouseMove(new ViewerEvent(event, value));
+    let viewerEvent = new ViewerEvent(event, value);
+    if(!ViewerHelper.isPointInsideSVG(viewerEvent.x, viewerEvent.y, SVGWidth, SVGHeight)) return;
+
+    onMouseMove(viewerEvent);
   }
 
-  handleSpecialKeyChange(event){
+  handleSpecialKeyChange(event) {
     let {value, onChange} = this.props;
@@ -163,5 +193,5 @@ let key = event.which;
 
-    if([18].indexOf(key) === -1) return;
+    if ([18].indexOf(key) === -1) return;
 
-    let nextValue = active ? ViewerHelper.enableSpecialKey(value) :  ViewerHelper.disableSpecialKey(value);
+    let nextValue = active ? ViewerHelper.enableSpecialKey(value) : ViewerHelper.disableSpecialKey(value);
 
@@ -171,3 +201,3 @@ onChange(new ViewerEvent(event, nextValue));
 
-  componentWillMount(event){
+  componentWillMount(event) {
     window.addEventListener("keydown", this.handleSpecialKeyChange, false);
@@ -189,4 +219,5 @@ window.addEventListener("keyup", this.handleSpecialKeyChange, false);
     let style = {};
+    let gStyle = {pointerEvents: "none"};
     if (tool === TOOL_PAN) style.cursor = cursor(mode === MODE_PANNING ? 'grabbing' : 'grab');
-    if (tool === TOOL_ZOOM) style.cursor = cursor(specialKeyEnabled ? 'zoom-out' : 'zoom-in');
+    if (tool === TOOL_ZOOM) gStyle.cursor = cursor(specialKeyEnabled ? 'zoom-out' : 'zoom-in');
 
@@ -228,5 +259,7 @@ let zoomSelectionRect;
           width={this.props.width}
-          height={this.props.height}/>
+          height={this.props.height}
+          style={{pointerEvents: "none"}}
+        />
 
-        <g ref="originalSvg" transform={matrixStr}>
+        <g ref="originalSvg" transform={matrixStr} style={gStyle}>
           <rect
@@ -299,2 +332,6 @@ fill={this.props.SVGBackground}
     }
+    if (!prop.props.hasOwnProperty('width') || !prop.props.hasOwnProperty('height')) {
+      return new Error('SVG should have props `width` and `height`');
+    }
+
   }
@@ -301,0 +338,0 @@ };

webpack.config.js

 var path = require('path');
-const OpenBrowserPlugin = require('open-browser-webpack-plugin');
 
 module.exports = {
   entry: {
-    svgPanZoom: [path.resolve(__dirname, 'src', 'index.js')],
-    demo: [path.resolve(__dirname, 'examples', 'demo.js')],
-    demoResponsive: [path.resolve(__dirname, 'examples', 'demo-responsive.js')]
+    ReactSVGPanZoom: path.resolve(__dirname, 'src', 'index.js')
   },
   output: {
-    path: __dirname + "/build",
-    filename: "[name].js",
-    library: "[name]"
+    path: __dirname + "/dist",
+    filename: "react-svg-pan-zoom.js",
+    library: "ReactSVGPanZoom"
   },
   externals: {
     "react": "React",
-    "react-dom": "ReactDOM",
-    "../src/index": "svgPanZoom"
+    "react-dom": "ReactDOM"
   },
-  plugins: [
-    new OpenBrowserPlugin({url: 'http://localhost:8080'})
-  ],
-  devServer: {
-    contentBase: path.resolve(__dirname, "examples")
-  },
   module: {
@@ -27,0 +17,0 @@ loaders: [

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1011208

436.78%

Lines of code

7403

69.95%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes