@thednp/dommatrix 3.0.6 → 3.1.1

package/dist/dommatrix.js

@@ -2,8 +2,8 @@
 	typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define([], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.CSSMatrix = factory());
 })(this, function() {
 	//#region src/index.ts
-	/** A model for JSONMatrix */
-	const JSON_MATRIX = {
+	/** The property names of a JSONMatrix, used for compatibility checks */
+	const JSON_KEYS = Object.keys({
 		a: 1,
 		b: 0,
 		c: 0,
@@ -28,14 +28,14 @@
 		m44: 1,
 		is2D: true,
 		isIdentity: true
-	};
+	});
 	/** Checks if an array is compatible with CSSMatrix */
 	const isCompatibleArray = (array) => {
 		return (array instanceof Float64Array || array instanceof Float32Array || Array.isArray(array) && array.every((x) => typeof x === "number")) && [6, 16].some((x) => array.length === x);
 	};
 	/** Checks if an object is compatible with CSSMatrix */
 	const isCompatibleObject = (object) => {
-		return typeof DOMMatrix !== "undefined" && object instanceof DOMMatrix || object instanceof CSSMatrix || typeof object === "object" && Object.keys(JSON_MATRIX).every((k) => object && k in object);
+		return typeof DOMMatrix !== "undefined" && object instanceof DOMMatrix || object instanceof CSSMatrix || typeof object === "object" && JSON_KEYS.every((k) => object && k in object);
 	};
 	/**
 	* Creates a new mutable `CSSMatrix` instance given an array of 16/6 floating point values.
@@ -45,80 +45,106 @@
 	* the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
 	*
 	* @param array an `Array` to feed values from.
+	* @param target an optional matrix instance to write the values into; when omitted
+	* a new matrix is returned. Used internally by `setMatrixValue` to mutate in place.
 	* @return the resulted matrix.
 	*/
-	const fromArray = (array) => {
-		const m = new CSSMatrix();
-		const a = Array.from(array);
-		if (!isCompatibleArray(a)) throw TypeError(`CSSMatrix: "${a.join(",")}" must be an array with 6/16 numbers.`);
+	const fromArray = (array, target) => {
+		if (!isCompatibleArray(array)) throw TypeError(`CSSMatrix: "${Array.from(array).join(",")}" must be an array with 6/16 numbers.`);
 		// istanbul ignore else @preserve
-		if (a.length === 16) {
-			const [m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44] = a;
-			m.m11 = m11;
-			m.a = m11;
-			m.m21 = m21;
-			m.c = m21;
-			m.m31 = m31;
-			m.m41 = m41;
-			m.e = m41;
-			m.m12 = m12;
-			m.b = m12;
-			m.m22 = m22;
-			m.d = m22;
-			m.m32 = m32;
-			m.m42 = m42;
-			m.f = m42;
-			m.m13 = m13;
-			m.m23 = m23;
-			m.m33 = m33;
-			m.m43 = m43;
-			m.m14 = m14;
-			m.m24 = m24;
-			m.m34 = m34;
-			m.m44 = m44;
-		} else if (a.length === 6) {
-			const [M11, M12, M21, M22, M41, M42] = a;
-			m.m11 = M11;
-			m.a = M11;
-			m.m12 = M12;
-			m.b = M12;
-			m.m21 = M21;
-			m.c = M21;
-			m.m22 = M22;
-			m.d = M22;
-			m.m41 = M41;
-			m.e = M41;
-			m.m42 = M42;
-			m.f = M42;
+		if (array.length === 16) {
+			const [m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44] = array;
+			return writeValues(target ?? new CSSMatrix(), m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44);
 		}
-		return m;
+		const [M11, M12, M21, M22, M41, M42] = array;
+		return writeValues(target ?? new CSSMatrix(), M11, M12, 0, 0, M21, M22, 0, 0, 0, 0, 1, 0, M41, M42, 0, 1);
+	};
+	/**
+	* Internal helper that writes the 16 values of a matrix into a given `CSSMatrix`
+	* instance. This is the single place where all 22 aliases (`a`-`f` and `m11`-`m44`)
+	* are written, so every write path keeps the instance monomorphic.
+	*
+	* @param target the matrix instance to write the values into.
+	* @param m11 the `m11` value.
+	* @param m12 the `m12` value.
+	* @param m13 the `m13` value.
+	* @param m14 the `m14` value.
+	* @param m21 the `m21` value.
+	* @param m22 the `m22` value.
+	* @param m23 the `m23` value.
+	* @param m24 the `m24` value.
+	* @param m31 the `m31` value.
+	* @param m32 the `m32` value.
+	* @param m33 the `m33` value.
+	* @param m34 the `m34` value.
+	* @param m41 the `m41` value.
+	* @param m42 the `m42` value.
+	* @param m43 the `m43` value.
+	* @param m44 the `m44` value.
+	* @return the target matrix.
+	*/
+	const writeValues = (target, m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) => {
+		target.m11 = m11;
+		target.a = m11;
+		target.m21 = m21;
+		target.c = m21;
+		target.m31 = m31;
+		target.m41 = m41;
+		target.e = m41;
+		target.m12 = m12;
+		target.b = m12;
+		target.m22 = m22;
+		target.d = m22;
+		target.m32 = m32;
+		target.m42 = m42;
+		target.f = m42;
+		target.m13 = m13;
+		target.m23 = m23;
+		target.m33 = m33;
+		target.m43 = m43;
+		target.m14 = m14;
+		target.m24 = m24;
+		target.m34 = m34;
+		target.m44 = m44;
+		return target;
+	};
+	/**
+	* Creates a new mutable `CSSMatrix` instance given the 16 values of the matrix.
+	* This internal helper skips the validation and intermediate array steps of
+	* `fromArray` and is used by the fast paths of the library.
+	*
+	* @param m11 the `m11` value.
+	* @param m12 the `m12` value.
+	* @param m13 the `m13` value.
+	* @param m14 the `m14` value.
+	* @param m21 the `m21` value.
+	* @param m22 the `m22` value.
+	* @param m23 the `m23` value.
+	* @param m24 the `m24` value.
+	* @param m31 the `m31` value.
+	* @param m32 the `m32` value.
+	* @param m33 the `m33` value.
+	* @param m34 the `m34` value.
+	* @param m41 the `m41` value.
+	* @param m42 the `m42` value.
+	* @param m43 the `m43` value.
+	* @param m44 the `m44` value.
+	* @return the resulted matrix.
+	*/
+	const fromValues = (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) => {
+		return writeValues(new CSSMatrix(), m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44);
 	};
 	/**
 	* Creates a new mutable `CSSMatrix` instance given an existing matrix or a
 	* `DOMMatrix` instance which provides the values for its properties.
 	*
 	* @param m the source matrix to feed values from.
+	* @param target an optional matrix instance to write the values into; when omitted
+	* a new matrix is returned. Used internally by `setMatrixValue` to mutate in place.
 	* @return the resulted matrix.
 	*/
-	const fromMatrix = (m) => {
-		if (isCompatibleObject(m)) return fromArray([
-			m.m11,
-			m.m12,
-			m.m13,
-			m.m14,
-			m.m21,
-			m.m22,
-			m.m23,
-			m.m24,
-			m.m31,
-			m.m32,
-			m.m33,
-			m.m34,
-			m.m41,
-			m.m42,
-			m.m43,
-			m.m44
-		]);
+	const fromMatrix = (m, target) => {
+		if (isCompatibleObject(m)) return writeValues(target ?? new CSSMatrix(), m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34, m.m41, m.m42, m.m43, m.m44);
 		throw TypeError(`CSSMatrix: "${JSON.stringify(m)}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
 	};
 	/**
@@ -139,8 +165,13 @@
 		const str = String(source).replace(/\s/g, "");
 		const m = new CSSMatrix();
 		const invalidStringError = `CSSMatrix: invalid transform string "${source}"`;
-		str.split(")").filter((f) => f).forEach((tf) => {
-			const [prop, value] = tf.split("(");
+		const transformFn = /([\w-]+)\(([^)]*)\)/g;
+		let consumed = 0;
+		let match;
+		while (match = transformFn.exec(str)) {
+			const prop = match[1];
+			const value = match[2];
+			consumed += match[0].length;
 			if (!value) throw TypeError(invalidStringError);
 			const components = value.split(",").map((n) => n.includes("rad") ? parseFloat(n) * (180 / Math.PI) : parseFloat(n));
 			const [x, y, z, a] = components;
@@ -192,7 +223,8 @@
 				m[method](...axeValues);
 			}
 			else throw TypeError(invalidStringError);
-		});
+		}
+		if (consumed !== str.length) throw TypeError(invalidStringError);
 		return m;
 	};
 	/**
@@ -410,14 +442,16 @@
 		return Skew(0, angle);
 	};
 	/**
-	* Creates a new `CSSMatrix` resulted from the multiplication of two matrixes
-	* and returns it. Both matrixes are not changed.
+	* Computes the multiplication of two matrixes and stores the result into the
+	* third matrix argument, which is also returned. Both source matrixes are
+	* not changed.
 	*
 	* @param m1 the first matrix.
 	* @param m2 the second matrix.
+	* @param m the matrix to store the result into.
 	* @return the resulted matrix.
 	*/
-	const Multiply = (m1, m2) => {
+	const multiplyInto = (m1, m2, m) => {
 		const m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41;
 		const m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42;
 		const m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43;
@@ -434,24 +468,40 @@
 		const m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42;
 		const m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43;
 		const m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
-		return fromArray([
-			m11,
-			m12,
-			m13,
-			m14,
-			m21,
-			m22,
-			m23,
-			m24,
-			m31,
-			m32,
-			m33,
-			m34,
-			m41,
-			m42,
-			m43,
-			m44
-		]);
+		m.m11 = m11;
+		m.a = m11;
+		m.m21 = m21;
+		m.c = m21;
+		m.m31 = m31;
+		m.m41 = m41;
+		m.e = m41;
+		m.m12 = m12;
+		m.b = m12;
+		m.m22 = m22;
+		m.d = m22;
+		m.m32 = m32;
+		m.m42 = m42;
+		m.f = m42;
+		m.m13 = m13;
+		m.m23 = m23;
+		m.m33 = m33;
+		m.m43 = m43;
+		m.m14 = m14;
+		m.m24 = m24;
+		m.m34 = m34;
+		m.m44 = m44;
+		return m;
+	};
+	/**
+	* Creates a new `CSSMatrix` resulted from the multiplication of two matrixes
+	* and returns it. Both matrixes are not changed.
+	*
+	* @param m1 the first matrix.
+	* @param m2 the second matrix.
+	* @return the resulted matrix.
+	*/
+	const Multiply = (m1, m2) => {
+		return multiplyInto(m1, m2, new CSSMatrix());
 	};
 	/**
 	* Creates and returns a new `DOMMatrix` compatible instance
@@ -500,6 +550,11 @@
 		* * a 6/16 elements *Array*.
 		*/
 		constructor(init) {
+			if (init) {
+				if (typeof init === "string" && init.length && init !== "none") return fromString(init);
+				if (Array.isArray(init) || init instanceof Float64Array || init instanceof Float32Array) return fromArray(init);
+				if (typeof init === "object") return fromMatrix(init);
+			}
 			this.a = 1;
 			this.b = 0;
 			this.c = 0;
@@ -522,7 +577,6 @@
 			this.m42 = 0;
 			this.m43 = 0;
 			this.m44 = 1;
-			if (init) return this.setMatrixValue(init);
 			return this;
 		}
 		/**
@@ -555,13 +609,19 @@
 		* This method expects valid *matrix()* / *matrix3d()* string values, as well
 		* as other transform functions like *translateX(10px)*.
 		*
+		* The matrix is mutated in place (the same instance is returned), matching
+		* the behavior of the native `DOMMatrix.setMatrixValue()`.
+		*
 		* @param source
-		* @return the matrix instance
+		* @return the current matrix instance
 		*/
 		setMatrixValue(source) {
-			if (typeof source === "string" && source.length && source !== "none") return fromString(source);
-			if (Array.isArray(source) || source instanceof Float64Array || source instanceof Float32Array) return fromArray(source);
-			if (typeof source === "object") return fromMatrix(source);
+			if (typeof source === "string" && source.length && source !== "none") {
+				const m = fromString(source);
+				return writeValues(this, m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34, m.m41, m.m42, m.m43, m.m44);
+			}
+			if (Array.isArray(source) || source instanceof Float64Array || source instanceof Float32Array) return fromArray(source, this);
+			if (typeof source === "object") return fromMatrix(source, this);
 			return this;
 		}
 		/**
@@ -573,7 +633,31 @@
 		* @return an *Array* representation of the matrix
 		*/
 		toFloat32Array(is2D) {
-			return Float32Array.from(toArray(this, is2D));
+			return is2D ? new Float32Array([
+				this.a,
+				this.b,
+				this.c,
+				this.d,
+				this.e,
+				this.f
+			]) : new Float32Array([
+				this.m11,
+				this.m12,
+				this.m13,
+				this.m14,
+				this.m21,
+				this.m22,
+				this.m23,
+				this.m24,
+				this.m31,
+				this.m32,
+				this.m33,
+				this.m34,
+				this.m41,
+				this.m42,
+				this.m43,
+				this.m44
+			]);
 		}
 		/**
 		* Returns a *Float64Array* containing elements which comprise the matrix.
@@ -584,7 +668,31 @@
 		* @return an *Array* representation of the matrix
 		*/
 		toFloat64Array(is2D) {
-			return Float64Array.from(toArray(this, is2D));
+			return is2D ? new Float64Array([
+				this.a,
+				this.b,
+				this.c,
+				this.d,
+				this.e,
+				this.f
+			]) : new Float64Array([
+				this.m11,
+				this.m12,
+				this.m13,
+				this.m14,
+				this.m21,
+				this.m22,
+				this.m23,
+				this.m24,
+				this.m31,
+				this.m32,
+				this.m33,
+				this.m34,
+				this.m41,
+				this.m42,
+				this.m43,
+				this.m44
+			]);
 		}
 		/**
 		* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
@@ -613,7 +721,28 @@
 		toJSON() {
 			const { is2D, isIdentity } = this;
 			return {
-				...this,
+				a: this.a,
+				b: this.b,
+				c: this.c,
+				d: this.d,
+				e: this.e,
+				f: this.f,
+				m11: this.m11,
+				m12: this.m12,
+				m13: this.m13,
+				m14: this.m14,
+				m21: this.m21,
+				m22: this.m22,
+				m23: this.m23,
+				m24: this.m24,
+				m31: this.m31,
+				m32: this.m32,
+				m33: this.m33,
+				m34: this.m34,
+				m41: this.m41,
+				m42: this.m42,
+				m43: this.m43,
+				m44: this.m44,
 				is2D,
 				isIdentity
 			};
@@ -641,7 +770,14 @@
 		* @return The resulted matrix
 		*/
 		translate(x, y, z) {
-			return this.multiply(Translate(x, y ?? 0, z ?? 0));
+			const ty = y ?? 0;
+			const tz = z ?? 0;
+			const { m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 } = this;
+			const n41 = x * m11 + ty * m21 + tz * m31 + m41;
+			const n42 = x * m12 + ty * m22 + tz * m32 + m42;
+			const n43 = x * m13 + ty * m23 + tz * m33 + m43;
+			const n44 = x * m14 + ty * m24 + tz * m34 + m44;
+			return fromValues(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, n41, n42, n43, n44);
 		}
 		/**
 		* The scale method returns a new matrix which is this matrix post multiplied by
@@ -655,7 +791,10 @@
 		* @return The resulted matrix
 		*/
 		scale(x, y, z) {
-			return this.multiply(Scale(x, y ?? x, z ?? 1));
+			const sy = y ?? x;
+			const sz = z ?? 1;
+			const { m41, m42, m43, m44 } = this;
+			return fromValues(this.m11 * x, this.m12 * x, this.m13 * x, this.m14 * x, this.m21 * sy, this.m22 * sy, this.m23 * sy, this.m24 * sy, this.m31 * sz, this.m32 * sz, this.m33 * sz, this.m34 * sz, m41, m42, m43, m44);
 		}
 		/**
 		* The rotate method returns a new matrix which is this matrix post multiplied
@@ -710,7 +849,7 @@
 		* @return The resulted matrix
 		*/
 		skewX(angle) {
-			return this.multiply(SkewX(angle));
+			return this.skew(angle, 0);
 		}
 		/**
 		* Specifies a skew transformation along the `y-axis` by the given angle.
@@ -720,7 +859,7 @@
 		* @return The resulted matrix
 		*/
 		skewY(angle) {
-			return this.multiply(SkewY(angle));
+			return this.skew(0, angle);
 		}
 		/**
 		* Specifies a skew transformation along both the `x-axis` and `y-axis`.
@@ -731,7 +870,10 @@
 		* @return The resulted matrix
 		*/
 		skew(angleX, angleY) {
-			return this.multiply(Skew(angleX, angleY));
+			const tX = angleX ? Math.tan(angleX * Math.PI / 180) : 0;
+			const tY = angleY ? Math.tan(angleY * Math.PI / 180) : 0;
+			const { m11, m12, m13, m14, m21, m22, m23, m24 } = this;
+			return fromValues(m11 + tY * m21, m12 + tY * m22, m13 + tY * m23, m14 + tY * m24, tX * m11 + m21, tX * m12 + m22, tX * m13 + m23, tX * m14 + m24, this.m31, this.m32, this.m33, this.m34, this.m41, this.m42, this.m43, this.m44);
 		}
 		/**
 		* Modifies the current matrix by post-multiplying it with another matrix.
@@ -741,8 +883,7 @@
 		* @return this matrix (modified)
 		*/
 		multiplySelf(m2) {
-			const result = Multiply(this, m2);
-			Object.assign(this, result);
+			multiplyInto(this, m2, this);
 			return this;
 		}
 		/**
@@ -755,7 +896,20 @@
 		* @return this matrix (modified)
 		*/
 		translateSelf(x, y, z) {
-			return this.multiplySelf(Translate(x, y ?? 0, z ?? 0));
+			const ty = y ?? 0;
+			const tz = z ?? 0;
+			const { m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 } = this;
+			const n41 = x * m11 + ty * m21 + tz * m31 + m41;
+			const n42 = x * m12 + ty * m22 + tz * m32 + m42;
+			const n43 = x * m13 + ty * m23 + tz * m33 + m43;
+			const n44 = x * m14 + ty * m24 + tz * m34 + m44;
+			this.m41 = n41;
+			this.e = n41;
+			this.m42 = n42;
+			this.f = n42;
+			this.m43 = n43;
+			this.m44 = n44;
+			return this;
 		}
 		/**
 		* Modifies the current matrix by post-multiplying it with a scale matrix.
@@ -767,7 +921,25 @@
 		* @return this matrix (modified)
 		*/
 		scaleSelf(x, y, z) {
-			return this.multiplySelf(Scale(x, y ?? x, z ?? 1));
+			const sy = y ?? x;
+			const sz = z ?? 1;
+			this.m11 *= x;
+			this.a *= x;
+			this.m12 *= x;
+			this.b *= x;
+			this.m13 *= x;
+			this.m14 *= x;
+			this.m21 *= sy;
+			this.c *= sy;
+			this.m22 *= sy;
+			this.d *= sy;
+			this.m23 *= sy;
+			this.m24 *= sy;
+			this.m31 *= sz;
+			this.m32 *= sz;
+			this.m33 *= sz;
+			this.m34 *= sz;
+			return this;
 		}
 		/**
 		* Modifies the current matrix by post-multiplying it with a rotation matrix.
@@ -818,7 +990,7 @@
 		* @return this matrix (modified)
 		*/
 		skewXSelf(angle) {
-			return this.multiplySelf(SkewX(angle));
+			return this.skewSelf(angle, 0);
 		}
 		/**
 		* Modifies the current matrix by post-multiplying it with a skewY matrix.
@@ -828,7 +1000,7 @@
 		* @return this matrix (modified)
 		*/
 		skewYSelf(angle) {
-			return this.multiplySelf(SkewY(angle));
+			return this.skewSelf(0, angle);
 		}
 		/**
 		* Modifies the current matrix by post-multiplying it with a skew matrix.
@@ -839,7 +1011,30 @@
 		* @return this matrix (modified)
 		*/
 		skewSelf(angleX, angleY) {
-			return this.multiplySelf(Skew(angleX, angleY));
+			const tX = angleX ? Math.tan(angleX * Math.PI / 180) : 0;
+			const tY = angleY ? Math.tan(angleY * Math.PI / 180) : 0;
+			const { m11, m12, m13, m14, m21, m22, m23, m24 } = this;
+			const n11 = m11 + tY * m21;
+			const n12 = m12 + tY * m22;
+			const n13 = m13 + tY * m23;
+			const n14 = m14 + tY * m24;
+			const n21 = tX * m11 + m21;
+			const n22 = tX * m12 + m22;
+			const n23 = tX * m13 + m23;
+			const n24 = tX * m14 + m24;
+			this.m11 = n11;
+			this.a = n11;
+			this.m12 = n12;
+			this.b = n12;
+			this.m13 = n13;
+			this.m14 = n14;
+			this.m21 = n21;
+			this.c = n21;
+			this.m22 = n22;
+			this.d = n22;
+			this.m23 = n23;
+			this.m24 = n24;
+			return this;
 		}
 		/**
 		* Transforms a specified vector using the matrix, returning a new