Merge pull request #41 from bumbu/refactor

Refactor plugin, bump to version 2.0.0
bumbu · Apr 30, 2014 · 94627a8 · 94627a8
2 parents 0f76915 + 0fe0510
commit 94627a8
Show file tree

Hide file tree

Showing 21 changed files with 2,108 additions and 1,996 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@ svg-pan-zoom library
 
 Simple pan/zoom solution for SVGs in HTML. It adds events listeners for mouse scroll, double-click and drag, plus it optionally offers:
   * JavaScript API for control of pan and zoom behavior
+  * onPan and onZoom event handlers
   * On-screen zoom controls
 
 It works cross-browser and supports both inline SVGs and SVGs in HTML 'object' or 'embed' elements.
@@ -19,90 +20,145 @@ Demos
 How To Use
 ----------
 
-1) Ensure the target SVG has a top-level 'g' element with the id 'viewport' to enable zooming for the entire SVG:
+1) Ensure the target SVG has a top-level 'g' element with the class 'viewport' to enable zooming for the entire SVG:
 
 ```xml
-<g id="viewport"></g>
+<g class="viewport"></g>
 ```
 
 If the target SVG does not have this element, the library will create it.
 
-2) Reference the [svg-pan-zoom.js file](http://ariutta.github.io/svg-pan-zoom/svg-pan-zoom.js) and optionally the [control icons plugin file](http://ariutta.github.io/svg-pan-zoom/control-icons.js) from your HTML document. Then call the init method:
+2) Reference the [svg-pan-zoom.js file](http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js) from your HTML document. Then call the init method:
 
 ```js
-svgPanZoom.init();
+var panZoomTiger = svgPanZoom('#demo-tiger');
+// or
+var svgElement = document.querySelector('#demo-tiger')
+var panZoomTiger = svgPanZoom(svgElement)
 ```
 
-If you want to override the defaults, you can optionally specify one or more arguments:
+First argument to function should be a CSS selector of SVG element or a DOM Element.
 
+If you want to override the defaults, you can optionally specify one or more arguments:
 
 ```js
-svgPanZoom.init({
-  'selector': '#my-svg',
-  'controlIconsEnabled': true,
-  'panEnabled': true, 
-  'zoomEnabled': true,
-  'dragEnabled': false,
-  'zoomScaleSensitivity': 0.2,
-  'minZoom': 0.5,
-  'maxZoom': 10,
-  'onZoom': function(scale) { ... }  // Callback function when zoom changes.
+svgPanZoom.init('#demo-tiger', {
+  panEnabled: true
+, dragEnabled: false
+, controlIconsEnabled: false
+, zoomEnabled: true
+, zoomScaleSensitivity: 0.2
+, minZoom: 0.5
+, maxZoom: 10
+, onZoom: function(){}
+, onPan: function(){}
 });
 ```
 
 If any arguments are specified, they must have the following value types:
