svgicons2svgfont/src/Matrix.js

/*!
  2D Transformation Matrix v2.7.5
  (c) Epistemex.com 2014-2018
  License: MIT
*/

/**
 * 2D transformation matrix object initialized with identity matrix.
 *
 * The matrix can synchronize a canvas 2D context by supplying the context
 * as an argument, or later apply current absolute transform to an
 * existing context.
 *
 * To synchronize a DOM element you can use [`toCSS()`]{@link Matrix#toCSS} or [`toCSS3D()`]{@link Matrix#toCSS3D}.
 * together with for example the `style.transform` property.
 *
 * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
 * @param {HTMLElement} [element=null] - DOM Element to synchronize
 * @prop {number} a - scale x
 * @prop {number} b - shear y
 * @prop {number} c - shear x
 * @prop {number} d - scale y
 * @prop {number} e - translate x
 * @prop {number} f - translate y
 * @prop {CanvasRenderingContext2D} [context] - set or get current synchronized 2D context
 * @prop {HTMLElement} [element] - get current synchronized DOM element
 * @prop {boolean} [useCSS3D=false] - is a DOM element is defined for sync., choose whether to use 2D (false) or 3D (true) matrix to sync it.
 * @constructor
 * @license MIT license
 * @copyright Epistemex.com 2014-2018
 */
function Matrix(context, element) {
  var me = this,
    _el;
  me._t = me.transform;

  me.a = me.d = 1;
  me.b = me.c = me.e = me.f = 0;

  // sync context
  if (context) (me.context = context).setTransform(1, 0, 0, 1, 0, 0);

  // sync DOM element
  Object.defineProperty(me, 'element', {
    get: function () {
      return _el;
    },
    set: function (el) {
      if (!_el) {
        me._px = me._getPX();
        me.useCSS3D = false;
      }
      _el = el;
      (me._st = _el.style)[me._px] = me.toCSS();
    },
  });

  if (element) me.element = element;
}

/**
 * Returns a new matrix that transforms a triangle `t1` into another triangle
 * `t2`, or throws an exception if it is impossible.
 *
 * Note: the method can take both arrays as well as literal objects.
 * Just make sure that both arguments (`t1`, `t2`) are of the same type.
 *
 * @param {{px: number, py: number, qx: number, qy: number, rx: number, ry: number}|Array} t1 - Object or array containing the three points for the triangle.
 * For object use obj.px, obj.py, obj.qx, obj.qy, obj.rx and obj.ry. For arrays provide the points in the order [px, py, qx, qy, rx, ry], or as point array [{x:,y:}, {x:,y:}, {x:,y:}]
 * @param {{px: number, py: number, qx: number, qy: number, rx: number, ry: number}|Array} t2 - See description for t1.
 * @param {CanvasRenderingContext2D} [context] - optional canvas 2D context to use for the matrix
 * @returns {Matrix}
 * @throws Exception is matrix becomes not invertible
 * @static
 */
Matrix.fromTriangles = function (t1, t2, context) {
  var m1 = new Matrix(),
    m2 = new Matrix(context),
    r1,
    r2,
    rx1,
    ry1,
    rx2,
    ry2;

  if (Array.isArray(t1)) {
    if (typeof t1[0] === 'number') {
      rx1 = t1[4];
      ry1 = t1[5];
      rx2 = t2[4];
      ry2 = t2[5];
      r1 = [t1[0] - rx1, t1[1] - ry1, t1[2] - rx1, t1[3] - ry1, rx1, ry1];
      r2 = [t2[0] - rx2, t2[1] - ry2, t2[2] - rx2, t2[3] - ry2, rx2, ry2];
    } else {
      rx1 = t1[2].x;
      ry1 = t1[2].y;
      rx2 = t2[2].x;
      ry2 = t2[2].y;
      r1 = [
        t1[0].x - rx1,
        t1[0].y - ry1,
        t1[1].x - rx1,
        t1[1].y - ry1,
        rx1,
        ry1,
      ];
      r2 = [
        t2[0].x - rx2,
        t2[0].y - ry2,
        t2[1].x - rx2,
        t2[1].y - ry2,
        rx2,
        ry2,
      ];
    }
  } else {
    r1 = [
      t1.px - t1.rx,
      t1.py - t1.ry,
      t1.qx - t1.rx,
      t1.qy - t1.ry,
      t1.rx,
      t1.ry,
    ];
    r2 = [
      t2.px - t2.rx,
      t2.py - t2.ry,
      t2.qx - t2.rx,
      t2.qy - t2.ry,
      t2.rx,
      t2.ry,
    ];
  }

  m1.setTransform.apply(m1, r1);
  m2.setTransform.apply(m2, r2);

  return m2.multiply(m1.inverse());
};

