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

dommatrix

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dommatrix - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

223

dist/dommatrix.esm.js
/*!
* DOMMatrix v0.0.20 (https://thednp.github.io/DOMMatrix/)
* DOMMatrix v0.0.21 (https://thednp.github.io/DOMMatrix/)
* Copyright 2021 © thednp

@@ -7,10 +7,9 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)

// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
// * `fromString` parses and loads values from any valid CSS transform string.
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;
// * `fromString` parses and loads values from any valid CSS transform string (TransformList).
/**
* Creates a new mutable `CSSMatrix` object given an array of floating point values.
*
* Creates a new mutable `CSSMatrix` instance given an array of 16/6 floating point values.
* This static method invalidates arrays that contain non-number elements.

@@ -25,8 +24,8 @@ *

function fromArray(array) {
if (!array.every((n) => !Number.isNaN(n))) {
throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
}
const m = new CSSMatrix();
const a = Array.from(array);
if (!a.every((n) => !Number.isNaN(n))) {
throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
}
if (a.length === 16) {

@@ -102,9 +101,4 @@ const [m11, m12, m13, m14,

function fromMatrix(m) {
const keys = [
'm11', 'm12', 'm13', 'm14',
'm21', 'm22', 'm23', 'm24',
'm31', 'm32', 'm33', 'm34',
'm41', 'm42', 'm43', 'm44'];
if ([CSSMatrix, DOMMatrix].some((x) => m instanceof x)
|| (typeof m === 'object' && keys.every((k) => k in m))) {
const keys = Object.keys(new CSSMatrix());
if (typeof m === 'object' && keys.every((k) => k in m)) {
return fromArray(

@@ -117,7 +111,8 @@ [m.m11, m.m12, m.m13, m.m14,

}
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix compatible object.`);
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
}
/**
* Creates a new mutable `CSSMatrix` instance given any valid CSS transform string.
* Creates a new mutable `CSSMatrix` given any valid CSS transform string,
* or what we call `TransformList`:
*

@@ -140,33 +135,18 @@ * * `matrix(a, b, c, d, e, f)` - valid matrix() transform function

const invalidStringError = `CSSMatrix: invalid transform string "${source}"`;
let is2D = true;
// const transformFunctions = [
// 'matrix', 'matrix3d', 'perspective', 'translate3d',
// 'translate', 'translateX', 'translateY', 'translateZ',
// 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ',
// 'scale', 'scale3d', 'skewX', 'skewY'];
const tramsformObject = str.split(')').filter((f) => f).map((fn) => {
const [prop, value] = fn.split('(');
if (!value) {
// invalidate
throw TypeError(invalidStringError);
}
// const px = ['perspective'];
// const length = ['translate', 'translate3d', 'translateX', 'translateY', 'translateZ'];
// const deg = ['rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'skew', 'skewX', 'skewY'];
// const abs = ['scale', 'scale3d', 'matrix', 'matrix3d'];
// const transformFunctions = px.concat(length, deg, abs);
str.split(')').filter((f) => f).forEach((tf) => {
const [prop, value] = tf.split('(');
// invalidate empty string
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;
// don't add perspective if is2D
if (is2D && (prop === 'matrix3d' // only modify is2D once
|| (prop === 'rotate3d' && [x, y].every((n) => !Number.isNaN(+n) && n !== 0) && a)
|| (['rotateX', 'rotateY'].includes(prop) && x)
|| (prop === 'translate3d' && [x, y, z].every((n) => !Number.isNaN(+n)) && z)
|| (prop === 'scale3d' && [x, y, z].every((n) => !Number.isNaN(+n) && n !== x))
)) {
is2D = false;
}
return { prop, components };
});
tramsformObject.forEach((tf) => {
const { prop, components } = tf;
const [x, y, z, a] = components;

@@ -176,26 +156,37 @@ const xyz = [x, y, z];

if (prop === 'perspective' && !is2D) {
// single number value expected
if (prop === 'perspective' && x && [y, z].every((n) => n === undefined)) {
m.m34 = -1 / x;
} else if (prop.includes('matrix')) {
// 6/16 number values expected
} else if (prop.includes('matrix') && [6, 16].includes(components.length)
&& components.every((n) => !Number.isNaN(+n))) {
const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
if ([6, 16].includes(values.length)) {
m = m.multiply(fromArray(values));
}
} else if (['translate', 'translate3d'].some((p) => prop === p) && x) {
m = m.translate(x, y || 0, z || 0);
m = m.multiply(fromArray(values));
// 3 values expected
} else if (prop === 'translate3d' && xyz.every((n) => !Number.isNaN(+n))) {
m = m.translate(x, y, z);
// single/double number value(s) expected
} else if (prop === 'translate' && x && z === undefined) {
m = m.translate(x, y || 0, 0);
// all 4 values expected
} else if (prop === 'rotate3d' && xyza.every((n) => !Number.isNaN(+n)) && a) {
m = m.rotateAxisAngle(x, y, z, a);
// single value expected
} else if (prop === 'rotate' && x && [y, z].every((n) => n === undefined)) {
m = m.rotate(0, 0, x);
// 4 values expected
} else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {
m = m.scale(x, y, z);
} else if (prop === 'rotate' && x) {
m = m.rotate(0, 0, x);
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
// single value expected
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1 && z === undefined) {
const nosy = Number.isNaN(+y);
const sy = nosy ? x : y;
m = m.scale(x, sy, 1);
} else if (prop === 'skew' && (x || y)) {
m = x ? m.skewX(x) : m;
// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (/[XYZ]/.test(prop) && ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p)) && x) {
if (prop.includes('skew')) {
} else if (/[XYZ]/.test(prop) && x && [y, z].every((n) => n === undefined) // a single value expected
&& ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p))) {
if (['skewX', 'skewY'].includes(prop)) {
// @ts-ignore unfortunately

@@ -365,3 +356,4 @@ m = m[prop](x);

* Creates a new `CSSMatrix` for the scale matrix and returns it.
* This method is equivalent to the CSS `scale3d()` function.
* This method is equivalent to the CSS `scale3d()` function, except it doesn't
* accept {x, y, z} transform origin parameters.
*

@@ -461,4 +453,4 @@ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

/**
* Creates and returns a new `DOMMatrix` compatible *Object*
* with equivalent instance methods.
* Creates and returns a new `DOMMatrix` compatible instance
* with equivalent instance.
*

@@ -491,11 +483,4 @@ * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

if (args && args.length) {
let ARGS = args;
const ARGS = [16, 6].some((l) => l === args.length) ? args : args[0];
if (args instanceof Array) {
if ((args[0] instanceof Array && [16, 6].includes(args[0].length))
|| typeof args[0] === 'string'
|| [CSSMatrix, DOMMatrix].some((x) => args[0] instanceof x)) {
[ARGS] = args;
}
}
return m.setMatrixValue(ARGS);

@@ -567,13 +552,14 @@ }

// new CSSMatrix(CSSMatrix | DOMMatrix)
if ([DOMMatrix, CSSMatrix].some((x) => source instanceof x)) {
// @ts-ignore
return fromMatrix(source);
// CSS transform string source
} if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
// [Arguments list | Array] come here
} if (Array.isArray(source)) {
if ([Array, Float64Array, Float32Array].some((a) => source instanceof a)) {
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') {
return fromMatrix(source);
}
return m;

@@ -583,23 +569,6 @@ }

/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
* 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` property.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
toString() {
const m = this;
const values = m.toArray().join(',');
const type = m.is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;
}
/**
* Returns an *Array* containing all 16 elements which comprise the matrix.
* The method can return either the elements.
*
* Other methods make use of this method to feed their output values from this matrix.
*
* @return {number[]} an *Array* representation of the matrix

@@ -609,3 +578,3 @@ */

