Add a few debugging statements

diff --git a/dirty.html b/dirty.html
index a2507f4b951fe398ae875a53e36e548f0a3b858b..1b4322b940c7d3ee75f866b1d4fe672534316fd7 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -218,7 +218,7 @@ a.timeline().source(() => {
 })
 
 
-let obj = { rotate: 180, origin: [600, 600] }
+let obj = { shear: 2, rotate: 50, origin: [600, 600] }
 
 a.clone() // startPosition
 a.clone().transform(obj) // endPosition

diff --git a/dist/svg.js b/dist/svg.js
index 7b70fc35ca4688f9d5a9a7f737e15417ac79fdde..d387d53d18ffbb1a1fb68ae8762f95d9efd29f3e 100644 (file)
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Thu Jun 28 2018 22:44:34 GMT+1000 (AEST)
+* BUILT: Thu Jun 28 2018 23:40:30 GMT+1000 (AEST)
 */;
 
 (function(root, factory) {
@@ -1708,8 +1708,14 @@ SVG.Matrix = SVG.invent({
     },
 
     // Applies a matrix defined by its affine parameters
-    compose: function (o, ox, oy) {
+    compose: function (o) {
+      if (o.origin) {
+        o.originX = o.origin[0]
+        o.originY = o.origin[1]
+      }
       // Get the parameters
+      var ox = o.originX || 0
+      var oy = o.originY || 0
       var sx = o.scaleX || 1
       var sy = o.scaleY || 1
       var lam = o.shear || 0
@@ -1719,23 +1725,25 @@ SVG.Matrix = SVG.invent({
 
       // Apply the standard matrix
       var result = new SVG.Matrix()
+        .translate(-ox, -oy)
         .scale(sx, sy)
         .shear(lam)
         .rotate(theta)
         .translate(tx, ty)
         .lmultiply(this)
+        .translate(ox, oy)
       return result
     },
 
     // Decomposes this matrix into its affine parameters
-    decompose: function () {
+    decompose: function (ox=0, oy=0) {
       // Get the parameters from the matrix
       var a = this.a
       var b = this.b
       var c = this.c
       var d = this.d
-      var e = this.e
-      var f = this.f
+      var e = this.e - ox
+      var f = this.f - oy
 
       // Figure out if the winding direction is clockwise or counterclockwise
       var determinant = a * d - b * c
@@ -1758,16 +1766,18 @@ SVG.Matrix = SVG.invent({
         scaleY: sy,
         shear: lam,
         rotate: theta,
-        translateX: e,
-        translateY: f,
+        translateX: e + ox,
+        translateY: f + oy,
+        originX: ox,
+        originY: oy,
 
         // Return the matrix parameters
         a: this.a,
         b: this.b,
         c: this.c,
         d: this.d,
-        e: this.e,
-        f: this.f
+        e: this.e + ox,
+        f: this.f + oy
       }
     },
 

diff --git a/src/matrix.js b/src/matrix.js
index 6947e7e4fbd56c4a11dadfbf7399bff7475b5974..25d686a78e8f0ca0996928a49f1bc22dfdc3db89 100644 (file)
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -75,8 +75,14 @@ SVG.Matrix = SVG.invent({
     },
 
     // Applies a matrix defined by its affine parameters
-    compose: function (o, ox, oy) {
+    compose: function (o) {
+      if (o.origin) {
+        o.originX = o.origin[0]
+        o.originY = o.origin[1]
+      }
       // Get the parameters
+      var ox = o.originX || 0
+      var oy = o.originY || 0
       var sx = o.scaleX || 1
       var sy = o.scaleY || 1
       var lam = o.shear || 0
@@ -86,23 +92,25 @@ SVG.Matrix = SVG.invent({
 
       // Apply the standard matrix
       var result = new SVG.Matrix()
+        .translate(-ox, -oy)
         .scale(sx, sy)
         .shear(lam)
         .rotate(theta)
         .translate(tx, ty)
         .lmultiply(this)
+        .translate(ox, oy)
       return result
     },
 
     // Decomposes this matrix into its affine parameters
-    decompose: function () {
+    decompose: function (ox=0, oy=0) {
       // Get the parameters from the matrix
       var a = this.a
       var b = this.b
       var c = this.c
       var d = this.d
-      var e = this.e
-      var f = this.f
+      var e = this.e - ox
+      var f = this.f - oy
 
       // Figure out if the winding direction is clockwise or counterclockwise
       var determinant = a * d - b * c
@@ -125,16 +133,18 @@ SVG.Matrix = SVG.invent({
         scaleY: sy,
         shear: lam,
         rotate: theta,
-        translateX: e,
-        translateY: f,
+        translateX: e + ox,
+        translateY: f + oy,
+        originX: ox,
+        originY: oy,
 
         // Return the matrix parameters
         a: this.a,
         b: this.b,
         c: this.c,
         d: this.d,
-        e: this.e,
-        f: this.f
+        e: this.e + ox,
+        f: this.f + oy
       }
     },
 

diff --git a/src/morph.js b/src/morph.js
index 543479b99197556624c5c7f3e5ccc8cdfaea1906..67d14f7528930bd0f129f294db27fc9f1bbcfa0b 100644 (file)
--- a/src/morph.js
+++ b/src/morph.js
@@ -152,21 +152,31 @@ SVG.Morphable.TransformBag = SVG.invent({
         shear: obj[2],
         rotate: obj[3],
         translateX: obj[4],
-        translateY: obj[5]
+        translateY: obj[5],
+        originX: obj[6],
+        originY: obj[7]
       }
     }
 
     SVG.Matrix.call(this, obj)
 
-    if (obj && obj.origin){
-      this.translateO(-obj.origin[0], -obj.origin[1])
+    if (obj && obj.origin) {
+      obj.originX = origin[0]
+      obj.originY = origin[1]
     }
+
+    this.originX = obj && obj.originX || 0
+    this.originY = obj && obj.originY || 0
+
+    /*if (obj && obj.origin){
+      this.translateO(-obj.origin[0], -obj.origin[1])
+    }*/
     //this.value = new SVG.Matrix(obj)
   },
 
   extend: {
     toArray: function (){
-      var v = this.decompose()
+      var v = this.decompose(this.originX, this.originY)
 
       return [
         v.scaleX,
@@ -174,7 +184,9 @@ SVG.Morphable.TransformBag = SVG.invent({
         v.shear,
         v.rotate,
         v.translateX,
-        v.translateY
+        v.translateY,
+        v.originX,
+        v.originY,
       ]
     }
   }

diff --git a/src/runner.js b/src/runner.js
index 4f8e5f39bdbe5073c08d70b22fb86b1b8821dccc..6094aafaf1da9c9def13ffa6f91d4c67e5839729 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -700,7 +700,11 @@ SVG.extend(SVG.Runner, {
 
       // make sure to add an origin if we morph affine
       //if (affine) {
-        startMatrix = startMatrix.translate(-origin[0], -origin[1])
+        /*startMatrix = startMatrix.decompose(origin[0], origin[1])
+
+        startMatrix = new SVG.Matrix().compose(startMatrix)*/
+
+        startMatrix.origin = origin
       //}
 
       // FIXME: correct the rotation so that it takes the shortest path