fix merging of transformations

2 files changed, 40 insertions, 33 deletions

diff --git a/dirty.html b/dirty.html
index 1bdf7ec..1708b0d 100644
--- a/dirty.html
+++ b/dirty.html
@@ -74,7 +74,7 @@ function getColor(t) {
 //   .animate()
 //   .move(300, 200)
 
-//
+
 // for (let i = 0 ; i < 15; i++) {
 //   for (let j = 0 ; j < 10; j++) {
 //
@@ -200,13 +200,9 @@ function getColor(t) {
 
 var timer = 0
 let rec1 = SVG('<rect>').addTo('svg').size(100, 100)//.transform({translateX: -50, translateY: -50})
-let rec2 = SVG('<rect>').addTo('svg').size(100, 100)//.transform({translateX: -50, translateY: -50})
 rec1.timeline().source(() => {
-  timer += 5
-  return timer
-})
-rec2.timeline().source(() => {
-  timer += 5
+  timer += 1
+  document.querySelector('#absolute span').textContent = timer
   return timer
 })
 
@@ -215,21 +211,15 @@ var runner = rec1
   //.animate().transform({rotate: -45, origin: [50, 50]})
    .animate(500)
   .transform({
-    a: -1, b: -0.1, c: 0.1, d: -1, e: 200, f: 200, affine: true
-  }, true)
-  .animate(500, 0, 'after')
-  .transform({scale:2}, true)
-  // .transform({rotate: 360}, true)
-  // .transform({translateX: 50, translateY: 50}, true)
-  //.transform({translateX: 50, translateY: 50}, true)
-   // .animate(500, 0, 'absolute')
-   //    .transform({scale: 2}, true)
-  // .animate(2000, 0, 'absolute')
-  //    .transform({rotate: -300})
-var runner = rec2
-  // .animate(100).attr('fill', '#fff')
-  .animate().transform({rotate: -45, origin: [50, 50]})
-  .transform({scale:2}, true)
+    rotate: 90,
+    origin: [50, 50],
+  })
+  .animate(200, 0, 'absolute')
+  .transform({
+    scale:2
+  })
+  // .animate(500, 0)
+  // .transform({scale:2})
   // .transform({rotate: 360}, true)
   // .transform({translateX: 50, translateY: 50}, true)
   //.transform({translateX: 50, translateY: 50}, true)
@@ -238,12 +228,6 @@ var runner = rec2
   // .animate(2000, 0, 'absolute')
   //    .transform({rotate: -300})
 
-// transform(SVG.Matrix()) // should be affine
-// transform(SVG.Matrix(), true) // should be relative
-// transform(SVG.Matrix(), true, false) // should relative and nonaffine
-// transform({...}) and transform({...}, true) // should animate parameters absolute or relative
-// transform({...}, ..., false)
-
 // r.step(300) // should be 0.1
 // r.step(2 * 1100) // should be 0
 // r.step(-50) // 0.05
diff --git a/src/runner.js b/src/runner.js
index f2c4469..600f672 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -479,6 +479,22 @@ function mergeTransforms () {
   var net = reduceTransform(this.runners.map(el => el.transforms), this._baseTransform)
   this.transform(net)
   this._mergeTransforms = null
+
+  this.runners.forEach(function (r, index, arr) {
+    if(!r.done) return
+    if(index == 0) {
+      this._baseTransform = this._baseTransform.multiply(r.transforms)
+      arr.shift()
+    } else if(arr[index-1].done) {
+      var obj = {
+        done: true,
+        transforms: r.transforms.multiply(this.runners[index].transforms)
+      }
+
+      arr.splice(index-1, 2, obj)
+    }
+  }.bind(this))
+
   //_this._transformationChain = []
 }
 
@@ -488,7 +504,7 @@ SVG.extend(SVG.Element, {
     var runners = this.runners
     var index = ((runners.indexOf(r) + 1) || this.runners.push(r)) - 1
 
-    if(r.done) this.checkForSimplification(index)
+    //if(r.done) this.checkForSimplification(index)
 
     this._mergeTransforms = SVG.Animator.transform_frame(mergeTransforms.bind(this), this._frameId)
   },
@@ -496,9 +512,11 @@ SVG.extend(SVG.Element, {
   checkForSimplification: function (index) {
     var r
     if(index == 0) {
-      r = this.runners.shift()
-      this._baseTransform = this._baseTransform.lmultiply(r.transforms)
-      r.transforms = new SVG.Matrix()
+      //while(this.runners[0] && this.runners[0].done) {
+        r = this.runners.shift()
+        this._baseTransform = this._baseTransform.lmultiply(r.transforms)
+        r.transforms = new SVG.Matrix()
+      //}
       return
     }
 
@@ -527,7 +545,12 @@ SVG.extend(SVG.Element, {
 
   _currentTransform: function (r) {
 
-    var transforms = this.runners.slice(0, this.runners.indexOf(this)+1).map(el => el.transforms)
+    var index = this.runners.indexOf(r)
+    if(index < 0) {
+      return this._baseTransform
+    }
+
+    var transforms = this.runners.slice(0, this.runners.indexOf(r)+1).map(el => el.transforms)
 
     return reduceTransform(transforms, this._baseTransform)
   }