const m = this;
const pow6 = (10 ** 6);
const pow = (10 ** 6);
let result;

@@ -623,12 +592,28 @@

// eslint-disable-next-line -- no-bitwise
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow6) >> 0) / pow6));
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow));
}
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
toString() {
const m = this;
const values = m.toArray();
const type = m.is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;
}
/**
* Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
* excludes `is2D` & `isIdentity` properties.
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
* as the `is2D` & `isIdentity` properties.
*
* The result can also be used as a second parameter for the `fromMatrix` static method
* to load values into a matrix instance.
* to load values into another matrix instance.
*

@@ -638,3 +623,5 @@ * @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.

toJSON() {
return JSON.parse(JSON.stringify(this));
const m = this;
const { is2D, isIdentity } = m;
return { ...m, is2D, isIdentity };
}

@@ -661,4 +648,4 @@

* @param {number} x X component of the translation value.
* @param {number | null} y Y component of the translation value.
* @param {number | null} z Z component of the translation value.
* @param {number=} y Y component of the translation value.
* @param {number=} z Z component of the translation value.
* @return {CSSMatrix} The resulted matrix

@@ -670,4 +657,4 @@ */

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

@@ -683,4 +670,4 @@ }

* @param {number} x The X component of the scale value.
* @param {number | null} y The Y component of the scale value.
* @param {number | null} z The Z component of the scale value.
* @param {number=} y The Y component of the scale value.
* @param {number=} z The Z component of the scale value.
* @return {CSSMatrix} The resulted matrix

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

let Z = z;
if (Y == null) Y = x;
if (Z == null) Z = x;
if (Y === undefined) Y = x;
if (Z === undefined) Z = 1;

@@ -707,4 +694,4 @@ return Multiply(this, Scale(X, Y, Z));

* @param {number} rx The X component of the rotation, or Z if Y and Z are null.
* @param {number | null} ry The (optional) Y component of the rotation value.
* @param {number | null} rz The (optional) Z component of the rotation value.
* @param {number=} ry The (optional) Y component of the rotation value.
* @param {number=} rz The (optional) Z component of the rotation value.
* @return {CSSMatrix} The resulted matrix

@@ -716,4 +703,4 @@ */

let RZ = rz;
if (RY == null) RY = 0;
if (RZ == null) { RZ = RX; RX = 0; }
if (RY === undefined) RY = 0;
if (RZ === undefined) { RZ = RX; RX = 0; }
return Multiply(this, Rotate(RX, RY, RZ));

@@ -816,3 +803,3 @@ }

