4 files changed, 58 insertions, 66 deletions
diff --git a/playgrounds/matrix/drag.js b/playgrounds/matrix/drag.js
index 7609404..8f294ed 100644
--- a/playgrounds/matrix/drag.js
+++ b/playgrounds/matrix/drag.js
@@ -1,8 +1,6 @@
 function reactToDrag(element, onDrag, beforeDrag) {
-
   let xStart, yStart
-  let startDrag = event => {
-
+  let startDrag = (event) => {
     // Avoid the default events
     event.preventDefault()
 
@@ -21,15 +19,13 @@ function reactToDrag(element, onDrag, beforeDrag) {
     SVG.on(window, ['mouseup.drag', 'touchend.drag'], stopDrag)
   }
 
-  let reactDrag = event => {
-
+  let reactDrag = (event) => {
     // Convert screen coordinates to svg coordinates and use them
     var { x, y } = parent.point(event.pageX, event.pageY)
-    if (onDrag)
-      onDrag(event, x, y)
+    if (onDrag) onDrag(event, x, y)
   }
 
-  let stopDrag = event => {
+  let stopDrag = (event) => {
     SVG.off(window, ['mousemove.drag', 'touchmove.drag'])
     SVG.off(window, ['mouseup.drag', 'touchend.drag'])
   }
@@ -42,27 +38,27 @@ function reactToDrag(element, onDrag, beforeDrag) {
 
 SVG.extend(SVG.Element, {
   draggable: function (after) {
-
     let sx, sy
 
-    reactToDrag(this, (e, x, y) => {
-
-      this.transform({
-        origin: [sx, sy],
-        position: [x, y],
-      })
-
-      if (after) {
-        after(this, x, y)
+    reactToDrag(
+      this,
+      (e, x, y) => {
+        this.transform({
+          origin: [sx, sy],
+          position: [x, y]
+        })
+
+        if (after) {
+          after(this, x, y)
+        }
+      },
+      (e, x, y) => {
+        var toAbsolute = new SVG.Matrix(this).inverse()
+        var p = new SVG.Point(x, y).transform(toAbsolute)
+        sx = p.x
+        sy = p.y
       }
-
-    }, (e, x, y) => {
-
-      var toAbsolute = new SVG.Matrix(this).inverse()
-      var p = new SVG.Point(x, y).transform(toAbsolute)
-      sx = p.x
-      sy = p.y
-    })
+    )
     return this
-  },
+  }
 })
diff --git a/playgrounds/matrix/index.html b/playgrounds/matrix/index.html
index e815ed5..9da4c20 100644
--- a/playgrounds/matrix/index.html
+++ b/playgrounds/matrix/index.html
@@ -1,15 +1,12 @@
-
 <!DOCTYPE html>
 <html>
-
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>SVG Playground</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
-
     <h1>SVG Transformations</h1>
 
     <p>
@@ -18,30 +15,26 @@
     </p>
 
     <svg viewBox="-200 -200 400 400">
-
       <g id="tester">
-        <rect class="green" width=50 height=50 />
-        <line x2=50 stroke=black stroke-width=1 />
+        <rect class="green" width="50" height="50" />
+        <line x2="50" stroke="black" stroke-width="1" />
       </g>
 
       <g id="guess">
-        <rect class="dark-pink" width=50 height=50 opacity=0.5 />
-        <line x2=50 stroke=black stroke-width=1 />
+        <rect class="dark-pink" width="50" height="50" opacity="0.5" />
+        <line x2="50" stroke="black" stroke-width="1" />
       </g>
       <g id="true">
-        <rect class="pink" width=50 height=50 opacity=0.5 />
-        <line x2=50 stroke=black stroke-width=1 />
+        <rect class="pink" width="50" height="50" opacity="0.5" />
+        <line x2="50" stroke="black" stroke-width="1" />
       </g>
-      <ellipse id="or" class="dark-pink" rx=5 ry=5 />
-      <ellipse id="b1" class="pink" cx="50" rx=5 ry=5 />
-      <ellipse id="b2" class="green" cy="50" rx=5 ry=5 />
-
+      <ellipse id="or" class="dark-pink" rx="5" ry="5" />
+      <ellipse id="b1" class="pink" cx="50" rx="5" ry="5" />
+      <ellipse id="b2" class="green" cy="50" rx="5" ry="5" />
     </svg>
-
   </body>
 
   <script src="../../dist/svg.js" charset="utf-8"></script>
   <script src="drag.js" charset="utf-8"></script>
   <script src="matrix.js" charset="utf-8"></script>
-
 </html>
diff --git a/playgrounds/matrix/matrix.js b/playgrounds/matrix/matrix.js
index 33e21d1..fb74717 100644
--- a/playgrounds/matrix/matrix.js
+++ b/playgrounds/matrix/matrix.js
@@ -1,6 +1,5 @@
-
-function print (mat) {
-  let {a, b, c, d} = mat
+function print(mat) {
+  let { a, b, c, d } = mat
   console.log(`
     a: ${a.toFixed(2)}
     b: ${b.toFixed(2)}
@@ -9,14 +8,19 @@ function print (mat) {
     `)
 }
 
-function moveit () {
-
-  let {cx: x0, cy: y0} = or.rbox(svg)
-  let {cx: x1, cy: y1} = b1.rbox(svg)
-  let {cx: x2, cy: y2} = b2.rbox(svg)
+function moveit() {
+  let { cx: x0, cy: y0 } = or.rbox(svg)
+  let { cx: x1, cy: y1 } = b1.rbox(svg)
+  let { cx: x2, cy: y2 } = b2.rbox(svg)
 
   let m = new SVG.Matrix(
-    (x1 - x0) / 50, (y1 - y0) / 50, (x2 - x0) / 50, (y2 - y0) / 50, x0, y0)
+    (x1 - x0) / 50,
+    (y1 - y0) / 50,
+    (x2 - x0) / 50,
+    (y2 - y0) / 50,
+    x0,
+    y0
+  )
   let com = m.decompose()
   let g = new SVG.Matrix().compose(com)
 
@@ -24,18 +28,18 @@ function moveit () {
   target.transform(m)
   mover.transform(g)
 
-  console.log(com);
+  console.log(com)
   print(m)
   print(g)
 }
 
 // Declare the two points
 let svg = SVG('svg')
-var or = SVG("#or").draggable(moveit)
-var b1 = SVG("#b1").draggable(moveit)
-var b2 = SVG("#b2").draggable(moveit)
+var or = SVG('#or').draggable(moveit)
+var b1 = SVG('#b1').draggable(moveit)
+var b2 = SVG('#b2').draggable(moveit)
 
 // Declare the squares
-let target = SVG("#true")
-let mover = SVG("#guess")
-let tester = SVG("#tester")
+let target = SVG('#true')
+let mover = SVG('#guess')
+let tester = SVG('#tester')
diff --git a/playgrounds/matrix/style.css b/playgrounds/matrix/style.css
index f327905..24a9d4e 100644
--- a/playgrounds/matrix/style.css
+++ b/playgrounds/matrix/style.css
@@ -1,10 +1,9 @@
-
 * {
   box-sizing: border-box;
 }
 
 html {
-  background-color : #fefefe;
+  background-color: #fefefe;
 }
 
 body {
@@ -50,7 +49,7 @@ svg {
 }
 
 .pink {
-  fill: #FF0066;
+  fill: #ff0066;
 }
 
 .green {
@@ -62,9 +61,9 @@ svg {
 }
 
 .light-pink {
-  fill: #FF99C2;
+  fill: #ff99c2;
 }
 
 .off-white {
-   fill: #FFCCE0;
+  fill: #ffcce0;
 }