Add public resize method that allows recaching SVG sizes and controls…

… positions
bumbu · Aug 7, 2014 · a9eb0f7 · a9eb0f7
1 parent e8c60c7
commit a9eb0f7
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -110,6 +110,7 @@ When you call `svgPanZoom` method it returns an object with following methods:
 * getZoom
 * fit
 * center
+* resize
 
 To programmatically pan, call the pan method with vector as first argument:
 
@@ -179,6 +180,17 @@ panZoomTiger.fit();
 panZoomTiger.center();
 ```
 
+If you want to fit and center your SVG after its container resize:
+
+```js
+// Get instance
+var panZoomTiger = svgPanZoom('#demo-tiger');
+
+panZoomTiger.resize(); // update SVG cached size and controls positions
+panZoomTiger.fit(true); // dropCache and fit
+panZoomTiger.center(true); // dropCache and center
+```
+
 Related Work
 ------------
 This library used the [SVGPan](https://code.google.com/p/svgpan/) library as a starting point. SVGPan is intended for use with the [SVG 'script' element](http://www.w3.org/TR/SVG/script.html), whereas svg-pan-zoom is intended for use with the [HTML 'script' element](http://www.w3.org/TR/html401/interact/scripts.html).

diff --git a/demo/resize.html b/demo/resize.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <script src="../dist/hammer.js"></script>
+    <script src="../dist/svg-pan-zoom.js"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
+
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+  </head>
+
+  <body style="width: 100%; height: 100%">
+    <h1>Demo for svg-pan-zoom: Resize SVG container on page resize</h1>
+    <div id="container" style="width: 95%; height: 80%; border:1px solid black; ">
+      <svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: 100%; height: 80%; " version="1.1">
+        <g id="g444" fill="none">
+          <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
+        </g>
+      </svg>
+    </div>
+
+    <script>
+      // Don't use window.onLoad like this in production, because it can only listen to one function.
+      window.onload = function() {
+        var panZoom = window.panZoom = svgPanZoom('#demo-tiger', {
+          zoomEnabled: true,
+          controlIconsEnabled: true,
+          fit: 1,
+          center: 1
+        });
+
+        $(window).resize(function(){
+          panZoom.resize();
+          panZoom.fit(true);
+          panZoom.center(true);
+        })
+      };
+    </script>
+
+  </body>
+
+</html>
diff --git a/index.html b/index.html
@@ -21,9 +21,12 @@ <h1>Demos for svg-pan-zoom</h1>
 	</li>
   <li>
     <a href="./demo/object.html">object</a>
+  </li>
+  <li>
+    <a href="./demo/custom-controls.html">Custom controls</a>
   </li>
 	<li>
-		<a href="./demo/custom-controls.html">Custom controls</a>
+		<a href="./demo/resize.html">Resize SVG container on document resize</a>
 	</li>
 </ul>
 

diff --git a/src/svg-pan-zoom.js b/src/svg-pan-zoom.js
@@ -533,6 +533,22 @@ var Mousewheel = require('./mousewheel')  // Keep it here so that mousewheel is
     return {x: this._pan.x, y: this._pan.y}
   }
 
+  /**
+   * Recalculates cached svg dimensions and controls position
+   */
+  SvgPanZoom.prototype.resize = function() {
+    // Get dimensions
+    var dimensions = SvgUtils.getSvgDimensions(this.svg)
+    this.width = dimensions.width
+    this.height = dimensions.height
+
+    // Reposition control icons by re-enabling them
+    if (this.options.controlIconsEnabled) {
+      this.getPublicInstance().disableControlIcons()
+      this.getPublicInstance().enableControlIcons()
+    }
+  }
+
   /**
    * Returns a public instance object
    * @return {object} Public instance object
@@ -613,6 +629,7 @@ var Mousewheel = require('./mousewheel')  // Keep it here so that mousewheel is
       , getZoom: function() {return that.getZoom()}
       , fit: function(dropCache) {return that.fit(dropCache)}
       , center: function(dropCache) {return that.center(dropCache)}
+      , resize: function() {that.resize()}
       }
     }