/**
 * Create a matrix from a transform list from an SVG shape. The list
 * can be for example baseVal (i.e. `shape.transform.baseVal`).
 *
 * The resulting matrix has all transformations from that list applied
 * in the same order as the list.
 *
 * @param {SVGTransformList} tList - transform list from an SVG shape.
 * @param {CanvasRenderingContext2D} [context] - optional canvas 2D context to use for the matrix
 * @param {HTMLElement} [dom] - optional DOM element to use for the matrix
 * @returns {Matrix}
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList|MDN / SVGTransformList}
 */
Matrix.fromSVGTransformList = function (tList, context, dom) {
  var m = new Matrix(context, dom),
    i = 0;

  while (i < tList.length) m.multiply(tList[i++].matrix);

  return m;
};

/**
 * Create and transform a new matrix based on given matrix values, or
 * provide SVGMatrix or a (2D) DOMMatrix, WebKitCSSMatrix or another
 * instance of a generic Matrix.
 *
 * @example
 *
 * var m = Matrix.from(1, 0.2, 0, 2, 120, 97);
 * var m = Matrix.from(domMatrix, ctx);
 * var m = Matrix.from(svgMatrix);
 * var m = Matrix.from(cssMatrix);
 * var m = Matrix.from(matrix);
 * var m = Matrix.from(vector [,pre-x] [,pre-y] [,doScale]);
 *
 * @param {*} a - number representing a in [a-f], or a Matrix object containing properties a-f. Vector is given as an object with properties x and y.
 * @param {*} [b] - b property if a is not a matrix object, or optional canvas 2D context.
 * If vector is input this will be pre-translate for x.
 * @param {number} [c] - If vector is input this will be pre-translate for y.
 * @param {number} [d] - If vector is input, set this to true to use scale and translate of 1,
 * false to use hypotenuse as translate distance instead and no scale.
 * @param {number} [e]
 * @param {number} [f]
 * @param {CanvasRenderingContext2D} [context] - optional canvas context to synchronize
 * @param {HTMLElement} [dom] - optional DOM element to use for the matrix
 * @returns {Matrix}
 * @static
 */
Matrix.from = function (a, b, c, d, e, f, context, dom) {
  var m = new Matrix(context, dom),
    scale,
    dist,
    q;

  if (typeof a === 'number') m.setTransform(a, b, c, d, e, f);
  else if (typeof a.x === 'number') {
    // vector

    q = Math.sqrt(a.x * a.x + a.y * a.y);
    scale = dist = 1;

    if (d) scale = q;
    else dist = q;

    m.translate(b || 0, c || 0)
      .rotateFromVector(a)
      .scaleU(scale)
      .translate(dist, 0);
  } else {
    if (typeof a.is2D === 'boolean' && !a.is2D)
      throw 'Cannot use 3D DOMMatrix.';
    if (b) m.context = b;
    if (c) m.element = c;
    m.multiply(a);
  }

  return m;
};

