make List return new lists on method calls, add map to array polyfill so that this works, fix runner

6 files changed, 52 insertions, 21 deletions

diff --git a/src/animation/Runner.js b/src/animation/Runner.js
index 4de127a..47929fd 100644
--- a/src/animation/Runner.js
+++ b/src/animation/Runner.js
@@ -141,10 +141,11 @@ export default class Runner extends EventTarget {
   These methods allow us to attach basic functions to the runner directly
   */
 
-  queue (initFn, runFn, isTransform) {
+  queue (initFn, runFn, retargetFn, isTransform) {
     this._queue.push({
       initialiser: initFn || noop,
       runner: runFn || noop,
+      retarget: retargetFn,
       isTransform: isTransform,
       initialised: false,
       finished: false
@@ -338,8 +339,8 @@ export default class Runner extends EventTarget {
 
       // for the case of transformations, we use the special retarget function
       // which has access to the outer scope
-      if (this._history[method].caller.isTransform) {
-        this._history[method].caller.isTransform(target)
+      if (this._history[method].caller.retarget) {
+        this._history[method].caller.retarget(target)
       // for everything else a simple morpher change is sufficient
       } else {
         this._history[method].morpher.to(target)
@@ -404,6 +405,15 @@ export default class Runner extends EventTarget {
     return this
   }
 
+  // TODO: Keep track of all transformations so that deletion is faster
+  clearTransformsFromQueue () {
+    if (!this.done) {
+      this._queue = this._queue.filter((item) => {
+        return !item.isTransform
+      })
+    }
+  }
+
   static sanitise (duration, delay, when) {
     // Initialise the default parameters
     var times = 1
@@ -442,6 +452,8 @@ class FakeRunner {
     this.id = id
     this.done = done
   }
+
+  clearTransformsFromQueue () { }
 }
 
 extend([Runner, FakeRunner], {
@@ -538,6 +550,7 @@ class RunnerArray {
     let deleteCnt = this.ids.indexOf(id + 1) || 1
     this.ids.splice(0, deleteCnt, 0)
     this.runners.splice(0, deleteCnt, new FakeRunner())
+      .forEach((r) => r.clearTransformsFromQueue())
     return this
   }
 }
@@ -758,7 +771,7 @@ extend(Runner, {
       transforms = { ...newTransforms, origin }
     }
 
-    this.queue(setup, run, retarget)
+    this.queue(setup, run, retarget, true)
     this._isDeclarative && this._rememberMorpher('transform', morpher)
     return this
   },
@@ -774,28 +787,31 @@ extend(Runner, {
   },
 
   dx (x) {
-    return this._queueNumberDelta('dx', x)
+    return this._queueNumberDelta('x', x)
   },
 
   dy (y) {
-    return this._queueNumberDelta('dy', y)
+    return this._queueNumberDelta('y', y)
   },
 
   _queueNumberDelta (method, to) {
     to = new SVGNumber(to)
 
     // Try to change the target if we have this method already registerd
-    if (this._tryRetargetDelta(method, to)) return this
+    if (this._tryRetarget(method, to)) return this
 
     // Make a morpher and queue the animation
     var morpher = new Morphable(this._stepper).to(to)
+    var from = null
     this.queue(function () {
-      var from = this.element()[method]()
+      from = this.element()[method]()
       morpher.from(from)
       morpher.to(from + to)
     }, function (pos) {
       this.element()[method](morpher.at(pos))
       return morpher.done()
+    }, function (newTo) {
+      morpher.to(from + new SVGNumber(newTo))
     })
 
     // Register the morpher so that if it is changed again, we can retarget it
diff --git a/src/main.js b/src/main.js
index a7deaaa..701b23b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,6 @@ import './modules/optional/memory.js'
 import './modules/optional/sugar.js'
 import './modules/optional/transform.js'
 
-import List from './types/List.js'
 import { extend } from './utils/adopter.js'
 import { getMethodNames, getMethodsFor } from './utils/methods.js'
 import Box from './types/Box.js'
@@ -23,6 +22,7 @@ import EventTarget from './types/EventTarget.js'
 import Gradient from './elements/Gradient.js'
 import Image from './elements/Image.js'
 import Line from './elements/Line.js'
+import List from './types/List.js'
 import Marker from './elements/Marker.js'
 import Matrix from './types/Matrix.js'
 import Morphable, {
@@ -39,6 +39,7 @@ import PointArray from './types/PointArray.js'
 import Polygon from './elements/Polygon.js'
 import Polyline from './elements/Polyline.js'
 import Rect from './elements/Rect.js'
+import Runner from './animation/Runner.js'
 import SVGArray from './types/SVGArray.js'
 import SVGNumber from './types/SVGNumber.js'
 import Shape from './elements/Shape.js'
@@ -154,6 +155,8 @@ extend(Shape, getMethodsFor('Shape'))
 // extend(Element, getConstructor('Memory'))
 extend(Container, getMethodsFor('Container'))
 
+extend(Runner, getMethodsFor('Runner'))
+
 List.extend(getMethodNames())
 
 registerMorphableType([
diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js
index f4c20fc..6001631 100644
--- a/src/modules/optional/sugar.js
+++ b/src/modules/optional/sugar.js
@@ -4,7 +4,6 @@ import Color from '../../types/Color.js'
 import Element from '../../elements/Element.js'
 import Matrix from '../../types/Matrix.js'
 import Point from '../../types/Point.js'
-import Runner from '../../animation/Runner.js'
 import SVGNumber from '../../types/SVGNumber.js'
 
 // Define list of available attributes for stroke and fill
@@ -105,19 +104,21 @@ registerMethods(['Element', 'Runner'], {
     return this.attr('opacity', value)
   },
 
+  // Relative move over x and y axes
+  dmove: function (x, y) {
+    return this.dx(x).dy(y)
+  }
+})
+
+registerMethods('Element', {
   // Relative move over x axis
   dx: function (x) {
-    return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true)
+    return this.x(new SVGNumber(x).plus(this.x()))
   },
 
   // Relative move over y axis
   dy: function (y) {
-    return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true)
-  },
-
-  // Relative move over x and y axes
-  dmove: function (x, y) {
-    return this.dx(x).dy(y)
+    return this.y(new SVGNumber(y).plus(this.y()))
   }
 })
 
diff --git a/src/types/ArrayPolyfill.js b/src/types/ArrayPolyfill.js
index 839a970..4d2309f 100644
--- a/src/types/ArrayPolyfill.js
+++ b/src/types/ArrayPolyfill.js
@@ -24,6 +24,12 @@ export const subClassArray = (function () {
       Arr.prototype = Object.create(baseClass.prototype)
       Arr.prototype.constructor = Arr
 
+      Arr.prototype.map = function (fn) {
+        const arr = new Arr()
+        arr.push.apply(arr, Array.prototype.map.call(this, fn))
+        return arr
+      }
+
       return Arr
     }
   }
diff --git a/src/types/List.js b/src/types/List.js
index 193ed05..b50a18e 100644
--- a/src/types/List.js
+++ b/src/types/List.js
@@ -1,7 +1,9 @@
 import { extend } from '../utils/adopter.js'
 import { subClassArray } from './ArrayPolyfill.js'
 
-const List = subClassArray('List', Array, function (arr) {
+const List = subClassArray('List', Array, function (arr = []) {
+  // This catches the case, that native map tries to create an array with new Array(1)
+  if (typeof arr === 'number') return this
   this.length = 0
   this.push(...arr)
 })
@@ -13,9 +15,10 @@ extend(List, {
     if (typeof fnOrMethodName === 'function') {
       this.forEach((el) => { fnOrMethodName.call(el, el) })
     } else {
-      this.forEach((el) => {
-        el[fnOrMethodName](...args)
-      })
+      return this.map(el => { return el[fnOrMethodName](...args) })
+      // this.forEach((el) => {
+      //   el[fnOrMethodName](...args)
+      // })
     }
 
     return this
diff --git a/src/types/SVGArray.js b/src/types/SVGArray.js
index 4fcb500..7f27ec4 100644
--- a/src/types/SVGArray.js
+++ b/src/types/SVGArray.js
@@ -10,6 +10,8 @@ export default SVGArray
 
 extend(SVGArray, {
   init (arr) {
+    // This catches the case, that native map tries to create an array with new Array(1)
+    if (typeof arr === 'number') return this
     this.length = 0
     this.push(...this.parse(arr))
     return this