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

Comparing version 1.5.0 to 1.5.1

demo/demo.js

@@ -16,3 +16,3 @@ "use strict";
 
-    this.state = {value: defaultValue, tool: TOOL_NONE, x: 0, y: 0};
+    this.state = {value: defaultValue, tool: TOOL_NONE, x: 0, y: 0, detectAutoPan: true, detectPinch: true};
   }
@@ -43,7 +43,10 @@
 
+                  detectPinch={this.state.detectPinch}                            //detect zoom gestures
+                  detectAutoPan={this.state.detectAutoPan}                        //perform auto pan
+
                   onClick={event => this.debugClick(event)}                       //display click on console
-                  onMouseMove={event => this.setState({x: event.x, y: event.y })} //display mouse position on window
+                  onMouseMove={event => this.setState({x: event.x, y: event.y})} //display mouse position on window
                   onMouseUp={event => console.info('up', event.x, event.y)}       //print mouseup on console
                   onMouseDown={event => console.info('down', event.x, event.y)}   //print mousedown on console
-            >
+          >
             {SnakeSVG}
@@ -55,3 +58,3 @@ </Viewer>
             tool={this.state.tool}
-            onChangeTool={tool =>  this.setState({tool: tool})} />
+            onChangeTool={tool => this.setState({tool: tool})}/>
         </div>
@@ -73,2 +76,19 @@
 
+          <div>
+            <strong>Additional features</strong> <br/>
+            <ul style={{padding: "0px", margin:"0px", listStyle: "none"}}>
+              <li>
+                <input type="checkbox" id="detectPinch" checked={this.state.detectPinch}
+                       onChange={ event => this.setState({detectPinch: event.target.checked})}/>
+                <label for="detectPinch"> detectPinch</label>
+              </li>
+              <li>
+                <input type="checkbox" id="detectAutoPan" checked={this.state.detectAutoPan}
+                       onChange={ event => this.setState({detectAutoPan: event.target.checked})}/>
+                <label for="detectAutoPan"> detectAutoPan</label>
+              </li>
+            </ul>
+            <hr/>
+          </div>
+
           <strong>Reset pan/zoom state</strong> <br/>
@@ -75,0 +95,0 @@ <button onClick={event => this.handleReset(event)}>Reset view</button>

package.json

 {
   "name": "react-svg-pan-zoom",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A React component that adds pan and zoom features to SVG",
@@ -14,3 +14,5 @@ "main": "./lib/index.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"
+    "version": "npm run build && git add -A dist  && git add -A lib && git add -A demo/build && npm run website:deploy",
+    "website:serve": "node website/serve.js",
+    "website:deploy": "git push origin :gh-pages && git subtree push --prefix website origin gh-pages"
   },
@@ -51,5 +53,7 @@ "repository": {
     "babel-preset-react": "^6.11.1",
+    "express": "^4.14.0",
     "open-browser-webpack-plugin": "0.0.2",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
+    "serve-static": "^1.11.1",
     "webpack": "^1.13.2",
@@ -56,0 +60,0 @@ "webpack-dev-server": "^1.15.1"

README.md

 # react-svg-pan-zoom
-A React component that adds pan and zoom features to SVG
+**react-svg-pan-zoom** is a React component that adds **pan** and **zoom** features on **SVG images**. It helps to display big SVG images when there isn’t enough space.
 
@@ -12,4 +12,17 @@ [Live Demo available at http://chrvadala.github.io/react-svg-pan-zoom/](http://chrvadala.github.io/react-svg-pan-zoom/)
 
+## Features
+This component works with three different mode selected through an attribute:
+- With the tool **pan** the user can move the image dragging it inside the viewer
+- With the tool **zoom** the user can scale the image through a point click or zoom a specified area
+- With the tool **none** the user can interact with the SVG content and trigger browser events
 
+##Additional Features
+- Detect zoom performed through pinch and scroll (optional)
+- Perform *autopan* when the mouse is close to the edge of the viewer (optional)
+- Each callback function receives (x,y) coords mapped to the real SVG size
+- Fully stateless
+- Event info managed with lazy mode to ensure high performance
+- ES6 syntax
 
+
 ## Usage
@@ -20,3 +33,3 @@ ```
 
-[A full DEMO is available here](https://github.com/chrvadala/react-svg-pan-zoom/blob/master/demo/demo.js)
+[Sample code available here](https://github.com/chrvadala/react-svg-pan-zoom/blob/master/demo/demo.js)
 ```js
@@ -23,0 +36,0 @@ import React from 'react';

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

1556501

increased by8.34%

Number of package files

45

increased by28.57%

Lines of code

5882

increased by21.15%

Number of lines in readme file

116

increased by12.62%

Worsened metrics

Dev dependency count

13

increased by18.18%

No dependency changes