Fixed recommendations by @Fuzzyma regarding transforms

This commit fixes a number of issues with transformations:
- Removed move/dmove/etc... on groups
- Sugar was being passed origin instead of ox, oy
- Updated the changelog
- Removed parseMatrix in favor of new SVG.Matrix()
- .matrix is the getter for a matrix, not .transform
- added a [02:24:41] Using gulpfile ~/Desktop/svg/svg.js/gulpfile.js
[02:24:41] Starting 'lint'...
[02:24:43] Finished 'lint' after 2.32 s directive

1 files changed, 46 insertions, 66 deletions

diff --git a/dist/svg.js b/dist/svg.js
index 441057c..ca249ab 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Sun Mar 04 2018 21:43:14 GMT+1100 (AEDT)
+* BUILT: Mon Mar 05 2018 02:20:12 GMT+1100 (AEDT)
 */;
 
 (function(root, factory) {
@@ -2232,7 +2232,7 @@ SVG.extend(SVG.FX, {
   }
 })
 
-/* global abcdef, arrayToMatrix, parseMatrix, closeEnough */
+/* global abcdef, arrayToMatrix, closeEnough */
 
 SVG.Matrix = SVG.invent({
   // Initialize
@@ -2240,12 +2240,12 @@ SVG.Matrix = SVG.invent({
     var base = arrayToMatrix([1, 0, 0, 1, 0, 0])
     var i
 
-    // ensure source as object
+    // ensure source as object// ens
     source = source instanceof SVG.Element ? source.matrixify()
       : typeof source === 'string' ? arrayToMatrix(source.split(SVG.regex.delimiter).map(parseFloat))
-      : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments))
       : Array.isArray(source) ? arrayToMatrix(source)
       : typeof source === 'object' ? source
+      : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments))
       : base
 
     // merge source
@@ -2287,14 +2287,19 @@ SVG.Matrix = SVG.invent({
         : flipY
       var shear = o.shear || 0
       var theta = o.rotate || 0
-      var ox = o.origin && o.origin.length ? o.origin[0] : o.ox || 0
-      var oy = o.origin && o.origin.length ? o.origin[1] : o.oy || 0
-      var px = o.position && o.position.length ? o.position[0] : o.px
-      var py = o.position && o.position.length ? o.position[1] : o.py
-      var tx = o.translate && o.translate.length ? o.translate[0] : o.tx || 0
-      var ty = o.translate && o.translate.length ? o.translate[1] : o.ty || 0
-      var rx = o.relative && o.relative.length ? o.relative[0] : o.rx || 0
-      var ry = o.relative && o.relative.length ? o.relative[1] : o.ry || 0
+      var origin = new SVG.Point(o.ox == null ? o.origin : o.ox, o.oy)
+      var ox = origin.x
+      var oy = origin.y
+      var position = new SVG.Point(o.px == null
+        ? o.position : o.px, o.py, {x: null, y: null})
+      var px = position.x
+      var py = position.y
+      var translate = new SVG.Point(o.tx == null ? o.translate : o.tx, o.ty)
+      var tx = translate.x
+      var ty = translate.y
+      var relative = new SVG.Point(o.rx == null ? o.relative : o.rx, o.ry)
+      var rx = relative.x
+      var ry = relative.y
       var currentTransform = new SVG.Matrix(this)
 
       // Construct the resulting matrix
@@ -2309,11 +2314,11 @@ SVG.Matrix = SVG.invent({
         .lmultiply(currentTransform)
 
       // If we want the origin at a particular place, we force it there
-      if (isFinite(px) && isFinite(py)) {
+      if (isFinite(px) || isFinite(py)) {
         // Figure out where the origin went and the delta to get there
-        var p = new SVG.Point(ox - rx, oy - ry).transform(transformer)
-        var dx = px - p.x
-        var dy = py - p.y
+        var current = new SVG.Point(ox - rx, oy - ry).transform(transformer)
+        var dx = px ? px - current.x : 0
+        var dy = py ? py - current.y : 0
 
         // Apply another translation
         transformer = transformer.translate(dx, dy)
@@ -2379,7 +2384,6 @@ SVG.Matrix = SVG.invent({
         translateY: f,
 
         // Return the matrix parameters
-        matrix: new SVG.Matrix(this),
         a: this.a,
         b: this.b,
         c: this.c,
@@ -2418,7 +2422,7 @@ SVG.Matrix = SVG.invent({
     multiply: function (matrix) {
       // Get the matrices
       var l = this
-      var r = parseMatrix(matrix)
+      var r = new SVG.Matrix(matrix)
 
       // Work out the product directly
       var a = l.a * r.a + l.c * r.b
@@ -2434,8 +2438,8 @@ SVG.Matrix = SVG.invent({
     },
 
     lmultiply: function (matrix) {
-      var l = parseMatrix(matrix)
-      return l.multiply(this)
+      var result = new SVG.Matrix(matrix).multiply(this)
+      return result
     },
 
     // Inverses matrix
@@ -2462,7 +2466,7 @@ SVG.Matrix = SVG.invent({
         y = x
       }
 
-      // Rotate the current matrix
+      // Scale the current matrix
       var scale = new SVG.Matrix(x, 0, 0, y, 0, 0)
       var matrix = this.around(cx, cy, scale)
       return matrix
@@ -2546,7 +2550,7 @@ SVG.Matrix = SVG.invent({
 
     // Check if two matrices are equal
     equals: function (other) {
-      var comp = parseMatrix(other)
+      var comp = new SVG.Matrix(other)
       return closeEnough(this.a, comp.a) && closeEnough(this.b, comp.b) &&
         closeEnough(this.c, comp.c) && closeEnough(this.d, comp.d) &&
         closeEnough(this.e, comp.e) && closeEnough(this.f, comp.f)
@@ -2587,19 +2591,18 @@ SVG.Matrix = SVG.invent({
 
 SVG.Point = SVG.invent({
   // Initialize
-  create: function (x, y) {
-    var base = {x: 0, y: 0}
+  create: function (x, y, base) {
     var source
+    base = base || {x: 0, y: 0}
 
     // ensure source as object
     source = Array.isArray(x) ? {x: x[0], y: x[1]}
       : typeof x === 'object' ? {x: x.x, y: x.y}
-      : x != null ? {x: x, y: (y != null ? y : x)}
-      : base // If y has no value, then x is used has its value
+      : {x: x, y: y}
 
     // merge source
-    this.x = source.x
-    this.y = source.y
+    this.x = source.x == null ? base.x : source.x
+    this.y = source.y == null ? base.y : source.y
   },
 
   // Add methods
@@ -2830,10 +2833,7 @@ SVG.extend(SVG.Element, {
 
     // The user can pass a boolean, an SVG.Element or an SVG.Matrix or nothing
     var result = new SVG.Matrix(cyOrRel === true ? this : cyOrRel).transform(o)
-    var matrixString = result.toString()
-
-    // Apply the result directly to this matrix
-    return this.attr('transform', matrixString)
+    return this.attr('transform', result)
   }
 })
 
@@ -3454,22 +3454,6 @@ SVG.G = SVG.invent({
 
   // Add class methods
   extend: {
-    // Move over x-axis
-    x: function (x) {
-      return x == null ? this.transform().e : this.translate(x - this.gbox().x, 0)
-    },
-    // Move over y-axis
-    y: function (y) {
-      return y == null ? this.transform().f : this.translate(0, y - this.gbox().y)
-    },
-    // Move by center over x-axis
-    cx: function (x) {
-      return x == null ? this.gbox().cx : this.x(x - this.gbox().width / 2)
-    },
-    // Move by center over y-axis
-    cy: function (y) {
-      return y == null ? this.gbox().cy : this.y(y - this.gbox().height / 2)
-    },
     gbox: function () {
       var bbox = this.bbox()
       var trans = this.transform()
@@ -4888,31 +4872,36 @@ var sugar = {
 SVG.extend([SVG.Element, SVG.FX], {
   // Let the user set the matrix directly
   matrix: function (mat, b, c, d, e, f) {
-    var matrix = new SVG.Matrix(arguments.length > 1 ? [mat, b, c, d, e, f] : mat)
-    return this.attr('transform', matrix)
+    // Act as a getter
+    if (mat == null) {
+      return new SVG.Matrix(this)
+    }
+
+    // Act as a setter, the user can pass a matrix or a set of numbers
+    return this.attr('transform', new SVG.Matrix(mat, b, c, d, e, f))
   },
 
   // Map rotation to transform
   rotate: function (angle, cx, cy) {
-    return this.transform({rotate: angle, origin: [cx, cy]}, true)
+    return this.transform({rotate: angle, ox: cx, oy: cy}, true)
   },
 
   // Map skew to transform
   skew: function (x, y, cx, cy) {
     return arguments.length === 1 || arguments.length === 3
-      ? this.transform({skew: x, origin: [y, cx]}, true)
-      : this.transform({skew: [x, y], origin: [cx, cy]}, true)
+      ? this.transform({skew: x, ox: y, oy: cx}, true)
+      : this.transform({skew: [x, y], ox: cx, oy: cy}, true)
   },
 
   shear: function (lam, cx, cy) {
-    return this.transform({shear: lam, origin: [cx, cy]}, true)
+    return this.transform({shear: lam, ox: cx, oy: cy}, true)
   },
 
   // Map scale to transform
   scale: function (x, y, cx, cy) {
     return arguments.length === 1 || arguments.length === 3
-      ? this.transform({ scale: x, origin: [y, cx] }, true)
-      : this.transform({ scale: [x, y], origin: [cx, cy] }, true)
+      ? this.transform({ scale: x, ox: y, oy: cx }, true)
+      : this.transform({ scale: [x, y], ox: cx, oy: cy }, true)
   },
 
   // Map translate to transform
@@ -4935,7 +4924,7 @@ SVG.extend([SVG.Element, SVG.FX], {
       : (direction === 'y') ? [0, around]
       : isFinite(direction) ? [direction, direction]
       : [0, 0]
-    this.transform({flip: directionString, origin: origin}, true)
+    this.transform({flip: directionString, ox: origin[0], oy: origin[1]}, true)
   },
 
   // Opacity
@@ -5209,15 +5198,6 @@ function arrayToMatrix (a) {
   return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] }
 }
 
-// Parse matrix if required
-function parseMatrix (matrix) {
-  if (!(matrix instanceof SVG.Matrix)) {
-    matrix = new SVG.Matrix(matrix)
-  }
-
-  return matrix
-}
-
 // Add centre point to transform object
 function ensureCentre (o, target) {
   o.cx = o.cx == null ? target.bbox().cx : o.cx