Merge branch '776-new-fx' into 3.0.0

4 files changed, 111 insertions, 36 deletions

diff --git a/bench/runner.html b/bench/runner.html
index 965a884..b39c1df 100644
--- a/bench/runner.html
+++ b/bench/runner.html
@@ -38,16 +38,25 @@
   <div id="draw"></div>
   <svg id="native" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"></svg>
   <script src="../dist/svg.js"></script>
+  <script type="text/javascript" src="../src/helpers.js"></script>
+  <script type="text/javascript" src="../src/transform.js"></script>
+  <script type="text/javascript" src="../src/matrix.js"></script>
+  <script type="text/javascript" src="../src/morph.js"></script>
+  <script type="text/javascript" src="../src/runner.js"></script>
+  <script type="text/javascript" src="../src/timeline.js"></script>
+  <script type="text/javascript" src="../src/controller.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
   <script src="svg.bench.js"></script>
   <!--<script src="tests/10000-each.js"></script> -->
-  <script src="tests/10000-rects.js"></script>
+  <!-- <script src="tests/10000-rects.js"></script>
   <script src="tests/10000-circles.js"></script>
   <script src="tests/10000-paths.js"></script>
   <script src="tests/10000-boxes.js"></script>
   <script src="tests/10000-pointArray-bbox.js"></script>
+  <script src="tests/10000-accesses.js"></script> -->
+  <script src="tests/10000-transform.js"></script>
   <script>
     SVG.bench.run()
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/bench/svg.bench.js b/bench/svg.bench.js
index 5b9541e..50ef547 100644
--- a/bench/svg.bench.js
+++ b/bench/svg.bench.js
@@ -1,56 +1,55 @@
-;( function() {
+/* global Snap */
 
+;(function () {
   SVG.bench = {
     // Initalize test store
-    _chain:  []
-  , _before: function() {}
-  , _after:  function() {}
-  , draw:    SVG().addTo('#draw')
-  , snap:    Snap(100, 100)
-  , raw:     document.getElementById('native')
+    _chain: [],
+    _before: function () {},
+    _after: function () {},
+    draw: SVG().addTo('#draw'),
+    snap: Snap(100, 100),
+    raw: document.getElementById('native'),
 
     // Add descriptor
-  , describe: function(name, closure) {
+    describe: function (name, closure) {
       this._chain.push({
-        name: name
-      , run:  closure
+        name: name,
+        run: closure
       })
 
       return this
-    }
+    },
 
     // Add test
-  , test: function(name, run) {
+    test: function (name, run) {
       // run test
-      var start = ( new Date ).getTime()
+      var start = (new Date()).getTime()
       run()
-      this.write( name, ( new Date ).getTime() - start )
+      this.write(name, (new Date()).getTime() - start)
 
       // clear everything
       this.clear()
-    }
+    },
 
     // Skip test
-  , skip: function(name, run) {
-      this.write( name, false )
-    }
+    skip: function (name, run) {
+      this.write(name, false)
+    },
 
     // Run tests
-  , run: function() {
+    run: function () {
       this.pad()
-      
+
       for (var h, i = 0, il = this._chain.length; i < il; i++) {
-        var h = document.createElement('h1')
+        h = document.createElement('h1')
         h.innerHTML = this._chain[i].name
-
         this.pad().appendChild(h)
-
         this._chain[i].run(this)
       }
-    }
-    
+    },
+
     // Write result
-  , write: function(name, ms) {
+    write: function (name, ms) {
       var test = document.createElement('div')
 
       if (typeof ms === 'number') {
@@ -60,14 +59,14 @@
         test.className = 'test skipped'
         test.innerHTML = name + ' (skipped)'
       }
-      
+
       this.pad().appendChild(test)
 
       return this
-    }
+    },
 
     // Reference writable element
-  , pad: function() {
+    pad: function () {
       var pad = document.getElementById('pad')
 
       if (!pad) {
@@ -76,15 +75,15 @@
       }
 
       return pad
-    }
+    },
 
     // Clear canvasses
-  , clear: function() {
-      while(this.raw.hasChildNodes())
+    clear: function () {
+      while (this.raw.hasChildNodes()) {
         this.raw.removeChild(this.raw.lastChild)
+      }
       this.draw.clear()
       this.snap.clear()
     }
   }
-
-})();
\ No newline at end of file
+})()
diff --git a/bench/tests/10000-accesses.js b/bench/tests/10000-accesses.js
new file mode 100644
index 0000000..4c7dfea
--- /dev/null
+++ b/bench/tests/10000-accesses.js
@@ -0,0 +1,35 @@
+
+SVG.bench.describe('Access a dom attribues vs dom properties vs object properties', function(bench) {
+  bench.test('using an object', function() {
+    var sum = 0
+    var obj = {x: "30"}
+    for (var i = 0; i < 1000000; i++) {
+      sum += obj.x * i
+    }
+    console.log(sum)
+  })
+
+  bench.test('figure out what the overhead is', function () {
+    var obj = bench.draw.rect(100, 100).move(0, 0)
+  })
+
+  bench.test('using dom attriutes', function () {
+    var sum = 0
+    var obj = bench.draw.rect(100, 100).move(0, 0)
+    var node = obj.node
+    for (var i = 0; i < 1000000; i++) {
+      sum += node.getAttribute('x') * i
+    }
+    console.log(sum, node.getAttribute('x'))
+  })
+
+  bench.test('using dom properties', function () {
+    var sum = 0
+    var obj = bench.draw.rect(100, 100).move(0, 0)
+    var node = obj.node
+    for (var i = 0; i < 1000000; i++) {
+      sum += node.x.baseVal * i
+    }
+    console.log(sum, node.x)
+  })
+})
diff --git a/bench/tests/10000-transform.js b/bench/tests/10000-transform.js
new file mode 100644
index 0000000..0fcc162
--- /dev/null
+++ b/bench/tests/10000-transform.js
@@ -0,0 +1,32 @@
+SVG.bench.describe('Transform 1000000 rects', function(bench) {
+  let parameters = {
+    translate: [20, 30],
+    origin: [100, 100],
+    rotate: 25,
+    skew: [10, 30],
+    scale: 0.5
+  }
+  
+  let matrixLike = {a:2, b:3, c:1, d:2, e:49, f:100}
+  let matrix = new SVG.Matrix(matrixLike)
+  
+  let worker = new SVG.Matrix()
+  bench.test('with parameters', function() {
+    for (var i = 0; i < 1000000; i++)
+      worker.transform(parameters)
+  })
+  
+  worker = new SVG.Matrix()
+  bench.test('with matrix like', function() {
+    for (var i = 0; i < 1000000; i++) {
+      worker.transform(matrixLike)
+    }
+  })
+  
+  worker = new SVG.Matrix()
+  bench.test('with SVG.Matrix', function() {
+    for (var i = 0; i < 1000000; i++)
+      worker.transform(matrix)
+  })
+})
+