// Add Transform Functions to CSSMatrix object
// Don't create a TS namespace here
// without creating a TypeScript namespace.
Object.assign(CSSMatrix, {

@@ -819,0 +806,0 @@ Translate,

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

// DOMMatrix v0.0.20 | thednp © 2021 | MIT-License
function m(m){if(!m.every(m=>!Number.isNaN(m)))throw TypeError(`CSSMatrix: "${m}" must only have numbers.`);const t=new c,e=Array.from(m);if(16===e.length){const[m,r,n,s,i,a,o,l,c,u,f,h,y,p,M,w]=e;t.m11=m,t.a=m,t.m21=i,t.c=i,t.m31=c,t.m41=y,t.e=y,t.m12=r,t.b=r,t.m22=a,t.d=a,t.m32=u,t.m42=p,t.f=p,t.m13=n,t.m23=o,t.m33=f,t.m43=M,t.m14=s,t.m24=l,t.m34=h,t.m44=w}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");{const[m,r,n,s,i,a]=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=a,t.f=a}}return t}function t(t){if([c,DOMMatrix].some(m=>t instanceof m)||"object"==typeof t&&["m11","m12","m13","m14","m21","m22","m23","m24","m31","m32","m33","m34","m41","m42","m43","m44"].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 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 c;const n=`CSSMatrix: invalid transform string "${t}"`;let s=!0;return e.split(")").filter(m=>m).map(m=>{const[t,e]=m.split("(");if(!e)throw TypeError(n);const r=e.split(",").map(m=>m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)),[i,a,o,l]=r;return s&&("matrix3d"===t||"rotate3d"===t&&[i,a].every(m=>!Number.isNaN(+m)&&0!==m)&&l||["rotateX","rotateY"].includes(t)&&i||"translate3d"===t&&[i,a,o].every(m=>!Number.isNaN(+m))&&o||"scale3d"===t&&[i,a,o].every(m=>!Number.isNaN(+m)&&m!==i))&&(s=!1),{prop:t,components:r}}).forEach(t=>{const{prop:e,components:i}=t,[a,o,l,c]=i,u=[a,o,l],f=[a,o,l,c];if("perspective"!==e||s)if(e.includes("matrix")){const t=i.map(m=>Math.abs(m)<1e-6?0:m);[6,16].includes(t.length)&&(r=r.multiply(m(t)))}else if(["translate","translate3d"].some(m=>e===m)&&a)r=r.translate(a,o||0,l||0);else if("rotate3d"===e&&f.every(m=>!Number.isNaN(+m))&&c)r=r.rotateAxisAngle(a,o,l,c);else if("scale3d"===e&&u.every(m=>!Number.isNaN(+m))&&u.some(m=>1!==m))r=r.scale(a,o,l);else if("rotate"===e&&a)r=r.rotate(0,0,a);else if("scale"!==e||Number.isNaN(a)||1===a)if("skew"===e&&(a||o))r=a?r.skewX(a):r,r=o?r.skewY(o):r;else{if(!(/[XYZ]/.test(e)&&["translate","rotate","scale","skew"].some(m=>e.includes(m))&&a))throw TypeError(n);if(e.includes("skew"))r=r[e](a);else{const m=e.replace(/[XYZ]/,""),t=e.replace(m,""),n=["X","Y","Z"].indexOf(t),s=[0===n?a:0,1===n?a:0,2===n?a:0];r=r[m](...s)}}else{const m=Number.isNaN(+o)?a:o;r=r.scale(a,m,1)}else r.m34=-1/a}),r}function r(m,t,e){const r=new c;return r.m41=m,r.e=m,r.m42=t,r.f=t,r.m43=e,r}function n(m,t,e){const r=new c,n=Math.PI/180,s=m*n,i=t*n,a=e*n,o=Math.cos(s),l=-Math.sin(s),u=Math.cos(i),f=-Math.sin(i),h=Math.cos(a),y=-Math.sin(a),p=u*h,M=-u*y;r.m11=p,r.a=p,r.m12=M,r.b=M,r.m13=f;const w=l*f*h+o*y;r.m21=w,r.c=w;const x=o*h-l*f*y;return r.m22=x,r.d=x,r.m23=-l*u,r.m31=l*y-o*f*h,r.m32=l*h+o*f*y,r.m33=o*u,r}function s(m,t,e,r){const n=new c,s=r*(Math.PI/360),i=Math.sin(s),a=Math.cos(s),o=i*i,l=Math.sqrt(m*m+t*t+e*e);let u=m,f=t,h=e;0===l?(u=0,f=0,h=1):(u/=l,f/=l,h/=l);const y=u*u,p=f*f,M=h*h,w=1-2*(p+M)*o;n.m11=w,n.a=w;const x=2*(u*f*o+h*i*a);n.m12=x,n.b=x,n.m13=2*(u*h*o-f*i*a);const N=2*(f*u*o-h*i*a);n.m21=N,n.c=N;const d=1-2*(M+y)*o;return n.m22=d,n.d=d,n.m23=2*(f*h*o+u*i*a),n.m31=2*(h*u*o+f*i*a),n.m32=2*(h*f*o-u*i*a),n.m33=1-2*(y+p)*o,n}function i(m,t,e){const r=new c;return r.m11=m,r.a=m,r.m22=t,r.d=t,r.m33=e,r}function a(m){const t=new c,e=m*Math.PI/180,r=Math.tan(e);return t.m21=r,t.c=r,t}function o(m){const t=new c,e=m*Math.PI/180,r=Math.tan(e);return t.m12=r,t.b=r,t}function l(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 c{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){let e=m;return m instanceof Array&&(m[0]instanceof Array&&[16,6].includes(m[0].length)||"string"==typeof m[0]||[c,DOMMatrix].some(t=>m[0]instanceof t))&&([e]=m),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[DOMMatrix,c].some(m=>r instanceof m)?t(r):"string"==typeof r&&r.length&&"none"!==r?e(r):Array.isArray(r)?m(r):this}toString(){const m=this.toArray().join(",");return`${this.is2D?"matrix":"matrix3d"}(${m})`}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)}toJSON(){return JSON.parse(JSON.stringify(this))}multiply(m){return l(this,m)}translate(m,t,e){let n=t,s=e;return null==s&&(s=0),null==n&&(n=0),l(this,r(m,n,s))}scale(m,t,e){let r=t,n=e;return null==r&&(r=m),null==n&&(n=m),l(this,i(m,r,n))}rotate(m,t,e){let r=m,s=t,i=e;return null==s&&(s=0),null==i&&(i=r,r=0),l(this,n(r,s,i))}rotateAxisAngle(m,t,e,r){if([m,t,e,r].some(m=>Number.isNaN(m)))throw new TypeError("CSSMatrix: expecting 4 values");return l(this,s(m,t,e,r))}skewX(m){return l(this,a(m))}skewY(m){return l(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,n=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,s=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/s,y:r/s,z:n/s,w:s}}}Object.assign(c,{Translate:r,Rotate:n,RotateAxisAngle:s,Scale:i,SkewX:a,SkewY:o,Multiply:l,fromArray:m,fromMatrix:t,fromString:e});export{c as default};
// DOMMatrix v0.0.21 | 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});export{l as default};
/*!
* DOMMatrix v0.0.20 (https://thednp.github.io/DOMMatrix/)
* DOMMatrix v0.0.21 (https://thednp.github.io/DOMMatrix/)
* Copyright 2021 © thednp

@@ -13,10 +13,9 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)

// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
// * `fromString` parses and loads values from any valid CSS transform string.
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;
// * `fromString` parses and loads values from any valid CSS transform string (TransformList).
/**
* Creates a new mutable `CSSMatrix` object given an array of floating point values.
*
* Creates a new mutable `CSSMatrix` instance given an array of 16/6 floating point values.
* This static method invalidates arrays that contain non-number elements.

@@ -31,8 +30,8 @@ *

function fromArray(array) {
if (!array.every(function (n) { return !Number.isNaN(n); })) {
throw TypeError(("CSSMatrix: \"" + array + "\" must only have numbers."));
}
var m = new CSSMatrix();
var a = Array.from(array);
if (!a.every(function (n) { return !Number.isNaN(n); })) {
throw TypeError(("CSSMatrix: \"" + array + "\" must only have numbers."));
}
if (a.length === 16) {

@@ -125,9 +124,4 @@ var m11 = a[0];

function fromMatrix(m) {
var keys = [
'm11', 'm12', 'm13', 'm14',
'm21', 'm22', 'm23', 'm24',
'm31', 'm32', 'm33', 'm34',
'm41', 'm42', 'm43', 'm44'];
if ([CSSMatrix, DOMMatrix].some(function (x) { return m instanceof x; })
|| (typeof m === 'object' && keys.every(function (k) { return k in m; }))) {
var keys = Object.keys(new CSSMatrix());
if (typeof m === 'object' && keys.every(function (k) { return k in m; })) {
return fromArray(

@@ -140,7 +134,8 @@ [m.m11, m.m12, m.m13, m.m14,

}
throw TypeError(("CSSMatrix: \"" + m + "\" is not a DOMMatrix / CSSMatrix compatible object."));
throw TypeError(("CSSMatrix: \"" + m + "\" is not a DOMMatrix / CSSMatrix / JSON compatible object."));
}
/**
* Creates a new mutable `CSSMatrix` instance given any valid CSS transform string.
* Creates a new mutable `CSSMatrix` given any valid CSS transform string,
* or what we call `TransformList`:
*

@@ -163,39 +158,20 @@ * * `matrix(a, b, c, d, e, f)` - valid matrix() transform function

var invalidStringError = "CSSMatrix: invalid transform string \"" + source + "\"";
var is2D = true;
// const transformFunctions = [
// 'matrix', 'matrix3d', 'perspective', 'translate3d',
// 'translate', 'translateX', 'translateY', 'translateZ',
// 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ',
// 'scale', 'scale3d', 'skewX', 'skewY'];
var tramsformObject = str.split(')').filter(function (f) { return f; }).map(function (fn) {
var ref = fn.split('(');
// const px = ['perspective'];
// const length = ['translate', 'translate3d', 'translateX', 'translateY', 'translateZ'];
// const deg = ['rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'skew', 'skewX', 'skewY'];
// const abs = ['scale', 'scale3d', 'matrix', 'matrix3d'];
// const transformFunctions = px.concat(length, deg, abs);
str.split(')').filter(function (f) { return f; }).forEach(function (tf) {
var ref = tf.split('(');
var prop = ref[0];
var value = ref[1];
if (!value) {
// invalidate
throw TypeError(invalidStringError);
}
// invalidate empty string
if (!value) { throw TypeError(invalidStringError); }
var components = value.split(',')
.map(function (n) { return (n.includes('rad') ? parseFloat(n) * (180 / Math.PI) : parseFloat(n)); });
var x = components[0];
var y = components[1];
var z = components[2];
var a = components[3];
// don't add perspective if is2D
if (is2D && (prop === 'matrix3d' // only modify is2D once
|| (prop === 'rotate3d' && [x, y].every(function (n) { return !Number.isNaN(+n) && n !== 0; }) && a)
|| (['rotateX', 'rotateY'].includes(prop) && x)
|| (prop === 'translate3d' && [x, y, z].every(function (n) { return !Number.isNaN(+n); }) && z)
|| (prop === 'scale3d' && [x, y, z].every(function (n) { return !Number.isNaN(+n) && n !== x; }))
)) {
is2D = false;
}
return { prop: prop, components: components };
});
tramsformObject.forEach(function (tf) {
var prop = tf.prop;
var components = tf.components;
var x = components[0];

@@ -208,26 +184,37 @@ var y = components[1];

if (prop === 'perspective' && !is2D) {
// single number value expected
if (prop === 'perspective' && x && [y, z].every(function (n) { return n === undefined; })) {
m.m34 = -1 / x;
} else if (prop.includes('matrix')) {
// 6/16 number values expected
} else if (prop.includes('matrix') && [6, 16].includes(components.length)
&& components.every(function (n) { return !Number.isNaN(+n); })) {
var values = components.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : n); });
if ([6, 16].includes(values.length)) {
m = m.multiply(fromArray(values));
}
} else if (['translate', 'translate3d'].some(function (p) { return prop === p; }) && x) {
m = m.translate(x, y || 0, z || 0);
m = m.multiply(fromArray(values));
// 3 values expected
} else if (prop === 'translate3d' && xyz.every(function (n) { return !Number.isNaN(+n); })) {
m = m.translate(x, y, z);
// single/double number value(s) expected
} else if (prop === 'translate' && x && z === undefined) {
m = m.translate(x, y || 0, 0);
// all 4 values expected
} else if (prop === 'rotate3d' && xyza.every(function (n) { return !Number.isNaN(+n); }) && a) {
m = m.rotateAxisAngle(x, y, z, a);
// single value expected
} else if (prop === 'rotate' && x && [y, z].every(function (n) { return n === undefined; })) {
m = m.rotate(0, 0, x);
// 4 values expected
} else if (prop === 'scale3d' && xyz.every(function (n) { return !Number.isNaN(+n); }) && xyz.some(function (n) { return n !== 1; })) {
m = m.scale(x, y, z);
} else if (prop === 'rotate' && x) {
m = m.rotate(0, 0, x);
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
// single value expected
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1 && z === undefined) {
var nosy = Number.isNaN(+y);
var sy = nosy ? x : y;
m = m.scale(x, sy, 1);
} else if (prop === 'skew' && (x || y)) {
m = x ? m.skewX(x) : m;
// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (/[XYZ]/.test(prop) && ['translate', 'rotate', 'scale', 'skew'].some(function (p) { return prop.includes(p); }) && x) {
if (prop.includes('skew')) {
} else if (/[XYZ]/.test(prop) && x && [y, z].every(function (n) { return n === undefined; }) // a single value expected
&& ['translate', 'rotate', 'scale', 'skew'].some(function (p) { return prop.includes(p); })) {
if (['skewX', 'skewY'].includes(prop)) {
// @ts-ignore unfortunately

@@ -397,3 +384,4 @@ m = m[prop](x);

* Creates a new `CSSMatrix` for the scale matrix and returns it.
* This method is equivalent to the CSS `scale3d()` function.
* This method is equivalent to the CSS `scale3d()` function, except it doesn't
* accept {x, y, z} transform origin parameters.
*

@@ -493,4 +481,4 @@ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

/**
* Creates and returns a new `DOMMatrix` compatible *Object*
* with equivalent instance methods.
* Creates and returns a new `DOMMatrix` compatible instance
* with equivalent instance.
*

@@ -503,6 +491,5 @@ * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

var CSSMatrix = function CSSMatrix() {
var assign;
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
var m = this;

@@ -520,11 +507,4 @@ // array 6

if (args && args.length) {
var ARGS = args;
var ARGS = [16, 6].some(function (l) { return l === args.length; }) ? args : args[0];
if (args instanceof Array) {
if ((args[0] instanceof Array && [16, 6].includes(args[0].length))
|| typeof args[0] === 'string'
|| [CSSMatrix, DOMMatrix].some(function (x) { return args[0] instanceof x; })) {
(assign = args, ARGS = assign[0]);
}
}
return m.setMatrixValue(ARGS);

@@ -598,13 +578,14 @@ }

// new CSSMatrix(CSSMatrix | DOMMatrix)
if ([DOMMatrix, CSSMatrix].some(function (x) { return source instanceof x; })) {
// @ts-ignore
return fromMatrix(source);
// CSS transform string source
} if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
// [Arguments list | Array] come here
} if (Array.isArray(source)) {
if ([Array, Float64Array, Float32Array].some(function (a) { return source instanceof a; })) {
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') {
return fromMatrix(source);
}
return m;

@@ -614,23 +595,6 @@ };

/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
* 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` property.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
CSSMatrix.prototype.toString = function toString () {
var m = this;
var values = m.toArray().join(',');
var type = m.is2D ? 'matrix' : 'matrix3d';
return (type + "(" + values + ")");
};
/**
* Returns an *Array* containing all 16 elements which comprise the matrix.
* The method can return either the elements.
*
* Other methods make use of this method to feed their output values from this matrix.
*
* @return {number[]} an *Array* representation of the matrix

@@ -640,3 +604,3 @@ */

var m = this;
var pow6 = (Math.pow( 10, 6 ));
var pow = (Math.pow( 10, 6 ));
var result;

@@ -654,12 +618,28 @@

// eslint-disable-next-line -- no-bitwise
return result.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : ((n * pow6) >> 0) / pow6); });
return result.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow); });
};
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
CSSMatrix.prototype.toString = function toString () {
var m = this;
var values = m.toArray();
var type = m.is2D ? 'matrix' : 'matrix3d';
return (type + "(" + values + ")");
};
/**
* Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
* excludes `is2D` & `isIdentity` properties.
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
* as the `is2D` & `isIdentity` properties.
*
* The result can also be used as a second parameter for the `fromMatrix` static method
* to load values into a matrix instance.
* to load values into another matrix instance.
*

@@ -669,3 +649,6 @@ * @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.

CSSMatrix.prototype.toJSON = function toJSON () {
return JSON.parse(JSON.stringify(this));
var m = this;
var is2D = m.is2D;
var isIdentity = m.isIdentity;
return Object.assign({}, m, {is2D: is2D, isIdentity: isIdentity});
};

@@ -692,4 +675,4 @@

* @param {number} x X component of the translation value.
* @param {number | null} y Y component of the translation value.
* @param {number | null} z Z component of the translation value.
* @param {number=} y Y component of the translation value.
* @param {number=} z Z component of the translation value.
* @return {CSSMatrix} The resulted matrix

@@ -701,4 +684,4 @@ */

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

