dommatrix - npm Package Compare versions

Comparing version 0.0.4-e to 0.0.4-f

dist/dommatrix.esm.js

 /*!
-* DOMMatrix v0.0.4e (https://github.com/thednp/dommatrix)
+* DOMMatrix v0.0.4f (https://github.com/thednp/dommatrix)
 * Copyright 2021 © thednp
 * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
 */
+/**
+ * DOMMatrix shim - CSSMatrix
+ * 
+ * Creates and returns a new `DOMMatrix` compatible *Object*
+ * with equivalent instance methods.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
+ * https://github.com/thednp/DOMMatrix/
+ * 
+ * @param {String} String valid CSS transform in `matrix()`/`matrix3d()` format
+ * @param {Array} Array expected to be *Float64Array* or *Float32Array* in the correct column major order described in the specification.
+ * @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix
+ * @param {[m11,m21,m31,m41,m12,m22,m32,m42,m13,m23,m33,m43,m14,m24,m34,m44]} Arguments representing the 16 elements of a 3d matrix
+ */
+
+
+// Transform Functions
+// https://www.w3.org/TR/css-transforms-1/#transform-functions
+
+/**
+ * Creates a new `CSSMatrix` for the translation matrix and returns it.
+ * This method is equivalent to the CSS `translate3d()` function.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
+ *  
+ * @param {Number} x the `x-axis` position.
+ * @param {Number} y the `y-axis` position.
+ * @param {Number} z the `z-axis` position.
+ */
 function Translate(x, y, z){
@@ -13,28 +42,61 @@ var m = new CSSMatrix();
 }
+
+/**
+ * Creates a new `CSSMatrix` for the rotation matrix and returns it.
+ * 
+ * http://en.wikipedia.org/wiki/Rotation_matrix
+ * 
+ * @param {Number} rx the `x-axis` rotation.
+ * @param {Number} ry the `y-axis` rotation.
+ * @param {Number} rz the `z-axis` rotation.
+ */
+
 function Rotate(rx, ry, rz){
   var m = new CSSMatrix();
+
   rx *= Math.PI / 180;
   ry *= Math.PI / 180;
   rz *= Math.PI / 180;
+
+  // minus sin() because of right-handed system
   var cosx = Math.cos(rx), sinx = -Math.sin(rx),
       cosy = Math.cos(ry), siny = -Math.sin(ry),
       cosz = Math.cos(rz), sinz = -Math.sin(rz);
+
   m.m11 = m.a = cosy * cosz;
   m.m12 = m.b = -cosy * sinz;
   m.m13 = siny;
+
   m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
   m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
   m.m23 = -sinx * cosy;
+
   m.m31 = sinx * sinz - cosx * siny * cosz;
   m.m32 = sinx * cosz + cosx * siny * sinz;
   m.m33 = cosx * cosy;
+
   return m
 }
+
+/**
+ * Creates a new `CSSMatrix` for the rotation matrix and returns it.
+ * This method is equivalent to the CSS `rotate3d()` function.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
+ *  
+ * @param {Number} x the `x-axis` vector length.
+ * @param {Number} y the `y-axis` vector length.
+ * @param {Number} z the `z-axis` vector length.
+ * @param {Number} angle the value in degrees of the rotation.
+ */
 function RotateAxisAngle(x, y, z, angle){
   angle *= Math.PI / 360;
-  var sinA = Math.sin(angle),
-      cosA = Math.cos(angle),
+
+  var sinA = Math.sin(angle), 
+      cosA = Math.cos(angle), 
       sinA2 = sinA * sinA,
       length = Math.sqrt(x * x + y * y + z * z);
+
   if (length === 0){
+    // bad vector length, use something reasonable
     x = 0;
@@ -48,3 +110,5 @@ y = 0;
   }
+
   var x2 = x * x, y2 = y * y, z2 = z * z;
+
   var m = new CSSMatrix();
@@ -63,4 +127,16 @@ m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
   m.m44 = 1;
+
   return m
 }
+
+/**
+ * Creates a new `CSSMatrix` for the scale matrix and returns it.
+ * This method is equivalent to the CSS `scale3d()` function.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d
+ *  
+ * @param {Number} x the `x-axis` scale.
+ * @param {Number} y the `y-axis` scale.
+ * @param {Number} z the `z-axis` scale.
+ */
 function Scale(x, y, z){
@@ -73,2 +149,11 @@ var m = new CSSMatrix();
 }
+
+/**
+ * Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and 
+ * returns it. This method is equivalent to the CSS `skewX()` function.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
+ *  
+ * @param {Number} angle the angle in degrees.
+ */
 function SkewX(angle){
@@ -80,2 +165,11 @@ angle *= Math.PI / 180;
 }
+
+/**
+ * Creates a new `CSSMatrix` for the shear of the `y-axis` rotation matrix and 
+ * returns it. This method is equivalent to the CSS `skewY()` function.
+ * 
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
+ *  
+ * @param {Number} angle the angle in degrees.
+ */
 function SkewY(angle){
@@ -87,2 +181,10 @@ angle *= Math.PI / 180;
 }
