first tries to make transformations work

5 files changed, 88 insertions, 26 deletions

diff --git a/src/animator.js b/src/animator.js
index 1069787..ea52a34 100644
--- a/src/animator.js
+++ b/src/animator.js
@@ -20,6 +20,10 @@ SVG.Animator = {
     return node
   },
 
+  transform_frame: function (fn) {
+    SVG.Animator.transform = fn
+  },
+
   timeout: function (fn, delay) {
     delay = delay || 0
 
@@ -70,7 +74,10 @@ SVG.Animator = {
     while ((nextFrame !== lastFrame) && (nextFrame = SVG.Animator.frames.shift())) {
       nextFrame.run()
     }
-    
+
+    SVG.Animator.transform && SVG.Animator.transform()
+    SVG.Animator.transform = null
+
     // If we have remaining timeouts or frames, draw until we don't anymore
     SVG.Animator.nextDraw = SVG.Animator.timeouts.first() || SVG.Animator.frames.first()
         ? requestAnimationFrame(SVG.Animator._draw)
diff --git a/src/helpers.js b/src/helpers.js
index fca14df..3291c06 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -227,7 +227,7 @@ function formatTransforms (o) {
     : isFinite(o.scaleY) ? o.scaleY * flipY
     : flipY
   var shear = o.shear || 0
-  var theta = o.rotate || 0
+  var theta = o.rotate || o.theta || 0
   var origin = new SVG.Point(o.origin || o.ox || o.originX, o.oy || o.originY)
   var ox = origin.x
   var oy = origin.y
diff --git a/src/matrix.js b/src/matrix.js
index a8e92aa..0d72fea 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -331,6 +331,17 @@ SVG.Matrix = SVG.invent({
 
     toArray: function () {
       return [this.a, this.b, this.c, this.d, this.e, this.f]
+    },
+
+    valueOf: function () {
+      return {
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        d: this.d,
+        e: this.e,
+        f: this.f
+      }
     }
   },
 
diff --git a/src/morph.js b/src/morph.js
index 54d7d53..bea349d 100644
--- a/src/morph.js
+++ b/src/morph.js
@@ -143,6 +143,7 @@ SVG.Morphable.NonMorphable = SVG.invent({
 })
 
 SVG.Morphable.TransformBag = SVG.invent({
+  inherit: SVG.Matrix,
   create: function (obj) {
     if(Array.isArray(obj)) {
       obj = {
@@ -154,16 +155,14 @@ SVG.Morphable.TransformBag = SVG.invent({
         translateY: obj[5]
       }
     }
-    this.value = new SVG.Matrix(obj)
+
+    SVG.Matrix.call(this, obj)
+    //this.value = new SVG.Matrix(obj)
   },
 
   extend: {
-    valueOf: function () {
-      return this.value
-    },
-
     toArray: function (){
-      var v = this.value.decompose()
+      var v = this.decompose()
 
       return [
         v.scaleX,
diff --git a/src/runner.js b/src/runner.js
index 1073358..3fe5e70 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -47,6 +47,10 @@ SVG.Runner = SVG.invent({
     this._last = 0
     this.tags = {}
 
+    // save transforms applied to this runner
+    // this.transforms = []
+    this.count = 0
+
     // Looping variables
     this._haveReversed = false
     this._reverse = false
@@ -289,6 +293,8 @@ SVG.Runner = SVG.invent({
         // this.fire('step', this)
       }
 
+      this.count = 0
+
       // Work out if we are done and return this
       this.done = (converged && declarative)
         || (this._time >= duration && !justFinished && !declarative)
@@ -413,6 +419,17 @@ SVG.Runner = SVG.invent({
       return allfinished
     },
 
+    _pushLeft: function (transform) {
+      // this.transforms.push(transform)
+      // this.element().addRunner(this)
+      this.element()._queueTransform(transform, false, this.id, this.count++)
+      return this
+    },
+
+    _currentTransform: function () {
+      return this.element()._currentTransform(this.id, this.count)
+    }
+
   },
 })
 
@@ -448,6 +465,12 @@ SVG.Runner.sanitise = function (duration, delay, when) {
   }
 }
 
+recudeTransform = function (arr, base) {
+  return arr.reduceRight(function (last, curr) {
+    if(Array.isArray(curr)) return recudeTransform(curr, last)
+    return last.lmultiply(curr)
+  }, base)
+}
 
 SVG.extend(SVG.Element, {
 
@@ -460,35 +483,57 @@ SVG.extend(SVG.Element, {
   },
 
   // Make a function that allows us to add transformations, and cry 😭
-  _queueTransform: function (transform, right) {
+  _queueTransform: function (transform, right, id, count) {
 
     // Add the transformation to the correct place
-    this._transformationChain[right ? 'push' : 'unshift'](transform)
+    //this._transformationChain[right ? 'push' : 'unshift'](transform)
+
+    var runner = this._transformationChain.filter((el) => el.id === id)[0]
+
+    if(!runner) {
+      runner = {id: id, transforms: []}
+      this._transformationChain.push(runner)
+    }
+
+    runner.transforms[count] = transform
 
     var _this = this
 
     // This function will merge all of the transforms on the chain, but it
     // should only be called at most, once per animation frame
     function mergeTransforms () {
-      var net = _this._currentTransform()
+      var net = recudeTransform(_this._transformationChain.map(el => el.transforms), _this._baseTransform)
       _this.transform(net)
       _this._mergeTransforms = null
+      //_this._transformationChain = []
     }
 
     // Make sure we only apply the transformation merge once, at the end of
     // the animation frame, and not any more than that
-    var transformFrame = this._mergeTransforms
-    if (this._mergeTransforms) {
-      SVG.Animator.cancelFrame(this._mergeTransforms)
-    }
-    this._mergeTransforms = SVG.Animator.frame(mergeTransforms)
-  },
+    // var transformFrame = this._mergeTransforms
+    // if (this._mergeTransforms) {
+    //   SVG.Animator.cancelFrame(this._mergeTransforms)
+    // }
 
-  _currentTransform: function () {
-    return this._transformationChain.reduce(function (last, curr) {
-      return last.lmultiply(curr)
-    }, this._baseTransform)
+    this._mergeTransforms = SVG.Animator.transform_frame(mergeTransforms)
   },
+
+  _currentTransform: function (id, count) {
+    var runners = []
+    var chain = this._transformationChain
+
+    for(var i = 0, len = chain.length; i < len; ++i) {
+      if(chain[i].id == id) {
+        var a = {id: id, transforms: chain[i].transforms.slice(0, count+1)}
+        runners.push(a)
+        break
+      }
+
+      runners.push(chain[i])
+    }
+
+    return recudeTransform(runners.map(el => el.transforms), this._baseTransform)
+  }
 })
 
 SVG.extend(SVG.Runner, {
@@ -578,9 +623,9 @@ SVG.extend(SVG.Runner, {
       morpher = new SVG.Morphable.ObjectBag(formatTransforms({}))
         .to(formatTransforms(transforms))
         .stepper(this._stepper)
-
+// debugger
       return this.queue(function() {}, function (pos) {
-        this.element()._queueTransform(new SVG.Matrix(morpher.at(pos)), false)
+        this._pushLeft(new SVG.Matrix(morpher.at(pos).valueOf()))
         return morpher.done()
       }, this._isDeclarative)
       return this
@@ -608,7 +653,7 @@ SVG.extend(SVG.Runner, {
     this.queue(function() {}, function (pos) {
 
       // 2. on every frame: pull the current state of all previous transforms (M - m can change)
-      var curr = this.element()._currentTransform()
+      var curr = this._currentTransform()
       if(!relative) morpher.from(curr)
 
       // 3. Find the interpolated matrix F(pos) = m + pos * (t - m)
@@ -619,9 +664,9 @@ SVG.extend(SVG.Runner, {
       if(!relative) {
         // 4. Now you get the delta matrix as a result: D = F * inv(M)
         var delta = matrix.multiply(curr.inverse())
-        this.element()._queueTransform(delta, false)
+        this._pushLeft(delta)
       } else {
-        this.element()._queueTransform(matrix, false)
+        this._pushLeft(matrix)
       }
 
       return morpher.done()