-* 'selector' must be a [CSS selector](http://www.w3.org/TR/CSS2/selector.html). If left blank, svg-pan-zoom will look for the first SVG document in your HTML document.
-* 'controlIconsEnabled' must be true or false. Default is false.
 * 'panEnabled' must be true or false. Default is true.
-* 'zoomEnabled' must be true or false. Default is true.
 * 'dragEnabled' must be true or false. Default is false.
+* 'controlIconsEnabled' must be true or false. Default is false.
+* 'zoomEnabled' must be true or false. Default is true.
 * 'zoomScaleSensitivity' must be a scalar. Default is 0.2.
 * 'minZoom' must be a scalar. Default is 0.5.
 * 'maxZoom' must be a scalar. Default is 10.
 * 'onZoom' must be a callback function to be called when zoom changes.
+* 'onPan' must be a callback function to be called when pan changes.
 
+Public API
+----------
 
-To programmatically pan, call the pan method with a direction of 'up', 'down', 'right' or 'left'.
+When you call `svgPanZoom` method it returns an object with following methods:
+* enablePan
+* disablePan
+* isPanEnabled
+* pan
+* panBy
+* getPan
+* setOnPan
+* enableDrag
+* disableDrag
+* isDragEnabled
+* enableZoom
+* disableZoom
+* isZoomEnabled
+* enableControlIcons
+* disableControlIcons
+* isControlIconsEnabled
+* setZoomScaleSensitivity
+* setMinZoom
+* setMaxZoom
+* setOnZoom
+* zoom
+* zoomBy
+* zoomAtPoint
+* zoomAtPointBy
+* zoomIn
+* zoomOut
+* resetZoom
+* getZoom
+
+To programmatically pan, call the pan method with vector as first argument:
 
 ```js
-svgPanZoom.pan([selector], direction); // selector is optional.
+// Get instance
+var panZoomTiger = svgPanZoom('#demo-tiger');
+
+// Pan to rendered point x = 50, y = 50
+panZoomTiger.pan({x: 50, y: 50})
+
+// Pan by x = 50, y = 50 of rendered pixels
+panZoomTiger.panBy({x: 50, y: 50})
 ```
 
 To programmatically zoom, you can use the zoom method to specify your desired scale value:
 
 ```js
-svgPanZoom.zoom({
-  'selector': '#my-svg', // selector is optional
-  'scale': 2 // required. values must be scalar.
-});
-```
+// Get instance
+var panZoomTiger = svgPanZoom('#demo-tiger');
 
-Or you can use the zoomIn or zoomOut methods:
+// Set zoom level to 2
+panZoomTiger.zoom(2)
 
+// Zoom by 130%
+panZoomTiger.zoomBy(1.3)
+
+// Set zoom level to 2 at point
+panZoomTiger.zoomAtPoint(2, {x: 50, y: 50})
+
+// Zoom by 130% at point
+panZoomTiger.zoomAtPointBy(1.3, {x: 50, y: 50})
 ```
-svgPanZoom.zoomIn([selector]); // selector is optional
 
-svgPanZoom.zoomOut([selector]); // selector is optional
+Or you can use the zoomIn or zoomOut methods:
+
+```js
+// Get instance
+var panZoomTiger = svgPanZoom('#demo-tiger');
 
-svgPanZoom.resetZoom([selector]); // selector is optional.
+panZoomTiger.zoomIn()
+panZoomTiger.zoomOut()
+panZoomTiger.resetZoom()
 ```
 
 If you want faster or slower zooming, you can override the default zoom increment with the setZoomScaleSensitivity method.
 
 To programmatically enable/disable pan, zoom or drag:
 
 ```js
-svgPanZoom.enablePan();
-svgPanZoom.disablePan();
+// Get instance
+var panZoomTiger = svgPanZoom('#demo-tiger');
 
-svgPanZoom.enableZoom();
-svgPanZoom.disableZoom();
+panZoomTiger.enablePan();
+panZoomTiger.disablePan();
 
-svgPanZoom.enableDrag();
-svgPanZoom.disableDrag();
-```
+panZoomTiger.enableZoom();
+panZoomTiger.disableZoom();
 
-You can configure the default enabled/disabled state of pan/zoom/drag with the variables listed in the CONFIGURATION section of the file.
+panZoomTiger.enableDrag();
+panZoomTiger.disableDrag();
+```
 
 Related Work
 ------------
@@ -114,17 +170,17 @@ License
 
  ```
  Copyright 2009-2010 Andrea Leofreddi <a.leofreddi@itcharm.com>. All rights reserved.
- 
+
  Redistribution and use in source and binary forms, with or without modification, are
  permitted provided that the following conditions are met:
- 
+
     1. Redistributions of source code must retain the above copyright notice, this list of
        conditions and the following disclaimer.
- 
+
     2. Redistributions in binary form must reproduce the above copyright notice, this list
        of conditions and the following disclaimer in the documentation and/or other materials
        provided with the distribution.
- 
+
  THIS SOFTWARE IS PROVIDED BY Andrea Leofreddi "AS IS" AND ANY EXPRESS OR IMPLIED
  WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
  FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Andrea Leofreddi OR
@@ -134,7 +190,7 @@ License
  ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
  ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- 
+
   * The views and conclusions contained in the software and documentation are those of the
   authors and should not be interpreted as representing official policies, either expressed
   or implied, of Andrea Leofreddi.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-pan-zoom",
-  "version": "1.3.8",
+  "version": "2.0.0",
   "homepage": "https://github.com/ariutta/svg-pan-zoom",
   "authors": [
     "Andrea Leofreddi <a.leofreddi@itcharm.com>",

diff --git a/control-icons.js b/control-icons.js