Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

dommatrix

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dommatrix - npm Package Compare versions

Comparing version 0.0.24 to 0.1.0

274

dist/dommatrix.esm.js
/*!
* DOMMatrix v0.0.24 (https://thednp.github.io/DOMMatrix/)
* Copyright 2021 © thednp
* DOMMatrix v0.1.0 (https://thednp.github.io/dommatrix/)
* Copyright 2022 © thednp
* Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
*/
// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;

@@ -19,3 +18,3 @@ // * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;

*
* @param {number[]} array an `Array` to feed values from.
* @param {CSSM.matrix | CSSM.matrix3d} array an `Array` to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -96,3 +95,3 @@ */

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m the source matrix to feed values from.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -110,3 +109,3 @@ */

}
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
throw TypeError(`CSSMatrix: "${JSON.stringify(m)}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
}

@@ -161,2 +160,3 @@

const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
// @ts-ignore -- conditions should suffice
m = m.multiply(fromArray(values));

@@ -175,3 +175,3 @@ // 3 values expected

m = m.rotate(0, 0, x);
// 4 values expected
// 3 values expected
} else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {

@@ -185,5 +185,4 @@ m = m.scale(x, y, z);

// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (prop === 'skew' && (x || (!Number.isNaN(x) && y)) && z === undefined) {
m = m.skew(x, y || 0);
} else if (/[XYZ]/.test(prop) && x && [y, z].every((n) => n === undefined) // a single value expected

@@ -198,6 +197,7 @@ && ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p))) {

const idx = ['X', 'Y', 'Z'].indexOf(axis);
const def = fn === 'scale' ? 1 : 0;
const axeValues = [
idx === 0 ? x : 0,
idx === 1 ? x : 0,
idx === 2 ? x : 0];
idx === 0 ? x : def,
idx === 1 ? x : def,
idx === 2 ? x : def];
// @ts-ignore unfortunately

@@ -214,2 +214,21 @@ m = m[fn](...axeValues);

/**
* Returns an *Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @param {boolean=} is2D *Array* representation of the matrix
* @return {CSSM.matrix | CSSM.matrix3d} an *Array* representation of the matrix
*/
function toArray(m, is2D) {
if (is2D) {
return [m.a, m.b, m.c, m.d, m.e, m.f];
}
return [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];
}
// Transform Functions

@@ -306,22 +325,17 @@ // https://www.w3.org/TR/css-transforms-1/#transform-functions

const m = new CSSMatrix();
const angle = alpha * (Math.PI / 360);
const sinA = Math.sin(angle);
const cosA = Math.cos(angle);
const sinA2 = sinA * sinA;
const length = Math.sqrt(x * x + y * y + z * z);
let X = x;
let Y = y;
let Z = z;
if (length === 0) {
// bad vector length, use something reasonable
X = 0;
Y = 0;
Z = 1;
} else {
X /= length;
Y /= length;
Z /= length;
// bad vector length, return identity
return m;
}
const X = x / length;
const Y = y / length;
const Z = z / length;
const angle = alpha * (Math.PI / 360);
const sinA = Math.sin(angle);
const cosA = Math.cos(angle);
const sinA2 = sinA * sinA;
const x2 = X * X;

@@ -382,2 +396,29 @@ const y2 = Y * Y;

/**
* Creates a new `CSSMatrix` for the shear of both the `x-axis` and`y-axis`
* matrix and returns it. This method is equivalent to the CSS `skew()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
*
* @param {number} angleX the X-angle in degrees.
* @param {number} angleY the Y-angle in degrees.
* @return {CSSMatrix} the resulted matrix.
*/
function Skew(angleX, angleY) {
const m = new CSSMatrix();
if (angleX) {
const radX = (angleX * Math.PI) / 180;
const tX = Math.tan(radX);
m.m21 = tX;
m.c = tX;
}
if (angleY) {
const radY = (angleY * Math.PI) / 180;
const tY = Math.tan(radY);
m.m12 = tY;
m.b = tY;
}
return m;
}
/**
* Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and

@@ -392,8 +433,3 @@ * returns it. This method is equivalent to the CSS `skewX()` function.

function SkewX(angle) {
const m = new CSSMatrix();
const radA = (angle * Math.PI) / 180;
const t = Math.tan(radA);
m.m21 = t;
m.c = t;
return m;
return Skew(angle, 0);
}

@@ -411,8 +447,3 @@

function SkewY(angle) {
const m = new CSSMatrix();
const radA = (angle * Math.PI) / 180;
const t = Math.tan(radA);
m.m12 = t;
m.b = t;
return m;
return Skew(0, angle);
}

@@ -424,4 +455,4 @@

*
* @param {CSSMatrix} m1 the first matrix.
* @param {CSSMatrix} m2 the second matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m1 the first matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 the second matrix.
* @return {CSSMatrix} the resulted matrix.

@@ -496,11 +527,2 @@ */

/**
* Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set isIdentity(value) {
this.isIdentity = value;
}
/**
* A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity

@@ -532,11 +554,2 @@ * matrix is one in which every value is 0 except those on the main diagonal from top-left

/**
* Sets a new `Boolean` flag value for `this.is2D` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set is2D(value) {
this.is2D = value;
}
/**
* The `setMatrixValue` method replaces the existing matrix with one computed

@@ -552,3 +565,3 @@ * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`

*
* @param {string | number[] | CSSMatrix | DOMMatrix} source
* @param {string | CSSM.matrix | CSSM.matrix3d | CSSMatrix | DOMMatrix | CSSM.JSONMatrix} source
* @return {CSSMatrix} the matrix instance

@@ -559,14 +572,17 @@ */

// [Arguments list | Array] come here
// CSS transform string source - TransformList first
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// [Arguments list | Array] come second
if ([Array, Float64Array, Float32Array].some((a) => source instanceof a)) {
// @ts-ignore
return fromArray(source);
}
// CSS transform string source - TransformList
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON)
if (typeof source === 'object') {
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON) last
if ([CSSMatrix, DOMMatrix, Object].some((a) => source instanceof a)) {
// @ts-ignore
return fromMatrix(source);
}
return m;

@@ -576,24 +592,23 @@ }

/**
* Returns an *Array* containing elements which comprise the matrix.
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` property.
* depending on the value of the `is2D` parameter.
*
* @return {number[]} an *Array* representation of the matrix
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float32Array} an *Array* representation of the matrix
*/
toArray() {
const m = this;
const pow = (10 ** 6);
let result;
toFloat32Array(is2D) {
return Float32Array.from(toArray(this, is2D));
}
if (m.is2D) {
result = [m.a, m.b, m.c, m.d, m.e, m.f];
} else {
result = [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];
}
// clean up the numbers
// eslint-disable-next-line -- no-bitwise
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow));
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float64Array} an *Array* representation of the matrix
*/
toFloat64Array(is2D) {
return Float64Array.from(toArray(this, is2D));
}

@@ -612,4 +627,5 @@

const m = this;
const values = m.toArray();
const type = m.is2D ? 'matrix' : 'matrix3d';
const { is2D } = m;
const values = m.toFloat64Array(is2D).join(', ');
const type = is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;

@@ -626,3 +642,3 @@ }

*
* @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.
* @return {CSSM.JSONMatrix} an *Object* with all matrix values.
*/

@@ -640,3 +656,3 @@ toJSON() {

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m2 CSSMatrix
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 CSSMatrix
* @return {CSSMatrix} The resulted matrix.

@@ -663,4 +679,4 @@ */

let Z = z;
if (Y === undefined) Y = 0;
if (Z === undefined) Z = 0;
if (Y === undefined) Y = 0;
return Multiply(this, Translate(X, Y, Z));

@@ -704,6 +720,9 @@ }

let RX = rx;
let RY = ry;
let RZ = rz;
if (RY === undefined) RY = 0;
if (RZ === undefined) { RZ = RX; RX = 0; }
let RY = ry || 0;
let RZ = rz || 0;
if (typeof rx === 'number' && ry === undefined && rz === undefined) {
RZ = RX; RX = 0; RY = 0;
}
return Multiply(this, Rotate(RX, RY, RZ));

@@ -725,3 +744,3 @@ }

rotateAxisAngle(x, y, z, angle) {
if ([x, y, z, angle].some((n) => Number.isNaN(n))) {
if ([x, y, z, angle].some((n) => Number.isNaN(+n))) {
throw new TypeError('CSSMatrix: expecting 4 values');

@@ -755,27 +774,11 @@ }

/**
* Transforms a specified point using the matrix, returning a new
* Tuple *Object* comprising of the transformed point.
* Neither the matrix nor the original point are altered.
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @copyright thednp © 2021
*
* @param {CSSMatrix.PointTuple | DOMPoint} v Tuple or DOMPoint
* @return {CSSMatrix.PointTuple} the resulting Tuple
* @param {number} angleX The X-angle amount in degrees to skew.
* @param {number} angleY The angle amount in degrees to skew.
* @return {CSSMatrix} The resulted matrix
*/
transformPoint(v) {
const M = this;
let 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,
};
skew(angleX, angleY) {
return Multiply(this, Skew(angleX, angleY));
}

@@ -788,18 +791,21 @@

*
* @param {CSSMatrix.PointTuple} t Tuple with `{x,y,z,w}` components
* @return {CSSMatrix.PointTuple} the resulting Tuple
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @param {CSSM.PointTuple | DOMPoint} t Tuple with `{x,y,z,w}` components
* @return {CSSM.PointTuple | DOMPoint} the resulting Tuple
*/
transform(t) {
transformPoint(t) {
const m = this;
const x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w;
const y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w;
const z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w;
const 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,
};
const x = m.m11 * t.x + m.m21 * t.y + m.m31 * t.z + m.m41 * t.w;
const y = m.m12 * t.x + m.m22 * t.y + m.m32 * t.z + m.m42 * t.w;
const z = m.m13 * t.x + m.m23 * t.y + m.m33 * t.z + m.m43 * t.w;
const w = m.m14 * t.x + m.m24 * t.y + m.m34 * t.z + m.m44 * t.w;
return t instanceof DOMPoint
? new DOMPoint(x, y, z, w)
: {
x, y, z, w,
};
}

@@ -817,2 +823,3 @@ }

SkewY,
Skew,
Multiply,

@@ -822,5 +829,6 @@ fromArray,

fromString,
toArray,
});
var version = "0.0.24";
var version = "0.1.0";

@@ -827,0 +835,0 @@ // @ts-ignore

4

dist/dommatrix.esm.min.js

@@ -1,2 +0,2 @@