@@ -714,4 +697,4 @@ };

* @param {number} x The X component of the scale value.
* @param {number | null} y The Y component of the scale value.
* @param {number | null} z The Z component of the scale value.
* @param {number=} y The Y component of the scale value.
* @param {number=} z The Z component of the scale value.
* @return {CSSMatrix} The resulted matrix

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

var Z = z;
if (Y == null) { Y = x; }
if (Z == null) { Z = x; }
if (Y === undefined) { Y = x; }
if (Z === undefined) { Z = 1; }

@@ -738,4 +721,4 @@ return Multiply(this, Scale(X, Y, Z));

* @param {number} rx The X component of the rotation, or Z if Y and Z are null.
* @param {number | null} ry The (optional) Y component of the rotation value.
* @param {number | null} rz The (optional) Z component of the rotation value.
* @param {number=} ry The (optional) Y component of the rotation value.
* @param {number=} rz The (optional) Z component of the rotation value.
* @return {CSSMatrix} The resulted matrix

@@ -747,4 +730,4 @@ */

var RZ = rz;
if (RY == null) { RY = 0; }
if (RZ == null) { RZ = RX; RX = 0; }
if (RY === undefined) { RY = 0; }
if (RZ === undefined) { RZ = RX; RX = 0; }
return Multiply(this, Rotate(RX, RY, RZ));

