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.

1 files changed, 79 insertions, 0 deletions

diff --git a/playgrounds/matrix/drag.js b/playgrounds/matrix/drag.js
new file mode 100644
index 0000000..636ae30
--- /dev/null
+++ b/playgrounds/matrix/drag.js
@@ -0,0 +1,79 @@
+
+function reactToDrag (element, onDrag, beforeDrag) {
+
+    let xStart, yStart
+
+    let startDrag = event=> {
+
+        // Avoid the default events
+        event.preventDefault()
+
+        // Store the position where the drag started
+        xStart = event.pageX
+        yStart = event.pageY
+
+        // Fire the start drag event
+        if (beforeDrag) {
+          var {x, y} = parent.point(event.pageX, event.pageY)
+          beforeDrag(event, x, y)
+        }
+
+        // Register events to react to dragging
+        SVG.on(window, 'mousemove.drag', reactDrag)
+        SVG.on(window, 'touchmove.drag', reactDrag)
+
+        // Register the events required to finish dragging
+        SVG.on(window, 'mouseup.drag', stopDrag)
+        SVG.on(window, 'touchend.drag', stopDrag)
+    }
+
+    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)
+    }
+
+    let stopDrag = event=> {
+        SVG.off(window, 'mousemove.drag')
+        SVG.off(window, 'touchmove.drag')
+        SVG.off(window, 'mouseup.drag')
+        SVG.off(window, 'touchend.drag')
+    }
+
+    // Bind the drag tracker to this element directly
+    let parent = element.doc()
+    let point = new SVG.Point()
+    element.mousedown(startDrag).touchstart(startDrag)
+}
+
+SVG.extend(SVG.Element, {
+  draggable: function (after) {
+
+    let sx, sy
+
+    reactToDrag(this, (e, x, y)=> {
+
+      let matrix = this.transform
+      this.transform({
+        origin: [sx, sy],
+        position: [x, y],
+      })
+
+      if (after) {
+        after(this, x, y)
+      }
+
+    }, (e, x, y)=> {
+
+      var toAbsolute = this.transform().inverse()
+      var p = new SVG.Point(x, y).transform(toAbsolute)
+      sx = p.x
+      sy = p.y
+
+    })
+
+    return this
+  },
+})