// DOMMatrix v0.0.24 | thednp © 2021 | MIT-License
function m(m){const t=new l,e=Array.from(m);if(!e.every(m=>!Number.isNaN(m)))throw TypeError(`CSSMatrix: "${m}" must only have numbers.`);if(16===e.length){const[m,r,s,n,i,a,o,c,l,u,h,f,y,d,w,p]=e;t.m11=m,t.a=m,t.m21=i,t.c=i,t.m31=l,t.m41=y,t.e=y,t.m12=r,t.b=r,t.m22=a,t.d=a,t.m32=u,t.m42=d,t.f=d,t.m13=s,t.m23=o,t.m33=h,t.m43=w,t.m14=n,t.m24=c,t.m34=f,t.m44=p}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");{const[m,r,s,n,i,a]=e;t.m11=m,t.a=m,t.m12=r,t.b=r,t.m21=s,t.c=s,t.m22=n,t.d=n,t.m41=i,t.e=i,t.m42=a,t.f=a}}return t}function t(t){const e=Object.keys(new l);if("object"==typeof t&&e.every(m=>m in t))return 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]);throw TypeError(`CSSMatrix: "${t}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`)}function e(t){if("string"!=typeof t)throw TypeError(`CSSMatrix: "${t}" is not a string.`);const e=String(t).replace(/\s/g,"");let r=new l;const s=`CSSMatrix: invalid transform string "${t}"`;return e.split(")").filter(m=>m).forEach(t=>{const[e,n]=t.split("(");if(!n)throw TypeError(s);const i=n.split(",").map(m=>m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)),[a,o,c,l]=i,u=[a,o,c],h=[a,o,c,l];if("perspective"===e&&a&&[o,c].every(m=>void 0===m))r.m34=-1/a;else if(e.includes("matrix")&&[6,16].includes(i.length)&&i.every(m=>!Number.isNaN(+m))){const t=i.map(m=>Math.abs(m)<1e-6?0:m);r=r.multiply(m(t))}else if("translate3d"===e&&u.every(m=>!Number.isNaN(+m)))r=r.translate(a,o,c);else if("translate"===e&&a&&void 0===c)r=r.translate(a,o||0,0);else if("rotate3d"===e&&h.every(m=>!Number.isNaN(+m))&&l)r=r.rotateAxisAngle(a,o,c,l);else if("rotate"===e&&a&&[o,c].every(m=>void 0===m))r=r.rotate(0,0,a);else if("scale3d"===e&&u.every(m=>!Number.isNaN(+m))&&u.some(m=>1!==m))r=r.scale(a,o,c);else if("scale"!==e||Number.isNaN(a)||1===a||void 0!==c)if("skew"===e&&a&&void 0===c)r=r.skewX(a),r=o?r.skewY(o):r;else{if(!(/[XYZ]/.test(e)&&a&&[o,c].every(m=>void 0===m)&&["translate","rotate","scale","skew"].some(m=>e.includes(m))))throw TypeError(s);if(["skewX","skewY"].includes(e))r=r[e](a);else{const m=e.replace(/[XYZ]/,""),t=e.replace(m,""),s=["X","Y","Z"].indexOf(t),n=[0===s?a:0,1===s?a:0,2===s?a:0];r=r[m](...n)}}else{const m=Number.isNaN(+o)?a:o;r=r.scale(a,m,1)}}),r}function r(m,t,e){const r=new l;return r.m41=m,r.e=m,r.m42=t,r.f=t,r.m43=e,r}function s(m,t,e){const r=new l,s=Math.PI/180,n=m*s,i=t*s,a=e*s,o=Math.cos(n),c=-Math.sin(n),u=Math.cos(i),h=-Math.sin(i),f=Math.cos(a),y=-Math.sin(a),d=u*f,w=-u*y;r.m11=d,r.a=d,r.m12=w,r.b=w,r.m13=h;const p=c*h*f+o*y;r.m21=p,r.c=p;const M=o*f-c*h*y;return r.m22=M,r.d=M,r.m23=-c*u,r.m31=c*y-o*h*f,r.m32=c*f+o*h*y,r.m33=o*u,r}function n(m,t,e,r){const s=new l,n=r*(Math.PI/360),i=Math.sin(n),a=Math.cos(n),o=i*i,c=Math.sqrt(m*m+t*t+e*e);let u=m,h=t,f=e;0===c?(u=0,h=0,f=1):(u/=c,h/=c,f/=c);const y=u*u,d=h*h,w=f*f,p=1-2*(d+w)*o;s.m11=p,s.a=p;const M=2*(u*h*o+f*i*a);s.m12=M,s.b=M,s.m13=2*(u*f*o-h*i*a);const x=2*(h*u*o-f*i*a);s.m21=x,s.c=x;const v=1-2*(w+y)*o;return s.m22=v,s.d=v,s.m23=2*(h*f*o+u*i*a),s.m31=2*(f*u*o+h*i*a),s.m32=2*(f*h*o-u*i*a),s.m33=1-2*(y+d)*o,s}function i(m,t,e){const r=new l;return r.m11=m,r.a=m,r.m22=t,r.d=t,r.m33=e,r}function a(m){const t=new l,e=m*Math.PI/180,r=Math.tan(e);return t.m21=r,t.c=r,t}function o(m){const t=new l,e=m*Math.PI/180,r=Math.tan(e);return t.m12=r,t.b=r,t}function c(t,e){return m([e.m11*t.m11+e.m12*t.m21+e.m13*t.m31+e.m14*t.m41,e.m11*t.m12+e.m12*t.m22+e.m13*t.m32+e.m14*t.m42,e.m11*t.m13+e.m12*t.m23+e.m13*t.m33+e.m14*t.m43,e.m11*t.m14+e.m12*t.m24+e.m13*t.m34+e.m14*t.m44,e.m21*t.m11+e.m22*t.m21+e.m23*t.m31+e.m24*t.m41,e.m21*t.m12+e.m22*t.m22+e.m23*t.m32+e.m24*t.m42,e.m21*t.m13+e.m22*t.m23+e.m23*t.m33+e.m24*t.m43,e.m21*t.m14+e.m22*t.m24+e.m23*t.m34+e.m24*t.m44,e.m31*t.m11+e.m32*t.m21+e.m33*t.m31+e.m34*t.m41,e.m31*t.m12+e.m32*t.m22+e.m33*t.m32+e.m34*t.m42,e.m31*t.m13+e.m32*t.m23+e.m33*t.m33+e.m34*t.m43,e.m31*t.m14+e.m32*t.m24+e.m33*t.m34+e.m34*t.m44,e.m41*t.m11+e.m42*t.m21+e.m43*t.m31+e.m44*t.m41,e.m41*t.m12+e.m42*t.m22+e.m43*t.m32+e.m44*t.m42,e.m41*t.m13+e.m42*t.m23+e.m43*t.m33+e.m44*t.m43,e.m41*t.m14+e.m42*t.m24+e.m43*t.m34+e.m44*t.m44])}class l{constructor(...m){const t=this;if(t.a=1,t.b=0,t.c=0,t.d=1,t.e=0,t.f=0,t.m11=1,t.m12=0,t.m13=0,t.m14=0,t.m21=0,t.m22=1,t.m23=0,t.m24=0,t.m31=0,t.m32=0,t.m33=1,t.m34=0,t.m41=0,t.m42=0,t.m43=0,t.m44=1,m&&m.length){const e=[16,6].some(t=>t===m.length)?m:m[0];return t.setMatrixValue(e)}return t}set isIdentity(m){this.isIdentity=m}get isIdentity(){const 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}get is2D(){const m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44}set is2D(m){this.is2D=m}setMatrixValue(r){return[Array,Float64Array,Float32Array].some(m=>r instanceof m)?m(r):"string"==typeof r&&r.length&&"none"!==r?e(r):"object"==typeof r?t(r):this}toArray(){const m=this;let t;return t=m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[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],t.map(m=>Math.abs(m)<1e-6?0:(m*10**6>>0)/10**6)}toString(){const m=this.toArray();return`${this.is2D?"matrix":"matrix3d"}(${m})`}toJSON(){const{is2D:m,isIdentity:t}=this;return{...this,is2D:m,isIdentity:t}}multiply(m){return c(this,m)}translate(m,t,e){let s=t,n=e;return void 0===n&&(n=0),void 0===s&&(s=0),c(this,r(m,s,n))}scale(m,t,e){let r=t,s=e;return void 0===r&&(r=m),void 0===s&&(s=1),c(this,i(m,r,s))}rotate(m,t,e){let r=m,n=t,i=e;return void 0===n&&(n=0),void 0===i&&(i=r,r=0),c(this,s(r,n,i))}rotateAxisAngle(m,t,e,r){if([m,t,e,r].some(m=>Number.isNaN(m)))throw new TypeError("CSSMatrix: expecting 4 values");return c(this,n(m,t,e,r))}skewX(m){return c(this,a(m))}skewY(m){return c(this,o(m))}transformPoint(m){let t=r(m.x,m.y,m.z);return t.m44=m.w||1,t=this.multiply(t),{x:t.m41,y:t.m42,z:t.m43,w:t.m44}}transform(m){const t=this,e=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,s=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,n=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/n,y:r/n,z:s/n,w:n}}}Object.assign(l,{Translate:r,Rotate:s,RotateAxisAngle:n,Scale:i,SkewX:a,SkewY:o,Multiply:c,fromArray:m,fromMatrix:t,fromString:e});Object.assign(l,{Version:"0.0.24"});export{l as default};
// DOMMatrix v0.1.0 | thednp © 2022 | MIT-License
function m(m){const t=new f,e=Array.from(m);if(!e.every(m=>!Number.isNaN(m)))throw TypeError(`CSSMatrix: "${m}" must only have numbers.`);if(16===e.length){const[m,r,n,s,i,o,a,c,l,u,f,h,y,d,w,M]=e;t.m11=m,t.a=m,t.m21=i,t.c=i,t.m31=l,t.m41=y,t.e=y,t.m12=r,t.b=r,t.m22=o,t.d=o,t.m32=u,t.m42=d,t.f=d,t.m13=n,t.m23=a,t.m33=f,t.m43=w,t.m14=s,t.m24=c,t.m34=h,t.m44=M}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");{const[m,r,n,s,i,o]=e;t.m11=m,t.a=m,t.m12=r,t.b=r,t.m21=n,t.c=n,t.m22=s,t.d=s,t.m41=i,t.e=i,t.m42=o,t.f=o}}return t}function t(t){const e=Object.keys(new f);if("object"==typeof t&&e.every(m=>m in t))return 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]);throw TypeError(`CSSMatrix: "${JSON.stringify(t)}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`)}function e(t){if("string"!=typeof t)throw TypeError(`CSSMatrix: "${t}" is not a string.`);const e=String(t).replace(/\s/g,"");let r=new f;const n=`CSSMatrix: invalid transform string "${t}"`;return e.split(")").filter(m=>m).forEach(t=>{const[e,s]=t.split("(");if(!s)throw TypeError(n);const i=s.split(",").map(m=>m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)),[o,a,c,l]=i,u=[o,a,c],f=[o,a,c,l];if("perspective"===e&&o&&[a,c].every(m=>void 0===m))r.m34=-1/o;else if(e.includes("matrix")&&[6,16].includes(i.length)&&i.every(m=>!Number.isNaN(+m))){const t=i.map(m=>Math.abs(m)<1e-6?0:m);r=r.multiply(m(t))}else if("translate3d"===e&&u.every(m=>!Number.isNaN(+m)))r=r.translate(o,a,c);else if("translate"===e&&o&&void 0===c)r=r.translate(o,a||0,0);else if("rotate3d"===e&&f.every(m=>!Number.isNaN(+m))&&l)r=r.rotateAxisAngle(o,a,c,l);else if("rotate"===e&&o&&[a,c].every(m=>void 0===m))r=r.rotate(0,0,o);else if("scale3d"===e&&u.every(m=>!Number.isNaN(+m))&&u.some(m=>1!==m))r=r.scale(o,a,c);else if("scale"!==e||Number.isNaN(o)||1===o||void 0!==c)if("skew"===e&&(o||!Number.isNaN(o)&&a)&&void 0===c)r=r.skew(o,a||0);else{if(!(/[XYZ]/.test(e)&&o&&[a,c].every(m=>void 0===m)&&["translate","rotate","scale","skew"].some(m=>e.includes(m))))throw TypeError(n);if(["skewX","skewY"].includes(e))r=r[e](o);else{const m=e.replace(/[XYZ]/,""),t=e.replace(m,""),n=["X","Y","Z"].indexOf(t),s="scale"===m?1:0,i=[0===n?o:s,1===n?o:s,2===n?o:s];r=r[m](...i)}}else{const m=Number.isNaN(+a)?o:a;r=r.scale(o,m,1)}}),r}function r(m,t){return t?[m.a,m.b,m.c,m.d,m.e,m.f]:[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]}function n(m,t,e){const r=new f;return r.m41=m,r.e=m,r.m42=t,r.f=t,r.m43=e,r}function s(m,t,e){const r=new f,n=Math.PI/180,s=m*n,i=t*n,o=e*n,a=Math.cos(s),c=-Math.sin(s),l=Math.cos(i),u=-Math.sin(i),h=Math.cos(o),y=-Math.sin(o),d=l*h,w=-l*y;r.m11=d,r.a=d,r.m12=w,r.b=w,r.m13=u;const M=c*u*h+a*y;r.m21=M,r.c=M;const p=a*h-c*u*y;return r.m22=p,r.d=p,r.m23=-c*l,r.m31=c*y-a*u*h,r.m32=c*h+a*u*y,r.m33=a*l,r}function i(m,t,e,r){const n=new f,s=Math.sqrt(m*m+t*t+e*e);if(0===s)return n;const i=m/s,o=t/s,a=e/s,c=r*(Math.PI/360),l=Math.sin(c),u=Math.cos(c),h=l*l,y=i*i,d=o*o,w=a*a,M=1-2*(d+w)*h;n.m11=M,n.a=M;const p=2*(i*o*h+a*l*u);n.m12=p,n.b=p,n.m13=2*(i*a*h-o*l*u);const N=2*(o*i*h-a*l*u);n.m21=N,n.c=N;const x=1-2*(w+y)*h;return n.m22=x,n.d=x,n.m23=2*(o*a*h+i*l*u),n.m31=2*(a*i*h+o*l*u),n.m32=2*(a*o*h-i*l*u),n.m33=1-2*(y+d)*h,n}function o(m,t,e){const r=new f;return r.m11=m,r.a=m,r.m22=t,r.d=t,r.m33=e,r}function a(m,t){const e=new f;if(m){const t=m*Math.PI/180,r=Math.tan(t);e.m21=r,e.c=r}if(t){const m=t*Math.PI/180,r=Math.tan(m);e.m12=r,e.b=r}return e}function c(m){return a(m,0)}function l(m){return a(0,m)}function u(t,e){return m([e.m11*t.m11+e.m12*t.m21+e.m13*t.m31+e.m14*t.m41,e.m11*t.m12+e.m12*t.m22+e.m13*t.m32+e.m14*t.m42,e.m11*t.m13+e.m12*t.m23+e.m13*t.m33+e.m14*t.m43,e.m11*t.m14+e.m12*t.m24+e.m13*t.m34+e.m14*t.m44,e.m21*t.m11+e.m22*t.m21+e.m23*t.m31+e.m24*t.m41,e.m21*t.m12+e.m22*t.m22+e.m23*t.m32+e.m24*t.m42,e.m21*t.m13+e.m22*t.m23+e.m23*t.m33+e.m24*t.m43,e.m21*t.m14+e.m22*t.m24+e.m23*t.m34+e.m24*t.m44,e.m31*t.m11+e.m32*t.m21+e.m33*t.m31+e.m34*t.m41,e.m31*t.m12+e.m32*t.m22+e.m33*t.m32+e.m34*t.m42,e.m31*t.m13+e.m32*t.m23+e.m33*t.m33+e.m34*t.m43,e.m31*t.m14+e.m32*t.m24+e.m33*t.m34+e.m34*t.m44,e.m41*t.m11+e.m42*t.m21+e.m43*t.m31+e.m44*t.m41,e.m41*t.m12+e.m42*t.m22+e.m43*t.m32+e.m44*t.m42,e.m41*t.m13+e.m42*t.m23+e.m43*t.m33+e.m44*t.m43,e.m41*t.m14+e.m42*t.m24+e.m43*t.m34+e.m44*t.m44])}class f{constructor(...m){const t=this;if(t.a=1,t.b=0,t.c=0,t.d=1,t.e=0,t.f=0,t.m11=1,t.m12=0,t.m13=0,t.m14=0,t.m21=0,t.m22=1,t.m23=0,t.m24=0,t.m31=0,t.m32=0,t.m33=1,t.m34=0,t.m41=0,t.m42=0,t.m43=0,t.m44=1,m&&m.length){const e=[16,6].some(t=>t===m.length)?m:m[0];return t.setMatrixValue(e)}return t}get isIdentity(){const 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}get is2D(){const m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44}setMatrixValue(r){return"string"==typeof r&&r.length&&"none"!==r?e(r):[Array,Float64Array,Float32Array].some(m=>r instanceof m)?m(r):[f,DOMMatrix,Object].some(m=>r instanceof m)?t(r):this}toFloat32Array(m){return Float32Array.from(r(this,m))}toFloat64Array(m){return Float64Array.from(r(this,m))}toString(){const{is2D:m}=this;return`${m?"matrix":"matrix3d"}(${this.toFloat64Array(m).join(", ")})`}toJSON(){const{is2D:m,isIdentity:t}=this;return{...this,is2D:m,isIdentity:t}}multiply(m){return u(this,m)}translate(m,t,e){let r=t,s=e;return void 0===r&&(r=0),void 0===s&&(s=0),u(this,n(m,r,s))}scale(m,t,e){let r=t,n=e;return void 0===r&&(r=m),void 0===n&&(n=1),u(this,o(m,r,n))}rotate(m,t,e){let r=m,n=t||0,i=e||0;return"number"==typeof m&&void 0===t&&void 0===e&&(i=r,r=0,n=0),u(this,s(r,n,i))}rotateAxisAngle(m,t,e,r){if([m,t,e,r].some(m=>Number.isNaN(+m)))throw new TypeError("CSSMatrix: expecting 4 values");return u(this,i(m,t,e,r))}skewX(m){return u(this,c(m))}skewY(m){return u(this,l(m))}skew(m,t){return u(this,a(m,t))}transformPoint(m){const t=this,e=t.m11*m.x+t.m21*m.y+t.m31*m.z+t.m41*m.w,r=t.m12*m.x+t.m22*m.y+t.m32*m.z+t.m42*m.w,n=t.m13*m.x+t.m23*m.y+t.m33*m.z+t.m43*m.w,s=t.m14*m.x+t.m24*m.y+t.m34*m.z+t.m44*m.w;return m instanceof DOMPoint?new DOMPoint(e,r,n,s):{x:e,y:r,z:n,w:s}}}Object.assign(f,{Translate:n,Rotate:s,RotateAxisAngle:i,Scale:o,SkewX:c,SkewY:l,Skew:a,Multiply:u,fromArray:m,fromMatrix:t,fromString:e,toArray:r});Object.assign(f,{Version:"0.1.0"});export{f as default};

274

dist/dommatrix.js
/*!
* DOMMatrix v0.0.24 (https://thednp.github.io/DOMMatrix/)
* Copyright 2021 © thednp
* DOMMatrix v0.1.0 (https://thednp.github.io/dommatrix/)
* Copyright 2022 © thednp
* Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)

@@ -13,3 +13,2 @@ */

// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;

@@ -26,3 +25,3 @@ // * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;

*
* @param {number[]} array an `Array` to feed values from.
* @param {CSSM.matrix | CSSM.matrix3d} array an `Array` to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -120,3 +119,3 @@ */

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m the source matrix to feed values from.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -134,3 +133,3 @@ */

}
throw TypeError(("CSSMatrix: \"" + m + "\" is not a DOMMatrix / CSSMatrix / JSON compatible object."));
throw TypeError(("CSSMatrix: \"" + (JSON.stringify(m)) + "\" is not a DOMMatrix / CSSMatrix / JSON compatible object."));
}

