wip

demo/inline.html

@@ -735,6 +735,9 @@ <h1>Demo for svg-pan-zoom: In-line SVG</h1>
     </div>
     <button id="enable">enable</button>
     <button id="disable">disable</button>
+    <button id="rotate_left">rotate -10</button>
+    <button id="rotate_right">rotate +5</button>
+    <button id="rotate_reset">reset rotation</button>
 
     <script>
       // Don't use window.onLoad like this in production, because it can only listen to one function.
@@ -754,6 +757,17 @@ <h1>Demo for svg-pan-zoom: In-line SVG</h1>
         document.getElementById('disable').addEventListener('click', function() {
           window.zoomTiger.disableControlIcons();
         })
+        document.getElementById('rotate_left').addEventListener('click', function() {
+          var currentAngle = window.zoomTiger.getCenterRotationAngle()
+          window.zoomTiger.setCenterRotationAngle(currentAngle - 10);
+        })
+        document.getElementById('rotate_right').addEventListener('click', function() {
+          var currentAngle = window.zoomTiger.getCenterRotationAngle()
+          window.zoomTiger.setCenterRotationAngle(currentAngle + 5);
+        })
+        document.getElementById('rotate_reset').addEventListener('click', function() {
+          window.zoomTiger.resetRotation();
+        })
       };
     </script>
 

demo/simple-animation.html

