@thednp/dommatrix 3.0.5 → 3.1.0

package/dist/dommatrix.mjs

@@ -1,6 +1,6 @@
 //#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,
@@ -25,14 +25,14 @@ const JSON_MATRIX = {
 	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,49 +45,62 @@ const isCompatibleObject = (object) => {
 * @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.`);
+	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 fromValues(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44);
 	}
+	const [M11, M12, M21, M22, M41, M42] = array;
+	return fromValues(M11, M12, 0, 0, M21, M22, 0, 0, 0, 0, 1, 0, M41, M42, 0, 1);
+};
+/**
+* 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) => {
+	const m = new CSSMatrix();
+	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;
 };
 /**
@@ -98,24 +111,7 @@ const fromArray = (array) => {
 * @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
-	]);
+	if (isCompatibleObject(m)) return fromValues(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.`);
 };
 /**
@@ -136,8 +132,13 @@ const fromString = (source) => {
 	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;
@@ -189,7 +190,8 @@ const fromString = (source) => {
 			m[method](...axeValues);
 		}
 		else throw TypeError(invalidStringError);
-	});
+	}
+	if (consumed !== str.length) throw TypeError(invalidStringError);
 	return m;
 };
 /**
@@ -407,14 +409,16 @@ const SkewY = (angle) => {
 	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;
@@ -431,24 +435,40 @@ const Multiply = (m1, m2) => {
 	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
@@ -497,6 +517,11 @@ var CSSMatrix = class {
 	* * 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;
@@ -519,7 +544,6 @@ var CSSMatrix = class {
 		this.m42 = 0;
 		this.m43 = 0;
 		this.m44 = 1;
-		if (init) return this.setMatrixValue(init);
 		return this;
 	}
 	/**
@@ -570,7 +594,31 @@ var CSSMatrix = class {
 	* @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.
@@ -581,7 +629,31 @@ var CSSMatrix = class {
 	* @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,
@@ -610,7 +682,28 @@ var CSSMatrix = class {
 	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
 		};
@@ -638,7 +731,14 @@ var CSSMatrix = class {
 	* @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
@@ -652,7 +752,10 @@ var CSSMatrix = class {
 	* @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
@@ -707,7 +810,7 @@ var CSSMatrix = class {
 	* @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.
@@ -717,7 +820,7 @@ var CSSMatrix = class {
 	* @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`.
@@ -728,7 +831,10 @@ var CSSMatrix = class {
 	* @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.
@@ -738,8 +844,7 @@ var CSSMatrix = class {
 	* @return this matrix (modified)
 	*/
 	multiplySelf(m2) {
-		const result = Multiply(this, m2);
-		Object.assign(this, result);
+		multiplyInto(this, m2, this);
 		return this;
 	}
 	/**
@@ -752,7 +857,20 @@ var CSSMatrix = class {
 	* @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.
@@ -764,7 +882,25 @@ var CSSMatrix = class {
 	* @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.
@@ -815,7 +951,7 @@ var CSSMatrix = class {
 	* @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.
@@ -825,7 +961,7 @@ var CSSMatrix = class {
 	* @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.
@@ -836,7 +972,30 @@ var CSSMatrix = class {
 	* @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