make morphing work, fix inheritance, animations now work

15 files changed, 97 insertions, 43 deletions

diff --git a/src/bare.js b/src/bare.js
index 44b762c..393ce6e 100644
--- a/src/bare.js
+++ b/src/bare.js
@@ -3,7 +3,7 @@ SVG.Bare = SVG.invent({
   // Initialize
   create: function (element, inherit) {
     // construct element
-    this.constructor(SVG.create(element))
+    SVG.Element.call(this, SVG.create(element))
 
     // inherit custom methods
     if (inherit) {
diff --git a/src/color.js b/src/color.js
index 97e81e0..9fc6f76 100644
--- a/src/color.js
+++ b/src/color.js
@@ -71,6 +71,12 @@ SVG.extend(SVG.Color, {
   toString: function () {
     return this.toHex()
   },
+  toArray: function () {
+    return [this.r, this.g, this.b]
+  },
+  fromArray: function (a) {
+    return new SVG.Color(a[0], a[1], a[2])
+  },
   // Build hex value
   toHex: function () {
     return '#' +
diff --git a/src/container.js b/src/container.js
index 90e8f26..8b324bd 100644
--- a/src/container.js
+++ b/src/container.js
@@ -1,7 +1,7 @@
 SVG.Container = SVG.invent({
   // Initialize node
   create: function (node) {
-    this.constructor(node)
+    SVG.Element.call(this, node)
   },
 
   // Inherit from
diff --git a/src/doc.js b/src/doc.js
index 72ea59c..423204f 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -1,7 +1,7 @@
 SVG.Doc = SVG.invent({
   // Initialize node
   create: function (node) {
-    this.constructor(node || SVG.create('svg'))
+    SVG.Element.call(this, node || SVG.create('svg'))
 
     // set svg element attributes and ensure defs node
     this.namespace()
diff --git a/src/gradient.js b/src/gradient.js
index 2f2a609..45a4e08 100644
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -1,7 +1,7 @@
 SVG.Gradient = SVG.invent({
   // Initialize node
   create: function (type) {
-    this.constructor(typeof type === 'object' ? type : SVG.create(type + 'Gradient'))
+    SVG.Element.call(this, typeof type === 'object' ? type : SVG.create(type + 'Gradient'))
   },
 
   // Inherit from
diff --git a/src/matrix.js b/src/matrix.js
index a1a3f81..4522d89 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -1,4 +1,4 @@
-/* global abcdef, arrayToMatrix, closeEnough */
+/* global abcdef, arrayToMatrix, closeEnough, formatTransforms */
 
 SVG.Matrix = SVG.invent({
   // Initialize
@@ -329,6 +329,14 @@ SVG.Matrix = SVG.invent({
     // Convert matrix to string
     toString: function () {
       return 'matrix(' + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ')'
+    },
+
+    toArray: function () {
+      return [this.a, this.b, this.c, this.d, this.e, this.f]
+    },
+
+    fromArray: function (a) {
+      return new SVG.Matrix(a)
     }
   },
 
diff --git a/src/morph.js b/src/morph.js
index 7b31dcd..930eacb 100644
--- a/src/morph.js
+++ b/src/morph.js
@@ -1,7 +1,7 @@
 SVG.Morphable = SVG.invent({
   create: function (controller) {
     // FIXME: the default controller does not know about easing
-    this.controller = controller || function (from, to, pos) {
+    this._controller = controller || function (from, to, pos) {
       return from + (to - from) * pos
     }
   },
@@ -15,7 +15,7 @@ SVG.Morphable = SVG.invent({
 
     to: function (val, modifier) {
       this._to = this._set(val)
-      this.modifier = modifier
+      this.modifier = modifier || function(arr) { return arr }
       return this
     },
 
@@ -34,16 +34,19 @@ SVG.Morphable = SVG.invent({
     _set: function (value) {
 
       if(!this._type)  {
-        if (SVG.Color.isColor(val)) {
+        if (typeof value == 'number') {
+          this.type(SVG.Number)
+
+        } else if (SVG.Color.isColor(value)) {
           this.type(SVG.Color)
 
-        } else if (SVG.regex.delimiter.test(val)) {
-          this.type(SVG.regex.pathLetters.test(val)
+        } else if (SVG.regex.delimiter.test(value)) {
+          this.type(SVG.regex.pathLetters.test(value)
             ? SVG.PathArray
             : SVG.Array
           )
 
-        } else if (SVG.regex.numberAndUnit.test(val)) {
+        } else if (SVG.regex.numberAndUnit.test(value)) {
           this.type(SVG.Number)
 
         } else if (value in SVG.MorphableTypes) {
@@ -71,8 +74,8 @@ SVG.Morphable = SVG.invent({
       //   arr.push(this.controller(this._from[i], this._to[i]))
       // }
 
-      return this.type.fromArray(modifier(this._from.map(function (i, index) {
-        return _this._controller(i, _this._to[i], pos)
+      return this._type.prototype.fromArray(modifier(this._from.map(function (i, index) {
+        return _this._controller(i, _this._to[index], pos)
       })))
     },
 
@@ -185,8 +188,8 @@ SVG.MorphableTypes = [
 ]
 
 SVG.extend(SVG.MorphableTypes, {
-  to: (item, args) => {
-    let a = new SVG.Morphable().type(this.constructor).to(item, args)
+  to: function (val, args) {
+    return new SVG.Morphable().type(this.constructor).to(val, args)
   },
 })
 
diff --git a/src/number.js b/src/number.js
index 5d787ad..f1ad9e0 100644
--- a/src/number.js
+++ b/src/number.js
@@ -45,6 +45,12 @@ SVG.Number = SVG.invent({
     toJSON: function () {
       return this.toString()
     },   // Convert to primitive
+    toArray: function () {
+      return [this.value]
+    },
+    fromArray: function (val) {
+      return new SVG.Number(val[0])
+    },
     valueOf: function () {
       return this.value
     },
diff --git a/src/parent.js b/src/parent.js
index d48e086..6bdad58 100644
--- a/src/parent.js
+++ b/src/parent.js
@@ -3,7 +3,7 @@
 SVG.Parent = SVG.invent({
   // Initialize node
   create: function (node) {
-    this.constructor(node)
+    SVG.Element.call(this, node)
   },
 
   // Inherit from
diff --git a/src/patharray.js b/src/patharray.js
index d9ffecd..cbb4ced 100644
--- a/src/patharray.js
+++ b/src/patharray.js
@@ -87,6 +87,14 @@ SVG.extend(SVG.PathArray, {
   toString: function () {
     return arrayToString(this.value)
   },
+  toArray: function () {
+    return this.value.reduce(function (prev, curr) {
+      return [].concat.call(prev, curr)
+    }, [])
+  },
+  fromArray: function (a) {
+    return new SVG.PathArray(a)
+  },
   // Move path string
   move: function (x, y) {
     // get bounding box of current situation
diff --git a/src/pointarray.js b/src/pointarray.js
index ecf5c40..f80911a 100644
--- a/src/pointarray.js
+++ b/src/pointarray.js
@@ -19,6 +19,16 @@ SVG.extend(SVG.PointArray, {
     return array.join(' ')
   },
 
+  toArray: function () {
+    return this.value.reduce(function (prev, curr) {
+      return [].concat.call(prev, curr)
+    }, [])
+  },
+
+  fromArray: function (a) {
+    return new SVG.PointArray(a)
+  },
+
   // Convert array to line object
   toLine: function () {
     return {
diff --git a/src/shape.js b/src/shape.js
index 87b01f9..cb15098 100644
--- a/src/shape.js
+++ b/src/shape.js
@@ -2,7 +2,7 @@
 SVG.Shape = SVG.invent({
   // Initialize node
   create: function (node) {
-    this.constructor(node)
+    SVG.Element.call(this, node)
   },
 
   // Inherit from
diff --git a/src/svg.js b/src/svg.js
index 9b3bfd6..2ec5908 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -52,12 +52,13 @@ SVG.invent = function (config) {
   // Create element initializer
   var initializer = typeof config.create === 'function' ? config.create
     : function (node) {
-      this.constructor(node || SVG.create(config.create))
+      SVG.Element.call(this, node || SVG.create(config.create))
     }
 
   // Inherit prototype
   if (config.inherit) {
     initializer.prototype = new config.inherit()
+    initializer.prototype.constructor = initializer
   }
 
   // Extend with methods
diff --git a/src/text.js b/src/text.js
index b210c7b..8a50df9 100644
--- a/src/text.js
+++ b/src/text.js
@@ -1,7 +1,7 @@
 SVG.Text = SVG.invent({
   // Initialize node
   create: function (node) {
-    this.constructor(node || SVG.create('text'))
+    SVG.Element.call(this, node || SVG.create('text'))
     this.dom.leading = new SVG.Number(1.3)    // store leading value for rebuilding
     this._rebuild = true                      // enable automatic updating of dy values
     this._build = false                     // disable build mode for adding multiple lines
diff --git a/src/timeline.js b/src/timeline.js
index 07dca45..3213f20 100644
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -17,7 +17,7 @@ function Runner (timeline) {
 
   // We copy the current values from the timeline because they can change
   this._timeline = timeline
-  this._start = timeline._startTime
+  this._startTime = timeline._startTime
   this._duration = timeline._duration
   this._last = 0
   this._active = false
@@ -30,6 +30,7 @@ Runner.prototype = {
 
   add: function (initFn, runFn, alwaysInitialise) {
     this.functions.push({
+      initialised: false,
       alwaysInitialise: alwaysInitialise || false,
       initialiser: initFn,
       runner: runFn,
@@ -39,31 +40,40 @@ Runner.prototype = {
   step: function (time) {
 
     // If it is time to do something, act now.
-    var end = this._start + this._duration
-    var timeInside = this._start < time && time < end
-    var running = timeInside || !this._duration
-    var allDone = running
+    var end = this._startTime + this._duration
+    var running = (this._startTime < time && time < end) || !this._duration
 
-    // If we don't have a duration, we are in declarative mode
+    // If its time run the animation, we do so
+    var allDone = time > end
+    if (running && !this._timeline._paused) {
 
-    // If the time is inside the bounds, run all of the
-    if (timeInside) {
+      // Get the current position for the current animation
+      // TODO: Deal with looping
+      var position = (time - this._startTime) / this._duration
 
-      // Work out if we need to do the first initialisation
-      var rising = this._last < this._start
-      if (rising) {
+      // We run all of the functions
+      for (var i = 0, len = this.functions.length; i < len ; ++i) {
 
-      }
-
-    } else {
+        // Get the current queued item
+        var current = this.functions[i]
 
-      // Work out if we just finished
-      var justFinished = this._start < this._last && this._last < end
-      if (justFinished) {
+        // Work out if we need to initialise, and do so if we do
+        var initialise = current.alwaysInitialise || !current.initialised
+        if (initialise) {
+          current.initialiser.call(this._timeline, position)
+          current.initialised = true
+        }
 
+        // Run the function required
+        // TODO: Figure out what declarative needs that it doesn't have
+        var stillRunning = current.runner.call(this._timeline, position)
+        if (stillRunning) {
+          allDone = false
+        }
       }
     }
 
+    // Tell the caller whether this animation is finished
     return allDone
   },
 
@@ -318,7 +328,7 @@ SVG.extend(SVG.Timeline, {
       }
     }
 
-    var morpher = new Morphable(this.controller).to(val)
+    var morpher = new Morphable(this._controller).to(val)
 
     this.queue(
       function () {
@@ -333,7 +343,7 @@ SVG.extend(SVG.Timeline, {
   },
 
   zoom: function (level, point) {
-   var  morpher = SVG.Number().to(level).controller(this.controller)
+   var  morpher = new Morphable(this._controller).to(new SVG.Number(level))
    var el = this.target()
 
    this.queue(function() {
@@ -438,7 +448,8 @@ SVG.extend(SVG.Timeline, {
 
   // Animatable x-axis
   x: function (x, relative) {
-    var morpher = new SVG.Number().to(x)
+    var morpher = new SVG.Morphable(this._controller)
+      .to(new SVG.Number(x))
 
     /*
     if (this.target() instanceof SVG.G) {
@@ -460,7 +471,8 @@ SVG.extend(SVG.Timeline, {
 
   // Animatable y-axis
   y: function (y, relative) {
-    var morpher = new SVG.Number().to(y)
+    var morpher = new SVG.Morphable(this._controller)
+      .to(new SVG.Number(y))
 
     /*
     if (this.target() instanceof SVG.G) {
@@ -481,11 +493,11 @@ SVG.extend(SVG.Timeline, {
   },
 
   _queueObject: function (method, to) {
-    var morpher = new SVG.Morphable(this.controller).to(to)
+    var morpher = new SVG.Morphable(this._controller).to(to)
 
     this.queue(function () {
       morpher.from(this._element[method]())
-    }, function () {
+    }, function (pos) {
       this._element[method](morpher.at(pos))
     })
 
@@ -493,7 +505,7 @@ SVG.extend(SVG.Timeline, {
   },
 
   _queueNumber: function (method, value) {
-    return this._queueObject(method, new Number(value))
+    return this._queueObject(method, new SVG.Number(value))
   },
 
   // Animatable center x-axis