@@ -51,9 +51,7 @@ <h1>Demo for svg-pan-zoom: In-line SVG</h1>
 
           intervalID = setInterval(function(){
             if (animationStep++ < animationSteps) {
-              panZoomInstance.panBy({x: stepX, y: stepY});
-              panZoomInstance.rotate(panZoomInstance.getRotate()+5);
-
+              panZoomInstance.panBy({x: stepX, y: stepY})
             } else {
               // Cancel interval
               clearInterval(intervalID)
@@ -65,7 +63,6 @@ <h1>Demo for svg-pan-zoom: In-line SVG</h1>
         button.addEventListener("click", function() {
           // Pan by any values from -80 to 80
           customPanBy({x: Math.round(Math.random() * 160 - 80), y: Math.round(Math.random() * 160 - 80)})
-
         });
       };
     </script>

gulpfile.js

@@ -39,15 +39,19 @@ function compile() {
     .pipe(gulp.dest("./dist/"))
     .pipe(rename("svg-pan-zoom.min.js"))
     .pipe(uglify())
+    // Catch minification errors
+    .on('error', function(err) {
+      console.log(err.toString());
+      this.emit("end");
+    })
     .pipe(header(banner, { pkg: pkg }))
-    .pipe(gulp.dest("./dist/"));
 }
 
 /**
  * Watch script
  */
 function watch() {
-  return gulp.watch("./src/**/*.js", gulp.series("compile"));
+  return gulp.watch("./src/**/*.js", gulp.series([compile]));
 }
 
 /**

src/shadow-viewport.js

@@ -17,8 +17,8 @@ ShadowViewport.prototype.init = function(viewport, options) {
   this.options = options;
 
   // State cache
-  this.originalState = { zoom: 1, x: 0, y: 0, rotate:0 };
-  this.activeState = { zoom: 1, x: 0, y: 0, rotate:0 };
+  this.originalState = { zoom: 1, x: 0, y: 0, angle: 0 };
+  this.activeState = { zoom: 1, x: 0, y: 0, angle: 0 };
 
   this.updateCTMCached = Utils.proxy(this.updateCTM, this);
 
@@ -207,35 +207,41 @@ ShadowViewport.prototype.getPan = function() {
   return { x: this.activeState.x, y: this.activeState.y };
 };
 /**
- * Get rotate
+ * Get rotation angle
  *
  * @return {Float} angle
  */
-ShadowViewport.prototype.getRotate = function() {
-  return this.activeState.rotate
+ShadowViewport.prototype.getAngle = function() {
+  return this.activeState.angle
 }
 
 /**
- * Get rotate transformation
+ * Get rotation
  *
  * @return {Object} angle and point of rotation
  */
-ShadowViewport.prototype.getRotateTransform = function() {
+ShadowViewport.prototype.getRotation = function() {
+  console.log('a', this.getAngle());
+  if (this.getAngle() === 0) {
+    return null
+  }
+
   return {
-    angle: this.getRotate(),
+    angle: this.getAngle(),
     x: this.getViewBox().width / 2,
     y: this.getViewBox().height / 2
   }
 }
 
 /**
- * Set rotate
+ * Set angle
  *
  * @param {Float} angle
  */
-ShadowViewport.prototype.rotate = function(angle) {
-  this.activeState.rotate = angle;
+ShadowViewport.prototype.setAngle = function(angle) {
+  this.activeState.angle = angle
   this.updateCTMOnNextFrame()
+  console.log('new angle', angle, this.activeState);
 }
 
 /**
@@ -379,9 +385,11 @@ ShadowViewport.prototype.updateCTMOnNextFrame = function() {
  */
 ShadowViewport.prototype.updateCTM = function() {
   var ctm = this.getCTM();
+  var rotation = this.getRotation();
+  console.log('updateCTM', ctm, rotation);
 
   // Updates SVG element
-  SvgUtils.setCTM(this.viewport, ctm, this.defs, this.getRotateTransform());
+  SvgUtils.setCTM(this.viewport, ctm, this.defs, rotation);
 
   // Free the lock
   this.pendingUpdate = false;

src/svg-pan-zoom.js

@@ -402,26 +402,17 @@ SvgPanZoom.prototype.publicZoomAtPoint = function(scale, point, absolute) {
  *
  * @param  {Float} angle
  */
-SvgPanZoom.prototype.rotate = function(angle) {
-  this.viewport.rotate(angle)
-}
-
-/**
- * Rotate relative
- *
- * @param  {Float} relative angle
- */
-SvgPanZoom.prototype.rotateRelative = function(angle) {
-  this.rotate(this.getRotate() + angle)
+SvgPanZoom.prototype.setAngle = function(angle) {
+  this.viewport.setAngle(angle)
 }
 
 /**
  * Get rotate for public usage
  *
  * @return {Float} rotate
  */
-SvgPanZoom.prototype.getRotate = function() {
-  return this.viewport.getRotate()
+SvgPanZoom.prototype.getAngle = function() {
+  return this.viewport.getAngle()
 }
 
 /**
@@ -468,10 +459,10 @@ SvgPanZoom.prototype.resetPan = function() {
   this.pan(this.viewport.getOriginalState());
 };
 /**
- * Set rotate to initial state
+ * Set rotation to initial state
  */
-SvgPanZoom.prototype.resetRotate = function() {
-  this.rotate(this.viewport.getOriginalState().rotate);
+SvgPanZoom.prototype.resetRotation = function() {
+  this.setAngle(this.viewport.getOriginalState().angle);
 }
 /**
  * Set pan and zoom to initial state
@@ -927,16 +918,13 @@ SvgPanZoom.prototype.getPublicInstance = function() {
       },
       getZoom: function() {
         return that.getRelativeZoom();
-      }, 
-      rotate: function(angle) {
-        that.rotate(angle); return that.pi
-      }, 
-      rotateRelative: function(angle) {
-        that.rotateRelative(angle); return that.pi
-      }, 
-      getRotate: function() {
-        return that.getRotate()
-      },  
+      },
+      setCenterRotationAngle: function(angle) {
+        that.setAngle(angle); return that.pi
+      },
+      getCenterRotationAngle: function() {
+        return that.getAngle()
+      },
       // CTM update
       setOnUpdatedCTM: function(fn) {
         that.options.onUpdatedCTM =
@@ -952,8 +940,8 @@ SvgPanZoom.prototype.getPublicInstance = function() {
         that.resetPan();
         return that.pi;
       },
-      resetRotate: function() {
-        that.resetPan(); return that.pi
+      resetRotation: function() {
+        that.resetRotation(); return that.pi
       },
       reset: function() {
         that.reset();
@@ -986,8 +974,8 @@ SvgPanZoom.prototype.getPublicInstance = function() {
           width: that.width,
           height: that.height,
           realZoom: that.getZoom(),
-          viewBox: that.viewport.getViewBox(),
-          rotate: that.getRotate()
+          angle: that.getAngle(),
+          viewBox: that.viewport.getViewBox()
         };
       },
       // Destroy

src/svg-utilities.js

@@ -154,7 +154,7 @@ module.exports = {
    * @param {SVGMatrix} matrix  CTM
    * @param {SVGElement} defs
    */
-  setCTM: function(element, matrix, defs, rotate) {
+  setCTM: function(element, matrix, defs, rotation) {
     var that = this,
       s =
         "matrix(" +
@@ -169,18 +169,23 @@ module.exports = {
         matrix.e +
         "," +
         matrix.f +
-        ")";
-      if(rotate != 0){
-        s += ' rotate(' + rotate.angle + ',' + rotate.x + ',' + rotate.y + ')';
-      }
+        ")",
+      cssTransform = s;
+
+    if (rotation != null) {
+      s += ' rotate(' + rotation.angle + ',' + rotation.x + ',' + rotation.y + ')';
+      cssTransform += ' rotate(' + rotation.angle + 'deg,' + rotation.x + ',' + rotation.y + ')';
+    }
 
     element.setAttributeNS(null, "transform", s);
+    console.log('e', element, "transform" in element.style, rotation, cssTransform)
+
     if ("transform" in element.style) {
-      element.style.transform = s;
+      element.style.transform = cssTransform;
     } else if ("-ms-transform" in element.style) {
-      element.style["-ms-transform"] = s;
+      element.style["-ms-transform"] = cssTransform;
     } else if ("-webkit-transform" in element.style) {
-      element.style["-webkit-transform"] = s;
+      element.style["-webkit-transform"] = cssTransform;
     }
 
     // IE has a bug that makes markers disappear on zoom (when the matrix "a" and/or "d" elements change)