+
+/**
+ * Creates a new `CSSMatrix` resulted from the multiplication of two matrixes 
+ * and returns it. Both matrixes are not changed.
+ * 
+ * @param {CSSMatrix} m1 the first matrix.
+ * @param {CSSMatrix} m2 the second matrix.
+ */
 function Multiply(m1, m2){
@@ -93,2 +195,3 @@ var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
       m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
+
       m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
@@ -98,2 +201,3 @@ m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
       m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
+
       m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
@@ -103,2 +207,3 @@ m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
       m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
+
       m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
@@ -108,2 +213,3 @@ m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
       m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
+
   return new CSSMatrix(
@@ -115,5 +221,36 @@ [m11, m21, m31, m41,
 }
+
+
+/**
+ * Returns a new *Float32Array* containing all 16 elements which comprise the matrix. 
+ * The elements are stored into the array as single-precision floating-point numbers 
+ * in column-major (colexographical access access or "colex") order. 
+ * 
+ * @return {Float32Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
+ */
+// toFloat32Array(){
+// 	return Float32Array.from(this.toArray())
+// }
+
+/**
+ * Returns a new Float64Array containing all 16 elements which comprise the matrix. 
+ * The elements are stored into the array as double-precision floating-point numbers 
+ * in column-major (colexographical access access or "colex") order. 
+ * 
+ * @return {Float64Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
+ */	
+// toFloat64Array(){
+// 	return Float64Array.from(this.toArray())
+// }
+
+/**
+ * Creates a new mutable `CSSMatrix` object given an existing matrix or a 
+ * `DOMMatrix` *Object* which provides the values for its properties.
+ * 
+ * @param {CSSMatrix} CSSMatrix the source `CSSMatrix` / `DOMMatrix` initialization to feed values from
+ */
 function fromMatrix(m){
   return new CSSMatrix(
-   [m.m11, m.m21, m.m31, m.m41,
+    // DOMMatrix elements order
+   [m.m11, m.m21, m.m31, m.m41, 
     m.m12, m.m22, m.m32, m.m42,
@@ -123,20 +260,55 @@ m.m13, m.m23, m.m33, m.m43,
 }
+
+/**
+ * Creates a new mutable `CSSMatrix` object given an array float values.
+ *  
+ * If the array has six values, the result is a 2D matrix; if the array has 16 values, 
+ * the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
+ * 
+ * @param {Array} array The source `Array` to feed values from.
+ * @return {CSSMatrix} a The source array to feed values from.
+ */
 function fromArray(a){
   return feedFromArray(new CSSMatrix(),a)
 }
+
+/**
+ * Each create a new mutable `CSSMatrix` object given an array of single/double-precision 
+ * (32/64 bit) floating-point values.
+ *  
+ * If the array has six values, the result is a 2D matrix; if the array has 16 values, 
+ * the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
+ * 
+ * @param {Float32Array|Float64Array} array The source `Float32Array` / `Float64Array` to feed values from.
+ * @return {CSSMatrix} a The source array to feed values from.
+ */
+// more of an alias for now, will update later if it's the case
+// function fromFloat32Array(a){ 
+// 	return feedFromArray(new CSSMatrix(),a)
+// }
+// function fromFloat64Array(a){ // more of an alias
+// 	return feedFromArray(new CSSMatrix(),a)
+// }
+
+/**
+ * Feed a CSSMatrix object with the values of a 6/16 values array and returns it.
+ * 
+ * @param {Array} array The source `Array` to feed values from.
+ * @return {CSSMatrix} a The source array to feed values from.
+ */
 function feedFromArray(m,array){
   var a = Array.from(array);
   if (a.length == 16){
-    m.m11 = m.a = a[0];
+    m.m11 = m.a = a[0]; 
     m.m21 = m.c = a[1];
-    m.m31 = a[2];
-    m.m41 = m.e = a[3];
-    m.m12 = m.b = a[4];
-    m.m22 = m.d = a[5];
-    m.m32 = a[6];
-    m.m42 = m.f = a[7];
-    m.m13 = a[8];
-    m.m23 = a[9];
+    m.m31 = a[2]; 
+    m.m41 = m.e = a[3]; 
+    m.m12 = m.b = a[4]; 
+    m.m22 = m.d = a[5]; 
+    m.m32 = a[6]; 
+    m.m42 = m.f = a[7]; 
+    m.m13 = a[8]; 
+    m.m23 = a[9]; 
     m.m33 = a[10];
-    m.m43 = a[11];
+    m.m43 = a[11]; 
     m.m14 = a[12];
@@ -147,7 +319,7 @@ m.m24 = a[13];
   } else if (a.length == 6) {
-    m.m11 = m.a = a[0];
-    m.m12 = m.b = a[1];
-    m.m14 = m.e = a[4];
-    m.m21 = m.c = a[2];
-    m.m22 = m.d = a[3];
+    m.m11 = m.a = a[0]; 
+    m.m12 = m.b = a[1]; 
+    m.m14 = m.e = a[4]; 
+    m.m21 = m.c = a[2]; 
+    m.m22 = m.d = a[3]; 
     m.m24 = m.f = a[5];
@@ -159,19 +331,89 @@ } else {
 }
+
 var CSSMatrix = function CSSMatrix(){
   var args = [], len = arguments.length;
   while ( len-- ) args[ len ] = arguments[ len ];
+
   this.setIdentity();
   return args && args.length && this.setMatrixValue(args)
 };
+
 var prototypeAccessors = { isIdentity: { configurable: true },is2D: { configurable: true } };
-CSSMatrix.prototype.setMatrixValue = function setMatrixValue (source){
+
+/**
+ * A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity 
+ * matrix is one in which every value is 0 except those on the main diagonal from top-left 
+ * to bottom-right corner (in other words, where the offsets in each direction are equal).
+ *
+ * @return {Boolean} `Boolean` the current property value
+ */
+prototypeAccessors.isIdentity.get = function (){
   var m = this;
-  if (!source || !source.length) {
+  return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
+          m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
+          m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
+          m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
+};
+
+/**
+ * Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
+ *
+ * @param {Boolean} value sets a new `Boolean` flag for this property
+ */
+prototypeAccessors.isIdentity.set = function (value){
+  this.isIdentity = value;
+};
+
+/**
+ * A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix 
+ * and `false` if the matrix is 3D.
+ *
+ * @return {Boolean} `Boolean` the current property value
+ */
+prototypeAccessors.is2D.get = function (){
+  var m = this;
+  return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
+};
+
+/**
+ * Sets a new `Boolean` flag value for `this.is2D` matrix property.
+ *
+ * @param {Boolean} value sets a new `Boolean` flag for this property
+ */
+prototypeAccessors.is2D.set = function (value){
+  this.is2D = value;
+};
+
+Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
+
+// export proto for custom compile via Buble
+var CSSMatrixProto = CSSMatrix.prototype;
+
+/**
+ * The `setMatrixValue` method replaces the existing matrix with one computed
+ * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`
+ * 
+ * The method accepts *Float64Array* / *Float32Array* / any *Array* values, the result of 
+ * `DOMMatrix` / `CSSMatrix` instance method calls `toFloat64Array()` / `toFloat32Array()`.
+ * 
+ * This method expects valid *matrix()* / *matrix3d()* string values, other
+ * transform functions like *translate()* are not supported.
+ * 
+ * @param {String} source the *String* resulted from `getComputedStyle()`.
+ * @param {Array} source the *Array* resulted from `toFloat64Array()`.
+ */
+CSSMatrixProto.setMatrixValue = function (source){
+  var m = this;
+
+  if (!source || !source.length) { // no parameters or source
     return m
-  } else if (source.length && typeof source[0] === 'string' && source[0].length) {
+  } else if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source
     var string = String(source[0]).trim(), type = '', values = [];
+
     if (string == 'none') { return m; }
+
     type = string.slice(0, string.indexOf('('));
     values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
                   .map(function (n){ return Math.abs(n) < 1e-6 ? 0 : +n; });
+
     if ([6,16].indexOf(values.length)>-1){
@@ -182,24 +424,47 @@ feedFromArray(m,values);
     }
-  } else if (source[0] instanceof CSSMatrix) {
+  } else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
     feedFromArray(m,source[0].toArray());
-  } else if (Array.isArray(source[0])) {
-    feedFromArray(m,source[0]);
-  } else if (Array.isArray(source)) {
-    feedFromArray(m,source);
+  } else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
+    feedFromArray(m,source[0]);    
+  } else if (Array.isArray(source)) { // Arguments list come here
+    feedFromArray(m,source);  
   }
   return m
 };
-CSSMatrix.prototype.toString = function toString (){
+
+/**
+ * Creates and returns a string representation of the matrix in `CSS` matrix syntax, 
+ * using the appropriate `CSS` matrix notation.
+ * 
+ * The 16 items in the array 3D matrix array are *transposed* in row-major order.
+ * 
+ * @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
+ * @matrix *matrix(a, b, c, d, e, f)*
+ * 
+ * @return {String} `String` representation of the matrix
+ */
+CSSMatrixProto.toString = function(){
   var m = this, type = m.is2D ? 'matrix' : 'matrix3d';
   return (type + "(" + (m.toArray(1).join(',')) + ")")
 };
-CSSMatrix.prototype.toArray = function toArray (transposed){
+
+/**
+ * Returns an *Array* containing all 16 elements which comprise the matrix. 
+ * The method can return either the elements in default column major order or 
+ * row major order (what we call the *transposed* matrix, used by `toString`).
+ * 
+ * Other methods make use of this method to feed their output values from this matrix.
+ * 
+ * @param {Boolean} transposed changes the order of elements in the output
+ * @return {Array} an *Array* representation of the matrix
+ */
+CSSMatrixProto.toArray = function(transposed){
   var m = this;
   return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
     : transposed
-    ?[m.m11, m.m12, m.m13, m.m14,
+    ?[m.m11, m.m12, m.m13, m.m14, // transposed is used by toString
       m.m21, m.m22, m.m23, m.m24,
       m.m31, m.m32, m.m33, m.m34,
       m.m41, m.m42, m.m43, m.m44]
-    :[m.m11, m.m21, m.m31, m.m41,
+    :[m.m11, m.m21, m.m31, m.m41, // used by constructor
       m.m12, m.m22, m.m32, m.m42,
@@ -209,6 +474,37 @@ m.m13, m.m23, m.m33, m.m43,
 };
-CSSMatrix.prototype.multiply = function multiply (m2){
+
+/**
+ * The Multiply method returns a new CSSMatrix which is the result of this
+ * matrix multiplied by the passed matrix, with the passed matrix to the right.
+ * This matrix is not modified.
+ *
+ * @param {CSSMatrix} m2 CSSMatrix  
+ * @return {CSSMatrix} The result matrix.
+ */
+CSSMatrixProto.multiply = function(m2){
   return Multiply(this,m2)
 };
-CSSMatrix.prototype.translate = function translate (x, y, z){
+
+/**
+ *
+ * These methods will be implemented later into an extended version to provide 
+ * additional functionality. 
+ */
+// inverse = function(){}
+// determinant = function(){}
+// transpose = function(){}
+
+/**
+ * The translate method returns a new matrix which is this matrix post
+ * multiplied by a translation matrix containing the passed values. If the z
+ * component is undefined, a 0 value is used in its place. This matrix is not
+ * modified.
+ *
+ * @param {number} x X component of the translation value.
+ * @param {number} y Y component of the translation value.
+ * @param {number=} z Z component of the translation value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.translate = function(x, y, z){
   if (z == null) { z = 0; }
@@ -218,3 +514,16 @@ if (y == null) { y = 0; }
 };
-CSSMatrix.prototype.scale = function scale (x, y, z){
+
+/**
+ * The scale method returns a new matrix which is this matrix post multiplied by
+ * a scale matrix containing the passed values. If the z component is undefined,
+ * a 1 value is used in its place. If the y component is undefined, the x
+ * component value is used in its place. This matrix is not modified.
+ *
+ * @param {number} x The X component of the scale value.
+ * @param {number=} y The Y component of the scale value.
+ * @param {number=} z The Z component of the scale value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.scale = function(x, y, z){
   if (y == null) { y = x; }
@@ -224,3 +533,17 @@ if (z == null) { z = x; }
 };
-CSSMatrix.prototype.rotate = function rotate (rx, ry, rz){
+
+/**
+ * The rotate method returns a new matrix which is this matrix post multiplied
+ * by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
+ * If the y and z components are undefined, the x value is used to rotate the
+ * object about the z axis, as though the vector (0,0,x) were passed. All
+ * rotation values are in degrees. This matrix is not modified.
+ *
+ * @param {number} rx The X component of the rotation value, or the Z component if the rotateY and rotateZ parameters are undefined.
+ * @param {number=} ry The (optional) Y component of the rotation value.
+ * @param {number=} rz The (optional) Z component of the rotation value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.rotate = function(rx, ry, rz){
   if (ry == null) { ry = 0; }
@@ -230,3 +553,17 @@ if (rz == null) {rz = rx; rx = 0;}
 };
-CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle){
+
+/**
+ * The rotateAxisAngle method returns a new matrix which is this matrix post
+ * multiplied by a rotation matrix with the given axis and `angle`. The right-hand
+ * rule is used to determine the direction of rotation. All rotation values are
+ * in degrees. This matrix is not modified.
+ *
+ * @param {number} x The X component of the axis vector.
+ * @param {number} y The Y component of the axis vector.
+ * @param {number} z The Z component of the axis vector.
+ * @param {number} angle The angle of rotation about the axis vector, in degrees.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.rotateAxisAngle = function(x, y, z, angle){
   if (arguments.length!==4){
@@ -237,33 +574,56 @@ throw new TypeError("CSSMatrix: expecting 4 values")
 };
-CSSMatrix.prototype.skewX = function skewX (angle){
+
+/**
+ * Specifies a skew transformation along the `x-axis` by the given angle.
+ * This matrix is not modified.
+ *
+ * @param {number} angle The angle amount in degrees to skew.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.skewX = function(angle){
   return Multiply(this,SkewX(angle))
 };
-CSSMatrix.prototype.skewY = function skewY (angle){
+
+/**
+ * Specifies a skew transformation along the `y-axis` by the given angle.
+ * This matrix is not modified.
+ *
+ * @param {number} angle The angle amount in degrees to skew.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.skewY = function(angle){
   return Multiply(this,SkewY(angle))
 };
-CSSMatrix.prototype.setIdentity = function setIdentity (){
+
+/**
+ * Set the current `CSSMatrix` instance to the identity form and returns it.
+ *
+ * @return {CSSMatrix} this `CSSMatrix` instance
+ */
+CSSMatrixProto.setIdentity = function(){
   var identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
   return feedFromArray(this,identity)
 };
-prototypeAccessors.isIdentity.get = function (){
-  var m = this;
-  return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
-          m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
-          m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
-          m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
-};
-prototypeAccessors.isIdentity.set = function (value){
-  this.isIdentity = value;
-};
-prototypeAccessors.is2D.get = function (){
-  var m = this;
-  return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
-};
-prototypeAccessors.is2D.set = function (value){
-  this.is2D = value;
-};
-CSSMatrix.prototype.transformPoint = function transformPoint (v){
+
+/**
+ * Transforms the specified point using the matrix, returning a new 
+ * *Object* containing the transformed point. 
+ * Neither the matrix nor the original point are altered.
+ *
+ * The method is equivalent with `transformPoint()` method 
+ * of the `DOMMatrix` constructor.
+ *  
+ * JavaScript implementation by thednp
+ * 
+ * @param {Point} point the *Object* with `x`, `y`, `z` and `w` components
+ * @return {Point} a new `{x,y,z,w}` *Object*
+ */
+CSSMatrixProto.transformPoint = function(v){
   var _m = this, m = Translate(v.x, v.y, v.z);
+
   m.m44 = v.w || 1;
   m = _m.multiply(m);
+
   return {
@@ -276,4 +636,13 @@ x: m.m41,
 };
-CSSMatrix.prototype.transform = function transform (t){
-		var m = this,
+
+/**
+ * Transforms the specified vector using the matrix, returning a new 
+ * {x,y,z,w} *Object* comprising the transformed vector. 
+ * Neither the matrix nor the original vector are altered.
+ *
+ * @param {Tuple} tupple an object with x, y, z and w components
+ * @return {Tuple} the passed tuple
+ */
+CSSMatrixProto.transform = function(t){
+  var m = this,
       x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
@@ -283,3 +652,4 @@ y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
       w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w;
-		return {
+
+  return {
     x: x / w,
@@ -291,3 +661,4 @@ y: y / w,
 };
-Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
+
+// Add Transform Functions to CSSMatrix object
 CSSMatrix.Translate = Translate;
@@ -294,0 +665,0 @@ CSSMatrix.Rotate = Rotate;

dist/dommatrix.esm.min.js

@@ -1,2 +0,2 @@
-// DOMMatrix v0.0.4e | thednp © 2021 | MIT-License
-function m(m,t,r){var n=new u;return n.m41=n.e=m,n.m42=n.f=t,n.m43=r,n}function t(m,t,r){var n=new u;m*=Math.PI/180,t*=Math.PI/180,r*=Math.PI/180;var e=Math.cos(m),i=-Math.sin(m),a=Math.cos(t),o=-Math.sin(t),s=Math.cos(r),f=-Math.sin(r);return n.m11=n.a=a*s,n.m12=n.b=-a*f,n.m13=o,n.m21=n.c=i*o*s+e*f,n.m22=n.d=e*s-i*o*f,n.m23=-i*a,n.m31=i*f-e*o*s,n.m32=i*s+e*o*f,n.m33=e*a,n}function r(m,t,r,n){n*=Math.PI/360;var e=Math.sin(n),i=Math.cos(n),a=e*e,o=Math.sqrt(m*m+t*t+r*r);0===o?(m=0,t=0,r=1):(m/=o,t/=o,r/=o);var s=m*m,f=t*t,c=r*r,h=new u;return h.m11=h.a=1-2*(f+c)*a,h.m12=h.b=2*(m*t*a+r*e*i),h.m13=2*(m*r*a-t*e*i),h.m21=h.c=2*(t*m*a-r*e*i),h.m22=h.d=1-2*(c+s)*a,h.m23=2*(t*r*a+m*e*i),h.m31=2*(r*m*a+t*e*i),h.m32=2*(r*t*a-m*e*i),h.m33=1-2*(s+f)*a,h.m14=h.m24=h.m34=0,h.m41=h.e=h.m42=h.f=h.m43=0,h.m44=1,h}function n(m,t,r){var n=new u;return n.m11=n.a=m,n.m22=n.d=t,n.m33=r,n}function e(m){m*=Math.PI/180;var t=new u;return t.m21=t.c=Math.tan(m),t}function i(m){m*=Math.PI/180;var t=new u;return t.m12=t.b=Math.tan(m),t}function a(m,t){var r=t.m11*m.m11+t.m12*m.m21+t.m13*m.m31+t.m14*m.m41,n=t.m11*m.m12+t.m12*m.m22+t.m13*m.m32+t.m14*m.m42,e=t.m11*m.m13+t.m12*m.m23+t.m13*m.m33+t.m14*m.m43,i=t.m11*m.m14+t.m12*m.m24+t.m13*m.m34+t.m14*m.m44,a=t.m21*m.m11+t.m22*m.m21+t.m23*m.m31+t.m24*m.m41,o=t.m21*m.m12+t.m22*m.m22+t.m23*m.m32+t.m24*m.m42,s=t.m21*m.m13+t.m22*m.m23+t.m23*m.m33+t.m24*m.m43,f=t.m21*m.m14+t.m22*m.m24+t.m23*m.m34+t.m24*m.m44,c=t.m31*m.m11+t.m32*m.m21+t.m33*m.m31+t.m34*m.m41,h=t.m31*m.m12+t.m32*m.m22+t.m33*m.m32+t.m34*m.m42,l=t.m31*m.m13+t.m32*m.m23+t.m33*m.m33+t.m34*m.m43,y=t.m31*m.m14+t.m32*m.m24+t.m33*m.m34+t.m34*m.m44,p=t.m41*m.m11+t.m42*m.m21+t.m43*m.m31+t.m44*m.m41,x=t.m41*m.m12+t.m42*m.m22+t.m43*m.m32+t.m44*m.m42,w=t.m41*m.m13+t.m42*m.m23+t.m43*m.m33+t.m44*m.m43,M=t.m41*m.m14+t.m42*m.m24+t.m43*m.m34+t.m44*m.m44;return new u([r,a,c,p,n,o,h,x,e,s,l,w,i,f,y,M])}function o(m,t){var r=Array.from(t);if(16==r.length)m.m11=m.a=r[0],m.m21=m.c=r[1],m.m31=r[2],m.m41=m.e=r[3],m.m12=m.b=r[4],m.m22=m.d=r[5],m.m32=r[6],m.m42=m.f=r[7],m.m13=r[8],m.m23=r[9],m.m33=r[10],m.m43=r[11],m.m14=r[12],m.m24=r[13],m.m34=r[14],m.m44=r[15];else{if(6!=r.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");m.m11=m.a=r[0],m.m12=m.b=r[1],m.m14=m.e=r[4],m.m21=m.c=r[2],m.m22=m.d=r[3],m.m24=m.f=r[5]}return m}var u=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},s={isIdentity:{configurable:!0},is2D:{configurable:!0}};u.prototype.setMatrixValue=function(m){var t=this;if(!m||!m.length)return t;if(m.length&&"string"==typeof m[0]&&m[0].length){var r,n,e=String(m[0]).trim();if("none"==e)return t;if(r=e.slice(0,e.indexOf("(")),n=e.slice("matrix"===r?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(n.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");o(t,n)}else m[0]instanceof u?o(t,m[0].toArray()):Array.isArray(m[0])?o(t,m[0]):Array.isArray(m)&&o(t,m);return t},u.prototype.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},u.prototype.toArray=function(m){var t=this;return t.is2D?[t.a,t.b,t.c,t.d,t.e,t.f]:m?[t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44]:[t.m11,t.m21,t.m31,t.m41,t.m12,t.m22,t.m32,t.m42,t.m13,t.m23,t.m33,t.m43,t.m14,t.m24,t.m34,t.m44]},u.prototype.multiply=function(m){return a(this,m)},u.prototype.translate=function(t,r,n){return null==n&&(n=0),null==r&&(r=0),a(this,m(t,r,n))},u.prototype.scale=function(m,t,r){return null==t&&(t=m),null==r&&(r=m),a(this,n(m,t,r))},u.prototype.rotate=function(m,r,n){return null==r&&(r=0),null==n&&(n=m,m=0),a(this,t(m,r,n))},u.prototype.rotateAxisAngle=function(m,t,n,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return a(this,r(m,t,n,e))},u.prototype.skewX=function(m){return a(this,e(m))},u.prototype.skewY=function(m){return a(this,i(m))},u.prototype.setIdentity=function(){return o(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},s.isIdentity.get=function(){var m=this;return 1==m.m11&&0==m.m12&&0==m.m13&&0==m.m14&&0==m.m21&&1==m.m22&&0==m.m23&&0==m.m24&&0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m41&&0==m.m42&&0==m.m43&&1==m.m44},s.isIdentity.set=function(m){this.isIdentity=m},s.is2D.get=function(){var m=this;return 0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m43&&1==m.m44},s.is2D.set=function(m){this.is2D=m},u.prototype.transformPoint=function(t){var r=m(t.x,t.y,t.z);return r.m44=t.w||1,{x:(r=this.multiply(r)).m41,y:r.m42,z:r.m43,w:r.m44}},u.prototype.transform=function(m){var t=this,r=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,n=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:r/i,y:n/i,z:e/i,w:i}},Object.defineProperties(u.prototype,s),u.Translate=m,u.Rotate=t,u.RotateAxisAngle=r,u.Scale=n,u.SkewX=e,u.SkewY=i,u.Multiply=a,u.fromMatrix=function(m){return new u([m.m11,m.m21,m.m31,m.m41,m.m12,m.m22,m.m32,m.m42,m.m13,m.m23,m.m33,m.m43,m.m14,m.m24,m.m34,m.m44])},u.fromArray=function(m){return o(new u,m)},u.feedFromArray=o;export default u;
+// DOMMatrix v0.0.4f | thednp © 2021 | MIT-License
+function m(m,t,n){var r=new s;return r.m41=r.e=m,r.m42=r.f=t,r.m43=n,r}function t(m,t,n){var r=new s;m*=Math.PI/180,t*=Math.PI/180,n*=Math.PI/180;var e=Math.cos(m),i=-Math.sin(m),a=Math.cos(t),u=-Math.sin(t),o=Math.cos(n),f=-Math.sin(n);return r.m11=r.a=a*o,r.m12=r.b=-a*f,r.m13=u,r.m21=r.c=i*u*o+e*f,r.m22=r.d=e*o-i*u*f,r.m23=-i*a,r.m31=i*f-e*u*o,r.m32=i*o+e*u*f,r.m33=e*a,r}function n(m,t,n,r){r*=Math.PI/360;var e=Math.sin(r),i=Math.cos(r),a=e*e,u=Math.sqrt(m*m+t*t+n*n);0===u?(m=0,t=0,n=1):(m/=u,t/=u,n/=u);var o=m*m,f=t*t,c=n*n,h=new s;return h.m11=h.a=1-2*(f+c)*a,h.m12=h.b=2*(m*t*a+n*e*i),h.m13=2*(m*n*a-t*e*i),h.m21=h.c=2*(t*m*a-n*e*i),h.m22=h.d=1-2*(c+o)*a,h.m23=2*(t*n*a+m*e*i),h.m31=2*(n*m*a+t*e*i),h.m32=2*(n*t*a-m*e*i),h.m33=1-2*(o+f)*a,h.m14=h.m24=h.m34=0,h.m41=h.e=h.m42=h.f=h.m43=0,h.m44=1,h}function r(m,t,n){var r=new s;return r.m11=r.a=m,r.m22=r.d=t,r.m33=n,r}function e(m){m*=Math.PI/180;var t=new s;return t.m21=t.c=Math.tan(m),t}function i(m){m*=Math.PI/180;var t=new s;return t.m12=t.b=Math.tan(m),t}function a(m,t){var n=t.m11*m.m11+t.m12*m.m21+t.m13*m.m31+t.m14*m.m41,r=t.m11*m.m12+t.m12*m.m22+t.m13*m.m32+t.m14*m.m42,e=t.m11*m.m13+t.m12*m.m23+t.m13*m.m33+t.m14*m.m43,i=t.m11*m.m14+t.m12*m.m24+t.m13*m.m34+t.m14*m.m44,a=t.m21*m.m11+t.m22*m.m21+t.m23*m.m31+t.m24*m.m41,u=t.m21*m.m12+t.m22*m.m22+t.m23*m.m32+t.m24*m.m42,o=t.m21*m.m13+t.m22*m.m23+t.m23*m.m33+t.m24*m.m43,f=t.m21*m.m14+t.m22*m.m24+t.m23*m.m34+t.m24*m.m44,c=t.m31*m.m11+t.m32*m.m21+t.m33*m.m31+t.m34*m.m41,h=t.m31*m.m12+t.m32*m.m22+t.m33*m.m32+t.m34*m.m42,l=t.m31*m.m13+t.m32*m.m23+t.m33*m.m33+t.m34*m.m43,y=t.m31*m.m14+t.m32*m.m24+t.m33*m.m34+t.m34*m.m44,x=t.m41*m.m11+t.m42*m.m21+t.m43*m.m31+t.m44*m.m41,w=t.m41*m.m12+t.m42*m.m22+t.m43*m.m32+t.m44*m.m42,M=t.m41*m.m13+t.m42*m.m23+t.m43*m.m33+t.m44*m.m43,v=t.m41*m.m14+t.m42*m.m24+t.m43*m.m34+t.m44*m.m44;return new s([n,a,c,x,r,u,h,w,e,o,l,M,i,f,y,v])}function u(m,t){var n=Array.from(t);if(16==n.length)m.m11=m.a=n[0],m.m21=m.c=n[1],m.m31=n[2],m.m41=m.e=n[3],m.m12=m.b=n[4],m.m22=m.d=n[5],m.m32=n[6],m.m42=m.f=n[7],m.m13=n[8],m.m23=n[9],m.m33=n[10],m.m43=n[11],m.m14=n[12],m.m24=n[13],m.m34=n[14],m.m44=n[15];else{if(6!=n.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");m.m11=m.a=n[0],m.m12=m.b=n[1],m.m14=m.e=n[4],m.m21=m.c=n[2],m.m22=m.d=n[3],m.m24=m.f=n[5]}return m}var s=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},o={isIdentity:{configurable:!0},is2D:{configurable:!0}};o.isIdentity.get=function(){var m=this;return 1==m.m11&&0==m.m12&&0==m.m13&&0==m.m14&&0==m.m21&&1==m.m22&&0==m.m23&&0==m.m24&&0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m41&&0==m.m42&&0==m.m43&&1==m.m44},o.isIdentity.set=function(m){this.isIdentity=m},o.is2D.get=function(){var m=this;return 0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m43&&1==m.m44},o.is2D.set=function(m){this.is2D=m},Object.defineProperties(s.prototype,o);var f=s.prototype;f.setMatrixValue=function(m){var t=this;if(!m||!m.length)return t;if(m.length&&"string"==typeof m[0]&&m[0].length){var n,r,e=String(m[0]).trim();if("none"==e)return t;if(n=e.slice(0,e.indexOf("(")),r=e.slice("matrix"===n?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(r.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");u(t,r)}else m[0]instanceof s?u(t,m[0].toArray()):Array.isArray(m[0])?u(t,m[0]):Array.isArray(m)&&u(t,m);return t},f.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},f.toArray=function(m){var t=this;return t.is2D?[t.a,t.b,t.c,t.d,t.e,t.f]:m?[t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44]:[t.m11,t.m21,t.m31,t.m41,t.m12,t.m22,t.m32,t.m42,t.m13,t.m23,t.m33,t.m43,t.m14,t.m24,t.m34,t.m44]},f.multiply=function(m){return a(this,m)},f.translate=function(t,n,r){return null==r&&(r=0),null==n&&(n=0),a(this,m(t,n,r))},f.scale=function(m,t,n){return null==t&&(t=m),null==n&&(n=m),a(this,r(m,t,n))},f.rotate=function(m,n,r){return null==n&&(n=0),null==r&&(r=m,m=0),a(this,t(m,n,r))},f.rotateAxisAngle=function(m,t,r,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return a(this,n(m,t,r,e))},f.skewX=function(m){return a(this,e(m))},f.skewY=function(m){return a(this,i(m))},f.setIdentity=function(){return u(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},f.transformPoint=function(t){var n=m(t.x,t.y,t.z);return n.m44=t.w||1,{x:(n=this.multiply(n)).m41,y:n.m42,z:n.m43,w:n.m44}},f.transform=function(m){var t=this,n=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,r=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:n/i,y:r/i,z:e/i,w:i}},s.Translate=m,s.Rotate=t,s.RotateAxisAngle=n,s.Scale=r,s.SkewX=e,s.SkewY=i,s.Multiply=a,s.fromMatrix=function(m){return new s([m.m11,m.m21,m.m31,m.m41,m.m12,m.m22,m.m32,m.m42,m.m13,m.m23,m.m33,m.m43,m.m14,m.m24,m.m34,m.m44])},s.fromArray=function(m){return u(new s,m)},s.feedFromArray=u;export default s;

dist/dommatrix.js

 /*!
-* DOMMatrix v0.0.4e (https://github.com/thednp/dommatrix)
+* DOMMatrix v0.0.4f (https://github.com/thednp/dommatrix)
 * Copyright 2021 © thednp
@@ -12,2 +12,31 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
 
+  /**
+   * DOMMatrix shim - CSSMatrix
+   * 
+   * Creates and returns a new `DOMMatrix` compatible *Object*
+   * with equivalent instance methods.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
+   * https://github.com/thednp/DOMMatrix/
+   * 
+   * @param {String} String valid CSS transform in `matrix()`/`matrix3d()` format
+   * @param {Array} Array expected to be *Float64Array* or *Float32Array* in the correct column major order described in the specification.
+   * @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix
+   * @param {[m11,m21,m31,m41,m12,m22,m32,m42,m13,m23,m33,m43,m14,m24,m34,m44]} Arguments representing the 16 elements of a 3d matrix
+   */
+
+
+  // Transform Functions
+  // https://www.w3.org/TR/css-transforms-1/#transform-functions
+
+  /**
+   * Creates a new `CSSMatrix` for the translation matrix and returns it.
+   * This method is equivalent to the CSS `translate3d()` function.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
+   *  
+   * @param {Number} x the `x-axis` position.
+   * @param {Number} y the `y-axis` position.
+   * @param {Number} z the `z-axis` position.
+   */
   function Translate(x, y, z){
@@ -20,28 +49,61 @@ var m = new CSSMatrix();
   }
+
+  /**
+   * Creates a new `CSSMatrix` for the rotation matrix and returns it.
+   * 
+   * http://en.wikipedia.org/wiki/Rotation_matrix
+   * 
+   * @param {Number} rx the `x-axis` rotation.
+   * @param {Number} ry the `y-axis` rotation.
+   * @param {Number} rz the `z-axis` rotation.
+   */
+
   function Rotate(rx, ry, rz){
     var m = new CSSMatrix();
+
     rx *= Math.PI / 180;
     ry *= Math.PI / 180;
     rz *= Math.PI / 180;
+
+    // minus sin() because of right-handed system
     var cosx = Math.cos(rx), sinx = -Math.sin(rx),
         cosy = Math.cos(ry), siny = -Math.sin(ry),
         cosz = Math.cos(rz), sinz = -Math.sin(rz);
+
     m.m11 = m.a = cosy * cosz;
     m.m12 = m.b = -cosy * sinz;
     m.m13 = siny;
+
     m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
     m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
     m.m23 = -sinx * cosy;
+
     m.m31 = sinx * sinz - cosx * siny * cosz;
     m.m32 = sinx * cosz + cosx * siny * sinz;
     m.m33 = cosx * cosy;
+
     return m
   }
+
+  /**
+   * Creates a new `CSSMatrix` for the rotation matrix and returns it.
+   * This method is equivalent to the CSS `rotate3d()` function.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
+   *  
+   * @param {Number} x the `x-axis` vector length.
+   * @param {Number} y the `y-axis` vector length.
+   * @param {Number} z the `z-axis` vector length.
+   * @param {Number} angle the value in degrees of the rotation.
+   */
   function RotateAxisAngle(x, y, z, angle){
     angle *= Math.PI / 360;
-    var sinA = Math.sin(angle),
-        cosA = Math.cos(angle),
+
+    var sinA = Math.sin(angle), 
+        cosA = Math.cos(angle), 
         sinA2 = sinA * sinA,
         length = Math.sqrt(x * x + y * y + z * z);
+
     if (length === 0){
+      // bad vector length, use something reasonable
       x = 0;
@@ -55,3 +117,5 @@ y = 0;
     }
+
     var x2 = x * x, y2 = y * y, z2 = z * z;
+
     var m = new CSSMatrix();
@@ -70,4 +134,16 @@ m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
     m.m44 = 1;
+
     return m
   }
+
+  /**
+   * Creates a new `CSSMatrix` for the scale matrix and returns it.
+   * This method is equivalent to the CSS `scale3d()` function.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d
+   *  
+   * @param {Number} x the `x-axis` scale.
+   * @param {Number} y the `y-axis` scale.
+   * @param {Number} z the `z-axis` scale.
+   */
   function Scale(x, y, z){
@@ -80,2 +156,11 @@ var m = new CSSMatrix();
   }
+
+  /**
+   * Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and 
+   * returns it. This method is equivalent to the CSS `skewX()` function.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
+   *  
+   * @param {Number} angle the angle in degrees.
+   */
   function SkewX(angle){
@@ -87,2 +172,11 @@ angle *= Math.PI / 180;
   }
+
+  /**
+   * Creates a new `CSSMatrix` for the shear of the `y-axis` rotation matrix and 
+   * returns it. This method is equivalent to the CSS `skewY()` function.
+   * 
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
+   *  
+   * @param {Number} angle the angle in degrees.
+   */
   function SkewY(angle){
@@ -94,2 +188,10 @@ angle *= Math.PI / 180;
   }
+
+  /**
+   * Creates a new `CSSMatrix` resulted from the multiplication of two matrixes 
+   * and returns it. Both matrixes are not changed.
+   * 
+   * @param {CSSMatrix} m1 the first matrix.
+   * @param {CSSMatrix} m2 the second matrix.
+   */
   function Multiply(m1, m2){
@@ -100,2 +202,3 @@ var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
         m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
+
         m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
@@ -105,2 +208,3 @@ m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
         m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
+
         m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
@@ -110,2 +214,3 @@ m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
         m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
+
         m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
@@ -115,2 +220,3 @@ m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
         m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
+
     return new CSSMatrix(
@@ -122,5 +228,36 @@ [m11, m21, m31, m41,
   }
+
+
+  /**
+   * Returns a new *Float32Array* containing all 16 elements which comprise the matrix. 
+   * The elements are stored into the array as single-precision floating-point numbers 
+   * in column-major (colexographical access access or "colex") order. 
+   * 
+   * @return {Float32Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
+   */
+  // toFloat32Array(){
+  // 	return Float32Array.from(this.toArray())
+  // }
+
+  /**
+   * Returns a new Float64Array containing all 16 elements which comprise the matrix. 
+   * The elements are stored into the array as double-precision floating-point numbers 
+   * in column-major (colexographical access access or "colex") order. 
+   * 
+   * @return {Float64Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
+   */	
+  // toFloat64Array(){
+  // 	return Float64Array.from(this.toArray())
+  // }
+
+  /**
+   * Creates a new mutable `CSSMatrix` object given an existing matrix or a 
+   * `DOMMatrix` *Object* which provides the values for its properties.
+   * 
+   * @param {CSSMatrix} CSSMatrix the source `CSSMatrix` / `DOMMatrix` initialization to feed values from
+   */
   function fromMatrix(m){
     return new CSSMatrix(
-     [m.m11, m.m21, m.m31, m.m41,
+      // DOMMatrix elements order
+     [m.m11, m.m21, m.m31, m.m41, 
       m.m12, m.m22, m.m32, m.m42,
@@ -130,20 +267,55 @@ m.m13, m.m23, m.m33, m.m43,
   }
+
+  /**
+   * Creates a new mutable `CSSMatrix` object given an array float values.
+   *  
+   * If the array has six values, the result is a 2D matrix; if the array has 16 values, 
+   * the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
+   * 
+   * @param {Array} array The source `Array` to feed values from.
+   * @return {CSSMatrix} a The source array to feed values from.
+   */
   function fromArray(a){
     return feedFromArray(new CSSMatrix(),a)
   }
+
+  /**
+   * Each create a new mutable `CSSMatrix` object given an array of single/double-precision 
+   * (32/64 bit) floating-point values.
+   *  
+   * If the array has six values, the result is a 2D matrix; if the array has 16 values, 
+   * the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
+   * 
+   * @param {Float32Array|Float64Array} array The source `Float32Array` / `Float64Array` to feed values from.
+   * @return {CSSMatrix} a The source array to feed values from.
+   */
+  // more of an alias for now, will update later if it's the case
+  // function fromFloat32Array(a){ 
+  // 	return feedFromArray(new CSSMatrix(),a)
+  // }
+  // function fromFloat64Array(a){ // more of an alias
+  // 	return feedFromArray(new CSSMatrix(),a)
+  // }
+
+  /**
+   * Feed a CSSMatrix object with the values of a 6/16 values array and returns it.
+   * 
+   * @param {Array} array The source `Array` to feed values from.
+   * @return {CSSMatrix} a The source array to feed values from.
+   */
   function feedFromArray(m,array){
     var a = Array.from(array);
     if (a.length == 16){
-      m.m11 = m.a = a[0];
+      m.m11 = m.a = a[0]; 
       m.m21 = m.c = a[1];
-      m.m31 = a[2];
-      m.m41 = m.e = a[3];
-      m.m12 = m.b = a[4];
-      m.m22 = m.d = a[5];
-      m.m32 = a[6];
-      m.m42 = m.f = a[7];
-      m.m13 = a[8];
-      m.m23 = a[9];
+      m.m31 = a[2]; 
+      m.m41 = m.e = a[3]; 
+      m.m12 = m.b = a[4]; 
+      m.m22 = m.d = a[5]; 
+      m.m32 = a[6]; 
+      m.m42 = m.f = a[7]; 
+      m.m13 = a[8]; 
+      m.m23 = a[9]; 
       m.m33 = a[10];
-      m.m43 = a[11];
+      m.m43 = a[11]; 
       m.m14 = a[12];
@@ -154,7 +326,7 @@ m.m24 = a[13];
     } else if (a.length == 6) {
-      m.m11 = m.a = a[0];
-      m.m12 = m.b = a[1];
-      m.m14 = m.e = a[4];
-      m.m21 = m.c = a[2];
-      m.m22 = m.d = a[3];
+      m.m11 = m.a = a[0]; 
+      m.m12 = m.b = a[1]; 
+      m.m14 = m.e = a[4]; 
+      m.m21 = m.c = a[2]; 
+      m.m22 = m.d = a[3]; 
       m.m24 = m.f = a[5];
@@ -166,19 +338,89 @@ } else {
   }
+
   var CSSMatrix = function CSSMatrix(){
     var args = [], len = arguments.length;
     while ( len-- ) args[ len ] = arguments[ len ];
+
     this.setIdentity();
     return args && args.length && this.setMatrixValue(args)
   };
+
   var prototypeAccessors = { isIdentity: { configurable: true },is2D: { configurable: true } };
-  CSSMatrix.prototype.setMatrixValue = function setMatrixValue (source){
+
+  /**
+   * A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity 
+   * matrix is one in which every value is 0 except those on the main diagonal from top-left 
+   * to bottom-right corner (in other words, where the offsets in each direction are equal).
+   *
+   * @return {Boolean} `Boolean` the current property value
+   */
+  prototypeAccessors.isIdentity.get = function (){
     var m = this;
-    if (!source || !source.length) {
+    return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
+            m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
+            m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
+            m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
+  };
+
+  /**
+   * Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
+   *
+   * @param {Boolean} value sets a new `Boolean` flag for this property
+   */
+  prototypeAccessors.isIdentity.set = function (value){
+    this.isIdentity = value;
+  };
+
+  /**
+   * A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix 
+   * and `false` if the matrix is 3D.
+   *
+   * @return {Boolean} `Boolean` the current property value
+   */
+  prototypeAccessors.is2D.get = function (){
+    var m = this;
+    return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
+  };
+
+  /**
+   * Sets a new `Boolean` flag value for `this.is2D` matrix property.
+   *
+   * @param {Boolean} value sets a new `Boolean` flag for this property
+   */
+  prototypeAccessors.is2D.set = function (value){
+    this.is2D = value;
+  };
+
+  Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
+
+  // export proto for custom compile via Buble
+  var CSSMatrixProto = CSSMatrix.prototype;
+
+  /**
+   * The `setMatrixValue` method replaces the existing matrix with one computed
+   * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`
+   * 
+   * The method accepts *Float64Array* / *Float32Array* / any *Array* values, the result of 
+   * `DOMMatrix` / `CSSMatrix` instance method calls `toFloat64Array()` / `toFloat32Array()`.
+   * 
+   * This method expects valid *matrix()* / *matrix3d()* string values, other
+   * transform functions like *translate()* are not supported.
+   * 
+   * @param {String} source the *String* resulted from `getComputedStyle()`.
+   * @param {Array} source the *Array* resulted from `toFloat64Array()`.
+   */
+  CSSMatrixProto.setMatrixValue = function (source){
+    var m = this;
+
+    if (!source || !source.length) { // no parameters or source
       return m
-    } else if (source.length && typeof source[0] === 'string' && source[0].length) {
+    } else if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source
       var string = String(source[0]).trim(), type = '', values = [];
+
       if (string == 'none') { return m; }
+
       type = string.slice(0, string.indexOf('('));
       values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
                     .map(function (n){ return Math.abs(n) < 1e-6 ? 0 : +n; });
+
       if ([6,16].indexOf(values.length)>-1){
@@ -189,24 +431,47 @@ feedFromArray(m,values);
       }
-    } else if (source[0] instanceof CSSMatrix) {
+    } else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
       feedFromArray(m,source[0].toArray());
-    } else if (Array.isArray(source[0])) {
-      feedFromArray(m,source[0]);
-    } else if (Array.isArray(source)) {
-      feedFromArray(m,source);
+    } else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
+      feedFromArray(m,source[0]);    
+    } else if (Array.isArray(source)) { // Arguments list come here
+      feedFromArray(m,source);  
     }
     return m
   };
-  CSSMatrix.prototype.toString = function toString (){
+
+  /**
+   * Creates and returns a string representation of the matrix in `CSS` matrix syntax, 
+   * using the appropriate `CSS` matrix notation.
+   * 
+   * The 16 items in the array 3D matrix array are *transposed* in row-major order.
+   * 
+   * @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
+   * @matrix *matrix(a, b, c, d, e, f)*
+   * 
+   * @return {String} `String` representation of the matrix
+   */
+  CSSMatrixProto.toString = function(){
     var m = this, type = m.is2D ? 'matrix' : 'matrix3d';
     return (type + "(" + (m.toArray(1).join(',')) + ")")
   };
-  CSSMatrix.prototype.toArray = function toArray (transposed){
+
+  /**
+   * Returns an *Array* containing all 16 elements which comprise the matrix. 
+   * The method can return either the elements in default column major order or 
+   * row major order (what we call the *transposed* matrix, used by `toString`).
+   * 
+   * Other methods make use of this method to feed their output values from this matrix.
+   * 
+   * @param {Boolean} transposed changes the order of elements in the output
+   * @return {Array} an *Array* representation of the matrix
+   */
+  CSSMatrixProto.toArray = function(transposed){
     var m = this;
     return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
       : transposed
-      ?[m.m11, m.m12, m.m13, m.m14,
+      ?[m.m11, m.m12, m.m13, m.m14, // transposed is used by toString
         m.m21, m.m22, m.m23, m.m24,
         m.m31, m.m32, m.m33, m.m34,
         m.m41, m.m42, m.m43, m.m44]
-      :[m.m11, m.m21, m.m31, m.m41,
+      :[m.m11, m.m21, m.m31, m.m41, // used by constructor
         m.m12, m.m22, m.m32, m.m42,
@@ -216,6 +481,37 @@ m.m13, m.m23, m.m33, m.m43,
   };
-  CSSMatrix.prototype.multiply = function multiply (m2){
+
+  /**
+   * The Multiply method returns a new CSSMatrix which is the result of this
+   * matrix multiplied by the passed matrix, with the passed matrix to the right.
+   * This matrix is not modified.
+   *
+   * @param {CSSMatrix} m2 CSSMatrix  
+   * @return {CSSMatrix} The result matrix.
+   */
+  CSSMatrixProto.multiply = function(m2){
     return Multiply(this,m2)
   };
-  CSSMatrix.prototype.translate = function translate (x, y, z){
+
+  /**
+   *
+   * These methods will be implemented later into an extended version to provide 
+   * additional functionality. 
+   */
+  // inverse = function(){}
+  // determinant = function(){}
+  // transpose = function(){}
+
+  /**
+   * The translate method returns a new matrix which is this matrix post
+   * multiplied by a translation matrix containing the passed values. If the z
+   * component is undefined, a 0 value is used in its place. This matrix is not
+   * modified.
+   *
+   * @param {number} x X component of the translation value.
+   * @param {number} y Y component of the translation value.
+   * @param {number=} z Z component of the translation value.
+   * @return {CSSMatrix} The result matrix
+   */
+
+  CSSMatrixProto.translate = function(x, y, z){
     if (z == null) { z = 0; }
@@ -225,3 +521,16 @@ if (y == null) { y = 0; }
   };
-  CSSMatrix.prototype.scale = function scale (x, y, z){
+
+  /**
+   * The scale method returns a new matrix which is this matrix post multiplied by
+   * a scale matrix containing the passed values. If the z component is undefined,
+   * a 1 value is used in its place. If the y component is undefined, the x
+   * component value is used in its place. This matrix is not modified.
+   *
+   * @param {number} x The X component of the scale value.
+   * @param {number=} y The Y component of the scale value.
+   * @param {number=} z The Z component of the scale value.
+   * @return {CSSMatrix} The result matrix
+   */
+
+  CSSMatrixProto.scale = function(x, y, z){
     if (y == null) { y = x; }
@@ -231,3 +540,17 @@ if (z == null) { z = x; }
   };
-  CSSMatrix.prototype.rotate = function rotate (rx, ry, rz){
+
+  /**
+   * The rotate method returns a new matrix which is this matrix post multiplied
+   * by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
+   * If the y and z components are undefined, the x value is used to rotate the
+   * object about the z axis, as though the vector (0,0,x) were passed. All
+   * rotation values are in degrees. This matrix is not modified.
+   *
+   * @param {number} rx The X component of the rotation value, or the Z component if the rotateY and rotateZ parameters are undefined.
+   * @param {number=} ry The (optional) Y component of the rotation value.
+   * @param {number=} rz The (optional) Z component of the rotation value.
+   * @return {CSSMatrix} The result matrix
+   */
+
+  CSSMatrixProto.rotate = function(rx, ry, rz){
     if (ry == null) { ry = 0; }
@@ -237,3 +560,17 @@ if (rz == null) {rz = rx; rx = 0;}
   };
-  CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle){
+
+  /**
+   * The rotateAxisAngle method returns a new matrix which is this matrix post
+   * multiplied by a rotation matrix with the given axis and `angle`. The right-hand
+   * rule is used to determine the direction of rotation. All rotation values are
+   * in degrees. This matrix is not modified.
+   *
+   * @param {number} x The X component of the axis vector.
+   * @param {number} y The Y component of the axis vector.
+   * @param {number} z The Z component of the axis vector.
+   * @param {number} angle The angle of rotation about the axis vector, in degrees.
+   * @return {CSSMatrix} The `CSSMatrix` result
+   */
+
+  CSSMatrixProto.rotateAxisAngle = function(x, y, z, angle){
     if (arguments.length!==4){
@@ -244,33 +581,56 @@ throw new TypeError("CSSMatrix: expecting 4 values")
   };
-  CSSMatrix.prototype.skewX = function skewX (angle){
+
+  /**
+   * Specifies a skew transformation along the `x-axis` by the given angle.
+   * This matrix is not modified.
+   *
+   * @param {number} angle The angle amount in degrees to skew.
+   * @return {CSSMatrix} The `CSSMatrix` result
+   */
+
+  CSSMatrixProto.skewX = function(angle){
     return Multiply(this,SkewX(angle))
   };
-  CSSMatrix.prototype.skewY = function skewY (angle){
+
+  /**
+   * Specifies a skew transformation along the `y-axis` by the given angle.
+   * This matrix is not modified.
+   *
+   * @param {number} angle The angle amount in degrees to skew.
+   * @return {CSSMatrix} The `CSSMatrix` result
+   */
+
+  CSSMatrixProto.skewY = function(angle){
     return Multiply(this,SkewY(angle))
   };
-  CSSMatrix.prototype.setIdentity = function setIdentity (){
+
+  /**
+   * Set the current `CSSMatrix` instance to the identity form and returns it.
+   *
+   * @return {CSSMatrix} this `CSSMatrix` instance
+   */
+  CSSMatrixProto.setIdentity = function(){
     var identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
     return feedFromArray(this,identity)
   };
-  prototypeAccessors.isIdentity.get = function (){
-    var m = this;
-    return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
-            m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
-            m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
-            m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
-  };
-  prototypeAccessors.isIdentity.set = function (value){
-    this.isIdentity = value;
-  };
-  prototypeAccessors.is2D.get = function (){
-    var m = this;
-    return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
-  };
-  prototypeAccessors.is2D.set = function (value){
-    this.is2D = value;
-  };
-  CSSMatrix.prototype.transformPoint = function transformPoint (v){
+
+  /**
+   * Transforms the specified point using the matrix, returning a new 
+   * *Object* containing the transformed point. 
+   * Neither the matrix nor the original point are altered.
+   *
+   * The method is equivalent with `transformPoint()` method 
+   * of the `DOMMatrix` constructor.
+   *  
+   * JavaScript implementation by thednp
+   * 
+   * @param {Point} point the *Object* with `x`, `y`, `z` and `w` components
+   * @return {Point} a new `{x,y,z,w}` *Object*
+   */
+  CSSMatrixProto.transformPoint = function(v){
     var _m = this, m = Translate(v.x, v.y, v.z);
+
     m.m44 = v.w || 1;
     m = _m.multiply(m);
+
     return {
@@ -283,4 +643,13 @@ x: m.m41,
   };
-  CSSMatrix.prototype.transform = function transform (t){
-  		var m = this,
+
+  /**
+   * Transforms the specified vector using the matrix, returning a new 
+   * {x,y,z,w} *Object* comprising the transformed vector. 
+   * Neither the matrix nor the original vector are altered.
+   *
+   * @param {Tuple} tupple an object with x, y, z and w components
+   * @return {Tuple} the passed tuple
+   */
+  CSSMatrixProto.transform = function(t){
+    var m = this,
         x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
@@ -290,3 +659,4 @@ y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
         w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w;
-  		return {
+
+    return {
       x: x / w,
@@ -298,3 +668,4 @@ y: y / w,
   };
-  Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
+
+  // Add Transform Functions to CSSMatrix object
   CSSMatrix.Translate = Translate;
@@ -301,0 +672,0 @@ CSSMatrix.Rotate = Rotate;

dist/dommatrix.min.js

@@ -1,2 +0,2 @@
-// DOMMatrix v0.0.4e | thednp © 2021 | MIT-License
-!function(m,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(m="undefined"!=typeof globalThis?globalThis:m||self).CSSMatrix=t()}(this,(function(){"use strict";function m(m,t,n){var r=new u;return r.m41=r.e=m,r.m42=r.f=t,r.m43=n,r}function t(m,t,n){var r=new u;m*=Math.PI/180,t*=Math.PI/180,n*=Math.PI/180;var e=Math.cos(m),i=-Math.sin(m),o=Math.cos(t),a=-Math.sin(t),s=Math.cos(n),f=-Math.sin(n);return r.m11=r.a=o*s,r.m12=r.b=-o*f,r.m13=a,r.m21=r.c=i*a*s+e*f,r.m22=r.d=e*s-i*a*f,r.m23=-i*o,r.m31=i*f-e*a*s,r.m32=i*s+e*a*f,r.m33=e*o,r}function n(m,t,n,r){r*=Math.PI/360;var e=Math.sin(r),i=Math.cos(r),o=e*e,a=Math.sqrt(m*m+t*t+n*n);0===a?(m=0,t=0,n=1):(m/=a,t/=a,n/=a);var s=m*m,f=t*t,c=n*n,h=new u;return h.m11=h.a=1-2*(f+c)*o,h.m12=h.b=2*(m*t*o+n*e*i),h.m13=2*(m*n*o-t*e*i),h.m21=h.c=2*(t*m*o-n*e*i),h.m22=h.d=1-2*(c+s)*o,h.m23=2*(t*n*o+m*e*i),h.m31=2*(n*m*o+t*e*i),h.m32=2*(n*t*o-m*e*i),h.m33=1-2*(s+f)*o,h.m14=h.m24=h.m34=0,h.m41=h.e=h.m42=h.f=h.m43=0,h.m44=1,h}function r(m,t,n){var r=new u;return r.m11=r.a=m,r.m22=r.d=t,r.m33=n,r}function e(m){m*=Math.PI/180;var t=new u;return t.m21=t.c=Math.tan(m),t}function i(m){m*=Math.PI/180;var t=new u;return t.m12=t.b=Math.tan(m),t}function o(m,t){var n=t.m11*m.m11+t.m12*m.m21+t.m13*m.m31+t.m14*m.m41,r=t.m11*m.m12+t.m12*m.m22+t.m13*m.m32+t.m14*m.m42,e=t.m11*m.m13+t.m12*m.m23+t.m13*m.m33+t.m14*m.m43,i=t.m11*m.m14+t.m12*m.m24+t.m13*m.m34+t.m14*m.m44,o=t.m21*m.m11+t.m22*m.m21+t.m23*m.m31+t.m24*m.m41,a=t.m21*m.m12+t.m22*m.m22+t.m23*m.m32+t.m24*m.m42,s=t.m21*m.m13+t.m22*m.m23+t.m23*m.m33+t.m24*m.m43,f=t.m21*m.m14+t.m22*m.m24+t.m23*m.m34+t.m24*m.m44,c=t.m31*m.m11+t.m32*m.m21+t.m33*m.m31+t.m34*m.m41,h=t.m31*m.m12+t.m32*m.m22+t.m33*m.m32+t.m34*m.m42,l=t.m31*m.m13+t.m32*m.m23+t.m33*m.m33+t.m34*m.m43,y=t.m31*m.m14+t.m32*m.m24+t.m33*m.m34+t.m34*m.m44,p=t.m41*m.m11+t.m42*m.m21+t.m43*m.m31+t.m44*m.m41,d=t.m41*m.m12+t.m42*m.m22+t.m43*m.m32+t.m44*m.m42,x=t.m41*m.m13+t.m42*m.m23+t.m43*m.m33+t.m44*m.m43,w=t.m41*m.m14+t.m42*m.m24+t.m43*m.m34+t.m44*m.m44;return new u([n,o,c,p,r,a,h,d,e,s,l,x,i,f,y,w])}function a(m,t){var n=Array.from(t);if(16==n.length)m.m11=m.a=n[0],m.m21=m.c=n[1],m.m31=n[2],m.m41=m.e=n[3],m.m12=m.b=n[4],m.m22=m.d=n[5],m.m32=n[6],m.m42=m.f=n[7],m.m13=n[8],m.m23=n[9],m.m33=n[10],m.m43=n[11],m.m14=n[12],m.m24=n[13],m.m34=n[14],m.m44=n[15];else{if(6!=n.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");m.m11=m.a=n[0],m.m12=m.b=n[1],m.m14=m.e=n[4],m.m21=m.c=n[2],m.m22=m.d=n[3],m.m24=m.f=n[5]}return m}var u=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},s={isIdentity:{configurable:!0},is2D:{configurable:!0}};return u.prototype.setMatrixValue=function(m){var t=this;if(!m||!m.length)return t;if(m.length&&"string"==typeof m[0]&&m[0].length){var n,r,e=String(m[0]).trim();if("none"==e)return t;if(n=e.slice(0,e.indexOf("(")),r=e.slice("matrix"===n?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(r.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");a(t,r)}else m[0]instanceof u?a(t,m[0].toArray()):Array.isArray(m[0])?a(t,m[0]):Array.isArray(m)&&a(t,m);return t},u.prototype.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},u.prototype.toArray=function(m){var t=this;return t.is2D?[t.a,t.b,t.c,t.d,t.e,t.f]:m?[t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44]:[t.m11,t.m21,t.m31,t.m41,t.m12,t.m22,t.m32,t.m42,t.m13,t.m23,t.m33,t.m43,t.m14,t.m24,t.m34,t.m44]},u.prototype.multiply=function(m){return o(this,m)},u.prototype.translate=function(t,n,r){return null==r&&(r=0),null==n&&(n=0),o(this,m(t,n,r))},u.prototype.scale=function(m,t,n){return null==t&&(t=m),null==n&&(n=m),o(this,r(m,t,n))},u.prototype.rotate=function(m,n,r){return null==n&&(n=0),null==r&&(r=m,m=0),o(this,t(m,n,r))},u.prototype.rotateAxisAngle=function(m,t,r,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return o(this,n(m,t,r,e))},u.prototype.skewX=function(m){return o(this,e(m))},u.prototype.skewY=function(m){return o(this,i(m))},u.prototype.setIdentity=function(){return a(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},s.isIdentity.get=function(){var m=this;return 1==m.m11&&0==m.m12&&0==m.m13&&0==m.m14&&0==m.m21&&1==m.m22&&0==m.m23&&0==m.m24&&0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m41&&0==m.m42&&0==m.m43&&1==m.m44},s.isIdentity.set=function(m){this.isIdentity=m},s.is2D.get=function(){var m=this;return 0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m43&&1==m.m44},s.is2D.set=function(m){this.is2D=m},u.prototype.transformPoint=function(t){var n=m(t.x,t.y,t.z);return n.m44=t.w||1,{x:(n=this.multiply(n)).m41,y:n.m42,z:n.m43,w:n.m44}},u.prototype.transform=function(m){var t=this,n=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,r=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:n/i,y:r/i,z:e/i,w:i}},Object.defineProperties(u.prototype,s),u.Translate=m,u.Rotate=t,u.RotateAxisAngle=n,u.Scale=r,u.SkewX=e,u.SkewY=i,u.Multiply=o,u.fromMatrix=function(m){return new u([m.m11,m.m21,m.m31,m.m41,m.m12,m.m22,m.m32,m.m42,m.m13,m.m23,m.m33,m.m43,m.m14,m.m24,m.m34,m.m44])},u.fromArray=function(m){return a(new u,m)},u.feedFromArray=a,u}));
+// DOMMatrix v0.0.4f | thednp © 2021 | MIT-License
+!function(m,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(m="undefined"!=typeof globalThis?globalThis:m||self).CSSMatrix=t()}(this,(function(){"use strict";function m(m,t,n){var r=new o;return r.m41=r.e=m,r.m42=r.f=t,r.m43=n,r}function t(m,t,n){var r=new o;m*=Math.PI/180,t*=Math.PI/180,n*=Math.PI/180;var e=Math.cos(m),i=-Math.sin(m),a=Math.cos(t),u=-Math.sin(t),s=Math.cos(n),f=-Math.sin(n);return r.m11=r.a=a*s,r.m12=r.b=-a*f,r.m13=u,r.m21=r.c=i*u*s+e*f,r.m22=r.d=e*s-i*u*f,r.m23=-i*a,r.m31=i*f-e*u*s,r.m32=i*s+e*u*f,r.m33=e*a,r}function n(m,t,n,r){r*=Math.PI/360;var e=Math.sin(r),i=Math.cos(r),a=e*e,u=Math.sqrt(m*m+t*t+n*n);0===u?(m=0,t=0,n=1):(m/=u,t/=u,n/=u);var s=m*m,f=t*t,c=n*n,h=new o;return h.m11=h.a=1-2*(f+c)*a,h.m12=h.b=2*(m*t*a+n*e*i),h.m13=2*(m*n*a-t*e*i),h.m21=h.c=2*(t*m*a-n*e*i),h.m22=h.d=1-2*(c+s)*a,h.m23=2*(t*n*a+m*e*i),h.m31=2*(n*m*a+t*e*i),h.m32=2*(n*t*a-m*e*i),h.m33=1-2*(s+f)*a,h.m14=h.m24=h.m34=0,h.m41=h.e=h.m42=h.f=h.m43=0,h.m44=1,h}function r(m,t,n){var r=new o;return r.m11=r.a=m,r.m22=r.d=t,r.m33=n,r}function e(m){m*=Math.PI/180;var t=new o;return t.m21=t.c=Math.tan(m),t}function i(m){m*=Math.PI/180;var t=new o;return t.m12=t.b=Math.tan(m),t}function a(m,t){var n=t.m11*m.m11+t.m12*m.m21+t.m13*m.m31+t.m14*m.m41,r=t.m11*m.m12+t.m12*m.m22+t.m13*m.m32+t.m14*m.m42,e=t.m11*m.m13+t.m12*m.m23+t.m13*m.m33+t.m14*m.m43,i=t.m11*m.m14+t.m12*m.m24+t.m13*m.m34+t.m14*m.m44,a=t.m21*m.m11+t.m22*m.m21+t.m23*m.m31+t.m24*m.m41,u=t.m21*m.m12+t.m22*m.m22+t.m23*m.m32+t.m24*m.m42,s=t.m21*m.m13+t.m22*m.m23+t.m23*m.m33+t.m24*m.m43,f=t.m21*m.m14+t.m22*m.m24+t.m23*m.m34+t.m24*m.m44,c=t.m31*m.m11+t.m32*m.m21+t.m33*m.m31+t.m34*m.m41,h=t.m31*m.m12+t.m32*m.m22+t.m33*m.m32+t.m34*m.m42,l=t.m31*m.m13+t.m32*m.m23+t.m33*m.m33+t.m34*m.m43,y=t.m31*m.m14+t.m32*m.m24+t.m33*m.m34+t.m34*m.m44,d=t.m41*m.m11+t.m42*m.m21+t.m43*m.m31+t.m44*m.m41,x=t.m41*m.m12+t.m42*m.m22+t.m43*m.m32+t.m44*m.m42,w=t.m41*m.m13+t.m42*m.m23+t.m43*m.m33+t.m44*m.m43,M=t.m41*m.m14+t.m42*m.m24+t.m43*m.m34+t.m44*m.m44;return new o([n,a,c,d,r,u,h,x,e,s,l,w,i,f,y,M])}function u(m,t){var n=Array.from(t);if(16==n.length)m.m11=m.a=n[0],m.m21=m.c=n[1],m.m31=n[2],m.m41=m.e=n[3],m.m12=m.b=n[4],m.m22=m.d=n[5],m.m32=n[6],m.m42=m.f=n[7],m.m13=n[8],m.m23=n[9],m.m33=n[10],m.m43=n[11],m.m14=n[12],m.m24=n[13],m.m34=n[14],m.m44=n[15];else{if(6!=n.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");m.m11=m.a=n[0],m.m12=m.b=n[1],m.m14=m.e=n[4],m.m21=m.c=n[2],m.m22=m.d=n[3],m.m24=m.f=n[5]}return m}var o=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},s={isIdentity:{configurable:!0},is2D:{configurable:!0}};s.isIdentity.get=function(){var m=this;return 1==m.m11&&0==m.m12&&0==m.m13&&0==m.m14&&0==m.m21&&1==m.m22&&0==m.m23&&0==m.m24&&0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m41&&0==m.m42&&0==m.m43&&1==m.m44},s.isIdentity.set=function(m){this.isIdentity=m},s.is2D.get=function(){var m=this;return 0==m.m31&&0==m.m32&&1==m.m33&&0==m.m34&&0==m.m43&&1==m.m44},s.is2D.set=function(m){this.is2D=m},Object.defineProperties(o.prototype,s);var f=o.prototype;return f.setMatrixValue=function(m){var t=this;if(!m||!m.length)return t;if(m.length&&"string"==typeof m[0]&&m[0].length){var n,r,e=String(m[0]).trim();if("none"==e)return t;if(n=e.slice(0,e.indexOf("(")),r=e.slice("matrix"===n?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(r.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");u(t,r)}else m[0]instanceof o?u(t,m[0].toArray()):Array.isArray(m[0])?u(t,m[0]):Array.isArray(m)&&u(t,m);return t},f.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},f.toArray=function(m){var t=this;return t.is2D?[t.a,t.b,t.c,t.d,t.e,t.f]:m?[t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44]:[t.m11,t.m21,t.m31,t.m41,t.m12,t.m22,t.m32,t.m42,t.m13,t.m23,t.m33,t.m43,t.m14,t.m24,t.m34,t.m44]},f.multiply=function(m){return a(this,m)},f.translate=function(t,n,r){return null==r&&(r=0),null==n&&(n=0),a(this,m(t,n,r))},f.scale=function(m,t,n){return null==t&&(t=m),null==n&&(n=m),a(this,r(m,t,n))},f.rotate=function(m,n,r){return null==n&&(n=0),null==r&&(r=m,m=0),a(this,t(m,n,r))},f.rotateAxisAngle=function(m,t,r,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return a(this,n(m,t,r,e))},f.skewX=function(m){return a(this,e(m))},f.skewY=function(m){return a(this,i(m))},f.setIdentity=function(){return u(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},f.transformPoint=function(t){var n=m(t.x,t.y,t.z);return n.m44=t.w||1,{x:(n=this.multiply(n)).m41,y:n.m42,z:n.m43,w:n.m44}},f.transform=function(m){var t=this,n=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,r=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:n/i,y:r/i,z:e/i,w:i}},o.Translate=m,o.Rotate=t,o.RotateAxisAngle=n,o.Scale=r,o.SkewX=e,o.SkewY=i,o.Multiply=a,o.fromMatrix=function(m){return new o([m.m11,m.m21,m.m31,m.m41,m.m12,m.m22,m.m32,m.m42,m.m13,m.m23,m.m33,m.m43,m.m14,m.m24,m.m34,m.m44])},o.fromArray=function(m){return u(new o,m)},o.feedFromArray=u,o}));

package.json

 {
   "name": "dommatrix",
-  "version": "0.0.4e",
+  "version": "0.0.4f",
   "description": "ES6+ shim for DOMMatrix",
@@ -5,0 +5,0 @@ "main": "dist/dommatrix.min.js",

src/index.js

@@ -318,217 +318,5 @@ /**
     return args && args.length && this.setMatrixValue(args)
-  }  
-
-  /**
-   * The `setMatrixValue` method replaces the existing matrix with one computed
-   * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`
-   * 
-   * The method accepts *Float64Array* / *Float32Array* / any *Array* values, the result of 
-   * `DOMMatrix` / `CSSMatrix` instance method calls `toFloat64Array()` / `toFloat32Array()`.
-   * 
-   * This method expects valid *matrix()* / *matrix3d()* string values, other
-   * transform functions like *translate()* are not supported.
-   * 
-   * @param {String} source the *String* resulted from `getComputedStyle()`.
-   * @param {Array} source the *Array* resulted from `toFloat64Array()`.
-   */
-  setMatrixValue(source){
-    let m = this
-
-    if (!source || !source.length) { // no parameters or source
-      return m
-    } else if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source
-      let string = String(source[0]).trim(), type = '', values = [];
-
-      if (string == 'none') return m;
-  
-      type = string.slice(0, string.indexOf('('))
-      values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
-                    .map(n=>Math.abs(n) < 1e-6 ? 0 : +n)
-
-      if ([6,16].indexOf(values.length)>-1){
-        feedFromArray(m,values)
-      } else {
-        throw new TypeError(`CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax`)
-      }
-    } else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
-      feedFromArray(m,source[0].toArray())
-    } else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
-      feedFromArray(m,source[0])    
-    } else if (Array.isArray(source)) { // Arguments list come here
-      feedFromArray(m,source)  
-    }
-    return m
   }
-  
-  /**
-   * Creates and returns a string representation of the matrix in `CSS` matrix syntax, 
-   * using the appropriate `CSS` matrix notation.
-   * 
-   * The 16 items in the array 3D matrix array are *transposed* in row-major order.
-   * 
-   * @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
-   * @matrix *matrix(a, b, c, d, e, f)*
-   * 
-   * @return {String} `String` representation of the matrix
-   */
-  toString(){
-    let m = this, type = m.is2D ? 'matrix' : 'matrix3d'
-    return `${type}(${m.toArray(1).join(',')})`
-  }
 
   /**
-   * Returns an *Array* containing all 16 elements which comprise the matrix. 
-   * The method can return either the elements in default column major order or 
-   * row major order (what we call the *transposed* matrix, used by `toString`).
-   * 
-   * Other methods make use of this method to feed their output values from this matrix.
-   * 
-   * @param {Boolean} transposed changes the order of elements in the output
-   * @return {Array} an *Array* representation of the matrix
-   */
-  toArray(transposed){
-    let m = this
-    return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
-      : transposed
-      ?[m.m11, m.m12, m.m13, m.m14, // transposed is used by toString
-        m.m21, m.m22, m.m23, m.m24,
-        m.m31, m.m32, m.m33, m.m34,
-        m.m41, m.m42, m.m43, m.m44]
-      :[m.m11, m.m21, m.m31, m.m41, // used by constructor
-        m.m12, m.m22, m.m32, m.m42,
-        m.m13, m.m23, m.m33, m.m43,
-        m.m14, m.m24, m.m34, m.m44]
-  }
-
-  /**
-   * The Multiply method returns a new CSSMatrix which is the result of this
-   * matrix multiplied by the passed matrix, with the passed matrix to the right.
-   * This matrix is not modified.
-   *
-   * @param {CSSMatrix} m2 CSSMatrix  
-   * @return {CSSMatrix} The result matrix.
-   */
-  multiply(m2){
-    return Multiply(this,m2)
-  }
-
-  /**
-   *
-   * These methods will be implemented later into an extended version to provide 
-   * additional functionality. 
-   */
-  // inverse = function(){}
-  // determinant = function(){}
-  // transpose = function(){}
-
-  /**
-   * The translate method returns a new matrix which is this matrix post
-   * multiplied by a translation matrix containing the passed values. If the z
-   * component is undefined, a 0 value is used in its place. This matrix is not
-   * modified.
-   *
-   * @param {number} x X component of the translation value.
-   * @param {number} y Y component of the translation value.
-   * @param {number=} z Z component of the translation value.
-   * @return {CSSMatrix} The result matrix
-   */
-
-  translate(x, y, z){
-    if (z == null) z = 0
-    if (y == null) y = 0
-    return Multiply(this,Translate(x, y, z))
-  }
-
-  /**
-   * The scale method returns a new matrix which is this matrix post multiplied by
-   * a scale matrix containing the passed values. If the z component is undefined,
-   * a 1 value is used in its place. If the y component is undefined, the x
-   * component value is used in its place. This matrix is not modified.
-   *
-   * @param {number} x The X component of the scale value.
-   * @param {number=} y The Y component of the scale value.
-   * @param {number=} z The Z component of the scale value.
-   * @return {CSSMatrix} The result matrix
-   */
-
-  scale(x, y, z){
-    if (y == null) y = x;
-    if (z == null) z = x;
-    return Multiply(this,Scale(x, y, z))
-  }
-
-  /**
-   * The rotate method returns a new matrix which is this matrix post multiplied
-   * by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
-   * If the y and z components are undefined, the x value is used to rotate the
-   * object about the z axis, as though the vector (0,0,x) were passed. All
-   * rotation values are in degrees. This matrix is not modified.
-   *
-   * @param {number} rx The X component of the rotation value, or the Z component if the rotateY and rotateZ parameters are undefined.
-   * @param {number=} ry The (optional) Y component of the rotation value.
-   * @param {number=} rz The (optional) Z component of the rotation value.
-   * @return {CSSMatrix} The result matrix
-   */
-
-  rotate(rx, ry, rz){
-    if (ry == null) ry = 0;
-    if (rz == null) {rz = rx; rx = 0}
-    return Multiply(this,Rotate(rx, ry, rz))
-  }
-
-  /**
-   * The rotateAxisAngle method returns a new matrix which is this matrix post
-   * multiplied by a rotation matrix with the given axis and `angle`. The right-hand
-   * rule is used to determine the direction of rotation. All rotation values are
-   * in degrees. This matrix is not modified.
-   *
-   * @param {number} x The X component of the axis vector.
-   * @param {number} y The Y component of the axis vector.
-   * @param {number} z The Z component of the axis vector.
-   * @param {number} angle The angle of rotation about the axis vector, in degrees.
-   * @return {CSSMatrix} The `CSSMatrix` result
-   */
-
-  rotateAxisAngle(x, y, z, angle){
-    if (arguments.length!==4){
-      throw new TypeError(`CSSMatrix: expecting 4 values`)
-    }
-    return Multiply(this,RotateAxisAngle(x, y, z, angle))
-  }
-
-  /**
-   * Specifies a skew transformation along the `x-axis` by the given angle.
-   * This matrix is not modified.
-   *
-   * @param {number} angle The angle amount in degrees to skew.
-   * @return {CSSMatrix} The `CSSMatrix` result
-   */
-
-  skewX(angle){
-    return Multiply(this,SkewX(angle))
-  }
-
-  /**
-   * Specifies a skew transformation along the `y-axis` by the given angle.
-   * This matrix is not modified.
-   *
-   * @param {number} angle The angle amount in degrees to skew.
-   * @return {CSSMatrix} The `CSSMatrix` result
-   */
-
-  skewY(angle){
-    return Multiply(this,SkewY(angle))
-  }
-
-  /**
-   * Set the current `CSSMatrix` instance to the identity form and returns it.
-   *
-   * @return {CSSMatrix} this `CSSMatrix` instance
-   */
-  setIdentity(){
-    let identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
-    return feedFromArray(this,identity)
-  }
-
-  /**
    * A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity 
@@ -575,56 +363,271 @@ * matrix is one in which every value is 0 except those on the main diagonal from top-left
     this.is2D = value
-  }	
+  }
+}
 
-  /**
-   * Transforms the specified point using the matrix, returning a new 
-   * *Object* containing the transformed point. 
-   * Neither the matrix nor the original point are altered.
-   *
-   * The method is equivalent with `transformPoint()` method 
-   * of the `DOMMatrix` constructor.
-   *  
-   * JavaScript implementation by thednp
-   * 
-   * @param {Point} point the *Object* with `x`, `y`, `z` and `w` components
-   * @return {Point} a new `{x,y,z,w}` *Object*
-   */
-  transformPoint(v){
-    let _m = this, m = Translate(v.x, v.y, v.z)
+// export proto for custom compile via Buble
+const CSSMatrixProto = CSSMatrix.prototype
 
-    m.m44 = v.w || 1
-    m = _m.multiply(m)
+/**
+ * The `setMatrixValue` method replaces the existing matrix with one computed
+ * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`
+ * 
+ * The method accepts *Float64Array* / *Float32Array* / any *Array* values, the result of 
+ * `DOMMatrix` / `CSSMatrix` instance method calls `toFloat64Array()` / `toFloat32Array()`.
+ * 
+ * This method expects valid *matrix()* / *matrix3d()* string values, other
+ * transform functions like *translate()* are not supported.
+ * 
+ * @param {String} source the *String* resulted from `getComputedStyle()`.
+ * @param {Array} source the *Array* resulted from `toFloat64Array()`.
+ */
+CSSMatrixProto.setMatrixValue = function (source){
+  let m = this
 
-    return {
-      x: m.m41,
-      y: m.m42,
-      z: m.m43,
-      w: m.m44
+  if (!source || !source.length) { // no parameters or source
+    return m
+  } else if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source
+    let string = String(source[0]).trim(), type = '', values = [];
+
+    if (string == 'none') return m;
+
+    type = string.slice(0, string.indexOf('('))
+    values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
+                  .map(n=>Math.abs(n) < 1e-6 ? 0 : +n)
+
+    if ([6,16].indexOf(values.length)>-1){
+      feedFromArray(m,values)
+    } else {
+      throw new TypeError(`CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax`)
     }
+  } else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
+    feedFromArray(m,source[0].toArray())
+  } else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
+    feedFromArray(m,source[0])    
+  } else if (Array.isArray(source)) { // Arguments list come here
+    feedFromArray(m,source)  
   }
+  return m
+}
 
-	/**
-   * Transforms the specified vector using the matrix, returning a new 
-   * {x,y,z,w} *Object* comprising the transformed vector. 
-   * Neither the matrix nor the original vector are altered.
-	 *
-	 * @param {Tuple} tupple an object with x, y, z and w components
-	 * @return {Tuple} the passed tuple
-	 */
-  transform(t){
-		let m = this,
-        x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
-        y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
-        z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w,
-        w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w
+/**
+ * Creates and returns a string representation of the matrix in `CSS` matrix syntax, 
+ * using the appropriate `CSS` matrix notation.
+ * 
+ * The 16 items in the array 3D matrix array are *transposed* in row-major order.
+ * 
+ * @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
+ * @matrix *matrix(a, b, c, d, e, f)*
+ * 
+ * @return {String} `String` representation of the matrix
+ */
+CSSMatrixProto.toString = function(){
+  let m = this, type = m.is2D ? 'matrix' : 'matrix3d'
+  return `${type}(${m.toArray(1).join(',')})`
+}
 
-		return {
-      x: x / w,
-      y: y / w,
-      z: z / w,
-      w : w
-    }
-  }  
+/**
+ * Returns an *Array* containing all 16 elements which comprise the matrix. 
+ * The method can return either the elements in default column major order or 
+ * row major order (what we call the *transposed* matrix, used by `toString`).
+ * 
+ * Other methods make use of this method to feed their output values from this matrix.
+ * 
+ * @param {Boolean} transposed changes the order of elements in the output
+ * @return {Array} an *Array* representation of the matrix
+ */
+CSSMatrixProto.toArray = function(transposed){
+  let m = this
+  return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
+    : transposed
+    ?[m.m11, m.m12, m.m13, m.m14, // transposed is used by toString
+      m.m21, m.m22, m.m23, m.m24,
+      m.m31, m.m32, m.m33, m.m34,
+      m.m41, m.m42, m.m43, m.m44]
+    :[m.m11, m.m21, m.m31, m.m41, // used by constructor
+      m.m12, m.m22, m.m32, m.m42,
+      m.m13, m.m23, m.m33, m.m43,
+      m.m14, m.m24, m.m34, m.m44]
 }
 
-// Transform Functions
+/**
+ * The Multiply method returns a new CSSMatrix which is the result of this
+ * matrix multiplied by the passed matrix, with the passed matrix to the right.
+ * This matrix is not modified.
+ *
+ * @param {CSSMatrix} m2 CSSMatrix  
+ * @return {CSSMatrix} The result matrix.
+ */
+CSSMatrixProto.multiply = function(m2){
+  return Multiply(this,m2)
+}
+
+/**
+ *
+ * These methods will be implemented later into an extended version to provide 
+ * additional functionality. 
+ */
+// inverse = function(){}
+// determinant = function(){}
+// transpose = function(){}
+
+/**
+ * The translate method returns a new matrix which is this matrix post
+ * multiplied by a translation matrix containing the passed values. If the z
+ * component is undefined, a 0 value is used in its place. This matrix is not
+ * modified.
+ *
+ * @param {number} x X component of the translation value.
+ * @param {number} y Y component of the translation value.
+ * @param {number=} z Z component of the translation value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.translate = function(x, y, z){
+  if (z == null) z = 0
+  if (y == null) y = 0
+  return Multiply(this,Translate(x, y, z))
+}
+
+/**
+ * The scale method returns a new matrix which is this matrix post multiplied by
+ * a scale matrix containing the passed values. If the z component is undefined,
+ * a 1 value is used in its place. If the y component is undefined, the x
+ * component value is used in its place. This matrix is not modified.
+ *
+ * @param {number} x The X component of the scale value.
+ * @param {number=} y The Y component of the scale value.
+ * @param {number=} z The Z component of the scale value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.scale = function(x, y, z){
+  if (y == null) y = x;
+  if (z == null) z = x;
+  return Multiply(this,Scale(x, y, z))
+}
+
+/**
+ * The rotate method returns a new matrix which is this matrix post multiplied
+ * by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
+ * If the y and z components are undefined, the x value is used to rotate the
+ * object about the z axis, as though the vector (0,0,x) were passed. All
+ * rotation values are in degrees. This matrix is not modified.
+ *
+ * @param {number} rx The X component of the rotation value, or the Z component if the rotateY and rotateZ parameters are undefined.
+ * @param {number=} ry The (optional) Y component of the rotation value.
+ * @param {number=} rz The (optional) Z component of the rotation value.
+ * @return {CSSMatrix} The result matrix
+ */
+
+CSSMatrixProto.rotate = function(rx, ry, rz){
+  if (ry == null) ry = 0;
+  if (rz == null) {rz = rx; rx = 0}
+  return Multiply(this,Rotate(rx, ry, rz))
+}
+
+/**
+ * The rotateAxisAngle method returns a new matrix which is this matrix post
+ * multiplied by a rotation matrix with the given axis and `angle`. The right-hand
+ * rule is used to determine the direction of rotation. All rotation values are
+ * in degrees. This matrix is not modified.
+ *
+ * @param {number} x The X component of the axis vector.
+ * @param {number} y The Y component of the axis vector.
+ * @param {number} z The Z component of the axis vector.
+ * @param {number} angle The angle of rotation about the axis vector, in degrees.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.rotateAxisAngle = function(x, y, z, angle){
+  if (arguments.length!==4){
+    throw new TypeError(`CSSMatrix: expecting 4 values`)
+  }
+  return Multiply(this,RotateAxisAngle(x, y, z, angle))
+}
+
+/**
+ * Specifies a skew transformation along the `x-axis` by the given angle.
+ * This matrix is not modified.
+ *
+ * @param {number} angle The angle amount in degrees to skew.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.skewX = function(angle){
+  return Multiply(this,SkewX(angle))
+}
+
+/**
+ * Specifies a skew transformation along the `y-axis` by the given angle.
+ * This matrix is not modified.
+ *
+ * @param {number} angle The angle amount in degrees to skew.
+ * @return {CSSMatrix} The `CSSMatrix` result
+ */
+
+CSSMatrixProto.skewY = function(angle){
+  return Multiply(this,SkewY(angle))
+}
+
+/**
+ * Set the current `CSSMatrix` instance to the identity form and returns it.
+ *
+ * @return {CSSMatrix} this `CSSMatrix` instance
+ */
+CSSMatrixProto.setIdentity = function(){
+  let identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+  return feedFromArray(this,identity)
+}
+
+/**
+ * Transforms the specified point using the matrix, returning a new 
+ * *Object* containing the transformed point. 
+ * Neither the matrix nor the original point are altered.
+ *
+ * The method is equivalent with `transformPoint()` method 
+ * of the `DOMMatrix` constructor.
+ *  
+ * JavaScript implementation by thednp
+ * 
+ * @param {Point} point the *Object* with `x`, `y`, `z` and `w` components
+ * @return {Point} a new `{x,y,z,w}` *Object*
+ */
+CSSMatrixProto.transformPoint = function(v){
+  let _m = this, m = Translate(v.x, v.y, v.z)
+
+  m.m44 = v.w || 1
+  m = _m.multiply(m)
+
+  return {
+    x: m.m41,
+    y: m.m42,
+    z: m.m43,
+    w: m.m44
+  }
+}
+
+/**
+ * Transforms the specified vector using the matrix, returning a new 
+ * {x,y,z,w} *Object* comprising the transformed vector. 
+ * Neither the matrix nor the original vector are altered.
+ *
+ * @param {Tuple} tupple an object with x, y, z and w components
+ * @return {Tuple} the passed tuple
+ */
+CSSMatrixProto.transform = function(t){
+  let m = this,
+      x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
+      y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
+      z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w,
+      w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w
+
+  return {
+    x: x / w,
+    y: y / w,
+    z: z / w,
+    w : w
+  }
+}
+
+// Add Transform Functions to CSSMatrix object
 CSSMatrix.Translate = Translate
@@ -631,0 +634,0 @@ CSSMatrix.Rotate = Rotate

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84174

increased by45.41%

Lines of code

1786

increased by51.23%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes