fix rotation issue and make relative declaritive work

5 files changed, 51 insertions, 45 deletions

diff --git a/dirty.html b/dirty.html
index 5e6e6e1..95227cf 100644
--- a/dirty.html
+++ b/dirty.html
@@ -218,11 +218,13 @@ a.timeline().source(() => {
 })
 
 
-let obj = { rotate: 100, shear:2, origin: [600, 600], translate: [100, 100] }
+let obj = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] }
+let obj2 = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] }
 
 a.clone() // startPosition
-a.clone().transform(obj) // endPosition
-a.animate(new SVG.Spring(50, 30)).transform(obj) // animation
+a.clone().transform(obj, true).transform(obj2, true) // endPosition
+//a.animate(new SVG.Spring(50, 30)).transform(obj) // animation
+a.animate(300).transform(obj, true).transform(obj2, true) // animation
 
 
 // Put an ellipse where we expect the object to be
diff --git a/dist/svg.js b/dist/svg.js
index bf890c5..0754226 100644
--- 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 23:06:53 GMT+0200 (GMT+02:00)
+* BUILT: Fri Jun 29 2018 10:28:02 GMT+0200 (GMT+02:00)
 */;
 

 (function(root, factory) {

@@ -1762,6 +1762,7 @@ SVG.Matrix = SVG.invent({
       var lam = (a * c + b * d) / determinant

       var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a))

 

+      // Use the translations

       let tx = e - cx + cx * ct * sx + cy * (lam * ct * sx - st * sy)

       let ty = f - cy + cx * st * sx + cy * (lam * st * sx + ct * sy)

 

diff --git a/src/controller.js b/src/controller.js
index 359dc9f..c2a9355 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -120,6 +120,7 @@ SVG.Spring = SVG.invent ({
   extend: {
     step: function (current, target, dt, c) {
 
+      if (typeof current == 'string') return current
       c.done = dt == Infinity
       if(dt == Infinity) return target
       if(dt == 0) return current
@@ -165,6 +166,7 @@ SVG.PID = SVG.invent ({
   extend: {
     step: function (current, target, dt, c) {
 
+      if (typeof current == 'string') return current
       c.done = dt == Infinity
 
       if(dt == Infinity) return target
diff --git a/src/morph.js b/src/morph.js
index 022c51e..ff902ae 100644
--- a/src/morph.js
+++ b/src/morph.js
@@ -197,16 +197,11 @@ SVG.Morphable.ObjectBag = SVG.invent({
       return
     }
 
-    var keys = []
+    var entries = Object.entries(objOrArr || {}).sort((a, b) => {
+      return a[0] - b[0]
+    })
 
-    for(var i in objOrArr) {
-      keys.push(i)
-    }
-
-    for(var i = 0, len = keys.length; i < len; ++i) {
-      this.values.push(keys[i])
-      this.values.push(objOrArr[keys[i]])
-    }
+    this.values = entries.reduce((last, curr) => last.concat(curr), [])
   },
 
   extend: {
diff --git a/src/runner.js b/src/runner.js
index 4c9dda2..92f41a9 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -487,11 +487,12 @@ function mergeTransforms () {
   runners.forEach((runner, i) => {
 
     if (lastRunner && runner.done && lastRunner.done) {
-      delete runners[lastRunner.id]
-      runners[i] = {
+      console.log(lastRunner, runner)
+      delete runners[runner.id+1]
+      runners[lastRunner.id+1] = {
         transforms: runner.transforms.lmultiply(lastRunner.transforms),
         done: true,
-        id: i,
+        id: lastRunner.id,
       }
     }
 
@@ -505,9 +506,12 @@ SVG.extend(SVG.Element, {
     this._transformationRunners.forEach((runner, i, arr) => {
       if (runner.id < currentRunner.id) {
 
-        runner._queue = runner._queue.filter((item) => {
-          return !item.isTransform
-        })
+        if (!runner.done) {
+          runner._queue = runner._queue.filter((item) => {
+            return !item.isTransform
+          })
+        }
+
 
         delete arr[i]
       }
@@ -515,7 +519,7 @@ SVG.extend(SVG.Element, {
   },
 
   addRunner: function (runner) {
-    this._transformationRunners[runner.id] = runner
+    this._transformationRunners[runner.id+1] = runner
 
     SVG.Animator.transform_frame(
       mergeTransforms.bind(this), this._frameId
@@ -524,7 +528,11 @@ SVG.extend(SVG.Element, {
 
   _prepareRunner: function () {
     if (this._frameId == null) {
-      this._transformationRunners = []
+      this._transformationRunners = [{
+        transforms: new SVG.Matrix(this),
+        done: true,
+        id: -1
+      }]
       this._frameId = SVG.Element.frameId++
     }
   },
@@ -624,33 +632,27 @@ SVG.extend(SVG.Runner, {
     // - true, true with ObjectBag
     var morpher
     var origin
+    var current
     if(relative && !isMatrix) {
-
-      morpher = new SVG.Morphable.ObjectBag(formatTransforms({}))
-        .to(formatTransforms(transforms))
+      morpher = new SVG.Morphable().type(SVG.Morphable.ObjectBag)
         .stepper(this._stepper)
 
       this.queue(function() {
-
         if (origin == null) {
           origin = getOrigin (transforms, this.element())
+          transforms.origin = origin
+          morpher.to(formatTransforms(transforms))
         }
 
-        // Apply the origin to the transforms
-        transforms.origin = origin
-        let sanitisedTransforms = formatTransforms(transforms)
+        let from = current || {origin}
 
-        morpher.from(formatTransforms({origin}))
-
-        var to = morpher.to()
-        var indexOfOffset = to.indexOf('ox')
-        if(indexOfOffset > -1) {
-          to.splice(indexOfOffset, 4, 'ox', origin[0], 'oy', origin[1])
-        }
+        morpher.from(formatTransforms(from))
 
         this.element().addRunner(this)
       }, function (pos) {
-        this.addTransform(new SVG.Matrix(morpher.at(pos).valueOf()), true)
+        current = morpher.at(pos).valueOf()
+        let matrix = new SVG.Matrix(current)
+        this.addTransform(matrix)
         return morpher.done()
       }, true)
 
@@ -686,7 +688,7 @@ SVG.extend(SVG.Runner, {
         morpher.to(transforms)
       }
 
-      if (!relative && !this._isDeclarative) {
+      if (!relative) {
         // Deactivate all transforms that have run so far if we are absolute
         element._clearTransformRunnersBefore(this)
       }
@@ -697,16 +699,20 @@ SVG.extend(SVG.Runner, {
       // make sure to add an origin if we morph affine
       if (affine) {
         startMatrix.origin = origin
-      }
 
-      // FIXME: correct the rotation so that it takes the shortest path
-      // GIVE ME (rCurrent) (rTarget) - to store the current/target angle
-      const possibilities = [rTarget - 360, rTarget, rTarget + 360]
-      const distances = possibilities.map( a => Math.abs(a - rCurrent) )
-      const shortest = Math.min(...distances)
-      const index = distances.indexOf(shortest)
-      const target = possibilities[index]
+        // FIXME: correct the rotation so that it takes the shortest path
+        // GIVE ME (rCurrent) (rTarget) - to store the current/target angle
+        const rTarget = transforms.rotate || 0
+        const rCurrent = startMatrix.decompose(origin[0], origin[1]).rotate
 
+        const possibilities = [rTarget - 360, rTarget, rTarget + 360]
+        const distances = possibilities.map( a => Math.abs(a - rCurrent) )
+        const shortest = Math.min(...distances)
+        const index = distances.indexOf(shortest)
+        const target = possibilities[index]
+
+        morpher._to.splice(3, 1, target)
+      }
 
       morpher.from(startMatrix)
     }, function (pos) {