From e065a4415b7d6991ac14de81646f109e43bef9e7 Mon Sep 17 00:00:00 2001
From: Saivan <savian@me.com>
Date: Sat, 3 Mar 2018 22:08:26 +1100
Subject: 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.
---
 playgrounds/transforms/transforms.html | 15 +++-------
 playgrounds/transforms/transforms.js   | 54 ++++------------------------------
 2 files changed, 10 insertions(+), 59 deletions(-)

(limited to 'playgrounds/transforms')

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()
-- 
cgit v1.2.3