adding optimized transformation function to speed up things a tiny bit

3 files changed, 139 insertions, 76 deletions

diff --git a/dirty.html b/dirty.html
index 66d2a01..aa270f0 100644
--- a/dirty.html
+++ b/dirty.html
@@ -362,36 +362,36 @@ setTimeout(runTransformation({
 //   rotate: 180,
 // }), 0.4 * wait)
 
-const getConsole = (time) => {
-  return () => {
-    console.group(time)
-    console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate)
-    console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate)
-    console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate)
-    console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate)
-    console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate)
-    console.groupEnd(time)
-  }
-}
-
-logCall = (time) => {
-  setTimeout(getConsole(time), time)
-}
-
-logCall(0.2 * wait)
-logCall(0.3 * wait)
-logCall(0.4 * wait)
-logCall(0.5 * wait)
-logCall(0.6 * wait)
-logCall(0.7 * wait)
-logCall(0.8 * wait)
-logCall(0.9 * wait)
-logCall(1 * wait)
-logCall(1.1 * wait)
-logCall(1.2 * wait)
-logCall(1.3 * wait)
-logCall(1.4 * wait)
-logCall(1.5 * wait)
+// const getConsole = (time) => {
+//   return () => {
+//     console.group(time)
+//     console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate)
+//     console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate)
+//     console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate)
+//     console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate)
+//     console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate)
+//     console.groupEnd(time)
+//   }
+// }
+//
+// logCall = (time) => {
+//   setTimeout(getConsole(time), time)
+// }
+//
+// logCall(0.2 * wait)
+// logCall(0.3 * wait)
+// logCall(0.4 * wait)
+// logCall(0.5 * wait)
+// logCall(0.6 * wait)
+// logCall(0.7 * wait)
+// logCall(0.8 * wait)
+// logCall(0.9 * wait)
+// logCall(1 * wait)
+// logCall(1.1 * wait)
+// logCall(1.2 * wait)
+// logCall(1.3 * wait)
+// logCall(1.4 * wait)
+// logCall(1.5 * wait)
 
 </script>
 