@@ -848,3 +831,3 @@ };

// Add Transform Functions to CSSMatrix object
// Don't create a TS namespace here
// without creating a TypeScript namespace.
Object.assign(CSSMatrix, {

@@ -851,0 +834,0 @@ Translate: Translate,

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

// DOMMatrix v0.0.20 | 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){if(!m.every((function(m){return!Number.isNaN(m)})))throw TypeError('CSSMatrix: "'+m+'" must only have numbers.');var t=new f,r=Array.from(m);if(16===r.length){var e=r[0],n=r[1],i=r[2],a=r[3],o=r[4],s=r[5],u=r[6],c=r[7],l=r[8],p=r[9],y=r[10],h=r[11],v=r[12],d=r[13],M=r[14],w=r[15];t.m11=e,t.a=e,t.m21=o,t.c=o,t.m31=l,t.m41=v,t.e=v,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=M,t.m14=a,t.m24=c,t.m34=h,t.m44=w}else{if(6!==r.length)throw new TypeError("CSSMatrix: expecting an Array of 6/16 values.");var x=r[0],N=r[1],b=r[2],g=r[3],S=r[4],A=r[5];t.m11=x,t.a=x,t.m12=N,t.b=N,t.m21=b,t.c=b,t.m22=g,t.d=g,t.m41=S,t.e=S,t.m42=A,t.f=A}return t}function t(t){if([f,DOMMatrix].some((function(m){return t instanceof m}))||"object"==typeof t&&["m11","m12","m13","m14","m21","m22","m23","m24","m31","m32","m33","m34","m41","m42","m43","m44"].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 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+'"',i=!0;return r.split(")").filter((function(m){return m})).map((function(m){var t=m.split("("),r=t[0],e=t[1];if(!e)throw TypeError(n);var a=e.split(",").map((function(m){return m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)})),o=a[0],s=a[1],u=a[2],f=a[3];return i&&("matrix3d"===r||"rotate3d"===r&&[o,s].every((function(m){return!Number.isNaN(+m)&&0!==m}))&&f||["rotateX","rotateY"].includes(r)&&o||"translate3d"===r&&[o,s,u].every((function(m){return!Number.isNaN(+m)}))&&u||"scale3d"===r&&[o,s,u].every((function(m){return!Number.isNaN(+m)&&m!==o})))&&(i=!1),{prop:r,components:a}})).forEach((function(t){var r=t.prop,a=t.components,o=a[0],s=a[1],u=a[2],f=a[3],c=[o,s,u],l=[o,s,u,f];if("perspective"!==r||i)if(r.includes("matrix")){var p=a.map((function(m){return Math.abs(m)<1e-6?0:m}));[6,16].includes(p.length)&&(e=e.multiply(m(p)))}else if(["translate","translate3d"].some((function(m){return r===m}))&&o)e=e.translate(o,s||0,u||0);else if("rotate3d"===r&&l.every((function(m){return!Number.isNaN(+m)}))&&f)e=e.rotateAxisAngle(o,s,u,f);else if("scale3d"===r&&c.every((function(m){return!Number.isNaN(+m)}))&&c.some((function(m){return 1!==m})))e=e.scale(o,s,u);else if("rotate"===r&&o)e=e.rotate(0,0,o);else if("scale"!==r||Number.isNaN(o)||1===o)if("skew"===r&&(o||s))e=o?e.skewX(o):e,e=s?e.skewY(s):e;else{if(!(/[XYZ]/.test(r)&&["translate","rotate","scale","skew"].some((function(m){return r.includes(m)}))&&o))throw TypeError(n);if(r.includes("skew"))e=e[r](o);else{var y=r.replace(/[XYZ]/,""),h=r.replace(y,""),v=["X","Y","Z"].indexOf(h),d=[0===v?o:0,1===v?o:0,2===v?o:0];e=e[y].apply(e,d)}}else{var M=Number.isNaN(+s)?o:s;e=e.scale(o,M,1)}else e.m34=-1/o})),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,a=t*n,o=r*n,s=Math.cos(i),u=-Math.sin(i),c=Math.cos(a),l=-Math.sin(a),p=Math.cos(o),y=-Math.sin(o),h=c*p,v=-c*y;e.m11=h,e.a=h,e.m12=v,e.b=v,e.m13=l;var d=u*l*p+s*y;e.m21=d,e.c=d;var M=s*p-u*l*y;return e.m22=M,e.d=M,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),a=Math.sin(i),o=Math.cos(i),s=a*a,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,h=l*l,v=p*p,d=1-2*(h+v)*s;n.m11=d,n.a=d;var M=2*(c*l*s+p*a*o);n.m12=M,n.b=M,n.m13=2*(c*p*s-l*a*o);var w=2*(l*c*s-p*a*o);n.m21=w,n.c=w;var x=1-2*(v+y)*s;return n.m22=x,n.d=x,n.m23=2*(l*p*s+c*a*o),n.m31=2*(p*c*s+l*a*o),n.m32=2*(p*l*s-c*a*o),n.m33=1-2*(y+h)*s,n}function a(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 o(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 m(){for(var t=[],r=arguments.length;r--;)t[r]=arguments[r];var e=this;if(e.a=1,e.b=0,e.c=0,e.d=1,e.e=0,e.f=0,e.m11=1,e.m12=0,e.m13=0,e.m14=0,e.m21=0,e.m22=1,e.m23=0,e.m24=0,e.m31=0,e.m32=0,e.m33=1,e.m34=0,e.m41=0,e.m42=0,e.m43=0,e.m44=1,t&&t.length){var n=t;return t instanceof Array&&(t[0]instanceof Array&&[16,6].includes(t[0].length)||"string"==typeof t[0]||[m,DOMMatrix].some((function(m){return t[0]instanceof m})))&&(n=t[0]),e.setMatrixValue(n)}return e},c={isIdentity:{configurable:!0},is2D:{configurable:!0}};return 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[DOMMatrix,f].some((function(m){return e instanceof m}))?t(e):"string"==typeof e&&e.length&&"none"!==e?r(e):Array.isArray(e)?m(e):this},f.prototype.toString=function(){var m=this.toArray().join(",");return(this.is2D?"matrix":"matrix3d")+"("+m+")"},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.toJSON=function(){return JSON.parse(JSON.stringify(this))},f.prototype.multiply=function(m){return u(this,m)},f.prototype.translate=function(m,t,r){var n=t,i=r;return null==i&&(i=0),null==n&&(n=0),u(this,e(m,n,i))},f.prototype.scale=function(m,t,r){var e=t,n=r;return null==e&&(e=m),null==n&&(n=m),u(this,a(m,e,n))},f.prototype.rotate=function(m,t,r){var e=m,i=t,a=r;return null==i&&(i=0),null==a&&(a=e,e=0),u(this,n(e,i,a))},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,o(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:a,SkewX:o,SkewY:s,Multiply:u,fromArray:m,fromMatrix:t,fromString:r}),f}));
// DOMMatrix v0.0.21 | 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}};return 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}),f}));
{
"name": "dommatrix",
"version": "0.0.20",
"version": "0.0.21",
"description": "ES6+ shim for DOMMatrix",

@@ -5,0 +5,0 @@ "main": "dist/dommatrix.js",

@@ -36,3 +36,3 @@ 'use strict';

if (FORMAT!=='esm') {
PLUGINS.push(buble());
PLUGINS.push(buble({objectAssign: 'Object.assign'}));
}

@@ -39,0 +39,0 @@

// DOMMatrix Static methods
// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
// * `fromString` parses and loads values from any valid CSS transform string.
// * `fromFloat64Array` and `fromFloat32Array are not implemented;
// * `fromArray` is a more simple implementation, should also accept Float[32/64]Array;
// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance or JSON object;
// * `fromString` parses and loads values from any valid CSS transform string (TransformList).
/**
* Creates a new mutable `CSSMatrix` object given an array of floating point values.
*
* Creates a new mutable `CSSMatrix` instance given an array of 16/6 floating point values.
* This static method invalidates arrays that contain non-number elements.

@@ -19,8 +18,8 @@ *

export function fromArray(array) {
if (!array.every((n) => !Number.isNaN(n))) {
throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
}
const m = new CSSMatrix();
const a = Array.from(array);
if (!a.every((n) => !Number.isNaN(n))) {
throw TypeError(`CSSMatrix: "${array}" must only have numbers.`);
}
if (a.length === 16) {

@@ -96,9 +95,4 @@ const [m11, m12, m13, m14,

export function fromMatrix(m) {
const keys = [
'm11', 'm12', 'm13', 'm14',
'm21', 'm22', 'm23', 'm24',
'm31', 'm32', 'm33', 'm34',
'm41', 'm42', 'm43', 'm44'];
if ([CSSMatrix, DOMMatrix].some((x) => m instanceof x)
|| (typeof m === 'object' && keys.every((k) => k in m))) {
const keys = Object.keys(new CSSMatrix());
if (typeof m === 'object' && keys.every((k) => k in m)) {
return fromArray(

@@ -111,7 +105,8 @@ [m.m11, m.m12, m.m13, m.m14,

}
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix compatible object.`);
throw TypeError(`CSSMatrix: "${m}" is not a DOMMatrix / CSSMatrix / JSON compatible object.`);
}
/**
* Creates a new mutable `CSSMatrix` instance given any valid CSS transform string.
* Creates a new mutable `CSSMatrix` given any valid CSS transform string,
* or what we call `TransformList`:
*

@@ -134,33 +129,18 @@ * * `matrix(a, b, c, d, e, f)` - valid matrix() transform function

const invalidStringError = `CSSMatrix: invalid transform string "${source}"`;
let is2D = true;
// const transformFunctions = [
// 'matrix', 'matrix3d', 'perspective', 'translate3d',
// 'translate', 'translateX', 'translateY', 'translateZ',
// 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ',
// 'scale', 'scale3d', 'skewX', 'skewY'];
const tramsformObject = str.split(')').filter((f) => f).map((fn) => {
const [prop, value] = fn.split('(');
if (!value) {
// invalidate
throw TypeError(invalidStringError);
}
// const px = ['perspective'];
// const length = ['translate', 'translate3d', 'translateX', 'translateY', 'translateZ'];
// const deg = ['rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'skew', 'skewX', 'skewY'];
// const abs = ['scale', 'scale3d', 'matrix', 'matrix3d'];
// const transformFunctions = px.concat(length, deg, abs);
str.split(')').filter((f) => f).forEach((tf) => {
const [prop, value] = tf.split('(');
// invalidate empty string
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;
// don't add perspective if is2D
if (is2D && (prop === 'matrix3d' // only modify is2D once
|| (prop === 'rotate3d' && [x, y].every((n) => !Number.isNaN(+n) && n !== 0) && a)
|| (['rotateX', 'rotateY'].includes(prop) && x)
|| (prop === 'translate3d' && [x, y, z].every((n) => !Number.isNaN(+n)) && z)
|| (prop === 'scale3d' && [x, y, z].every((n) => !Number.isNaN(+n) && n !== x))
)) {
is2D = false;
}
return { prop, components };
});
tramsformObject.forEach((tf) => {
const { prop, components } = tf;
const [x, y, z, a] = components;

@@ -170,26 +150,37 @@ const xyz = [x, y, z];

if (prop === 'perspective' && !is2D) {
// single number value expected
if (prop === 'perspective' && x && [y, z].every((n) => n === undefined)) {
m.m34 = -1 / x;
} else if (prop.includes('matrix')) {
// 6/16 number values expected
} else if (prop.includes('matrix') && [6, 16].includes(components.length)
&& components.every((n) => !Number.isNaN(+n))) {
const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
if ([6, 16].includes(values.length)) {
m = m.multiply(fromArray(values));
}
} else if (['translate', 'translate3d'].some((p) => prop === p) && x) {
m = m.translate(x, y || 0, z || 0);
m = m.multiply(fromArray(values));
// 3 values expected
} else if (prop === 'translate3d' && xyz.every((n) => !Number.isNaN(+n))) {
m = m.translate(x, y, z);
// single/double number value(s) expected
} else if (prop === 'translate' && x && z === undefined) {
m = m.translate(x, y || 0, 0);
// all 4 values expected
} else if (prop === 'rotate3d' && xyza.every((n) => !Number.isNaN(+n)) && a) {
m = m.rotateAxisAngle(x, y, z, a);
// single value expected
} else if (prop === 'rotate' && x && [y, z].every((n) => n === undefined)) {
m = m.rotate(0, 0, x);
// 4 values expected
} else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {
m = m.scale(x, y, z);
} else if (prop === 'rotate' && x) {
m = m.rotate(0, 0, x);
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
// single value expected
} else if (prop === 'scale' && !Number.isNaN(x) && x !== 1 && z === undefined) {
const nosy = Number.isNaN(+y);
const sy = nosy ? x : y;
m = m.scale(x, sy, 1);
} else if (prop === 'skew' && (x || y)) {
m = x ? m.skewX(x) : m;
// single/double value expected
} else if (prop === 'skew' && x && z === undefined) {
m = m.skewX(x);
m = y ? m.skewY(y) : m;
} else if (/[XYZ]/.test(prop) && ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p)) && x) {
if (prop.includes('skew')) {
} else if (/[XYZ]/.test(prop) && x && [y, z].every((n) => n === undefined) // a single value expected
&& ['translate', 'rotate', 'scale', 'skew'].some((p) => prop.includes(p))) {
if (['skewX', 'skewY'].includes(prop)) {
// @ts-ignore unfortunately

@@ -359,3 +350,4 @@ m = m[prop](x);

* Creates a new `CSSMatrix` for the scale matrix and returns it.
* This method is equivalent to the CSS `scale3d()` function.
* This method is equivalent to the CSS `scale3d()` function, except it doesn't
* accept {x, y, z} transform origin parameters.
*

@@ -455,4 +447,4 @@ * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

/**
* Creates and returns a new `DOMMatrix` compatible *Object*
* with equivalent instance methods.
* Creates and returns a new `DOMMatrix` compatible instance
* with equivalent instance.
*

@@ -485,11 +477,4 @@ * https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

if (args && args.length) {
let ARGS = args;
const ARGS = [16, 6].some((l) => l === args.length) ? args : args[0];
if (args instanceof Array) {
if ((args[0] instanceof Array && [16, 6].includes(args[0].length))
|| typeof args[0] === 'string'
|| [CSSMatrix, DOMMatrix].some((x) => args[0] instanceof x)) {
[ARGS] = args;
}
}
return m.setMatrixValue(ARGS);

@@ -561,13 +546,14 @@ }

// new CSSMatrix(CSSMatrix | DOMMatrix)
if ([DOMMatrix, CSSMatrix].some((x) => source instanceof x)) {
// @ts-ignore
return fromMatrix(source);
// CSS transform string source
} if (typeof source === 'string' && source.length && source !== 'none') {
return fromString(source);
// [Arguments list | Array] come here
} if (Array.isArray(source)) {
if ([Array, Float64Array, Float32Array].some((a) => source instanceof a)) {
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') {
return fromMatrix(source);
}
return m;

@@ -577,23 +563,6 @@ }

/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
* 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` property.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
toString() {
const m = this;
const values = m.toArray().join(',');
const type = m.is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;
}
/**
* Returns an *Array* containing all 16 elements which comprise the matrix.
* The method can return either the elements.
*
* Other methods make use of this method to feed their output values from this matrix.
*
* @return {number[]} an *Array* representation of the matrix

@@ -603,3 +572,3 @@ */

const m = this;
const pow6 = (10 ** 6);
const pow = (10 ** 6);
let result;

@@ -617,12 +586,28 @@

// eslint-disable-next-line -- no-bitwise
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow6) >> 0) / pow6));
return result.map((n) => (Math.abs(n) < 1e-6 ? 0 : ((n * pow) >> 0) / pow));
}
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return {string} a string representation of the matrix
*/
toString() {
const m = this;
const values = m.toArray();
const type = m.is2D ? 'matrix' : 'matrix3d';
return `${type}(${values})`;
}
/**
* Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
* excludes `is2D` & `isIdentity` properties.
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
* as the `is2D` & `isIdentity` properties.
*
* The result can also be used as a second parameter for the `fromMatrix` static method
* to load values into a matrix instance.
* to load values into another matrix instance.
*

@@ -632,3 +617,5 @@ * @return {CSSMatrix.JSONMatrix} an *Object* with all matrix values.

toJSON() {
return JSON.parse(JSON.stringify(this));
const m = this;
const { is2D, isIdentity } = m;
return { ...m, is2D, isIdentity };
}

@@ -655,4 +642,4 @@

* @param {number} x X component of the translation value.
* @param {number | null} y Y component of the translation value.
* @param {number | null} z Z component of the translation value.
* @param {number=} y Y component of the translation value.
* @param {number=} z Z component of the translation value.
* @return {CSSMatrix} The resulted matrix

@@ -664,4 +651,4 @@ */

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