@@ -190,2 +189,3 @@

var values = components.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : n); });
// @ts-ignore -- conditions should suffice
m = m.multiply(fromArray(values));

@@ -204,3 +204,3 @@ // 3 values expected

m = m.rotate(0, 0, x);
// 4 values expected
// 3 values expected
} else if (prop === 'scale3d' && xyz.every(function (n) { return !Number.isNaN(+n); }) && xyz.some(function (n) { return n !== 1; })) {

@@ -214,5 +214,4 @@ m = m.scale(x, y, z);

// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (prop === 'skew' && (x || (!Number.isNaN(x) && y)) && z === undefined) {
m = m.skew(x, y || 0);
} else if (/[XYZ]/.test(prop) && x && [y, z].every(function (n) { return n === undefined; }) // a single value expected

@@ -227,6 +226,7 @@ && ['translate', 'rotate', 'scale', 'skew'].some(function (p) { return prop.includes(p); })) {

var idx = ['X', 'Y', 'Z'].indexOf(axis);
var def = fn === 'scale' ? 1 : 0;
var axeValues = [
idx === 0 ? x : 0,
idx === 1 ? x : 0,
idx === 2 ? x : 0];
idx === 0 ? x : def,
idx === 1 ? x : def,
idx === 2 ? x : def];
// @ts-ignore unfortunately

@@ -243,2 +243,21 @@ m = m[fn].apply(m, axeValues);

/**
* Returns an *Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @param {boolean=} is2D *Array* representation of the matrix
* @return {CSSM.matrix | CSSM.matrix3d} an *Array* representation of the matrix
*/
function toArray(m, is2D) {
if (is2D) {
return [m.a, m.b, m.c, m.d, m.e, m.f];
}
return [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];
}
// Transform Functions

@@ -335,22 +354,17 @@ // https://www.w3.org/TR/css-transforms-1/#transform-functions

var m = new CSSMatrix();
var angle = alpha * (Math.PI / 360);
var sinA = Math.sin(angle);
var cosA = Math.cos(angle);
var sinA2 = sinA * sinA;
var length = Math.sqrt(x * x + y * y + z * z);
var X = x;
var Y = y;
var Z = z;
if (length === 0) {
// bad vector length, use something reasonable
X = 0;
Y = 0;
Z = 1;
} else {
X /= length;
Y /= length;
Z /= length;
// bad vector length, return identity
return m;
}
var X = x / length;
var Y = y / length;
var Z = z / length;
var angle = alpha * (Math.PI / 360);
var sinA = Math.sin(angle);
var cosA = Math.cos(angle);
var sinA2 = sinA * sinA;
var x2 = X * X;

@@ -411,2 +425,29 @@ var y2 = Y * Y;

/**
* Creates a new `CSSMatrix` for the shear of both the `x-axis` and`y-axis`
* matrix and returns it. This method is equivalent to the CSS `skew()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
*
* @param {number} angleX the X-angle in degrees.
* @param {number} angleY the Y-angle in degrees.
* @return {CSSMatrix} the resulted matrix.
*/
function Skew(angleX, angleY) {
var m = new CSSMatrix();
if (angleX) {
var radX = (angleX * Math.PI) / 180;
var tX = Math.tan(radX);
m.m21 = tX;
m.c = tX;
}
if (angleY) {
var radY = (angleY * Math.PI) / 180;
var tY = Math.tan(radY);
m.m12 = tY;
m.b = tY;
}
return m;
}
/**
* Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and

@@ -421,8 +462,3 @@ * returns it. This method is equivalent to the CSS `skewX()` function.

function SkewX(angle) {
var m = new CSSMatrix();
var radA = (angle * Math.PI) / 180;
var t = Math.tan(radA);
m.m21 = t;
m.c = t;
return m;
return Skew(angle, 0);
}

@@ -440,8 +476,3 @@

function SkewY(angle) {
var m = new CSSMatrix();
var radA = (angle * Math.PI) / 180;
var t = Math.tan(radA);
m.m12 = t;
m.b = t;
return m;
return Skew(0, angle);
}

@@ -453,4 +484,4 @@

*
* @param {CSSMatrix} m1 the first matrix.
* @param {CSSMatrix} m2 the second matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m1 the first matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 the second matrix.
* @return {CSSMatrix} the resulted matrix.

@@ -522,11 +553,2 @@ */

/**
* Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
prototypeAccessors.isIdentity.set = function (value) {
this.isIdentity = value;
};
/**
* A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity

@@ -558,11 +580,2 @@ * matrix is one in which every value is 0 except those on the main diagonal from top-left

/**
* Sets a new `Boolean` flag value for `this.is2D` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
prototypeAccessors.is2D.set = function (value) {
this.is2D = value;
};
/**
* The `setMatrixValue` method replaces the existing matrix with one computed

@@ -578,3 +591,3 @@ * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`

*
* @param {string | number[] | CSSMatrix | DOMMatrix} source
* @param {string | CSSM.matrix | CSSM.matrix3d | CSSMatrix | DOMMatrix | CSSM.JSONMatrix} source
* @return {CSSMatrix} the matrix instance

@@ -585,14 +598,17 @@ */

// [Arguments list | Array] come here
// CSS transform string source - TransformList first
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// [Arguments list | Array] come second
if ([Array, Float64Array, Float32Array].some(function (a) { return source instanceof a; })) {
// @ts-ignore
return fromArray(source);
}
// CSS transform string source - TransformList
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON)
if (typeof source === 'object') {
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON) last
if ([CSSMatrix, DOMMatrix, Object].some(function (a) { return source instanceof a; })) {
// @ts-ignore
return fromMatrix(source);
}
return m;

@@ -602,24 +618,23 @@ };

/**
* Returns an *Array* containing elements which comprise the matrix.
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` property.
* depending on the value of the `is2D` parameter.
*
* @return {number[]} an *Array* representation of the matrix
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float32Array} an *Array* representation of the matrix
*/
CSSMatrix.prototype.toArray = function toArray () {
var m = this;
var pow = (Math.pow( 10, 6 ));
var result;
CSSMatrix.prototype.toFloat32Array = function toFloat32Array (is2D) {
return Float32Array.from(toArray(this, is2D));
};
if (m.is2D) {
result = [m.a, m.b, m.c, m.d, m.e, m.f];
} else {
result = [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];
}
// clean up the numbers
// eslint-disable-next-line -- no-bitwise
return result.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow); });
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float64Array} an *Array* representation of the matrix
*/
CSSMatrix.prototype.toFloat64Array = function toFloat64Array (is2D) {
return Float64Array.from(toArray(this, is2D));
};

@@ -638,4 +653,5 @@

var m = this;
var values = m.toArray();
var type = m.is2D ? 'matrix' : 'matrix3d';
var is2D = m.is2D;
var values = m.toFloat64Array(is2D).join(', ');
var type = is2D ? 'matrix' : 'matrix3d';
return (type + "(" + values + ")");

@@ -652,3 +668,3 @@ };

*
* @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.
* @return {CSSM.JSONMatrix} an *Object* with all matrix values.
*/

@@ -667,3 +683,3 @@ CSSMatrix.prototype.toJSON = function toJSON () {

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m2 CSSMatrix
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 CSSMatrix
* @return {CSSMatrix} The resulted matrix.

@@ -690,4 +706,4 @@ */

var Z = z;
if (Y === undefined) { Y = 0; }
if (Z === undefined) { Z = 0; }
if (Y === undefined) { Y = 0; }
return Multiply(this, Translate(X, Y, Z));

@@ -731,6 +747,9 @@ };

var RX = rx;
var RY = ry;
var RZ = rz;
if (RY === undefined) { RY = 0; }
if (RZ === undefined) { RZ = RX; RX = 0; }
var RY = ry || 0;
var RZ = rz || 0;
if (typeof rx === 'number' && ry === undefined && rz === undefined) {
RZ = RX; RX = 0; RY = 0;
}
return Multiply(this, Rotate(RX, RY, RZ));

@@ -752,3 +771,3 @@ };

CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle) {
if ([x, y, z, angle].some(function (n) { return Number.isNaN(n); })) {
if ([x, y, z, angle].some(function (n) { return Number.isNaN(+n); })) {
throw new TypeError('CSSMatrix: expecting 4 values');

@@ -782,27 +801,11 @@ }

/**
* Transforms a specified point using the matrix, returning a new
* Tuple *Object* comprising of the transformed point.
* Neither the matrix nor the original point are altered.
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @copyright thednp © 2021
*
* @param {CSSMatrix.PointTuple | DOMPoint} v Tuple or DOMPoint
* @return {CSSMatrix.PointTuple} the resulting Tuple
* @param {number} angleX The X-angle amount in degrees to skew.
* @param {number} angleY The angle amount in degrees to skew.
* @return {CSSMatrix} The resulted matrix
*/
CSSMatrix.prototype.transformPoint = function transformPoint (v) {
var M = this;
var 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,
};
CSSMatrix.prototype.skew = function skew (angleX, angleY) {
return Multiply(this, Skew(angleX, angleY));
};

@@ -815,18 +818,21 @@

*
* @param {CSSMatrix.PointTuple} t Tuple with `{x,y,z,w}` components
* @return {CSSMatrix.PointTuple} the resulting Tuple
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @param {CSSM.PointTuple | DOMPoint} t Tuple with `{x,y,z,w}` components
* @return {CSSM.PointTuple | DOMPoint} the resulting Tuple
*/
CSSMatrix.prototype.transform = function transform (t) {
CSSMatrix.prototype.transformPoint = function transformPoint (t) {
var m = this;
var x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w;
var y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w;
var z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w;
var 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,
};
var x = m.m11 * t.x + m.m21 * t.y + m.m31 * t.z + m.m41 * t.w;
var y = m.m12 * t.x + m.m22 * t.y + m.m32 * t.z + m.m42 * t.w;
var z = m.m13 * t.x + m.m23 * t.y + m.m33 * t.z + m.m43 * t.w;
var w = m.m14 * t.x + m.m24 * t.y + m.m34 * t.z + m.m44 * t.w;
return t instanceof DOMPoint
? new DOMPoint(x, y, z, w)
: {
x: x, y: y, z: z, w: w,
};
};

@@ -845,2 +851,3 @@

SkewY: SkewY,
Skew: Skew,
Multiply: Multiply,

@@ -850,5 +857,6 @@ fromArray: fromArray,

fromString: fromString,
toArray: toArray,
});
var version = "0.0.24";
var version = "0.1.0";

@@ -855,0 +863,0 @@ // @ts-ignore

4

dist/dommatrix.min.js

@@ -1,2 +0,2 @@