diff --git a/src/matrix.js b/src/matrix.js
index e0bc08a..6e93578 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -34,10 +34,9 @@ SVG.Matrix = SVG.invent({
     // Transform a matrix into another matrix by manipulating the space
     transform: function (o) {
       // Check if o is a matrix and then left multiply it directly
-      if (o.a != null) {
+      if (isMatrixLike(o)) {
         var matrix = new SVG.Matrix(o)
-        var newMatrix = this.lmultiply(matrix)
-        return newMatrix
+        return matrix.multiplyO(this)
       }
 
       // Get the proposed transformations and the current transformations
@@ -47,14 +46,14 @@ SVG.Matrix = SVG.invent({
 
       // Construct the resulting matrix
       var transformer = new SVG.Matrix()
-        .translate(t.rx, t.ry)
+        .translateO(t.rx, t.ry)
         .lmultiply(current)
-        .translate(-ox, -oy)
-        .scale(t.scaleX, t.scaleY)
-        .skew(t.skewX, t.skewY)
-        .shear(t.shear)
-        .rotate(t.theta)
-        .translate(ox, oy)
+        .translateO(-ox, -oy)
+        .scaleO(t.scaleX, t.scaleY)
+        .skewO(t.skewX, t.skewY)
+        .shearO(t.shear)
+        .rotateO(t.theta)
+        .translateO(ox, oy)
 
       // If we want the origin at a particular place, we force it there
       if (isFinite(t.px) || isFinite(t.py)) {
@@ -62,11 +61,11 @@ SVG.Matrix = SVG.invent({
         // TODO: Replace t.px with isFinite(t.px)
         const dx = t.px ? t.px - origin.x : 0
         const dy = t.py ? t.py - origin.y : 0
-        transformer = transformer.translate(dx, dy)
+        transformer.translateO(dx, dy)
       }
 
       // Translate now after positioning
-      transformer = transformer.translate(t.tx, t.ty)
+      transformer.translateO(t.tx, t.ty)
       return transformer
     },
 
@@ -88,13 +87,13 @@ SVG.Matrix = SVG.invent({
 
       // Apply the standard matrix
       var result = new SVG.Matrix()
-        .translate(-ox, -oy)
-        .scale(sx, sy)
-        .shear(lam)
-        .rotate(theta)
-        .translate(tx, ty)
-        .lmultiply(this)
-        .translate(ox, oy)
+        .translateO(-ox, -oy)
+        .scaleO(sx, sy)
+        .shearO(lam)
+        .rotateO(theta)
+        .translateO(tx, ty)
+        .lmultiplyO(this)
+        .translateO(ox, oy)
       return result
     },
 
@@ -178,6 +177,10 @@ SVG.Matrix = SVG.invent({
 
     // Left multiplies by the given matrix
     multiply: function (matrix) {
+      return this.clone().multiplyO(matrix)
+    },
+
+    multiplyO: function (matrix) {
       // Get the matrices
       var l = this
       var r = new SVG.Matrix(matrix)
@@ -190,18 +193,23 @@ SVG.Matrix = SVG.invent({
       var e = l.e + l.a * r.e + l.c * r.f
       var f = l.f + l.b * r.e + l.d * r.f
 
-      // Form the matrix and return it
-      var product = new SVG.Matrix(a, b, c, d, e, f)
-      return product
+      this.a = a
+      this.b = b
+      this.c = c
+      this.d = d
+      this.e = e
+      this.f = f
+
+      return this
     },
 
     lmultiply: function (matrix) {
-      var result = new SVG.Matrix(matrix).multiply(this)
+      var result = new SVG.Matrix(matrix).multiplyO(this)
       return result
     },
 
     // Inverses matrix
-    inverse: function () {
+    inverseO: function () {
       // Get the current parameters out of the matrix
       var a = this.a
       var b = this.b
@@ -225,12 +233,23 @@ SVG.Matrix = SVG.invent({
       var nf = -(nb * e + nd * f)
 
       // Construct the inverted matrix
-      return new SVG.Matrix(na, nb, nc, nd, ne, nf)
+      this.a = na
+      this.b = nb
+      this.c = nc
+      this.d = nd
+      this.e = ne
+      this.f = nf
+
+      return this
+    },
+
+    inverse: function () {
+      return this.clone().inverseO()
     },
 
     // Translate matrix
     translate: function (x, y) {
-      return new SVG.Matrix(this).translateO(x, y)
+      return this.clone().translateO(x, y)
     },
 
     translateO: function (x, y) {
@@ -241,6 +260,10 @@ SVG.Matrix = SVG.invent({
 
     // Scale matrix
     scale: function (x, y, cx, cy) {
+      return this.clone().scaleO(x, y, cx, cy)
+    },
+
+    scaleO: function (x, y, cx, cy) {
       // Support uniform scaling
       if (arguments.length === 1) {
         y = x
@@ -252,37 +275,50 @@ SVG.Matrix = SVG.invent({
 
       // Scale the current matrix
       var scale = new SVG.Matrix(x, 0, 0, y, 0, 0)
-      var matrix = this.around(cx, cy, scale)
-      return matrix
+      return this.aroundO(cx, cy, scale)
     },
 
     // Rotate matrix
     rotate: function (r, cx, cy) {
+      return this.clone().rotateO(r, cx, cy)
+    },
+
+    rotateO: function (r, cx, cy) {
       // Convert degrees to radians
       r = SVG.utils.radians(r)
 
       // Construct the rotation matrix
       var rotation = new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0)
-      var matrix = this.around(cx, cy, rotation)
-      return matrix
+      return this.aroundO(cx, cy, rotation)
     },
 
     // Flip matrix on x or y, at a given offset
     flip: function (axis, around) {
-      return axis === 'x' ? this.scale(-1, 1, around, 0)
-        : axis === 'y' ? this.scale(1, -1, 0, around)
-        : this.scale(-1, -1, axis, around || axis) // Define an x, y flip point
+      return this.clone().flipO(axis, around)
+    },
+
+    flipO: function (axis, around) {
+      return axis === 'x' ? this.scaleO(-1, 1, around, 0)
+        : axis === 'y' ? this.scaleO(1, -1, 0, around)
+        : this.scaleO(-1, -1, axis, around || axis) // Define an x, y flip point
     },
 
     // Shear matrix
     shear: function (a, cx, cy) {
+      return this.clone().shearO(a, cx, cy)
+    },
+
+    shearO: function (a, cx, cy) {
       var shear = new SVG.Matrix(1, 0, a, 1, 0, 0)
-      var matrix = this.around(cx, cy, shear)
-      return matrix
+      return this.aroundO(cx, cy, shear)
     },
 
     // Skew Matrix
     skew: function (x, y, cx, cy) {
+      return this.clone().skewO(x, y, cx, cy)
+    },
+
+    skewO: function (x, y, cx, cy) {
       // support uniformal skew
       if (arguments.length === 1) {
         y = x
@@ -298,8 +334,7 @@ SVG.Matrix = SVG.invent({
 
       // Construct the matrix
       var skew = new SVG.Matrix(1, Math.tan(y), Math.tan(x), 1, 0, 0)
-      var matrix = this.around(cx, cy, skew)
-      return matrix
+      return this.aroundO(cx, cy, skew)
     },
 
     // SkewX
@@ -307,16 +342,28 @@ SVG.Matrix = SVG.invent({
       return this.skew(x, 0, cx, cy)
     },
 
+    skewXO: function (x, cx, cy) {
+      return this.skewO(x, 0, cx, cy)
+    },
+
     // SkewY
     skewY: function (y, cx, cy) {
       return this.skew(0, y, cx, cy)
     },
 
+    skewYO: function (y, cx, cy) {
+      return this.skewO(0, y, cx, cy)
+    },
+
     // Transform around a center point
-    around: function (cx, cy, matrix) {
+    aroundO: function (cx, cy, matrix) {
       var dx = cx || 0
       var dy = cy || 0
-      return this.translate(-dx, -dy).lmultiply(matrix).translate(dx, dy)
+      return this.translateO(-dx, -dy).lmultiply(matrix).translateO(dx, dy)
+    },
+
+    around: function (cx, cy, matrix) {
+      return this.clone().aroundO(cx, cy, matrix)
     },
 
     // Convert to native SVGMatrix
@@ -386,3 +433,13 @@ SVG.Matrix = SVG.invent({
     }
   }
 })
+
+// let extensions = {}
+// ['rotate'].forEach((method) => {
+//   let methodO = method + 'O'
+//   extensions[method] = function (...args) {
+//     return new SVG.Matrix(this)[methodO](...args)
+//   }
+// })
+//
+// SVG.extend(SVG.Matrix, extensions)
diff --git a/src/runner.js b/src/runner.js
index 09d9703..b69b1d6 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -48,7 +48,6 @@ SVG.Runner = SVG.invent({
     this.tags = {}
 
     // Save transforms applied to this runner
-    // this.transforms = [new SVG.Matrix()]
     this.transforms = new SVG.Matrix()
     this.transformId = 1
 
@@ -297,7 +296,6 @@ SVG.Runner = SVG.invent({
         this._initialise(running)
 
         // clear the transforms on this runner so they dont get added again and again
-        // this.transforms = [new SVG.Matrix()]
         this.transforms = new SVG.Matrix()
         var converged = this._run(declarative ? dt : position)
         // this.fire('step', this)
@@ -305,9 +303,9 @@ SVG.Runner = SVG.invent({
       // correct the done flag here
       // declaritive animations itself know when they converged
       this.done = this.done || (converged && declarative)
-      if (this.done) {
-        this.fire('finish', this)
-      }
+      // if (this.done) {
+      //   this.fire('finish', this)
+      // }
       return this
     },
 
@@ -450,13 +448,12 @@ SVG.Runner = SVG.invent({
     },
 
     addTransform: function (transform, index) {
-      // this.transforms[index] = transform
       this.transforms = this.transforms.lmultiply(transform)
+      // this._element.addToCurrentTransform(transform)
       return this
     },
 
     clearTransform: function () {
-      // this.transforms = [new SVG.Matrix()]
       this.transforms = new SVG.Matrix()
       return this
     }
@@ -546,6 +543,8 @@ function mergeTransforms () {
   if (lastRunner == runners[0]) {
     this._frameId = null
   }
+
+  this._currentTransformCache = runners[0].transforms
 }
 
 
@@ -576,7 +575,13 @@ SVG.extend(SVG.Element, {
     })
   },
 
+  addToCurrentTransform (transform) {
+    this._currentTransformCache = this._currentTransformCache.lmultiply(transform)
+    return this
+  },
+
   _currentTransform (current) {
+    // return this._currentTransformCache
     return this._transformationRunners
       // we need the equal sign here to make sure, that also transformations
       // on the same runner which execute before the current transformation are
@@ -600,6 +605,7 @@ SVG.extend(SVG.Element, {
         new SVG.FakeRunner(new SVG.Matrix(this))
       ]
 
+      // this._currentTransformCache = new SVG.Matrix(this)
       this._frameId = SVG.Element.frameId++
     }
   },