Matrix.prototype = {
  _getPX: function () {
    var lst = ['t', 'oT', 'msT', 'mozT', 'webkitT', 'khtmlT'],
      i = 0,
      p,
      style = document.createElement('div').style;

    while ((p = lst[i++]))
      if (typeof style[p + 'ransform'] !== 'undefined') return p + 'ransform';
  },

  /**
   * Concatenates transforms of this matrix onto the given child matrix and
   * returns a new matrix. This instance is used on left side.
   *
   * @param {Matrix|SVGMatrix} cm - child matrix to apply concatenation to
   * @returns {Matrix} - new Matrix instance
   */
  concat: function (cm) {
    return this.clone().multiply(cm);
  },

  /**
   * Flips the horizontal values.
   * @returns {Matrix}
   */
  flipX: function () {
    return this._t(-1, 0, 0, 1, 0, 0);
  },

  /**
   * Flips the vertical values.
   * @returns {Matrix}
   */
  flipY: function () {
    return this._t(1, 0, 0, -1, 0, 0);
  },

  /**
   * Reflects incoming (velocity) vector on the normal which will be the
   * current transformed x axis. Call when a trigger condition is met.
   *
   * @param {number} x - vector end point for x (start = 0)
   * @param {number} y - vector end point for y (start = 0)
   * @returns {{x: number, y: number}}
   */
  reflectVector: function (x, y) {
    var v = this.applyToPoint(0, 1),
      d = (v.x * x + v.y * y) * 2;

    x -= d * v.x;
    y -= d * v.y;

    return { x: x, y: y };
  },

  /**
   * Short-hand to reset current matrix to an identity matrix.
   * @returns {Matrix}
   */
  reset: function () {
    return this.setTransform(1, 0, 0, 1, 0, 0);
  },

  /**
   * Rotates current matrix by angle (accumulative).
   * @param {number} angle - angle in radians
   * @returns {Matrix}
   */
  rotate: function (angle) {
    var cos = Math.cos(angle),
      sin = Math.sin(angle);
    return this._t(cos, sin, -sin, cos, 0, 0);
  },

  /**
   * Converts a vector given as `x` and `y` to angle, and
   * rotates (accumulative). x can instead contain an object with
   * properties x and y and if so, y parameter will be ignored.
   * @param {number|*} x
   * @param {number} [y]
   * @returns {Matrix}
   */
  rotateFromVector: function (x, y) {
    return this.rotate(
      typeof x === 'number' ? Math.atan2(y, x) : Math.atan2(x.y, x.x)
    );
  },

  /**
   * Helper method to make a rotation based on an angle in degrees.
   * @param {number} angle - angle in degrees
   * @returns {Matrix}
   */
  rotateDeg: function (angle) {
    return this.rotate((angle * Math.PI) / 180);
  },

  /**
   * Scales current matrix uniformly and accumulative.
   * @param {number} f - scale factor for both x and y (1 does nothing)
   * @returns {Matrix}
   */
  scaleU: function (f) {
    return this._t(f, 0, 0, f, 0, 0);
  },

  /**
   * Scales current matrix accumulative.
   * @param {number} sx - scale factor x (1 does nothing)
   * @param {number} sy - scale factor y (1 does nothing)
   * @returns {Matrix}
   */
  scale: function (sx, sy) {
    return this._t(sx, 0, 0, sy, 0, 0);
  },

  /**
   * Scales current matrix on x axis accumulative.
   * @param {number} sx - scale factor x (1 does nothing)
   * @returns {Matrix}
   */
  scaleX: function (sx) {
    return this._t(sx, 0, 0, 1, 0, 0);
  },

  /**
   * Scales current matrix on y axis accumulative.
   * @param {number} sy - scale factor y (1 does nothing)
   * @returns {Matrix}
   */
  scaleY: function (sy) {
    return this._t(1, 0, 0, sy, 0, 0);
  },

  /**
   * Converts a vector given as `x` and `y` to normalized scale.
   * @param x
   * @param y
   * @returns {Matrix}
   */
  scaleFromVector: function (x, y) {
    return this.scaleU(Math.sqrt(x * x + y * y));
  },

  /**
   * Apply shear to the current matrix accumulative.
   * @param {number} sx - amount of shear for x
   * @param {number} sy - amount of shear for y
   * @returns {Matrix}
   */
  shear: function (sx, sy) {
    return this._t(1, sy, sx, 1, 0, 0);
  },

  /**
   * Apply shear for x to the current matrix accumulative.
   * @param {number} sx - amount of shear for x
   * @returns {Matrix}
   */
  shearX: function (sx) {
    return this._t(1, 0, sx, 1, 0, 0);
  },

  /**
   * Apply shear for y to the current matrix accumulative.
   * @param {number} sy - amount of shear for y
   * @returns {Matrix}
   */
  shearY: function (sy) {
    return this._t(1, sy, 0, 1, 0, 0);
  },

  /**
   * Apply skew to the current matrix accumulative. Angles in radians.
   * Also see [`skewDeg()`]{@link Matrix#skewDeg}.
   * @param {number} ax - angle of skew for x
   * @param {number} ay - angle of skew for y
   * @returns {Matrix}
   */
  skew: function (ax, ay) {
    return this.shear(Math.tan(ax), Math.tan(ay));
  },

  /**
   * Apply skew to the current matrix accumulative. Angles in degrees.
   * Also see [`skew()`]{@link Matrix#skew}.
   * @param {number} ax - angle of skew for x
   * @param {number} ay - angle of skew for y
   * @returns {Matrix}
   */
  skewDeg: function (ax, ay) {
    return this.shear(
      Math.tan((ax / 180) * Math.PI),
      Math.tan((ay / 180) * Math.PI)
    );
  },

  /**
   * Apply skew for x to the current matrix accumulative. Angles in radians.
   * Also see [`skewDeg()`]{@link Matrix#skewDeg}.
   * @param {number} ax - angle of skew for x
   * @returns {Matrix}
   */
  skewX: function (ax) {
    return this.shearX(Math.tan(ax));
  },

  /**
   * Apply skew for y to the current matrix accumulative. Angles in radians.
   * Also see [`skewDeg()`]{@link Matrix#skewDeg}.
   * @param {number} ay - angle of skew for y
   * @returns {Matrix}
   */
  skewY: function (ay) {
    return this.shearY(Math.tan(ay));
  },

  /**
   * Set current matrix to new absolute matrix.
   * @param {number} a - scale x
   * @param {number} b - shear y
   * @param {number} c - shear x
   * @param {number} d - scale y
   * @param {number} e - translate x
   * @param {number} f - translate y
   * @returns {Matrix}
   */
  setTransform: function (a, b, c, d, e, f) {
    var me = this;
    me.a = a;
    me.b = b;
    me.c = c;
    me.d = d;
    me.e = e;
    me.f = f;
    return me._x();
  },

  /**
   * Translate current matrix accumulative.
   * @param {number} tx - translation for x
   * @param {number} ty - translation for y
   * @returns {Matrix}
   */
  translate: function (tx, ty) {
    return this._t(1, 0, 0, 1, tx, ty);
  },

  /**
   * Translate current matrix on x axis accumulative.
   * @param {number} tx - translation for x
   * @returns {Matrix}
   */
  translateX: function (tx) {
    return this._t(1, 0, 0, 1, tx, 0);
  },

  /**
   * Translate current matrix on y axis accumulative.
   * @param {number} ty - translation for y
   * @returns {Matrix}
   */
  translateY: function (ty) {
    return this._t(1, 0, 0, 1, 0, ty);
  },

  /**
   * Multiplies current matrix with new matrix values. Also see [`multiply()`]{@link Matrix#multiply}.
   *
   * @param {number} a2 - scale x
   * @param {number} b2 - skew y
   * @param {number} c2 - skew x
   * @param {number} d2 - scale y
   * @param {number} e2 - translate x
   * @param {number} f2 - translate y
   * @returns {Matrix}
   */
  transform: function (a2, b2, c2, d2, e2, f2) {
    var me = this,
      a1 = me.a,
      b1 = me.b,
      c1 = me.c,
      d1 = me.d,
      e1 = me.e,
      f1 = me.f;

    /* matrix column order is:
     *   a c e
     *   b d f
     *   0 0 1
     */
    me.a = a1 * a2 + c1 * b2;
    me.b = b1 * a2 + d1 * b2;
    me.c = a1 * c2 + c1 * d2;
    me.d = b1 * c2 + d1 * d2;
    me.e = a1 * e2 + c1 * f2 + e1;
    me.f = b1 * e2 + d1 * f2 + f1;

    return me._x();
  },

  /**
   * Multiplies current matrix with source matrix.
   * @param {Matrix|DOMMatrix|SVGMatrix} m - source matrix to multiply with.
   * @returns {Matrix}
   */
  multiply: function (m) {
    return this._t(m.a, m.b, m.c, m.d, m.e, m.f);
  },

  /**
   * Divide this matrix on input matrix which must be invertible.
   * @param {Matrix} m - matrix to divide on (divisor)
   * @throws Exception if input matrix is not invertible
   * @returns {Matrix}
   */
  divide: function (m) {
    return this.multiply(m.inverse());
  },

  /**
   * Divide current matrix on scalar value != 0.
   * @param {number} d - divisor
   * @throws Exception if divisor is zero
   * @returns {Matrix}
   */
  divideScalar: function (d) {
    var me = this;

    if (!d) throw 'Division on zero';

    me.a /= d;
    me.b /= d;
    me.c /= d;
    me.d /= d;
    me.e /= d;
    me.f /= d;

    return me._x();
  },

  /**
   * Get an inverse matrix of current matrix. The method returns a new
   * matrix with values you need to use to get to an identity matrix.
   * Context from parent matrix is not applied to the returned matrix.
   *
   * @param {boolean} [cloneContext=false] - clone current context to resulting matrix
   * @param {boolean} [cloneDOM=false] - clone current DOM element to resulting matrix
   * @throws Exception is input matrix is not invertible
   * @returns {Matrix} - new Matrix instance
   */
  inverse: function (cloneContext, cloneDOM) {
    var me = this,
      m = new Matrix(
        cloneContext ? me.context : null,
        cloneDOM ? me.element : null
      ),
      dt = me.determinant();

    if (!dt) throw 'Matrix not invertible.';

    m.a = me.d / dt;
    m.b = -me.b / dt;
    m.c = -me.c / dt;
    m.d = me.a / dt;
    m.e = (me.c * me.f - me.d * me.e) / dt;
    m.f = -(me.a * me.f - me.b * me.e) / dt;

    return m;
  },

  /**
   * Interpolate this matrix with another and produce a new matrix.
   * `t` is a value in the range [0.0, 1.0] where 0 is this instance and
   * 1 is equal to the second matrix. The `t` value is not clamped.
   *
   * Context from parent matrix is not applied to the returned matrix.
   *
   * Note: this interpolation is naive. For animation containing rotation,
   * shear or skew use the [`interpolateAnim()`]{@link Matrix#interpolateAnim} method instead
   * to avoid unintended flipping.
   *
   * @param {Matrix|SVGMatrix} m2 - the matrix to interpolate with.
   * @param {number} t - interpolation [0.0, 1.0]
   * @param {CanvasRenderingContext2D} [context] - optional context to affect
   * @param {HTMLElement} [dom] - optional DOM element to use for the matrix
   * @returns {Matrix} - new Matrix instance with the interpolated result
   */
  interpolate: function (m2, t, context, dom) {
    var me = this,
      m = new Matrix(context, dom);

    m.a = me.a + (m2.a - me.a) * t;
    m.b = me.b + (m2.b - me.b) * t;
    m.c = me.c + (m2.c - me.c) * t;
    m.d = me.d + (m2.d - me.d) * t;
    m.e = me.e + (m2.e - me.e) * t;
    m.f = me.f + (m2.f - me.f) * t;

    return m._x();
  },

  /**
   * Interpolate this matrix with another and produce a new matrix.
   * `t` is a value in the range [0.0, 1.0] where 0 is this instance and
   * 1 is equal to the second matrix. The `t` value is not constrained.
   *
   * Context from parent matrix is not applied to the returned matrix.
   *
   * To obtain easing `t` can be preprocessed using easing-functions
   * before being passed to this method.
   *
   * Note: this interpolation method uses decomposition which makes
   * it suitable for animations (in particular where rotation takes
   * places).
   *
   * @param {Matrix} m2 - the matrix to interpolate with.
   * @param {number} t - interpolation [0.0, 1.0]
   * @param {CanvasRenderingContext2D} [context] - optional context to affect
   * @param {HTMLElement} [dom] - optional DOM element to use for the matrix
   * @returns {Matrix} - new Matrix instance with the interpolated result
   */
  interpolateAnim: function (m2, t, context, dom) {
    var m = new Matrix(context, dom),
      d1 = this.decompose(),
      d2 = m2.decompose(),
      t1 = d1.translate,
      t2 = d2.translate,
      s1 = d1.scale;

    // QR order (t-r-s-sk)
    m.translate(t1.x + (t2.x - t1.x) * t, t1.y + (t2.y - t1.y) * t);
    m.rotate(d1.rotation + (d2.rotation - d1.rotation) * t);
    m.scale(s1.x + (d2.scale.x - s1.x) * t, s1.y + (d2.scale.y - s1.y) * t);
    //todo test skew scenarios

    return m._x();
  },

  /**
   * Decompose the current matrix into simple transforms using either
   * QR (default) or LU decomposition.
   *
   * @param {boolean} [useLU=false] - set to true to use LU rather than QR decomposition
   * @returns {*} - an object containing current decomposed values (translate, rotation, scale, skew)
   * @see {@link https://en.wikipedia.org/wiki/QR_decomposition|More on QR decomposition}
   * @see {@link https://en.wikipedia.org/wiki/LU_decomposition|More on LU decomposition}
   */
  decompose: function (useLU) {
    var me = this,
      a = me.a,
      b = me.b,
      c = me.c,
      d = me.d,
      acos = Math.acos,
      atan = Math.atan,
      sqrt = Math.sqrt,
      pi = Math.PI,
      translate = { x: me.e, y: me.f },
      rotation = 0,
      scale = { x: 1, y: 1 },
      skew = { x: 0, y: 0 },
      determ = a * d - b * c, // determinant(), skip DRY here...
      r,
      s;

    if (useLU) {
      if (a) {
        skew = { x: atan(c / a), y: atan(b / a) };
        scale = { x: a, y: determ / a };
      } else if (b) {
        rotation = pi * 0.5;
        scale = { x: b, y: determ / b };
        skew.x = atan(d / b);
      } else {
        // a = b = 0
        scale = { x: c, y: d };
        skew.x = pi * 0.25;
      }
    } else {
      // Apply the QR-like decomposition.
      if (a || b) {
        r = sqrt(a * a + b * b);
        rotation = b > 0 ? acos(a / r) : -acos(a / r);
        scale = { x: r, y: determ / r };
        skew.x = atan((a * c + b * d) / (r * r));
      } else if (c || d) {
        s = sqrt(c * c + d * d);
        rotation = pi * 0.5 - (d > 0 ? acos(-c / s) : -acos(c / s));
        scale = { x: determ / s, y: s };
        skew.y = atan((a * c + b * d) / (s * s));
      } else {
        // a = b = c = d = 0
        scale = { x: 0, y: 0 };
      }
    }

    return {
      translate: translate,
      rotation: rotation,
      scale: scale,
      skew: skew,
    };
  },

  /**
   * Returns the determinant of the current matrix.
   * @returns {number}
   */
  determinant: function () {
    return this.a * this.d - this.b * this.c;
  },

  /**
   * Apply current matrix to `x` and `y` of a point.
   * Returns a point object.
   *
   * @param {number} x - value for x
   * @param {number} y - value for y
   * @returns {{x: number, y: number}} A new transformed point object
   */
  applyToPoint: function (x, y) {
    var me = this;
    return {
      x: x * me.a + y * me.c + me.e,
      y: x * me.b + y * me.d + me.f,
    };
  },

  /**
   * Apply current matrix to array with point objects or point pairs.
   * Returns a new array with points in the same format as the input array.
   *
   * A point object is an object literal:
   *
   *     {x: x, y: y}
   *
   * so an array would contain either:
   *
   *     [{x: x1, y: y1}, {x: x2, y: y2}, ... {x: xn, y: yn}]
   *
   * or
   *
   *     [x1, y1, x2, y2, ... xn, yn]
   *
   * @param {Array} points - array with point objects or pairs
   * @returns {Array} A new array with transformed points
   */
  applyToArray: function (points) {
    var i = 0,
      p,
      l,
      mxPoints = [];

    if (typeof points[0] === 'number') {
      l = points.length;

      while (i < l) {
        p = this.applyToPoint(points[i++], points[i++]);
        mxPoints.push(p.x, p.y);
      }
    } else {
      while ((p = points[i++])) {
        mxPoints.push(this.applyToPoint(p.x, p.y));
      }
    }

    return mxPoints;
  },

  /**
   * Apply current matrix to a typed array with point pairs. Although
   * the input array may be an ordinary array, this method is intended
   * for more performant use where typed arrays are used. The returned
   * array is regardless always returned as a `Float32Array`.
   *
   * @param {*} points - (typed) array with point pairs [x1, y1, ..., xn, yn]
   * @param {boolean} [use64=false] - use Float64Array instead of Float32Array
   * @returns {*} A new typed array with transformed points
   */
  applyToTypedArray: function (points, use64) {
    var i = 0,
      p,
      l = points.length,
      mxPoints = use64 ? new Float64Array(l) : new Float32Array(l);

    while (i < l) {
      p = this.applyToPoint(points[i], points[i + 1]);
      mxPoints[i++] = p.x;
      mxPoints[i++] = p.y;
    }

    return mxPoints;
  },

  /**
   * Apply to any canvas 2D context object. This does not affect the
   * context that optionally was referenced in constructor unless it is
   * the same context.
   *
   * @param {CanvasRenderingContext2D} context - target context
   * @returns {Matrix}
   */
  applyToContext: function (context) {
    var me = this;
    context.setTransform(me.a, me.b, me.c, me.d, me.e, me.f);
    return me;
  },

  /**
   * Apply to any DOM element. This does not affect the DOM element
   * that optionally was referenced in constructor unless it is
   * the same element.
   *
   * The method will auto-detect the correct browser prefix if any.
   *
   * @param {HTMLElement} element - target DOM element
   * @param {boolean} [use3D=false] - use 3D transformation matrix instead of 2D
   * @returns {Matrix}
   */
  applyToElement: function (element, use3D) {
    var me = this;
    if (!me._px) me._px = me._getPX();
    element.style[me._px] = use3D ? me.toCSS3D() : me.toCSS();
    return me;
  },

  /**
   * Instead of creating a new instance of a Matrix, DOMMatrix or SVGMatrix
   * the current settings of this instance can be applied to an external
   * object of a different (or same) type. You can also pass in an
   * empty literal object.
   *
   * Note that the properties a-f will be set regardless of if they
   * already exist or not.
   *
   * @param {*} obj - target object.
   * @returns {Matrix}
   */
  applyToObject: function (obj) {
    var me = this;
    obj.a = me.a;
    obj.b = me.b;
    obj.c = me.c;
    obj.d = me.d;
    obj.e = me.e;
    obj.f = me.f;
    return me;
  },

  /**
   * Returns true if matrix is an identity matrix (no transforms applied).
   * @returns {boolean}
   */
  isIdentity: function () {
    var me = this;
    return me.a === 1 && !me.b && !me.c && me.d === 1 && !me.e && !me.f;
  },

  /**
   * Returns true if matrix is invertible
   * @returns {boolean}
   */
  isInvertible: function () {
    return !this._q(this.determinant(), 0);
  },

  /**
   * The method is intended for situations where scale is accumulated
   * via multiplications, to detect situations where scale becomes
   * "trapped" with a value of zero. And in which case scale must be
   * set explicitly to a non-zero value.
   *
   * @returns {boolean}
   */
  isValid: function () {
    return !(this.a * this.d);
  },

  /**
   * Compares current matrix with another matrix. Returns true if equal
   * (within epsilon tolerance).
   * @param {Matrix|SVGMatrix} m - matrix to compare this matrix with
   * @returns {boolean}
   */
  isEqual: function (m) {
    var me = this,
      q = me._q;

    return (
      q(me.a, m.a) &&
      q(me.b, m.b) &&
      q(me.c, m.c) &&
      q(me.d, m.d) &&
      q(me.e, m.e) &&
      q(me.f, m.f)
    );
  },

  /**
   * Clones current instance and returning a new matrix.
   * @param {boolean} [noContext=false] don't clone context reference if true
   * @returns {Matrix} - a new Matrix instance with identical transformations as this instance
   */
  clone: function (noContext) {
    return new Matrix(noContext ? null : this.context).multiply(this);
  },

  /**
   * Returns an array with current matrix values.
   * @returns {Array}
   */
  toArray: function () {
    var me = this;
    return [me.a, me.b, me.c, me.d, me.e, me.f];
  },

  /**
   * Returns a binary 32-bit floating point typed array.
   * @returns {*}
   */
  toTypedArray: function () {
    var me = this;
    return new Float32Array([me.a, me.b, me.c, me.d, me.e, me.f]);
  },

  /**
   * Generates a string that can be used with CSS `transform`.
   * @example
   *     element.style.transform = m.toCSS();
   * @returns {string}
   */
  toCSS: function () {
    return 'matrix(' + this.toArray() + ')';
  },

  /**
   * Generates a `matrix3d()` string that can be used with CSS `transform`.
   * Although the matrix is for 2D use you may see performance benefits
   * on some devices using a 3D CSS transform instead of a 2D.
   * @example
   *     element.style.transform = m.toCSS3D();
   * @returns {string}
   */
  toCSS3D: function () {
    var me = this,
      n2 = ',0,0,';
    return (
      'matrix3d(' +
      me.a +
      ',' +
      me.b +
      n2 +
      me.c +
      ',' +
      me.d +
      n2 +
      n2 +
      ',1,0,' +
      me.e +
      ',' +
      me.f +
      ',0,1)'
    );
  },

  /**
   * Returns a JSON compatible string of current matrix.
   * @returns {string}
   */
  toJSON: function () {
    var me = this;
    return (
      '{"a":' +
      me.a +
      ',"b":' +
      me.b +
      ',"c":' +
      me.c +
      ',"d":' +
      me.d +
      ',"e":' +
      me.e +
      ',"f":' +
      me.f +
      '}'
    );
  },

  /**
   * Returns a string with current matrix as comma-separated list.
   * @param {number} [fixLen=4] - truncate decimal values to number of digits
   * @returns {string}
   */
  toString: function (fixLen) {
    var me = this;
    fixLen = fixLen || 4;
    return (
      'a=' +
      me.a.toFixed(fixLen) +
      ' b=' +
      me.b.toFixed(fixLen) +
      ' c=' +
      me.c.toFixed(fixLen) +
      ' d=' +
      me.d.toFixed(fixLen) +
      ' e=' +
      me.e.toFixed(fixLen) +
      ' f=' +
      me.f.toFixed(fixLen)
    );
  },

  /**
   * Returns a string with current matrix as comma-separated values
   * string with line-end (CR+LF).
   * @returns {string}
   */
  toCSV: function () {
    return this.toArray().join() + '\r\n';
  },

  /**
   * Convert current matrix into a `DOMMatrix`. If `DOMMatrix` is not
   * supported, a `null` is returned.
   *
   * @returns {DOMMatrix}
   * @see {@link https://drafts.fxtf.org/geometry/#dommatrix|MDN / SVGMatrix}
   */
  toDOMMatrix: function () {
    var m = null;
    if ('DOMMatrix' in window) {
      m = new DOMMatrix();
      m.a = this.a;
      m.b = this.b;
      m.c = this.c;
      m.d = this.d;
      m.e = this.e;
      m.f = this.f;
    }
    return m;
  },

  /**
   * Convert current matrix into a `SVGMatrix`. If `SVGMatrix` is not
   * supported, a `null` is returned.
   *
   * @returns {SVGMatrix}
   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix|MDN / SVGMatrix}
   */
  toSVGMatrix: function () {
    var me = this,
      svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
      svgMatrix = null;

    if (svg) {
      svgMatrix = svg.createSVGMatrix();
      svgMatrix.a = me.a;
      svgMatrix.b = me.b;
      svgMatrix.c = me.c;
      svgMatrix.d = me.d;
      svgMatrix.e = me.e;
      svgMatrix.f = me.f;
    }

    return svgMatrix;
  },

  /**
   * Compares floating point values with some tolerance (epsilon)
   * @param {number} f1 - float 1
   * @param {number} f2 - float 2
   * @returns {boolean}
   * @private
   */
  _q: function (f1, f2) {
    return Math.abs(f1 - f2) < 1e-14;
  },

  /**
   * Apply current absolute matrix to context if defined, to sync it.
   * Apply current absolute matrix to element if defined, to sync it.
   * @returns {Matrix}
   * @private
   */
  _x: function () {
    var me = this;

    if (me.context) me.context.setTransform(me.a, me.b, me.c, me.d, me.e, me.f);

    if (me._st) me._st[me._px] = me.useCSS3D ? me.toCSS3D() : me.toCSS(); // can be optimized pre-storing func ref.

    return me;
  },
};

// Node support
if (typeof exports !== 'undefined') exports.Matrix = Matrix;