// DOMMatrix v0.0.24 | 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){var t=new f,r=Array.from(m);if(!r.every((function(m){return!Number.isNaN(m)})))throw TypeError('CSSMatrix: "'+m+'" must only have numbers.');if(16===r.length){var e=r[0],n=r[1],i=r[2],o=r[3],a=r[4],s=r[5],u=r[6],c=r[7],l=r[8],p=r[9],y=r[10],v=r[11],h=r[12],d=r[13],w=r[14],M=r[15];t.m11=e,t.a=e,t.m21=a,t.c=a,t.m31=l,t.m41=h,t.e=h,t.m12=n,t.b=n,t.m22=s,t.d=s,t.m32=p,t.m42=d,t.f=d,t.m13=i,t.m23=u,t.m33=y,t.m43=w,t.m14=o,t.m24=c,t.m34=v,t.m44=M}else{if(6!==r.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");var b=r[0],x=r[1],g=r[2],N=r[3],S=r[4],A=r[5];t.m11=b,t.a=b,t.m12=x,t.b=x,t.m21=g,t.c=g,t.m22=N,t.d=N,t.m41=S,t.e=S,t.m42=A,t.f=A}return t}function t(t){var r=Object.keys(new f);if("object"==typeof t&&r.every((function(m){return m in t})))return 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]);throw TypeError('CSSMatrix: "'+t+'" is not a DOMMatrix / CSSMatrix / JSON compatible object.')}function r(t){if("string"!=typeof t)throw TypeError('CSSMatrix: "'+t+'" is not a string.');var r=String(t).replace(/\s/g,""),e=new f,n='CSSMatrix: invalid transform string "'+t+'"';return r.split(")").filter((function(m){return m})).forEach((function(t){var r=t.split("("),i=r[0],o=r[1];if(!o)throw TypeError(n);var a=o.split(",").map((function(m){return m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)})),s=a[0],u=a[1],f=a[2],c=a[3],l=[s,u,f],p=[s,u,f,c];if("perspective"===i&&s&&[u,f].every((function(m){return void 0===m})))e.m34=-1/s;else if(i.includes("matrix")&&[6,16].includes(a.length)&&a.every((function(m){return!Number.isNaN(+m)}))){var y=a.map((function(m){return Math.abs(m)<1e-6?0:m}));e=e.multiply(m(y))}else if("translate3d"===i&&l.every((function(m){return!Number.isNaN(+m)})))e=e.translate(s,u,f);else if("translate"===i&&s&&void 0===f)e=e.translate(s,u||0,0);else if("rotate3d"===i&&p.every((function(m){return!Number.isNaN(+m)}))&&c)e=e.rotateAxisAngle(s,u,f,c);else if("rotate"===i&&s&&[u,f].every((function(m){return void 0===m})))e=e.rotate(0,0,s);else if("scale3d"===i&&l.every((function(m){return!Number.isNaN(+m)}))&&l.some((function(m){return 1!==m})))e=e.scale(s,u,f);else if("scale"!==i||Number.isNaN(s)||1===s||void 0!==f)if("skew"===i&&s&&void 0===f)e=e.skewX(s),e=u?e.skewY(u):e;else{if(!(/[XYZ]/.test(i)&&s&&[u,f].every((function(m){return void 0===m}))&&["translate","rotate","scale","skew"].some((function(m){return i.includes(m)}))))throw TypeError(n);if(["skewX","skewY"].includes(i))e=e[i](s);else{var v=i.replace(/[XYZ]/,""),h=i.replace(v,""),d=["X","Y","Z"].indexOf(h),w=[0===d?s:0,1===d?s:0,2===d?s:0];e=e[v].apply(e,w)}}else{var M=Number.isNaN(+u)?s:u;e=e.scale(s,M,1)}})),e}function e(m,t,r){var e=new f;return e.m41=m,e.e=m,e.m42=t,e.f=t,e.m43=r,e}function n(m,t,r){var e=new f,n=Math.PI/180,i=m*n,o=t*n,a=r*n,s=Math.cos(i),u=-Math.sin(i),c=Math.cos(o),l=-Math.sin(o),p=Math.cos(a),y=-Math.sin(a),v=c*p,h=-c*y;e.m11=v,e.a=v,e.m12=h,e.b=h,e.m13=l;var d=u*l*p+s*y;e.m21=d,e.c=d;var w=s*p-u*l*y;return e.m22=w,e.d=w,e.m23=-u*c,e.m31=u*y-s*l*p,e.m32=u*p+s*l*y,e.m33=s*c,e}function i(m,t,r,e){var n=new f,i=e*(Math.PI/360),o=Math.sin(i),a=Math.cos(i),s=o*o,u=Math.sqrt(m*m+t*t+r*r),c=m,l=t,p=r;0===u?(c=0,l=0,p=1):(c/=u,l/=u,p/=u);var y=c*c,v=l*l,h=p*p,d=1-2*(v+h)*s;n.m11=d,n.a=d;var w=2*(c*l*s+p*o*a);n.m12=w,n.b=w,n.m13=2*(c*p*s-l*o*a);var M=2*(l*c*s-p*o*a);n.m21=M,n.c=M;var b=1-2*(h+y)*s;return n.m22=b,n.d=b,n.m23=2*(l*p*s+c*o*a),n.m31=2*(p*c*s+l*o*a),n.m32=2*(p*l*s-c*o*a),n.m33=1-2*(y+v)*s,n}function o(m,t,r){var e=new f;return e.m11=m,e.a=m,e.m22=t,e.d=t,e.m33=r,e}function a(m){var t=new f,r=m*Math.PI/180,e=Math.tan(r);return t.m21=e,t.c=e,t}function s(m){var t=new f,r=m*Math.PI/180,e=Math.tan(r);return t.m12=e,t.b=e,t}function u(t,r){return m([r.m11*t.m11+r.m12*t.m21+r.m13*t.m31+r.m14*t.m41,r.m11*t.m12+r.m12*t.m22+r.m13*t.m32+r.m14*t.m42,r.m11*t.m13+r.m12*t.m23+r.m13*t.m33+r.m14*t.m43,r.m11*t.m14+r.m12*t.m24+r.m13*t.m34+r.m14*t.m44,r.m21*t.m11+r.m22*t.m21+r.m23*t.m31+r.m24*t.m41,r.m21*t.m12+r.m22*t.m22+r.m23*t.m32+r.m24*t.m42,r.m21*t.m13+r.m22*t.m23+r.m23*t.m33+r.m24*t.m43,r.m21*t.m14+r.m22*t.m24+r.m23*t.m34+r.m24*t.m44,r.m31*t.m11+r.m32*t.m21+r.m33*t.m31+r.m34*t.m41,r.m31*t.m12+r.m32*t.m22+r.m33*t.m32+r.m34*t.m42,r.m31*t.m13+r.m32*t.m23+r.m33*t.m33+r.m34*t.m43,r.m31*t.m14+r.m32*t.m24+r.m33*t.m34+r.m34*t.m44,r.m41*t.m11+r.m42*t.m21+r.m43*t.m31+r.m44*t.m41,r.m41*t.m12+r.m42*t.m22+r.m43*t.m32+r.m44*t.m42,r.m41*t.m13+r.m42*t.m23+r.m43*t.m33+r.m44*t.m43,r.m41*t.m14+r.m42*t.m24+r.m43*t.m34+r.m44*t.m44])}var f=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];var r=this;if(r.a=1,r.b=0,r.c=0,r.d=1,r.e=0,r.f=0,r.m11=1,r.m12=0,r.m13=0,r.m14=0,r.m21=0,r.m22=1,r.m23=0,r.m24=0,r.m31=0,r.m32=0,r.m33=1,r.m34=0,r.m41=0,r.m42=0,r.m43=0,r.m44=1,m&&m.length){var e=[16,6].some((function(t){return t===m.length}))?m:m[0];return r.setMatrixValue(e)}return r},c={isIdentity:{configurable:!0},is2D:{configurable:!0}};c.isIdentity.set=function(m){this.isIdentity=m},c.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},c.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},c.is2D.set=function(m){this.is2D=m},f.prototype.setMatrixValue=function(e){return[Array,Float64Array,Float32Array].some((function(m){return e instanceof m}))?m(e):"string"==typeof e&&e.length&&"none"!==e?r(e):"object"==typeof e?t(e):this},f.prototype.toArray=function(){var m=this,t=Math.pow(10,6);return(m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[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]).map((function(m){return Math.abs(m)<1e-6?0:(m*t>>0)/t}))},f.prototype.toString=function(){var m=this.toArray();return(this.is2D?"matrix":"matrix3d")+"("+m+")"},f.prototype.toJSON=function(){var m=this,t=m.is2D,r=m.isIdentity;return Object.assign({},m,{is2D:t,isIdentity:r})},f.prototype.multiply=function(m){return u(this,m)},f.prototype.translate=function(m,t,r){var n=t,i=r;return void 0===i&&(i=0),void 0===n&&(n=0),u(this,e(m,n,i))},f.prototype.scale=function(m,t,r){var e=t,n=r;return void 0===e&&(e=m),void 0===n&&(n=1),u(this,o(m,e,n))},f.prototype.rotate=function(m,t,r){var e=m,i=t,o=r;return void 0===i&&(i=0),void 0===o&&(o=e,e=0),u(this,n(e,i,o))},f.prototype.rotateAxisAngle=function(m,t,r,e){if([m,t,r,e].some((function(m){return Number.isNaN(m)})))throw new TypeError("CSSMatrix: expecting 4 values");return u(this,i(m,t,r,e))},f.prototype.skewX=function(m){return u(this,a(m))},f.prototype.skewY=function(m){return u(this,s(m))},f.prototype.transformPoint=function(m){var t=e(m.x,m.y,m.z);return t.m44=m.w||1,{x:(t=this.multiply(t)).m41,y:t.m42,z:t.m43,w:t.m44}},f.prototype.transform=function(m){var t=this,r=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,e=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,n=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:e/i,z:n/i,w:i}},Object.defineProperties(f.prototype,c),Object.assign(f,{Translate:e,Rotate:n,RotateAxisAngle:i,Scale:o,SkewX:a,SkewY:s,Multiply:u,fromArray:m,fromMatrix:t,fromString:r});return Object.assign(f,{Version:"0.0.24"}),f}));
// DOMMatrix v0.1.0 | thednp © 2022 | MIT-License
!function(t,m){"object"==typeof exports&&"undefined"!=typeof module?module.exports=m():"function"==typeof define&&define.amd?define(m):(t="undefined"!=typeof globalThis?globalThis:t||self).CSSMatrix=m()}(this,(function(){"use strict";function t(t){var m=new l,r=Array.from(t);if(!r.every((function(t){return!Number.isNaN(t)})))throw TypeError('CSSMatrix: "'+t+'" must only have numbers.');if(16===r.length){var e=r[0],n=r[1],i=r[2],o=r[3],a=r[4],s=r[5],u=r[6],f=r[7],c=r[8],p=r[9],y=r[10],v=r[11],h=r[12],d=r[13],M=r[14],w=r[15];m.m11=e,m.a=e,m.m21=a,m.c=a,m.m31=c,m.m41=h,m.e=h,m.m12=n,m.b=n,m.m22=s,m.d=s,m.m32=p,m.m42=d,m.f=d,m.m13=i,m.m23=u,m.m33=y,m.m43=M,m.m14=o,m.m24=f,m.m34=v,m.m44=w}else{if(6!==r.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");var b=r[0],g=r[1],N=r[2],x=r[3],S=r[4],A=r[5];m.m11=b,m.a=b,m.m12=g,m.b=g,m.m21=N,m.c=N,m.m22=x,m.d=x,m.m41=S,m.e=S,m.m42=A,m.f=A}return m}function m(m){var r=Object.keys(new l);if("object"==typeof m&&r.every((function(t){return t in m})))return t([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.')}function r(m){if("string"!=typeof m)throw TypeError('CSSMatrix: "'+m+'" is not a string.');var r=String(m).replace(/\s/g,""),e=new l,n='CSSMatrix: invalid transform string "'+m+'"';return r.split(")").filter((function(t){return t})).forEach((function(m){var r=m.split("("),i=r[0],o=r[1];if(!o)throw TypeError(n);var a=o.split(",").map((function(t){return t.includes("rad")?parseFloat(t)*(180/Math.PI):parseFloat(t)})),s=a[0],u=a[1],f=a[2],c=a[3],l=[s,u,f],p=[s,u,f,c];if("perspective"===i&&s&&[u,f].every((function(t){return void 0===t})))e.m34=-1/s;else if(i.includes("matrix")&&[6,16].includes(a.length)&&a.every((function(t){return!Number.isNaN(+t)}))){var y=a.map((function(t){return Math.abs(t)<1e-6?0:t}));e=e.multiply(t(y))}else if("translate3d"===i&&l.every((function(t){return!Number.isNaN(+t)})))e=e.translate(s,u,f);else if("translate"===i&&s&&void 0===f)e=e.translate(s,u||0,0);else if("rotate3d"===i&&p.every((function(t){return!Number.isNaN(+t)}))&&c)e=e.rotateAxisAngle(s,u,f,c);else if("rotate"===i&&s&&[u,f].every((function(t){return void 0===t})))e=e.rotate(0,0,s);else if("scale3d"===i&&l.every((function(t){return!Number.isNaN(+t)}))&&l.some((function(t){return 1!==t})))e=e.scale(s,u,f);else if("scale"!==i||Number.isNaN(s)||1===s||void 0!==f)if("skew"===i&&(s||!Number.isNaN(s)&&u)&&void 0===f)e=e.skew(s,u||0);else{if(!(/[XYZ]/.test(i)&&s&&[u,f].every((function(t){return void 0===t}))&&["translate","rotate","scale","skew"].some((function(t){return i.includes(t)}))))throw TypeError(n);if(["skewX","skewY"].includes(i))e=e[i](s);else{var v=i.replace(/[XYZ]/,""),h=i.replace(v,""),d=["X","Y","Z"].indexOf(h),M="scale"===v?1:0,w=[0===d?s:M,1===d?s:M,2===d?s:M];e=e[v].apply(e,w)}}else{var b=Number.isNaN(+u)?s:u;e=e.scale(s,b,1)}})),e}function e(t,m){return m?[t.a,t.b,t.c,t.d,t.e,t.f]:[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]}function n(t,m,r){var e=new l;return e.m41=t,e.e=t,e.m42=m,e.f=m,e.m43=r,e}function i(t,m,r){var e=new l,n=Math.PI/180,i=t*n,o=m*n,a=r*n,s=Math.cos(i),u=-Math.sin(i),f=Math.cos(o),c=-Math.sin(o),p=Math.cos(a),y=-Math.sin(a),v=f*p,h=-f*y;e.m11=v,e.a=v,e.m12=h,e.b=h,e.m13=c;var d=u*c*p+s*y;e.m21=d,e.c=d;var M=s*p-u*c*y;return e.m22=M,e.d=M,e.m23=-u*f,e.m31=u*y-s*c*p,e.m32=u*p+s*c*y,e.m33=s*f,e}function o(t,m,r,e){var n=new l,i=Math.sqrt(t*t+m*m+r*r);if(0===i)return n;var o=t/i,a=m/i,s=r/i,u=e*(Math.PI/360),f=Math.sin(u),c=Math.cos(u),p=f*f,y=o*o,v=a*a,h=s*s,d=1-2*(v+h)*p;n.m11=d,n.a=d;var M=2*(o*a*p+s*f*c);n.m12=M,n.b=M,n.m13=2*(o*s*p-a*f*c);var w=2*(a*o*p-s*f*c);n.m21=w,n.c=w;var b=1-2*(h+y)*p;return n.m22=b,n.d=b,n.m23=2*(a*s*p+o*f*c),n.m31=2*(s*o*p+a*f*c),n.m32=2*(s*a*p-o*f*c),n.m33=1-2*(y+v)*p,n}function a(t,m,r){var e=new l;return e.m11=t,e.a=t,e.m22=m,e.d=m,e.m33=r,e}function s(t,m){var r=new l;if(t){var e=t*Math.PI/180,n=Math.tan(e);r.m21=n,r.c=n}if(m){var i=m*Math.PI/180,o=Math.tan(i);r.m12=o,r.b=o}return r}function u(t){return s(t,0)}function f(t){return s(0,t)}function c(m,r){return t([r.m11*m.m11+r.m12*m.m21+r.m13*m.m31+r.m14*m.m41,r.m11*m.m12+r.m12*m.m22+r.m13*m.m32+r.m14*m.m42,r.m11*m.m13+r.m12*m.m23+r.m13*m.m33+r.m14*m.m43,r.m11*m.m14+r.m12*m.m24+r.m13*m.m34+r.m14*m.m44,r.m21*m.m11+r.m22*m.m21+r.m23*m.m31+r.m24*m.m41,r.m21*m.m12+r.m22*m.m22+r.m23*m.m32+r.m24*m.m42,r.m21*m.m13+r.m22*m.m23+r.m23*m.m33+r.m24*m.m43,r.m21*m.m14+r.m22*m.m24+r.m23*m.m34+r.m24*m.m44,r.m31*m.m11+r.m32*m.m21+r.m33*m.m31+r.m34*m.m41,r.m31*m.m12+r.m32*m.m22+r.m33*m.m32+r.m34*m.m42,r.m31*m.m13+r.m32*m.m23+r.m33*m.m33+r.m34*m.m43,r.m31*m.m14+r.m32*m.m24+r.m33*m.m34+r.m34*m.m44,r.m41*m.m11+r.m42*m.m21+r.m43*m.m31+r.m44*m.m41,r.m41*m.m12+r.m42*m.m22+r.m43*m.m32+r.m44*m.m42,r.m41*m.m13+r.m42*m.m23+r.m43*m.m33+r.m44*m.m43,r.m41*m.m14+r.m42*m.m24+r.m43*m.m34+r.m44*m.m44])}var l=function(){for(var t=[],m=arguments.length;m--;)t[m]=arguments[m];var r=this;if(r.a=1,r.b=0,r.c=0,r.d=1,r.e=0,r.f=0,r.m11=1,r.m12=0,r.m13=0,r.m14=0,r.m21=0,r.m22=1,r.m23=0,r.m24=0,r.m31=0,r.m32=0,r.m33=1,r.m34=0,r.m41=0,r.m42=0,r.m43=0,r.m44=1,t&&t.length){var e=[16,6].some((function(m){return m===t.length}))?t:t[0];return r.setMatrixValue(e)}return r},p={isIdentity:{configurable:!0},is2D:{configurable:!0}};p.isIdentity.get=function(){var t=this;return 1===t.m11&&0===t.m12&&0===t.m13&&0===t.m14&&0===t.m21&&1===t.m22&&0===t.m23&&0===t.m24&&0===t.m31&&0===t.m32&&1===t.m33&&0===t.m34&&0===t.m41&&0===t.m42&&0===t.m43&&1===t.m44},p.is2D.get=function(){var t=this;return 0===t.m31&&0===t.m32&&1===t.m33&&0===t.m34&&0===t.m43&&1===t.m44},l.prototype.setMatrixValue=function(e){return"string"==typeof e&&e.length&&"none"!==e?r(e):[Array,Float64Array,Float32Array].some((function(t){return e instanceof t}))?t(e):[l,DOMMatrix,Object].some((function(t){return e instanceof t}))?m(e):this},l.prototype.toFloat32Array=function(t){return Float32Array.from(e(this,t))},l.prototype.toFloat64Array=function(t){return Float64Array.from(e(this,t))},l.prototype.toString=function(){var t=this.is2D;return(t?"matrix":"matrix3d")+"("+this.toFloat64Array(t).join(", ")+")"},l.prototype.toJSON=function(){var t=this,m=t.is2D,r=t.isIdentity;return Object.assign({},t,{is2D:m,isIdentity:r})},l.prototype.multiply=function(t){return c(this,t)},l.prototype.translate=function(t,m,r){var e=m,i=r;return void 0===e&&(e=0),void 0===i&&(i=0),c(this,n(t,e,i))},l.prototype.scale=function(t,m,r){var e=m,n=r;return void 0===e&&(e=t),void 0===n&&(n=1),c(this,a(t,e,n))},l.prototype.rotate=function(t,m,r){var e=t,n=m||0,o=r||0;return"number"==typeof t&&void 0===m&&void 0===r&&(o=e,e=0,n=0),c(this,i(e,n,o))},l.prototype.rotateAxisAngle=function(t,m,r,e){if([t,m,r,e].some((function(t){return Number.isNaN(+t)})))throw new TypeError("CSSMatrix: expecting 4 values");return c(this,o(t,m,r,e))},l.prototype.skewX=function(t){return c(this,u(t))},l.prototype.skewY=function(t){return c(this,f(t))},l.prototype.skew=function(t,m){return c(this,s(t,m))},l.prototype.transformPoint=function(t){var m=this,r=m.m11*t.x+m.m21*t.y+m.m31*t.z+m.m41*t.w,e=m.m12*t.x+m.m22*t.y+m.m32*t.z+m.m42*t.w,n=m.m13*t.x+m.m23*t.y+m.m33*t.z+m.m43*t.w,i=m.m14*t.x+m.m24*t.y+m.m34*t.z+m.m44*t.w;return t instanceof DOMPoint?new DOMPoint(r,e,n,i):{x:r,y:e,z:n,w:i}},Object.defineProperties(l.prototype,p),Object.assign(l,{Translate:n,Rotate:i,RotateAxisAngle:o,Scale:a,SkewX:u,SkewY:f,Skew:s,Multiply:c,fromArray:t,fromMatrix:m,fromString:r,toArray:e});return Object.assign(l,{Version:"0.1.0"}),l}));

38

package.json
{
"name": "dommatrix",
"version": "0.0.24",
"version": "0.1.0",
"description": "ES6+ shim for DOMMatrix",

@@ -15,10 +15,13 @@ "main": "dist/dommatrix.js",

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run fix:js && npm-run-all --parallel build-*",
"test": "npx cypress run",
"cypress": "npx cypress open",
"coverage:report": "npx nyc report --include=src/*.js --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
"coverage:badge": "npx update-badge",
"build": "npm run lint:js && npm-run-all --parallel build-*",
"custom-build": "rollup -c --environment",
"fix:js": "eslint src/*.js --config .eslintrc --fix",
"lint:js": "eslint src/*.js --config .eslintrc",
"fix:js": "eslint src --config .eslintrc --fix",
"lint:js": "eslint src --config .eslintrc",
"build:ts": "tsc -d",
"build-js": "rollup --environment FORMAT:umd,MIN:false -c",
"build-test": "rollup --environment FORMAT:iife,MIN:false,OUTPUTFILE:test/dommatrix.js -c",
"build-docs": "rollup --environment FORMAT:umd,MIN:false,OUTPUTFILE:docs/dommatrix.js -c",
"build-js-min": "rollup --environment FORMAT:umd,MIN:true -c",

@@ -34,9 +37,9 @@ "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",

"dommatrix",
"dommatrix shim",
"dommatrix polyfill",
"dommatrix nodejs",
"dom matrix",
"cssmatrix",
"css matrix",
"css transform",
"shim",
"polyfill",
"nodejs",
"dom",
"css",
"transform",
"javascript"

@@ -47,8 +50,13 @@ ],

"bugs": {
"url": "https://github.com/thednp/DOMMatrix/issues"
"url": "https://github.com/thednp/dommatrix/issues"
},
"homepage": "https://thednp.github.io/DOMMatrix/",
"dependencies": {},
"homepage": "https://thednp.github.io/dommatrix/",
"devDependencies": {
"@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
"@cypress/code-coverage": "^3.9.12",
"@rollup/plugin-node-resolve": "^7.1.3",
"babel-plugin-istanbul": "^6.1.1",
"check-code-coverage": "^1.10.0",
"cypress": "^9.5.4",
"esbuild": "^0.14.30",
"@rollup/plugin-buble": "^0.21.3",

@@ -55,0 +63,0 @@ "@rollup/plugin-json": "^4.1.0",

9

README.md

@@ -1,2 +0,2 @@

# DOMMatrix shim
# DOMMatrix ![check-code-coverage](https://img.shields.io/badge/code--coverage-100%25-brightgreen) ![cypress version](https://img.shields.io/badge/cypress-9.5.4-brightgreen) ![esbuild version](https://img.shields.io/badge/esbuild-0.14.30-brightgreen) [![ci](https://github.com/thednp/dommatrix/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/dommatrix/actions/workflows/ci.yml)

@@ -64,5 +64,8 @@ An ES6+ sourced [DOMMatrix](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) shim for **Node.js** apps and legacy browsers. Since this source is modernized, legacy browsers might need some additional shims.

* **added** `isIdentity` (*getter* and *setter*) property;
* **added** `skew()` public method to work in line with native DOMMatrix;
* **added** `Skew()` static method to work with the above `skew()` instance method;
* **added** `fromMatrix` static method, not present in the constructor prototype;
* **added** `fromString` static method, not present in the constructor prototype;
* **added** `fromArray()` static method, not present in the constructor prototype, should also process *Float32Array* / *Float64Array* via `Array.from()`;
* **added** `toFloat64Array()` and `toFloat32Array()` instance methods, the updated `toString()` method makes use of them alongside `toArray`;
* **added** `toArray()` instance method, normalizes values and is used by the `toString()` instance method;

@@ -73,7 +76,7 @@ * **added** `toJSON()` instance method will generate a standard *Object* which includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and excludes `is2D` & `isIdentity` properties;

* *removed* `inverse()` instance method, will be re-added later for other implementations (probably going to be accompanied by `determinant()`, `transpose()` and others);
* *removed* `transform` instance method, not present in the native **DOMMatrix** prototype;
* *removed* `setIdentity()` instance method due to code rework for enabling better TypeScript definitions;
* *removed* `toFullString()` instance method, probably something also from *WebKitCSSMatrix*;
* *removed* `feedFromArray` static method, not present in the constructor prototype, `fromArray()` will cover that;
* *not supported* `toFloat64Array()` and `toFloat32Array()` instance methods are not supported, a quick `FromFloat32Array(myMatrix.toArray())` should achieve just that;
* *not supported* `fromFloat64Array()` and `fromFloat32Array()` static methods are not supported since `fromArray()` should handle them just as well;
* *not supported* `fromFloat64Array()` and `fromFloat32Array()` static methods are not supported, our `fromArray()` should handle them just as well;
* *not supported* `flipX()` or `flipY()` instance methods of the *DOMMatrixReadOnly* prototype are not supported,

@@ -80,0 +83,0 @@ * *not supported* `translateSelf()` or `rotateSelf()` instance methods of the *DOMMatrix* prototype are not supported, instead we only implemented the most used *DOMMatrixReadOnly* instance methods.

268

src/dommatrix.js
// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;

@@ -14,3 +13,3 @@ // * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;

*
* @param {number[]} array an `Array` to feed values from.
* @param {CSSM.matrix | CSSM.matrix3d} array an `Array` to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -91,3 +90,3 @@ */

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m the source matrix to feed values from.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @return {CSSMatrix} the resulted matrix.

@@ -105,3 +104,3 @@ */

}
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
throw TypeError(`CSSMatrix: "${JSON.stringify(m)}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
}

@@ -156,2 +155,3 @@

const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
// @ts-ignore -- conditions should suffice
m = m.multiply(fromArray(values));

@@ -170,3 +170,3 @@ // 3 values expected

m = m.rotate(0, 0, x);
// 4 values expected
// 3 values expected
} else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {

@@ -180,5 +180,4 @@ m = m.scale(x, y, z);

// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (prop === 'skew' && (x || (!Number.isNaN(x) && y)) && z === undefined) {
m = m.skew(x, y || 0);
} else if (/[XYZ]/.test(prop) && x && [y, z].every((n) => n === undefined) // a single value expected

@@ -193,6 +192,7 @@ && ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p))) {

const idx = ['X', 'Y', 'Z'].indexOf(axis);
const def = fn === 'scale' ? 1 : 0;
const axeValues = [
idx === 0 ? x : 0,
idx === 1 ? x : 0,
idx === 2 ? x : 0];
idx === 0 ? x : def,
idx === 1 ? x : def,
idx === 2 ? x : def];
// @ts-ignore unfortunately

@@ -209,2 +209,21 @@ m = m[fn](...axeValues);

/**
* Returns an *Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @param {boolean=} is2D *Array* representation of the matrix
* @return {CSSM.matrix | CSSM.matrix3d} an *Array* representation of the matrix
*/
export function toArray(m, is2D) {
if (is2D) {
return [m.a, m.b, m.c, m.d, m.e, m.f];
}
return [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];
}
// Transform Functions

@@ -301,22 +320,17 @@ // https://www.w3.org/TR/css-transforms-1/#transform-functions

const m = new CSSMatrix();
const angle = alpha * (Math.PI / 360);
const sinA = Math.sin(angle);
const cosA = Math.cos(angle);
const sinA2 = sinA * sinA;
const length = Math.sqrt(x * x + y * y + z * z);
let X = x;
let Y = y;
let Z = z;
if (length === 0) {
// bad vector length, use something reasonable
X = 0;
Y = 0;
Z = 1;
} else {
X /= length;
Y /= length;
Z /= length;
// bad vector length, return identity
return m;
}
const X = x / length;
const Y = y / length;
const Z = z / length;
const angle = alpha * (Math.PI / 360);
const sinA = Math.sin(angle);
const cosA = Math.cos(angle);
const sinA2 = sinA * sinA;
const x2 = X * X;

@@ -377,2 +391,29 @@ const y2 = Y * Y;

/**
* Creates a new `CSSMatrix` for the shear of both the `x-axis` and`y-axis`
* matrix and returns it. This method is equivalent to the CSS `skew()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
*
* @param {number} angleX the X-angle in degrees.
* @param {number} angleY the Y-angle in degrees.
* @return {CSSMatrix} the resulted matrix.
*/
export function Skew(angleX, angleY) {
const m = new CSSMatrix();
if (angleX) {
const radX = (angleX * Math.PI) / 180;
const tX = Math.tan(radX);
m.m21 = tX;
m.c = tX;
}
if (angleY) {
const radY = (angleY * Math.PI) / 180;
const tY = Math.tan(radY);
m.m12 = tY;
m.b = tY;
}
return m;
}
/**
* Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and

@@ -387,8 +428,3 @@ * returns it. This method is equivalent to the CSS `skewX()` function.

export function SkewX(angle) {
const m = new CSSMatrix();
const radA = (angle * Math.PI) / 180;
const t = Math.tan(radA);
m.m21 = t;
m.c = t;
return m;
return Skew(angle, 0);
}

@@ -406,8 +442,3 @@

export function SkewY(angle) {
const m = new CSSMatrix();
const radA = (angle * Math.PI) / 180;
const t = Math.tan(radA);
m.m12 = t;
m.b = t;
return m;
return Skew(0, angle);
}

@@ -419,4 +450,4 @@

*
* @param {CSSMatrix} m1 the first matrix.
* @param {CSSMatrix} m2 the second matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m1 the first matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 the second matrix.
* @return {CSSMatrix} the resulted matrix.

@@ -491,11 +522,2 @@ */

/**
* Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set isIdentity(value) {
this.isIdentity = value;
}
/**
* A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity

@@ -527,11 +549,2 @@ * matrix is one in which every value is 0 except those on the main diagonal from top-left

/**
* Sets a new `Boolean` flag value for `this.is2D` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set is2D(value) {
this.is2D = value;
}
/**
* The `setMatrixValue` method replaces the existing matrix with one computed

@@ -547,3 +560,3 @@ * in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`

*
* @param {string | number[] | CSSMatrix | DOMMatrix} source
* @param {string | CSSM.matrix | CSSM.matrix3d | CSSMatrix | DOMMatrix | CSSM.JSONMatrix} source
* @return {CSSMatrix} the matrix instance

@@ -554,14 +567,17 @@ */

// [Arguments list | Array] come here
// CSS transform string source - TransformList first
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// [Arguments list | Array] come second
if ([Array, Float64Array, Float32Array].some((a) => source instanceof a)) {
// @ts-ignore
return fromArray(source);
}
// CSS transform string source - TransformList
if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
}
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON)
if (typeof source === 'object') {
// new CSSMatrix(CSSMatrix | DOMMatrix | JSON) last
if ([CSSMatrix, DOMMatrix, Object].some((a) => source instanceof a)) {
// @ts-ignore
return fromMatrix(source);
}
return m;

@@ -571,24 +587,23 @@ }

/**
* Returns an *Array* containing elements which comprise the matrix.
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` property.
* depending on the value of the `is2D` parameter.
*
* @return {number[]} an *Array* representation of the matrix
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float32Array} an *Array* representation of the matrix
*/
toArray() {
const m = this;
const pow = (10 ** 6);
let result;
toFloat32Array(is2D) {
return Float32Array.from(toArray(this, is2D));
}
if (m.is2D) {
result = [m.a, m.b, m.c, m.d, m.e, m.f];
} else {
result = [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];
}
// clean up the numbers
// eslint-disable-next-line -- no-bitwise
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow));
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float64Array} an *Array* representation of the matrix
*/
toFloat64Array(is2D) {
return Float64Array.from(toArray(this, is2D));
}

@@ -607,4 +622,5 @@

const m = this;
const values = m.toArray();
const type = m.is2D ? 'matrix' : 'matrix3d';
const { is2D } = m;
const values = m.toFloat64Array(is2D).join(', ');
const type = is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;

@@ -621,3 +637,3 @@ }

*
* @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.
* @return {CSSM.JSONMatrix} an *Object* with all matrix values.
*/

@@ -635,3 +651,3 @@ toJSON() {

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m2 CSSMatrix
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 CSSMatrix
* @return {CSSMatrix} The resulted matrix.

@@ -658,4 +674,4 @@ */

let Z = z;
if (Y === undefined) Y = 0;
if (Z === undefined) Z = 0;
if (Y === undefined) Y = 0;
return Multiply(this, Translate(X, Y, Z));

@@ -699,6 +715,9 @@ }

let RX = rx;
let RY = ry;
let RZ = rz;
if (RY === undefined) RY = 0;
if (RZ === undefined) { RZ = RX; RX = 0; }
let RY = ry || 0;
let RZ = rz || 0;
if (typeof rx === 'number' && ry === undefined && rz === undefined) {
RZ = RX; RX = 0; RY = 0;
}
return Multiply(this, Rotate(RX, RY, RZ));

@@ -720,3 +739,3 @@ }

rotateAxisAngle(x, y, z, angle) {
if ([x, y, z, angle].some((n) => Number.isNaN(n))) {
if ([x, y, z, angle].some((n) => Number.isNaN(+n))) {
throw new TypeError('CSSMatrix: expecting 4 values');

@@ -750,27 +769,11 @@ }

/**
* Transforms a specified point using the matrix, returning a new
* Tuple *Object* comprising of the transformed point.
* Neither the matrix nor the original point are altered.
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @copyright thednp © 2021
*
* @param {CSSMatrix.PointTuple | DOMPoint} v Tuple or DOMPoint
* @return {CSSMatrix.PointTuple} the resulting Tuple
* @param {number} angleX The X-angle amount in degrees to skew.
* @param {number} angleY The angle amount in degrees to skew.
* @return {CSSMatrix} The resulted matrix
*/
transformPoint(v) {
const M = this;
let 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,
};
skew(angleX, angleY) {
return Multiply(this, Skew(angleX, angleY));
}

@@ -783,18 +786,21 @@

*
* @param {CSSMatrix.PointTuple} t Tuple with `{x,y,z,w}` components
* @return {CSSMatrix.PointTuple} the resulting Tuple
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @param {CSSM.PointTuple | DOMPoint} t Tuple with `{x,y,z,w}` components
* @return {CSSM.PointTuple | DOMPoint} the resulting Tuple
*/
transform(t) {
transformPoint(t) {
const m = this;
const x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w;
const y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w;
const z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w;
const 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,
};
const x = m.m11 * t.x + m.m21 * t.y + m.m31 * t.z + m.m41 * t.w;
const y = m.m12 * t.x + m.m22 * t.y + m.m32 * t.z + m.m42 * t.w;
const z = m.m13 * t.x + m.m23 * t.y + m.m33 * t.z + m.m43 * t.w;
const w = m.m14 * t.x + m.m24 * t.y + m.m34 * t.z + m.m44 * t.w;
return t instanceof DOMPoint
? new DOMPoint(x, y, z, w)
: {
x, y, z, w,
};
}

@@ -812,2 +818,3 @@ }

SkewY,
Skew,
Multiply,

@@ -817,4 +824,5 @@ fromArray,

fromString,
toArray,
});
export default CSSMatrix;

