Added matrix composition and decompositions

This commit adds matrix composition and decompositions (untested),
it also adds another playground to test that this is working as
expected in every case.

We also fixed a few linting errors.

2 files changed, 10 insertions, 59 deletions

diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html
index d206d06..ac60f14 100644
--- a/playgrounds/transforms/transforms.html
+++ b/playgrounds/transforms/transforms.html
@@ -12,19 +12,12 @@
 
     <h1>SVG JS Playground</h1>
 
-    <svg viewBox="0 0 2000 2000">
+    <svg viewBox="-200 -200 400 400">
 
-      <!-- <rect id="old" x=200 y=400 width=200 height=400 class="green"/>
+      <rect id="old" x=200 y=400 width=200 height=400 class="green"/>
       <rect id="new" x=200 y=400 width=200 height=400 class="pink"/>
-      <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/> -->
-      <!-- <ellipse cx=0 cy=0 rx=3 ry=3 />
-      <ellipse cx=100 cy=0 rx=3 ry=3 />
-      <ellipse cx=0 cy=100 rx=3 ry=3 />
-      <ellipse cx=100 cy=100 rx=3 ry=3 />
-      <ellipse fill=red cx=0 cy=0 rx=3 ry=3 />
-      <ellipse fill=red cx=100 cy=0 rx=3 ry=3 />
-      <ellipse fill=red cx=0 cy=100 rx=3 ry=3 /> -->
-      <!-- <ellipse fill=red cx=100 cy=100 rx=3 ry=3 /> -->
+      <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/>
+
     </svg>
 
   </body>
diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js
index 76045a3..b27e1c3 100644
--- a/playgrounds/transforms/transforms.js
+++ b/playgrounds/transforms/transforms.js
@@ -1,51 +1,9 @@
 
-// let mover = SVG.select("#new")[0]
-// mover.transform({
-//   // position: [800, 500],
-//   // origin: [200, 400],
-//   // skew: [20, 0],
-//   // rotate: 30,
-// })
 
-
-// var draw = SVG.select('svg')[0]
-// var rect = draw.rect(100, 100)
-//   .transform({
-//     // rotate: -10,
-//     translate: [-50, -50],
-//     // scale: 2
-//   }).opacity(0.3)
-//
-//
-// var es = SVG.select('ellipse')
-
-draw = SVG("svg")
-
-offset = draw.screenCTM()
-draw.viewbox(100,100, 1000, 1000)
-nested = draw.nested().size(500, 500).move(100,100).viewbox(0, 0, 400, 400)
-rect = nested.rect(50, 50).stroke({width:0}).move(25, 90).scale(2, 0, 0).translate(10, 10).fill("red")
-
-
-var box = rect.rbox()
-
-console.log(box.x - offset.e, box.y - offset.f);
-
-
-div = document.createElement('div')
-
-Object.assign(div.style, {
-  position : 'absolute',
-  left : box.x + 'px',
-  top : box.y + 'px',
-  width : box.width + 'px',
-  opacity : 0.4,
-  height : box.height + 'px',
-  background : 'blue',
+let mover = SVG.select("#new")[0]
+mover.transform({
+  position: [800, 500],
+  origin: [200, 400],
+  skew: [20, 0],
+  rotate: 30,
 })
-
-
-document.body.appendChild(div)
-
-// rect1.toParent(nested).transform()
-// rect2.toParent(g2).transform()