transforms work with multiple elements too. Satisfy linter

3 files changed, 10 insertions, 49 deletions

diff --git a/src/animator.js b/src/animator.js
index ea52a34..eb8ca72 100644
--- a/src/animator.js
+++ b/src/animator.js
@@ -5,9 +5,9 @@ SVG.Animator = {
   frames: new SVG.Queue(),
   timeouts: new SVG.Queue(),
   timer: window.performance || window.Date,
+  transforms: [],
 
   frame: function (fn) {
-
     // Store the node
     var node = SVG.Animator.frames.push({ run: fn })
 
@@ -20,8 +20,8 @@ SVG.Animator = {
     return node
   },
 
-  transform_frame: function (fn) {
-    SVG.Animator.transform = fn
+  transform_frame: function (fn, id) {
+    SVG.Animator.transforms[id] = fn
   },
 
   timeout: function (fn, delay) {
@@ -50,13 +50,11 @@ SVG.Animator = {
   },
 
   _draw: function (now) {
-
     // Run all the timeouts we can run, if they are not ready yet, add them
     // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
     var nextTimeout = null

     var lastTimeout = SVG.Animator.timeouts.last()
-    while (nextTimeout = SVG.Animator.timeouts.shift()) {
-
+    while ((nextTimeout = SVG.Animator.timeouts.shift())) {
       // Run the timeout if its time, or push it to the end
       if (now >= nextTimeout.time) {
         nextTimeout.run()
@@ -75,8 +73,7 @@ SVG.Animator = {
       nextFrame.run()
     }
 
-    SVG.Animator.transform && SVG.Animator.transform()
-    SVG.Animator.transform = null
+    SVG.Animator.transforms.forEach(function (el) { el() })
 
     // If we have remaining timeouts or frames, draw until we don't anymore
     SVG.Animator.nextDraw = SVG.Animator.timeouts.first() || SVG.Animator.frames.first()
diff --git a/src/queue.js b/src/queue.js
index 00b6c22..621c887 100644
--- a/src/queue.js
+++ b/src/queue.js
@@ -6,7 +6,6 @@ SVG.Queue = SVG.invent({
 
   extend: {
     push: function (value) {
-
       // An item stores an id and the provided value
       var item = value.next ? value : { value: value, next: null, prev: null }
 
@@ -25,7 +24,6 @@ SVG.Queue = SVG.invent({
     },
 
     shift: function () {
-
       // Check if we have a value
       var remove = this._first
       if (!remove) return null
@@ -49,7 +47,6 @@ SVG.Queue = SVG.invent({
 
     // Removes the item that was returned from the push
     remove: function (item) {
-
       // Relink the previous item
       if (item.prev) item.prev.next = item.next
       if (item.next) item.next.prev = item.prev
diff --git a/src/runner.js b/src/runner.js
index e6f7358..1c5c78d 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -492,7 +492,7 @@ SVG.extend(SVG.Element, {
 
     if(r.done) this.checkForSimplification(index)
 
-    this._mergeTransforms = SVG.Animator.transform_frame(mergeTransforms.bind(this))
+    this._mergeTransforms = SVG.Animator.transform_frame(mergeTransforms.bind(this), this._frameId)
   },
 
   checkForSimplification: function (index) {
@@ -507,7 +507,7 @@ SVG.extend(SVG.Element, {
     var r = this.runners[index-1]
 
     if(!r.done) return
-console.log(r, this.runners[index])
+
     var obj = {
       done: true,
       transforms: r.transforms.multiply(this.runners[index].transforms)
@@ -523,45 +523,10 @@ console.log(r, this.runners[index])
       this._mergeTransforms = null
       this._transformationChain = []
       this.runners = []
+      this._frameId = SVG.Element.frameId++
     }
   },
 
-  // Make a function that allows us to add transformations, and cry 😭
-  _queueTransform: function (transform, right, id, count) {
-
-    // Add the transformation to the correct place
-    //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 = reduceTransform(_this.runners.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.transform_frame(mergeTransforms)
-  },
-
   _currentTransform: function (r) {
 
     var transforms = this.runners.slice(0, this.runners.indexOf(this)+1).map(el => el.transforms)
@@ -570,6 +535,8 @@ console.log(r, this.runners[index])
   }
 })
 
+SVG.Element.frameId = 0
+
 SVG.extend(SVG.Runner, {
 
   attr: function (a, v) {