98

types/dommatrix.d.ts

@@ -9,6 +9,6 @@ declare module "dommatrix/src/dommatrix" {

*
* @param {number[]} array an `Array` to feed values from.
* @param {CSSM.matrix | CSSM.matrix3d} array an `Array` to feed values from.
* @return {CSSMatrix} the resulted matrix.
*/
export function fromArray(array: number[]): CSSMatrix;
export function fromArray(array: CSSM.matrix | CSSM.matrix3d): CSSMatrix;
/**

@@ -18,6 +18,6 @@ * Creates a new mutable `CSSMatrix` instance given an existing matrix or a

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m the source matrix to feed values from.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @return {CSSMatrix} the resulted matrix.
*/
export function fromMatrix(m: CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix): CSSMatrix;
export function fromMatrix(m: CSSMatrix | DOMMatrix | CSSM.JSONMatrix): CSSMatrix;
/**

@@ -38,2 +38,12 @@ * Creates a new mutable `CSSMatrix` given any valid CSS transform string,

/**
* Returns an *Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m the source matrix to feed values from.
* @param {boolean=} is2D *Array* representation of the matrix
* @return {CSSM.matrix | CSSM.matrix3d} an *Array* representation of the matrix
*/
export function toArray(m: CSSMatrix, is2D?: boolean | undefined): CSSM.matrix | CSSM.matrix3d;
/**
* Creates a new `CSSMatrix` for the translation matrix and returns it.

@@ -88,2 +98,13 @@ * This method is equivalent to the CSS `translate3d()` function.

/**
* Creates a new `CSSMatrix` for the shear of both the `x-axis` and`y-axis`
* matrix and returns it. This method is equivalent to the CSS `skew()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
*
* @param {number} angleX the X-angle in degrees.
* @param {number} angleY the Y-angle in degrees.
* @return {CSSMatrix} the resulted matrix.
*/
export function Skew(angleX: number, angleY: number): CSSMatrix;
/**
* Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and

@@ -112,7 +133,7 @@ * returns it. This method is equivalent to the CSS `skewX()` function.

*
* @param {CSSMatrix} m1 the first matrix.
* @param {CSSMatrix} m2 the second matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m1 the first matrix.
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 the second matrix.
* @return {CSSMatrix} the resulted matrix.
*/
export function Multiply(m1: CSSMatrix, m2: CSSMatrix): CSSMatrix;
export function Multiply(m1: CSSMatrix | DOMMatrix | CSSM.JSONMatrix, m2: CSSMatrix | DOMMatrix | CSSM.JSONMatrix): CSSMatrix;
export default CSSMatrix;

@@ -159,8 +180,2 @@ /**

/**
* Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set isIdentity(arg: boolean);
/**
* A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity

@@ -174,8 +189,2 @@ * matrix is one in which every value is 0 except those on the main diagonal from top-left

/**
* Sets a new `Boolean` flag value for `this.is2D` matrix property.
*
* @param {boolean} value sets a new flag for this property
*/
set is2D(arg: boolean);
/**
* A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix

@@ -198,15 +207,25 @@ * and `false` if the matrix is 3D.

*
* @param {string | number[] | CSSMatrix | DOMMatrix} source
* @param {string | CSSM.matrix | CSSM.matrix3d | CSSMatrix | DOMMatrix | CSSM.JSONMatrix} source
* @return {CSSMatrix} the matrix instance
*/
setMatrixValue(source: string | number[] | CSSMatrix | DOMMatrix): CSSMatrix;
setMatrixValue(source: string | CSSM.matrix | CSSM.matrix3d | CSSMatrix | DOMMatrix | CSSM.JSONMatrix): CSSMatrix;
/**
* Returns an *Array* containing elements which comprise the matrix.
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` property.
* depending on the value of the `is2D` parameter.
*
* @return {number[]} an *Array* representation of the matrix
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float32Array} an *Array* representation of the matrix
*/
toArray(): number[];
toFloat32Array(is2D?: boolean | undefined): Float32Array;
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param {boolean=} is2D *Array* representation of the matrix
* @return {Float64Array} an *Array* representation of the matrix
*/
toFloat64Array(is2D?: boolean | undefined): Float64Array;
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,

@@ -229,5 +248,5 @@ * using the appropriate `CSS` matrix notation.

*
* @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.
* @return {CSSM.JSONMatrix} an *Object* with all matrix values.
*/
toJSON(): CSSMatrix.JSONMatrix;
toJSON(): CSSM.JSONMatrix;
/**

@@ -238,6 +257,6 @@ * The Multiply method returns a new CSSMatrix which is the result of this

*
* @param {CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix} m2 CSSMatrix
* @param {CSSMatrix | DOMMatrix | CSSM.JSONMatrix} m2 CSSMatrix
* @return {CSSMatrix} The resulted matrix.
*/
multiply(m2: CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix): CSSMatrix;
multiply(m2: CSSMatrix | DOMMatrix | CSSM.JSONMatrix): CSSMatrix;
/**

@@ -310,2 +329,11 @@ * The translate method returns a new matrix which is this matrix post

/**
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* @param {number} angleX The X-angle amount in degrees to skew.
* @param {number} angleY The angle amount in degrees to skew.
* @return {CSSMatrix} The resulted matrix
*/
skew(angleX: number, angleY: number): CSSMatrix;
/**
* Transforms a specified point using the matrix, returning a new

@@ -320,6 +348,6 @@ * Tuple *Object* comprising of the transformed point.

*
* @param {CSSMatrix.PointTuple | DOMPoint} v Tuple or DOMPoint
* @return {CSSMatrix.PointTuple} the resulting Tuple
* @param {CSSM.PointTuple | DOMPoint} v Tuple or DOMPoint
* @return {CSSM.PointTuple} the resulting Tuple
*/
transformPoint(v: CSSMatrix.PointTuple | DOMPoint): CSSMatrix.PointTuple;
transformPoint(v: CSSM.PointTuple | DOMPoint): CSSM.PointTuple;
/**

@@ -330,6 +358,6 @@ * Transforms a specified vector using the matrix, returning a new

*
* @param {CSSMatrix.PointTuple} t Tuple with `{x,y,z,w}` components
* @return {CSSMatrix.PointTuple} the resulting Tuple
* @param {CSSM.PointTuple} t Tuple with `{x,y,z,w}` components
* @return {CSSM.PointTuple} the resulting Tuple
*/
transform(t: CSSMatrix.PointTuple): CSSMatrix.PointTuple;
transform(t: CSSM.PointTuple): CSSM.PointTuple;
}

@@ -336,0 +364,0 @@ }

4

types/index.d.ts

@@ -1,6 +0,6 @@

export as namespace CSSMatrix;
export as namespace CSSM;
export default CSSMatrix;
export { PointTuple, JSONMatrix } from './more/types';
export { PointTuple, JSONMatrix, matrix, matrix3d } from './more/types';
import { default as CSSMatrix } from 'dommatrix/src/dommatrix';

11

types/more/types.d.ts

@@ -1,2 +0,2 @@

export type PointTuple = {
export interface PointTuple {
x: number;

@@ -6,5 +6,5 @@ y: number;

w: number;
};
}
export type JSONMatrix = {
export interface JSONMatrix {
m11: number;

@@ -34,2 +34,5 @@ m12: number;

isIdentity: boolean;
};
}
export type matrix = [number, number, number, number, number, number]
export type matrix3d = [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number]
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc