Optimized the matrix functions so that the transform function is a multitude faster for parameterized input

2 files changed, 42 insertions, 2 deletions

diff --git a/bench/runner.html b/bench/runner.html
index 6d1bed2..b39c1df 100644
--- a/bench/runner.html
+++ b/bench/runner.html
@@ -38,6 +38,13 @@
   <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> -->
@@ -45,8 +52,9 @@
   <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-pointArray-bbox.js"></script>
+  <script src="tests/10000-accesses.js"></script> -->
+  <script src="tests/10000-transform.js"></script>
   <script>
     SVG.bench.run()
   </script>
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)
+  })
+})
+