@@ -677,4 +664,4 @@ }

* @param {number} x The X component of the scale value.
* @param {number | null} y The Y component of the scale value.
* @param {number | null} z The Z component of the scale value.
* @param {number=} y The Y component of the scale value.
* @param {number=} z The Z component of the scale value.
* @return {CSSMatrix} The resulted matrix

@@ -686,4 +673,4 @@ */

let Z = z;
if (Y == null) Y = x;
if (Z == null) Z = x;
if (Y === undefined) Y = x;
if (Z === undefined) Z = 1; // Z must be 1 if undefined

@@ -701,4 +688,4 @@ return Multiply(this, Scale(X, Y, Z));

* @param {number} rx The X component of the rotation, or Z if Y and Z are null.
* @param {number | null} ry The (optional) Y component of the rotation value.
* @param {number | null} rz The (optional) Z component of the rotation value.
* @param {number=} ry The (optional) Y component of the rotation value.
* @param {number=} rz The (optional) Z component of the rotation value.
* @return {CSSMatrix} The resulted matrix

@@ -710,4 +697,4 @@ */

let RZ = rz;
if (RY == null) RY = 0;
if (RZ == null) { RZ = RX; RX = 0; }
if (RY === undefined) RY = 0;
if (RZ === undefined) { RZ = RX; RX = 0; }
return Multiply(this, Rotate(RX, RY, RZ));

@@ -810,3 +797,3 @@ }

// Add Transform Functions to CSSMatrix object
// Don't create a TS namespace here
// without creating a TypeScript namespace.
Object.assign(CSSMatrix, {

@@ -813,0 +800,0 @@ Translate,

@@ -41,9 +41,9 @@ export function fromArray(array: number[]): CSSMatrix;

setMatrixValue(source: string | number[] | CSSMatrix | DOMMatrix): CSSMatrix;
toArray(): number[];
toString(): string;
toArray(): number[];
toJSON(): CSSMatrix.JSONMatrix;
multiply(m2: CSSMatrix | DOMMatrix | CSSMatrix.JSONMatrix): CSSMatrix;
translate(x: number, y: number | null, z: number | null): CSSMatrix;
scale(x: number, y: number | null, z: number | null): CSSMatrix;
rotate(rx: number, ry: number | null, rz: number | null): CSSMatrix;
translate(x: number, y?: number | undefined, z?: number | undefined): CSSMatrix;
scale(x: number, y?: number | undefined, z?: number | undefined): CSSMatrix;
rotate(rx: number, ry?: number | undefined, rz?: number | undefined): CSSMatrix;
rotateAxisAngle(x: number, y: number, z: number, angle: number): CSSMatrix;

@@ -50,0 +50,0 @@ skewX(angle: number): CSSMatrix;

@@ -33,4 +33,6 @@ export as namespace CSSMatrix;

f: number;
is2D: boolean;
isIdentity: boolean;
};
import * as CSSMatrix from './dommatrix';
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc