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.3 to 0.0.4-a

412

dist/dommatrix.esm.js
/*!
* DOMMatrix v0.0.3 (https://github.com/thednp/dommatrix)
* DOMMatrix v0.0.4a (https://github.com/thednp/dommatrix)
* Copyright 2020 © thednp
* Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
*/
function Translate(x, y, z){
var m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
}
function Rotate(rx, ry, rz){
rx *= Math.PI / 180;
ry *= Math.PI / 180;
rz *= Math.PI / 180;
var cosx = Math.cos(rx), sinx = - Math.sin(rx);
var cosy = Math.cos(ry), siny = - Math.sin(ry);
var cosz = Math.cos(rz), sinz = - Math.sin(rz);
var m = new CSSMatrix();
m.m11 = m.a = cosy * cosz;
m.m12 = m.b = - cosy * sinz;
m.m13 = siny;
m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
m.m23 = - sinx * cosy;
m.m31 = sinx * sinz - cosx * siny * cosz;
m.m32 = sinx * cosz + cosx * siny * sinz;
m.m33 = cosx * cosy;
return m
var m = new CSSMatrix();
rx *= Math.PI / 180;
ry *= Math.PI / 180;
rz *= Math.PI / 180;
var cosx = Math.cos(rx), sinx = -Math.sin(rx),
cosy = Math.cos(ry), siny = -Math.sin(ry),
cosz = Math.cos(rz), sinz = -Math.sin(rz);
m.m11 = m.a = cosy * cosz;
m.m12 = m.b = -cosy * sinz;
m.m13 = siny;
m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
m.m23 = -sinx * cosy;
m.m31 = sinx * sinz - cosx * siny * cosz;
m.m32 = sinx * cosz + cosx * siny * sinz;
m.m33 = cosx * cosy;
return m
}
function RotateAxisAngle(x, y, z, angle){
angle *= Math.PI / 360;
var sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA;
var length = Math.sqrt(x * x + y * y + z * z);
if (length === 0){
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
var x2 = x * x, y2 = y * y, z2 = z * z;
var m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
return m
angle *= Math.PI / 360;
var sinA = Math.sin(angle),
cosA = Math.cos(angle),
sinA2 = sinA * sinA,
length = Math.sqrt(x * x + y * y + z * z);
if (length === 0){
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
var x2 = x * x, y2 = y * y, z2 = z * z;
var m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
return m
}
function Scale(x, y, z){
var m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
var m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
}
function SkewX(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
}
function SkewY(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
}
function Translate(x, y, z){
var m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
function Multiply(m1, m2){
var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
return new CSSMatrix(
[m11, m21, m31, m41,
m12, m22, m32, m42,
m13, m23, m33, m43,
m14, m24, m34, m44])
}
function multiply(m1, m2){
var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
return new CSSMatrix(
m11, m12, m13, m14,
m21, m22, m23, m24,
m31, m32, m33, m34,
m41, m42, m43, m44
)
function fromMatrix(m){
return new CSSMatrix(
[m.m11, m.m21, m.m31, m.m41,
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44])
}
function fromArray(a){
return feedFromArray(new CSSMatrix(),a)
}
function feedFromArray(m,array){
var a = Array.from(array);
if (a.length == 16){
m.m11 = m.a = a[0];
m.m21 = m.c = a[1];
m.m31 = a[2];
m.m41 = m.e = a[3];
m.m12 = m.b = a[4];
m.m22 = m.d = a[5];
m.m32 = a[6];
m.m42 = m.f = a[7];
m.m13 = a[8];
m.m23 = a[9];
m.m33 = a[10];
m.m43 = a[11];
m.m14 = a[12];
m.m24 = a[13];
m.m34 = a[14];
m.m44 = a[15];
} else if (a.length == 6) {
m.m11 = m.a = a[0];
m.m12 = m.b = a[1];
m.m14 = m.e = a[4];
m.m21 = m.c = a[2];
m.m22 = m.d = a[3];
m.m24 = m.f = a[5];
} else {
console.error("CSSMatrix: expecting a 6/16 values Array");
}
return m
}
var CSSMatrix = function CSSMatrix(){
var a = [].slice.call(arguments), m = this;
if (a.length) { for (var i = a.length; i--;){
if (Math.abs(a[i]) < 1e-6) { a[i] = 0; }
} }
m.setIdentity();
if (a.length == 16){
m.is2D = false;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m13 = a[2]; m.m14 = a[3];
m.m21 = m.c = a[4]; m.m22 = m.d = a[5]; m.m23 = a[6]; m.m24 = a[7];
m.m31 = a[8]; m.m32 = a[9]; m.m33 = a[10]; m.m34 = a[11];
m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15];
} else if (a.length == 6) {
m.is2D = true;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4];
m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5];
} else if (a.length === 1 && typeof a[0] == 'string') {
m.setMatrixValue(a[0]);
} else if (a.length > 0) {
throw new TypeError('Invalid Matrix Value');
}
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
this.setIdentity();
return args && args.length && this.setMatrixValue(args)
};
CSSMatrix.prototype.setMatrixValue = function setMatrixValue (string){
string = String(string).trim();
var m = this;
m.setIdentity();
if (string == 'none') { return m; }
var type = string.slice(0, string.indexOf('(')), parts, i;
if (type == 'matrix3d'){
m.is2D = false;
m.isIdentity = false;
parts = string.slice(9, -1).split(',');
for (i = parts.length; i--;) { parts[i] = +(parts[i]); }
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[1]; m.m13 = parts[2]; m.m14 = parts[3];
m.m21 = m.c = parts[4]; m.m22 = m.d = parts[5]; m.m23 = parts[6]; m.m24 = parts[7];
m.m31 = parts[8]; m.m32 = parts[9]; m.m33 = parts[10]; m.m34 = parts[11];
m.m41 = m.e = parts[12]; m.m42 = m.f = parts[13]; m.m43 = parts[14]; m.m44 = parts[15];
} else if (type == 'matrix'){
m.is2D = true;
m.isIdentity = false;
parts = string.slice(7, -1).split(',');
for (i = parts.length; i--;) { parts[i] = +(parts[i]); }
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[2]; m.m41 = m.e = parts[4];
m.m21 = m.c = parts[1]; m.m22 = m.d = parts[3]; m.m42 = m.f = parts[5];
} else {
throw new TypeError('Invalid Matrix Value');
}
return m
var prototypeAccessors = { isIdentity: { configurable: true },is2D: { configurable: true } };
CSSMatrix.prototype.setMatrixValue = function setMatrixValue (source){
var m = this;
if (!source || !source.length) {
return m
} else if (source.length && typeof source[0] === 'string' && source[0].length) {
var string = String(source[0]).trim(), type = '', values = [];
if (string == 'none') { return m; }
type = string.slice(0, string.indexOf('('));
values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
.map(function (n){ return Math.abs(n) < 1e-6 ? 0 : +n; });
if ([6,16].indexOf(values.length)>-1){
feedFromArray(m,values);
} else {
console.error("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");
}
} else if (source[0] instanceof CSSMatrix) {
feedFromArray(m,source[0].toArray());
} else if (Array.isArray(source[0])) {
feedFromArray(m,source[0]);
} else if (Array.isArray(source)) {
feedFromArray(m,source);
}
return m
};
CSSMatrix.prototype.multiply = function multiply$1 (m2){
return multiply(this, m2)
CSSMatrix.prototype.toString = function toString (){
var m = this, type = m.is2D ? 'matrix' : 'matrix3d';
return (type + "(" + (m.toArray(1).join(',')) + ")")
};
CSSMatrix.prototype.toArray = function toArray (transposed){
var m = this;
return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
: transposed
?[m.m11, m.m12, m.m13, m.m14,
m.m21, m.m22, m.m23, m.m24,
m.m31, m.m32, m.m33, m.m34,
m.m41, m.m42, m.m43, m.m44]
:[m.m11, m.m21, m.m31, m.m41,
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44]
};
CSSMatrix.prototype.multiply = function multiply (m2){
return Multiply(this,m2)
};
CSSMatrix.prototype.translate = function translate (x, y, z){
if (z == null) { z = 0; }
if (y == null) { y = 0; }
this.m34 !== 0 && z && (this.is2D = false);
return multiply(this, Translate(x, y, z))
if (z == null) { z = 0; }
if (y == null) { y = 0; }
return Multiply(this,Translate(x, y, z))
};
CSSMatrix.prototype.scale = function scale (x, y, z){
if (y == null) { y = x; }
if (z == null) { z = 1; }
this.m34 !== 0 && (x !== y || x !== z || y !== z) && (this.is2D = false);
return multiply(this, Scale(x, y, z))
if (y == null) { y = x; }
if (z == null) { z = x; }
return Multiply(this,Scale(x, y, z))
};
CSSMatrix.prototype.rotate = function rotate (rx, ry, rz){
if (ry == null) { ry = rx; }
if (rz == null) { rz = rx; }
this.m34 !== 0 && (rx || ry) && (this.is2D = false);
return multiply(this, Rotate(rx, ry, rz))
if (ry == null) { ry = 0; }
if (rz == null) {rz = rx; rx = 0;}
return Multiply(this,Rotate(rx, ry, rz))
};
CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle){
this.m34 !== 0 && (x || y) && (this.is2D = false);
if (y == null) { y = x; }
if (z == null) { z = x; }
return multiply(this, RotateAxisAngle(x, y, z, angle))
if (arguments.length!==4){
console.error("CSSMatrix: expecting 4 values");
return this
}
return Multiply(this,RotateAxisAngle(x, y, z, angle))
};
CSSMatrix.prototype.skewX = function skewX (angle){
return multiply(this, SkewX(angle))
return Multiply(this,SkewX(angle))
};
CSSMatrix.prototype.skewY = function skewY (angle){
return multiply(this, SkewY(angle))
return Multiply(this,SkewY(angle))
};
CSSMatrix.prototype.toString = function toString (){
var m = this;
if (m.is2D){
return 'matrix(' + [
m.a, m.b,
m.c, m.d,
m.e, m.f
].join(', ') + ')';
}
return 'matrix3d(' + [
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
].join(', ') + ')'
};
CSSMatrix.prototype.setIdentity = function setIdentity (){
var m = this;
m.is2D = true;
m.isIdentity = true;
m.m11 = m.a = 1; m.m12 = m.b = 0; m.m13 = 0; m.m14 = 0;
m.m21 = m.c = 0; m.m22 = m.d = 1; m.m23 = 0; m.m24 = 0;
m.m31 = 0; m.m32 = 0; m.m33 = 1; m.m34 = 0;
m.m41 = m.e = 0; m.m42 = m.f = 0; m.m43 = 0; m.m44 = 1;
return this
var identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
return feedFromArray(this,identity)
};
prototypeAccessors.isIdentity.get = function (){
var m = this;
return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
};
prototypeAccessors.isIdentity.set = function (value){
this.isIdentity = value;
};
prototypeAccessors.is2D.get = function (){
var m = this;
return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
};
prototypeAccessors.is2D.set = function (value){
this.is2D = value;
};
CSSMatrix.prototype.transformPoint = function transformPoint (v){
var _m = this, m = Translate(v.x, v.y, v.z);
m.m44 = v.w || 1;
m = _m.multiply(m);
return {
x: m.m41,
y: m.m42,
z: m.m43,
w: m.m44
}
};
Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
CSSMatrix.Translate = Translate;
CSSMatrix.Rotate = Rotate;
CSSMatrix.RotateAxisAngle = RotateAxisAngle;
CSSMatrix.Scale = Scale;
CSSMatrix.SkewX = SkewX;
CSSMatrix.SkewY = SkewY;
CSSMatrix.Multiply = Multiply;
CSSMatrix.fromMatrix = fromMatrix;
CSSMatrix.fromArray = fromArray;
CSSMatrix.feedFromArray = feedFromArray;
export default CSSMatrix;

4

dist/dommatrix.esm.min.js

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

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

480

dist/dommatrix.js
/*!
* DOMMatrix v0.0.3 (https://github.com/thednp/dommatrix)
* DOMMatrix v0.0.4a (https://github.com/thednp/dommatrix)
* Copyright 2020 © thednp

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

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CSSMatrix = factory());
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CSSMatrix = factory());
}(this, (function () { 'use strict';
function Rotate(rx, ry, rz){
rx *= Math.PI / 180;
ry *= Math.PI / 180;
rz *= Math.PI / 180;
var cosx = Math.cos(rx), sinx = - Math.sin(rx);
var cosy = Math.cos(ry), siny = - Math.sin(ry);
var cosz = Math.cos(rz), sinz = - Math.sin(rz);
var m = new CSSMatrix();
m.m11 = m.a = cosy * cosz;
m.m12 = m.b = - cosy * sinz;
m.m13 = siny;
m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
m.m23 = - sinx * cosy;
m.m31 = sinx * sinz - cosx * siny * cosz;
m.m32 = sinx * cosz + cosx * siny * sinz;
m.m33 = cosx * cosy;
return m
}
function RotateAxisAngle(x, y, z, angle){
angle *= Math.PI / 360;
var sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA;
var length = Math.sqrt(x * x + y * y + z * z);
if (length === 0){
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
var x2 = x * x, y2 = y * y, z2 = z * z;
var m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
return m
}
function Scale(x, y, z){
var m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
}
function SkewX(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
}
function SkewY(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
}
function Translate(x, y, z){
var m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
}
function multiply(m1, m2){
var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
return new CSSMatrix(
m11, m12, m13, m14,
m21, m22, m23, m24,
m31, m32, m33, m34,
m41, m42, m43, m44
)
}
var CSSMatrix = function CSSMatrix(){
var a = [].slice.call(arguments), m = this;
if (a.length) { for (var i = a.length; i--;){
if (Math.abs(a[i]) < 1e-6) { a[i] = 0; }
} }
m.setIdentity();
if (a.length == 16){
m.is2D = false;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m13 = a[2]; m.m14 = a[3];
m.m21 = m.c = a[4]; m.m22 = m.d = a[5]; m.m23 = a[6]; m.m24 = a[7];
m.m31 = a[8]; m.m32 = a[9]; m.m33 = a[10]; m.m34 = a[11];
m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15];
} else if (a.length == 6) {
m.is2D = true;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4];
m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5];
} else if (a.length === 1 && typeof a[0] == 'string') {
m.setMatrixValue(a[0]);
} else if (a.length > 0) {
throw new TypeError('Invalid Matrix Value');
}
};
CSSMatrix.prototype.setMatrixValue = function setMatrixValue (string){
string = String(string).trim();
var m = this;
m.setIdentity();
if (string == 'none') { return m; }
var type = string.slice(0, string.indexOf('(')), parts, i;
if (type == 'matrix3d'){
m.is2D = false;
m.isIdentity = false;
parts = string.slice(9, -1).split(',');
for (i = parts.length; i--;) { parts[i] = +(parts[i]); }
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[1]; m.m13 = parts[2]; m.m14 = parts[3];
m.m21 = m.c = parts[4]; m.m22 = m.d = parts[5]; m.m23 = parts[6]; m.m24 = parts[7];
m.m31 = parts[8]; m.m32 = parts[9]; m.m33 = parts[10]; m.m34 = parts[11];
m.m41 = m.e = parts[12]; m.m42 = m.f = parts[13]; m.m43 = parts[14]; m.m44 = parts[15];
} else if (type == 'matrix'){
m.is2D = true;
m.isIdentity = false;
parts = string.slice(7, -1).split(',');
for (i = parts.length; i--;) { parts[i] = +(parts[i]); }
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[2]; m.m41 = m.e = parts[4];
m.m21 = m.c = parts[1]; m.m22 = m.d = parts[3]; m.m42 = m.f = parts[5];
} else {
throw new TypeError('Invalid Matrix Value');
}
return m
};
CSSMatrix.prototype.multiply = function multiply$1 (m2){
return multiply(this, m2)
};
CSSMatrix.prototype.translate = function translate (x, y, z){
if (z == null) { z = 0; }
if (y == null) { y = 0; }
this.m34 !== 0 && z && (this.is2D = false);
return multiply(this, Translate(x, y, z))
};
CSSMatrix.prototype.scale = function scale (x, y, z){
if (y == null) { y = x; }
if (z == null) { z = 1; }
this.m34 !== 0 && (x !== y || x !== z || y !== z) && (this.is2D = false);
return multiply(this, Scale(x, y, z))
};
CSSMatrix.prototype.rotate = function rotate (rx, ry, rz){
if (ry == null) { ry = rx; }
if (rz == null) { rz = rx; }
this.m34 !== 0 && (rx || ry) && (this.is2D = false);
return multiply(this, Rotate(rx, ry, rz))
};
CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle){
this.m34 !== 0 && (x || y) && (this.is2D = false);
if (y == null) { y = x; }
if (z == null) { z = x; }
return multiply(this, RotateAxisAngle(x, y, z, angle))
};
CSSMatrix.prototype.skewX = function skewX (angle){
return multiply(this, SkewX(angle))
};
CSSMatrix.prototype.skewY = function skewY (angle){
return multiply(this, SkewY(angle))
};
CSSMatrix.prototype.toString = function toString (){
var m = this;
if (m.is2D){
return 'matrix(' + [
m.a, m.b,
m.c, m.d,
m.e, m.f
].join(', ') + ')';
}
return 'matrix3d(' + [
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
].join(', ') + ')'
};
CSSMatrix.prototype.setIdentity = function setIdentity (){
var m = this;
m.is2D = true;
m.isIdentity = true;
m.m11 = m.a = 1; m.m12 = m.b = 0; m.m13 = 0; m.m14 = 0;
m.m21 = m.c = 0; m.m22 = m.d = 1; m.m23 = 0; m.m24 = 0;
m.m31 = 0; m.m32 = 0; m.m33 = 1; m.m34 = 0;
m.m41 = m.e = 0; m.m42 = m.f = 0; m.m43 = 0; m.m44 = 1;
return this
};
function Translate(x, y, z){
var m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
}
function Rotate(rx, ry, rz){
var m = new CSSMatrix();
rx *= Math.PI / 180;
ry *= Math.PI / 180;
rz *= Math.PI / 180;
var cosx = Math.cos(rx), sinx = -Math.sin(rx),
cosy = Math.cos(ry), siny = -Math.sin(ry),
cosz = Math.cos(rz), sinz = -Math.sin(rz);
m.m11 = m.a = cosy * cosz;
m.m12 = m.b = -cosy * sinz;
m.m13 = siny;
m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
m.m23 = -sinx * cosy;
m.m31 = sinx * sinz - cosx * siny * cosz;
m.m32 = sinx * cosz + cosx * siny * sinz;
m.m33 = cosx * cosy;
return m
}
function RotateAxisAngle(x, y, z, angle){
angle *= Math.PI / 360;
var sinA = Math.sin(angle),
cosA = Math.cos(angle),
sinA2 = sinA * sinA,
length = Math.sqrt(x * x + y * y + z * z);
if (length === 0){
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
var x2 = x * x, y2 = y * y, z2 = z * z;
var m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
return m
}
function Scale(x, y, z){
var m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
}
function SkewX(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
}
function SkewY(angle){
angle *= Math.PI / 180;
var m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
}
function Multiply(m1, m2){
var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
return new CSSMatrix(
[m11, m21, m31, m41,
m12, m22, m32, m42,
m13, m23, m33, m43,
m14, m24, m34, m44])
}
function fromMatrix(m){
return new CSSMatrix(
[m.m11, m.m21, m.m31, m.m41,
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44])
}
function fromArray(a){
return feedFromArray(new CSSMatrix(),a)
}
function feedFromArray(m,array){
var a = Array.from(array);
if (a.length == 16){
m.m11 = m.a = a[0];
m.m21 = m.c = a[1];
m.m31 = a[2];
m.m41 = m.e = a[3];
m.m12 = m.b = a[4];
m.m22 = m.d = a[5];
m.m32 = a[6];
m.m42 = m.f = a[7];
m.m13 = a[8];
m.m23 = a[9];
m.m33 = a[10];
m.m43 = a[11];
m.m14 = a[12];
m.m24 = a[13];
m.m34 = a[14];
m.m44 = a[15];
} else if (a.length == 6) {
m.m11 = m.a = a[0];
m.m12 = m.b = a[1];
m.m14 = m.e = a[4];
m.m21 = m.c = a[2];
m.m22 = m.d = a[3];
m.m24 = m.f = a[5];
} else {
console.error("CSSMatrix: expecting a 6/16 values Array");
}
return m
}
var CSSMatrix = function CSSMatrix(){
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
this.setIdentity();
return args && args.length && this.setMatrixValue(args)
};
var prototypeAccessors = { isIdentity: { configurable: true },is2D: { configurable: true } };
CSSMatrix.prototype.setMatrixValue = function setMatrixValue (source){
var m = this;
if (!source || !source.length) {
return m
} else if (source.length && typeof source[0] === 'string' && source[0].length) {
var string = String(source[0]).trim(), type = '', values = [];
if (string == 'none') { return m; }
type = string.slice(0, string.indexOf('('));
values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
.map(function (n){ return Math.abs(n) < 1e-6 ? 0 : +n; });
if ([6,16].indexOf(values.length)>-1){
feedFromArray(m,values);
} else {
console.error("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");
}
} else if (source[0] instanceof CSSMatrix) {
feedFromArray(m,source[0].toArray());
} else if (Array.isArray(source[0])) {
feedFromArray(m,source[0]);
} else if (Array.isArray(source)) {
feedFromArray(m,source);
}
return m
};
CSSMatrix.prototype.toString = function toString (){
var m = this, type = m.is2D ? 'matrix' : 'matrix3d';
return (type + "(" + (m.toArray(1).join(',')) + ")")
};
CSSMatrix.prototype.toArray = function toArray (transposed){
var m = this;
return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
: transposed
?[m.m11, m.m12, m.m13, m.m14,
m.m21, m.m22, m.m23, m.m24,
m.m31, m.m32, m.m33, m.m34,
m.m41, m.m42, m.m43, m.m44]
:[m.m11, m.m21, m.m31, m.m41,
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44]
};
CSSMatrix.prototype.multiply = function multiply (m2){
return Multiply(this,m2)
};
CSSMatrix.prototype.translate = function translate (x, y, z){
if (z == null) { z = 0; }
if (y == null) { y = 0; }
return Multiply(this,Translate(x, y, z))
};
CSSMatrix.prototype.scale = function scale (x, y, z){
if (y == null) { y = x; }
if (z == null) { z = x; }
return Multiply(this,Scale(x, y, z))
};
CSSMatrix.prototype.rotate = function rotate (rx, ry, rz){
if (ry == null) { ry = 0; }
if (rz == null) {rz = rx; rx = 0;}
return Multiply(this,Rotate(rx, ry, rz))
};
CSSMatrix.prototype.rotateAxisAngle = function rotateAxisAngle (x, y, z, angle){
if (arguments.length!==4){
console.error("CSSMatrix: expecting 4 values");
return this
}
return Multiply(this,RotateAxisAngle(x, y, z, angle))
};
CSSMatrix.prototype.skewX = function skewX (angle){
return Multiply(this,SkewX(angle))
};
CSSMatrix.prototype.skewY = function skewY (angle){
return Multiply(this,SkewY(angle))
};
CSSMatrix.prototype.setIdentity = function setIdentity (){
var identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
return feedFromArray(this,identity)
};
prototypeAccessors.isIdentity.get = function (){
var m = this;
return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
};
prototypeAccessors.isIdentity.set = function (value){
this.isIdentity = value;
};
prototypeAccessors.is2D.get = function (){
var m = this;
return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
};
prototypeAccessors.is2D.set = function (value){
this.is2D = value;
};
CSSMatrix.prototype.transformPoint = function transformPoint (v){
var _m = this, m = Translate(v.x, v.y, v.z);
m.m44 = v.w || 1;
m = _m.multiply(m);
return {
x: m.m41,
y: m.m42,
z: m.m43,
w: m.m44
}
};
Object.defineProperties( CSSMatrix.prototype, prototypeAccessors );
CSSMatrix.Translate = Translate;
CSSMatrix.Rotate = Rotate;
CSSMatrix.RotateAxisAngle = RotateAxisAngle;
CSSMatrix.Scale = Scale;
CSSMatrix.SkewX = SkewX;
CSSMatrix.SkewY = SkewY;
CSSMatrix.Multiply = Multiply;
CSSMatrix.fromMatrix = fromMatrix;
CSSMatrix.fromArray = fromArray;
CSSMatrix.feedFromArray = feedFromArray;
return CSSMatrix;
return CSSMatrix;
})));

4

dist/dommatrix.min.js

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

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

6

package.json
{
"name": "dommatrix",
"version": "0.0.3",
"description": "ES6/ES7 shim for DOMMatrix",
"version": "0.0.4a",
"description": "ES6+ shim for DOMMatrix",
"main": "dist/dommatrix.min.js",

@@ -42,3 +42,3 @@ "module": "dist/dommatrix.esm.js",

"npm-run-all": "^4.1.5",
"rollup": "^2.26.3",
"rollup": "^2.28.1",
"rollup-plugin-cleanup": "^3.1.1",

@@ -45,0 +45,0 @@ "rollup-plugin-terser": "^5.3.0"

242

README.md

@@ -1,15 +0,27 @@

# DOMMatrix (Constructor) shim
# DOMMatrix shim
An ES6/ES7 sourced [DOMMatrix](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) shim for Node.js apps and legacy browsers originally authored by Arian Stolwijk with his [CSSMatrix](https://github.com/arian/CSSMatrix/).
An ES6+ sourced [DOMMatrix](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) shim for **Node.js** apps and legacy browsers. Legacy browsers might need some other shims here and there.
The constructor should work as defined by the [w3c CSS3 3d Transforms](http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/#cssmatrix-interface) specification.
The constructor is almost equivalent with the **DOMMatrix** in many respects, but tries to keep a sense of simplicity. In that note, we haven't implemented [DOMMatrixReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly) methods like `flipX()` or `inverse()` or aliases for the main methods like `translateSelf` or the old `rotate3d`.
This version comes with the following changes:
* removed `afine` property and replaced it with `is2D` to be more inline with DOMMatrix
* added `isIdentity` property
* removed inverse() instance method
* removed transform() instance method
* removed toFullString() instance method
In contrast with the [original source](https://github.com/arian/CSSMatrix/) there have been a series of changes to the prototype for consistency, performance as well as requirements to better accomodate the **DOMMatrix** interface:
* **changed** the order of the initialization parameters of a 3D matrix, now uses the column major order, as described in the specification pages; this change is to accommodate outputs of `toFloat64Array()` of the DOMMatrix constructor (which also returns items in the expected order);
* **changed** how the constructor determines if the matrix is 2D, based on a [more accurate method](https://github.com/jsidea/jsidea/blob/2b4486c131d5cca2334293936fa13454b34fcdef/ts/jsidea/geom/Matrix3D.ts#L788) which is actually checking the designated values of the 3D space; in contrast, the old *CSSMatrix* constructor sets `afine` property at initialization only and based on the number of arguments or the type of the input CSS transform syntax;
* **fixed** the `translate()`, `scale()` and `rotate()` instance methods to work with one axis transformation, also inline with **DOMMatrix**;
* **changed** `toString()` instance method to utilize the new method `toArray()` described below;
* **changed** `setMatrixValue()` instance method to do all the heavy duty work with parameters;
* *removed* `afine` property, it's a very old *WebKitCSSMatrix* defined property;
* *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, replaced with something that actually works;
* *removed* `toFullString()` instance method, probably something also from *WebKitCSSMatrix*;
* **added** `is2D` (*getter* and *setter*) property;
* **added** `isIdentity` (*getter* and *setter*) property;
* **added** `feedFromArray` static method, not present in the constructor prototype;
* **added** `fromMatrix` static method, not present in the constructor prototype;
* **added** `fromArray()`, `fromFloat64Array()` and `fromFloat32Array()` static methods, not present in the constructor prototype, the last 2 are not published since `fromArray()` can also process *Float32Array* / *Float64Array* via `Array.from()`;
* **added** `toArray()`, `toFloat64Array()` and `toFloat32Array()` instance methods, the last two are not present in the constructor prototype;
* **added** `transformPoint()` instance method which works like the original and replaces the old `transform()` method.
# Install

@@ -23,14 +35,11 @@

It should be compatible with documentation defined at [w3.org](http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/#cssmatrix-interface) and [WebKitCSSMatrix](https://developer.apple.com/library/iad/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) Safari documentation.
The initialization doesn't support CSS syntax strings with transform functions like `rotate()` or `translate()` only `matrix()` and `matrix3d()`, or 6/16 elements arrays.
**Examples**
**Basics**
```js
// ES6/ES7
// ES6+
import CSSMatrix from 'dommatrix'
// init
let myMatrix = new CSSMatrix('perspective(400px) rotateX(45deg)')
// call methods, also numeric values should work
myMatrix.translate(45)
let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)')
```

@@ -44,17 +53,198 @@

// init
let myMatrix = new CSSMatrix('rotate(45deg)')
let myMatrix = new CSSMatrix()
```
# Methods
**Advanced API Examples**
- `translate(x, y, z)`
- `scale(x, y, z)`
- `rotate(rx, ry, rz)`
- `rotateAxisAngle(x, y, z, angle)`
- `skewX(angle)`
- `skewY(angle)`
- `toString()`
```js
import CSSMatrix from 'dommatrix'
// init
let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)')
// the above is equivalent with providing the values are arguments
let myMatrix = new CSSMatrix(1,0.25,-0.25,1,0,0)
// or by providing an Array, Float32Array, Float64Array
let myMatrix = new CSSMatrix([1,0.25,-0.25,1,0,0])
// call methods to apply transformations
let myMatrix = new CSSMatrix().translate(15)
// equivalent to
let myMatrix = new CSSMatrix().translate(15,0)
// equivalent to
let myMatrix = new CSSMatrix().translate(15,0,0)
// rotations work as expected
let myMatrix = new CSSMatrix().rotate(15)
// equivalent to
let myMatrix = new CSSMatrix().rotate(0,0,15)
```
# Standard Methods - described in the W3C draft
**translate(x, y, z)**
The translate method returns a new matrix which is this matrix post multiplied by a translation matrix containing the passed values. If the `z` parameter is undefined, a 0 value is used in its place. This matrix is not
modified.
Parameters:
* `x` the X axis component of the translation value.
* `y` the Y axis component of the translation value.
* `z` the Z axis component of the translation value.
**rotate(rx, ry, rz)**
The rotate method returns a new matrix which is this matrix post multiplied by each of 3 rotation matrices about the major axes, first X, then Y, then Z. If the `y` and `z` components are undefined, the `x` value is used to rotate the
object about the `z` axis, as though the vector (0,0,x) were passed. All rotation values are expected to be in degrees. This matrix is not modified.
Parameters:
* `rx` the X axis component of the rotation value.
* `ry` the Y axis component of the rotation value.
* `rz` the Z axis component of the rotation value.
**rotateAxisAngle(x, y, z, angle)**
This method returns a new matrix which is this matrix post multiplied by a rotation matrix with the given axis and `angle`. The right-hand rule is used to determine the direction of rotation. All rotation values are
in degrees. This matrix is not modified.
Parameters:
* `x` The X component of the axis vector.
* `y` The Y component of the axis vector.
* `z` The Z component of the axis vector.
* `angle` The angle of rotation about the axis vector, in degrees.
**scale(x, y, z)**
The scale method returns a new matrix which is this matrix post multiplied by a scale matrix containing the passed values. If the `z` component is undefined, a 1 value is used in its place. If the `y` component is undefined, the `x` component value is used in its place. This matrix is not modified.
Parameters:
* `x` the X axis component of the scale value.
* `y` the Y axis component of the scale value.
* `z` the Z axis component of the scale value.
**skewX(angle)**
Specifies a skew transformation along the `x-axis` by the given angle. This matrix is not modified.
The `angle` parameter sets the amount in degrees to skew.
**skewY(angle)**
Specifies a skew transformation along the `y-axis` by the given angle. This matrix is not modified.
The `angle` parameter sets the amount in degrees to skew.
**toString()**
Creates and returns a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation.
The 16 items in the array 3D matrix array are *transposed* in row-major order.
Depending on the value of `is2D`, the method will return the CSS matrix syntax in one of the two formats:
* `matrix3d(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44)`
* `matrix(a, b, c, d, e, f)`
**transformPoint(point)**
Transforms the specified point using the matrix, returning a new `DOMPoint` like *Object* containing the transformed point.
Neither the matrix nor the original point are altered.
The method is equivalent with `transformPoint()` method of the `DOMMatrix` constructor.
The `point` parameter expects a vector *Object* with `x`, `y`, `z` and `w` properties or a `DOMPoint`
# Additional Methods
**multiply(m2)**
The multiply method returns a new `CSSMatrix` which is the result of this matrix multiplied by the passed matrix, with the passed matrix to the right. This matrix as well as the one passed are not modified.
The `m2` parameter is expecting a `CSSMatrix` or `DOMMatrix` instance.
**setMatrixValue(string)**
The setMatrixValue method replaces the existing matrix with one computed in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`.
The method also accepts 6/16 elements *Float64Array* / *Float32Array* / *Array* values, the result of `CSSMatrix` => `toArray()` / `DOMMatrix` => `toFloat64Array()` / `toFloat32Array()`.
For simplicity reasons, this method expects only valid *matrix()* / *matrix3d()* string values, which means other transform functions like *translate()*, *rotate()* are not supported.
Parameter:
* The `source` parameter is either the String representing the CSS syntax of the matrix, which is also the result of `getComputedStyle()`.
* The `source` can also be an *Array* resulted from `toArray()` method calls.
**setIdentity()**
Set the current `CSSMatrix` instance to the identity form and returns it.
**toArray(transposed)**
Returns an *Array* containing all 16 elements which comprise the 3D matrix. The method can return either the elements in default column major order or row major order (what we call the *transposed* matrix, used by `toString`).
If the matrix attribute `is2D` is `true`, the 6 elements array matrix is returned.
Other methods make use of this method to feed their output values from this matrix.
The `transposed` parameter changes the order of the elements in the output. By default the column major order is used, which is the standard representation of a typical 4x4 3D transformation matrix, however the `CSS` syntax requires the row major order, so we can set this parameter to `true` to facilitate that.
There are also *toFloat64Array()* and *toFloat32Array()* which return a new `Float64Array` / `Float32Array` containing all 6/16 elements which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers (`Float64Array`) or single-precision floating-point numbers (`Float32Array`), in column-major (colexographical access access or "colex") order. These last two methods are not yet present in the prototype, but are ready to go.
The result can be immediatelly fed as parameter for the initialization of a new matrix.
# Getters and Setters
**isIdentity**
A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).
**is2D**
A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix and `false` if the matrix is 3D.
# Static Methods - not included in the constructor prototype
**fromMatrix(m2)**
Creates a new mutable `CSSMatrix` object given an existing matrix or a `DOMMatrix` *Object* which provides the values for its properties. The `m2` parameter is the matrix instance passed into the method and neither this matrix or the one passed are modified.
**fromArray(array)**
Creates a new mutable `CSSMatrix` object given an array of values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a `console.error` is thrown and returns the current matrix.
The `array` parameter is the source to feed the values for the new matrix.
There are two more methods *fromFloat64Array(array)* and *fromFloat32Array(array)* which are only aliases for `fromArray` for now, but will be updated accordingly once DOMMatrix API is final.
**feedFromArray(array)**
Feed a `CSSMatrix` object with the values of a 6/16 values array and returns the updated matrix.
The `array` parameter is the source to feed the values for the new matrix.
There are two more methods *fromFloat64Array(array)* and *fromFloat32Array(array)* which are only aliases for `fromArray` for now, but will be updated accordingly once DOMMatrix API is final.
# Thanks
* Arian Stolwijk for his [CSSMatrix](https://github.com/arian/CSSMatrix/)
# License
DOMMatrix is [MIT Licensed](https://github.com/thednp/DOMMatrix/blob/master/LICENSE).
DOMMatrix shim is [MIT Licensed](https://github.com/thednp/DOMMatrix/blob/master/LICENSE).

885

src/index.js

@@ -0,409 +1,612 @@

// Transform Functions
// https://www.w3.org/TR/css-transforms-1/#transform-functions
/**
* DOMMatrix (Constructor) shim
* @constructor
* Arian Stolwijk @ https://github.com/arian/CSSMatrix/
* http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface
* http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface
* Creates a new `CSSMatrix` for the translation matrix and returns it.
* This method is equivalent to the CSS `translate3d()` function.
*
* ES6 version by thednp
* https://github.com/thednp/DOMMatrix/
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
*
* @param {Number} x the `x-axis` position.
* @param {Number} y the `y-axis` position.
* @param {Number} z the `z-axis` position.
*/
function Translate(x, y, z){
let m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
}
/**
* Creates a new `CSSMatrix` for the rotation matrix and returns it.
*
* http://en.wikipedia.org/wiki/Rotation_matrix
*
* @param {Number} rx the `x-axis` rotation.
* @param {Number} ry the `y-axis` rotation.
* @param {Number} rz the `z-axis` rotation.
*/
// Transform Functions
// http://en.wikipedia.org/wiki/Rotation_matrix
function Rotate(rx, ry, rz){
rx *= Math.PI / 180;
ry *= Math.PI / 180;
rz *= Math.PI / 180;
// minus sin() because of right-handed system
let cosx = Math.cos(rx), sinx = - Math.sin(rx);
let cosy = Math.cos(ry), siny = - Math.sin(ry);
let cosz = Math.cos(rz), sinz = - Math.sin(rz);
let m = new CSSMatrix();
let m = new CSSMatrix()
m.m11 = m.a = cosy * cosz;
m.m12 = m.b = - cosy * sinz;
m.m13 = siny;
rx *= Math.PI / 180
ry *= Math.PI / 180
rz *= Math.PI / 180
m.m21 = m.c = sinx * siny * cosz + cosx * sinz;
m.m22 = m.d = cosx * cosz - sinx * siny * sinz;
m.m23 = - sinx * cosy;
// minus sin() because of right-handed system
let cosx = Math.cos(rx), sinx = -Math.sin(rx),
cosy = Math.cos(ry), siny = -Math.sin(ry),
cosz = Math.cos(rz), sinz = -Math.sin(rz);
m.m31 = sinx * sinz - cosx * siny * cosz;
m.m32 = sinx * cosz + cosx * siny * sinz;
m.m33 = cosx * cosy;
m.m11 = m.a = cosy * cosz
m.m12 = m.b = -cosy * sinz
m.m13 = siny
return m
m.m21 = m.c = sinx * siny * cosz + cosx * sinz
m.m22 = m.d = cosx * cosz - sinx * siny * sinz
m.m23 = -sinx * cosy
m.m31 = sinx * sinz - cosx * siny * cosz
m.m32 = sinx * cosz + cosx * siny * sinz
m.m33 = cosx * cosy
return m
}
/**
* Creates a new `CSSMatrix` for the rotation matrix and returns it.
* This method is equivalent to the CSS `rotate3d()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
*
* @param {Number} x the `x-axis` vector length.
* @param {Number} y the `y-axis` vector length.
* @param {Number} z the `z-axis` vector length.
* @param {Number} angle the value in degrees of the rotation.
*/
function RotateAxisAngle(x, y, z, angle){
angle *= Math.PI / 360;
angle *= Math.PI / 360;
let sinA = Math.sin(angle), cosA = Math.cos(angle), sinA2 = sinA * sinA;
let length = Math.sqrt(x * x + y * y + z * z);
let sinA = Math.sin(angle),
cosA = Math.cos(angle),
sinA2 = sinA * sinA,
length = Math.sqrt(x * x + y * y + z * z);
if (length === 0){
// bad vector length, use something reasonable
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
if (length === 0){
// bad vector length, use something reasonable
x = 0;
y = 0;
z = 1;
} else {
x /= length;
y /= length;
z /= length;
}
let x2 = x * x, y2 = y * y, z2 = z * z;
let x2 = x * x, y2 = y * y, z2 = z * z;
let m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
let m = new CSSMatrix();
m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
m.m33 = 1 - 2 * (x2 + y2) * sinA2;
m.m14 = m.m24 = m.m34 = 0;
m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
m.m44 = 1;
return m
return m
}
// function ScaleX(x){
// let m = new CSSMatrix();
// m.m11 = m.a = x;
// return m
// }
// function ScaleY(y){
// let m = new CSSMatrix();
// m.m22 = m.d = y;
// return m
// }
// function ScaleZ(z){
// let m = new CSSMatrix();
// m.m33 = z;
// return m
// }
/**
* Creates a new `CSSMatrix` for the scale matrix and returns it.
* This method is equivalent to the CSS `scale3d()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d
*
* @param {Number} x the `x-axis` scale.
* @param {Number} y the `y-axis` scale.
* @param {Number} z the `z-axis` scale.
*/
function Scale(x, y, z){
let m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
let m = new CSSMatrix();
m.m11 = m.a = x;
m.m22 = m.d = y;
m.m33 = z;
return m
}
/**
* Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and
* returns it. This method is equivalent to the CSS `skewX()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
*
* @param {Number} angle the angle in degrees.
*/
function SkewX(angle){
angle *= Math.PI / 180;
let m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
angle *= Math.PI / 180;
let m = new CSSMatrix();
m.m21 = m.c = Math.tan(angle);
return m
}
/**
* Creates a new `CSSMatrix` for the shear of the `y-axis` rotation matrix and
* returns it. This method is equivalent to the CSS `skewY()` function.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
*
* @param {Number} angle the angle in degrees.
*/
function SkewY(angle){
angle *= Math.PI / 180;
let m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
angle *= Math.PI / 180;
let m = new CSSMatrix();
m.m12 = m.b = Math.tan(angle);
return m
}
function Translate(x, y, z){
let m = new CSSMatrix();
m.m41 = m.e = x;
m.m42 = m.f = y;
m.m43 = z;
return m
}
/**
* Creates a new `CSSMatrix` resulted from the multiplication of two matrixes
* and returns it. Both matrixes are not changed.
*
* @param {CSSMatrix} m1 the first matrix.
* @param {CSSMatrix} m2 the second matrix.
*/
function Multiply(m1, m2){
let m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
function multiply(m1, m2){
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
let m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41,
m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42,
m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43,
m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44,
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44
m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
return new CSSMatrix(
[m11, m21, m31, m41,
m12, m22, m32, m42,
m13, m23, m33, m43,
m14, m24, m34, m44])
}
m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44;
return new CSSMatrix(
m11, m12, m13, m14,
m21, m22, m23, m24,
m31, m32, m33, m34,
m41, m42, m43, m44
)
/**
* Returns a new *Float32Array* containing all 16 elements which comprise the matrix.
* The elements are stored into the array as single-precision floating-point numbers
* in column-major (colexographical access access or "colex") order.
*
* @return {Float32Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44)
*/
// toFloat32Array(){
// return Float32Array.from(this.toArray())
// }
/**
* Returns a new Float64Array containing all 16 elements which comprise the matrix.
* The elements are stored into the array as double-precision floating-point numbers
* in column-major (colexographical access access or "colex") order.
*
* @return {Float64Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44)
*/
// toFloat64Array(){
// return Float64Array.from(this.toArray())
// }
/**
* Creates a new mutable `CSSMatrix` object given an existing matrix or a
* `DOMMatrix` *Object* which provides the values for its properties.
*
* @param {CSSMatrix} CSSMatrix the source `CSSMatrix` / `DOMMatrix` initialization to feed values from
*/
function fromMatrix(m){
return new CSSMatrix(
// DOMMatrix elements order
[m.m11, m.m21, m.m31, m.m41,
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44])
}
export default class CSSMatrix {
constructor(){
let a = [].slice.call(arguments), m = this
/**
* Creates a new mutable `CSSMatrix` object given an array float values.
*
* If the array has six values, the result is a 2D matrix; if the array has 16 values,
* the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
*
* @param {Array} array The source `Array` to feed values from.
* @return {CSSMatrix} a The source array to feed values from.
*/
function fromArray(a){
return feedFromArray(new CSSMatrix(),a)
}
if (a.length) for (let i = a.length; i--;){
if (Math.abs(a[i]) < 1e-6) a[i] = 0;
}
m.setIdentity();
if (a.length == 16){
m.is2D = false;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m13 = a[2]; m.m14 = a[3];
m.m21 = m.c = a[4]; m.m22 = m.d = a[5]; m.m23 = a[6]; m.m24 = a[7];
m.m31 = a[8]; m.m32 = a[9]; m.m33 = a[10]; m.m34 = a[11];
m.m41 = m.e = a[12]; m.m42 = m.f = a[13]; m.m43 = a[14]; m.m44 = a[15];
} else if (a.length == 6) {
m.is2D = true;
m.isIdentity = false;
m.m11 = m.a = a[0]; m.m12 = m.b = a[1]; m.m14 = m.e = a[4];
m.m21 = m.c = a[2]; m.m22 = m.d = a[3]; m.m24 = m.f = a[5];
} else if (a.length === 1 && typeof a[0] == 'string') {
m.setMatrixValue(a[0]);
} else if (a.length > 0) {
throw new TypeError('Invalid Matrix Value');
}
}
/**
* Each create a new mutable `CSSMatrix` object given an array of single/double-precision
* (32/64 bit) floating-point values.
*
* If the array has six values, the result is a 2D matrix; if the array has 16 values,
* the result is a 3D matrix. Otherwise, a TypeError exception is thrown.
*
* @param {Float32Array|Float64Array} array The source `Float32Array` / `Float64Array` to feed values from.
* @return {CSSMatrix} a The source array to feed values from.
*/
// more of an alias for now, will update later if it's the case
// function fromFloat32Array(a){
// return feedFromArray(new CSSMatrix(),a)
// }
// function fromFloat64Array(a){ // more of an alias
// return feedFromArray(new CSSMatrix(),a)
// }
// w3c defined methods
/**
* Feed a CSSMatrix object with the values of a 6/16 values array and returns it.
*
* @param {Array} array The source `Array` to feed values from.
* @return {CSSMatrix} a The source array to feed values from.
*/
function feedFromArray(m,array){
let a = Array.from(array)
if (a.length == 16){
m.m11 = m.a = a[0];
m.m21 = m.c = a[1];
m.m31 = a[2];
m.m41 = m.e = a[3];
m.m12 = m.b = a[4];
m.m22 = m.d = a[5];
m.m32 = a[6];
m.m42 = m.f = a[7];
m.m13 = a[8];
m.m23 = a[9];
m.m33 = a[10];
m.m43 = a[11];
m.m14 = a[12];
m.m24 = a[13];
m.m34 = a[14];
m.m44 = a[15];
} else if (a.length == 6) {
m.m11 = m.a = a[0];
m.m12 = m.b = a[1];
m.m14 = m.e = a[4];
m.m21 = m.c = a[2];
m.m22 = m.d = a[3];
m.m24 = m.f = a[5];
} else {
console.error(`CSSMatrix: expecting a 6/16 values Array`)
}
return m
}
/**
* The setMatrixValue method replaces the existing matrix with one computed
* from parsing the passed string as though it had been assigned to the
* transform property in a CSS style rule.
* @param {String} string The string to parse.
*/
setMatrixValue(string){
string = String(string).trim();
let m = this;
m.setIdentity();
if (string == 'none') return m;
let type = string.slice(0, string.indexOf('(')), parts, i;
if (type == 'matrix3d'){
m.is2D = false;
m.isIdentity = false;
parts = string.slice(9, -1).split(',');
for (i = parts.length; i--;) parts[i] = +(parts[i]);
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[1]; m.m13 = parts[2]; m.m14 = parts[3];
m.m21 = m.c = parts[4]; m.m22 = m.d = parts[5]; m.m23 = parts[6]; m.m24 = parts[7];
m.m31 = parts[8]; m.m32 = parts[9]; m.m33 = parts[10]; m.m34 = parts[11];
m.m41 = m.e = parts[12]; m.m42 = m.f = parts[13]; m.m43 = parts[14]; m.m44 = parts[15];
} else if (type == 'matrix'){
m.is2D = true;
m.isIdentity = false;
parts = string.slice(7, -1).split(',');
for (i = parts.length; i--;) parts[i] = +(parts[i]);
m.m11 = m.a = parts[0]; m.m12 = m.b = parts[2]; m.m41 = m.e = parts[4];
m.m21 = m.c = parts[1]; m.m22 = m.d = parts[3]; m.m42 = m.f = parts[5];
} else {
throw new TypeError('Invalid Matrix Value');
}
return m
}
/**
* Creates and returns a new `DOMMatrix` compatible *Object*
* with equivalent instance methods.
*
* https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
* https://github.com/thednp/DOMMatrix/
*
* @param {String} String valid CSS transform in `matrix()`/`matrix3d()` format
* @param {Array} Array expected to be *Float64Array* or *Float32Array* in the correct column major order described in the specification.
* @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix
* @param {[m11,m21,m31,m41,m12,m22,m32,m42,m13,m23,m33,m43,m14,m24,m34,m44]} Arguments representing the 16 elements of a 3d matrix
*/
/**
* The multiply method returns a new CSSMatrix which is the result of this
* matrix multiplied by the passed matrix, with the passed matrix to the right.
* This matrix is not modified.
*
* @param {CSSMatrix} m2
* @return {CSSMatrix} The result matrix.
*/
multiply(m2){
return multiply(this, m2)
}
export default class CSSMatrix {
constructor(...args){
this.setIdentity()
return args && args.length && this.setMatrixValue(args)
}
/**
* The inverse method returns a new matrix which is the inverse of this matrix.
* This matrix is not modified.
*
* method not implemented yet
*/
// inverse = function(){
// throw new Error('the inverse() method is not implemented (yet).');
// }
/**
* The `setMatrixValue` method replaces the existing matrix with one computed
* in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`
*
* The method accepts *Float64Array* / *Float32Array* / any *Array* values, the result of
* `DOMMatrix` / `CSSMatrix` instance method calls `toFloat64Array()` / `toFloat32Array()`.
*
* This method expects valid *matrix()* / *matrix3d()* string values, other
* transform functions like *translate()* are not supported.
*
* @param {String} source the *String* resulted from `getComputedStyle()`.
* @param {Array} source the *Array* resulted from `toFloat64Array()`.
*/
setMatrixValue(source){
let m = this
/**
* The translate method returns a new matrix which is this matrix post
* multiplied by a translation matrix containing the passed values. If the z
* component is undefined, a 0 value is used in its place. This matrix is not
* modified.
*
* @param {number} x X component of the translation value.
* @param {number} y Y component of the translation value.
* @param {number=} z Z component of the translation value.
* @return {CSSMatrix} The result matrix
*/
if (!source || !source.length) { // no parameters or source
return m
} else if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source
let string = String(source[0]).trim(), type = '', values = [];
translate(x, y, z){
if (z == null) z = 0;
if (y == null) y = 0;
this.m34 !== 0 && z && (this.is2D = false)
if (string == 'none') return m;
type = string.slice(0, string.indexOf('('))
values = string.slice((type === 'matrix' ? 7 : 9), -1).split(',')
.map(n=>Math.abs(n) < 1e-6 ? 0 : +n)
return multiply(this, Translate(x, y, z))
}
if ([6,16].indexOf(values.length)>-1){
feedFromArray(m,values)
} else {
console.error(`CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax`)
}
} else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
feedFromArray(m,source[0].toArray())
} else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
feedFromArray(m,source[0])
} else if (Array.isArray(source)) { // Arguments list come here
feedFromArray(m,source)
}
return m
}
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* The 16 items in the array 3D matrix array are *transposed* in row-major order.
*
* @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
* @matrix *matrix(a, b, c, d, e, f)*
*
* @return {String} `String` representation of the matrix
*/
toString(){
let m = this, type = m.is2D ? 'matrix' : 'matrix3d'
return `${type}(${m.toArray(1).join(',')})`
}
/**
* The scale method returns a new matrix which is this matrix post multiplied by
* a scale matrix containing the passed values. If the z component is undefined,
* a 1 value is used in its place. If the y component is undefined, the x
* component value is used in its place. This matrix is not modified.
*
* @param {number} x The X component of the scale value.
* @param {number=} y The Y component of the scale value.
* @param {number=} z The Z component of the scale value.
* @return {CSSMatrix} The result matrix
*/
/**
* Returns an *Array* containing all 16 elements which comprise the matrix.
* The method can return either the elements in default column major order or
* row major order (what we call the *transposed* matrix, used by `toString`).
*
* Other methods make use of this method to feed their output values from this matrix.
*
* @param {Boolean} transposed changes the order of elements in the output
* @return {Array} an *Array* representation of the matrix
*/
toArray(transposed){
let m = this
return m.is2D ? [ m.a, m.b, m.c, m.d, m.e, m.f ]
: transposed
?[m.m11, m.m12, m.m13, m.m14, // transposed is used by toString
m.m21, m.m22, m.m23, m.m24,
m.m31, m.m32, m.m33, m.m34,
m.m41, m.m42, m.m43, m.m44]
:[m.m11, m.m21, m.m31, m.m41, // used by constructor
m.m12, m.m22, m.m32, m.m42,
m.m13, m.m23, m.m33, m.m43,
m.m14, m.m24, m.m34, m.m44]
}
scale(x, y, z){
if (y == null) y = x;
if (z == null) z = 1;
this.m34 !== 0 && (x !== y || x !== z || y !== z) && (this.is2D = false)
/**
* The Multiply method returns a new CSSMatrix which is the result of this
* matrix multiplied by the passed matrix, with the passed matrix to the right.
* This matrix is not modified.
*
* @param {CSSMatrix} m2 CSSMatrix
* @return {CSSMatrix} The result matrix.
*/
multiply(m2){
return Multiply(this,m2)
}
return multiply(this, Scale(x, y, z))
}
/**
*
* These methods will be implemented later into an extended version to provide
* additional functionality.
*/
// inverse = function(){}
// determinant = function(){}
// transpose = function(){}
/**
* The rotate method returns a new matrix which is this matrix post multiplied
* by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
* If the y and z components are undefined, the x value is used to rotate the
* object about the z axis, as though the vector (0,0,x) were passed. All
* rotation values are in degrees. This matrix is not modified.
*
* @param {number} rx The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined.
* @param {number=} ry The (optional) Y component of the rotation value.
* @param {number=} rz The (optional) Z component of the rotation value.
* @return {CSSMatrix} The result matrix
*/
/**
* The translate method returns a new matrix which is this matrix post
* multiplied by a translation matrix containing the passed values. If the z
* component is undefined, a 0 value is used in its place. This matrix is not
* modified.
*
* @param {number} x X component of the translation value.
* @param {number} y Y component of the translation value.
* @param {number=} z Z component of the translation value.
* @return {CSSMatrix} The result matrix
*/
rotate(rx, ry, rz){
if (ry == null) ry = rx;
if (rz == null) rz = rx;
this.m34 !== 0 && (rx || ry) && (this.is2D = false)
translate(x, y, z){
if (z == null) z = 0
if (y == null) y = 0
return Multiply(this,Translate(x, y, z))
}
return multiply(this, Rotate(rx, ry, rz))
}
/**
* The scale method returns a new matrix which is this matrix post multiplied by
* a scale matrix containing the passed values. If the z component is undefined,
* a 1 value is used in its place. If the y component is undefined, the x
* component value is used in its place. This matrix is not modified.
*
* @param {number} x The X component of the scale value.
* @param {number=} y The Y component of the scale value.
* @param {number=} z The Z component of the scale value.
* @return {CSSMatrix} The result matrix
*/
/**
* The rotateAxisAngle method returns a new matrix which is this matrix post
* multiplied by a rotation matrix with the given axis and angle. The right-hand
* rule is used to determine the direction of rotation. All rotation values are
* in degrees. This matrix is not modified.
*
* @param {number} x The X component of the axis vector.
* @param {number=} y The Y component of the axis vector.
* @param {number=} z The Z component of the axis vector.
* @param {number} angle The angle of rotation about the axis vector, in degrees.
* @return {CSSMatrix} The result matrix
*/
scale(x, y, z){
if (y == null) y = x;
if (z == null) z = x;
return Multiply(this,Scale(x, y, z))
}
rotateAxisAngle(x, y, z, angle){
this.m34 !== 0 && (x || y) && (this.is2D = false) // ??
if (y == null) y = x;
if (z == null) z = x;
/**
* The rotate method returns a new matrix which is this matrix post multiplied
* by each of 3 rotation matrices about the major axes, first X, then Y, then Z.
* If the y and z components are undefined, the x value is used to rotate the
* object about the z axis, as though the vector (0,0,x) were passed. All
* rotation values are in degrees. This matrix is not modified.
*
* @param {number} rx The X component of the rotation value, or the Z component if the rotateY and rotateZ parameters are undefined.
* @param {number=} ry The (optional) Y component of the rotation value.
* @param {number=} rz The (optional) Z component of the rotation value.
* @return {CSSMatrix} The result matrix
*/
return multiply(this, RotateAxisAngle(x, y, z, angle))
}
rotate(rx, ry, rz){
if (ry == null) ry = 0;
if (rz == null) {rz = rx; rx = 0}
return Multiply(this,Rotate(rx, ry, rz))
}
// Defined in WebKitCSSMatrix, but not in the w3c draft
/**
* The rotateAxisAngle method returns a new matrix which is this matrix post
* multiplied by a rotation matrix with the given axis and `angle`. The right-hand
* rule is used to determine the direction of rotation. All rotation values are
* in degrees. This matrix is not modified.
*
* @param {number} x The X component of the axis vector.
* @param {number} y The Y component of the axis vector.
* @param {number} z The Z component of the axis vector.
* @param {number} angle The angle of rotation about the axis vector, in degrees.
* @return {CSSMatrix} The `CSSMatrix` result
*/
/**
* Specifies a skew transformation along the x-axis by the given angle.
*
* @param {number} angle The angle amount in degrees to skew.
* @return {CSSMatrix} The result matrix
*/
rotateAxisAngle(x, y, z, angle){
if (arguments.length!==4){
console.error(`CSSMatrix: expecting 4 values`)
return this
}
return Multiply(this,RotateAxisAngle(x, y, z, angle))
}
skewX(angle){
return multiply(this, SkewX(angle))
}
/**
* Specifies a skew transformation along the `x-axis` by the given angle.
* This matrix is not modified.
*
* @param {number} angle The angle amount in degrees to skew.
* @return {CSSMatrix} The `CSSMatrix` result
*/
/**
* Specifies a skew transformation along the x-axis by the given angle.
*
* @param {number} angle The angle amount in degrees to skew.
* @return {CSSMatrix} The result matrix
*/
skewX(angle){
return Multiply(this,SkewX(angle))
}
skewY(angle){
return multiply(this, SkewY(angle))
}
/**
* Specifies a skew transformation along the `y-axis` by the given angle.
* This matrix is not modified.
*
* @param {number} angle The angle amount in degrees to skew.
* @return {CSSMatrix} The `CSSMatrix` result
*/
/**
* Returns a string representation of the matrix.
* @return {string}
*/
skewY(angle){
return Multiply(this,SkewY(angle))
}
toString(){
let m = this;
/**
* Set the current `CSSMatrix` instance to the identity form and returns it.
*
* @return {CSSMatrix} this `CSSMatrix` instance
*/
setIdentity(){
let identity = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
return feedFromArray(this,identity)
}
if (m.is2D){
return 'matrix(' + [
m.a, m.b,
m.c, m.d,
m.e, m.f
].join(', ') + ')';
}
// note: the elements here are transposed
return 'matrix3d(' + [
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
].join(', ') + ')'
}
/**
* A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity
* matrix is one in which every value is 0 except those on the main diagonal from top-left
* to bottom-right corner (in other words, where the offsets in each direction are equal).
*
* @return {Boolean} `Boolean` the current property value
*/
get isIdentity(){
let m = this;
return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
}
/**
* Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
*
* @param {Boolean} value sets a new `Boolean` flag for this property
*/
set isIdentity(value){
this.isIdentity = value
}
// Additional methods
/**
* A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix
* and `false` if the matrix is 3D.
*
* @return {Boolean} `Boolean` the current property value
*/
get is2D(){
let m = this;
return (m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 && m.m43 == 0 && m.m44 == 1)
}
/**
* Set the current matrix to the identity form
*
* @return {CSSMatrix} this matrix
*/
setIdentity(){
let m = this;
m.is2D = true;
m.isIdentity = true;
m.m11 = m.a = 1; m.m12 = m.b = 0; m.m13 = 0; m.m14 = 0;
m.m21 = m.c = 0; m.m22 = m.d = 1; m.m23 = 0; m.m24 = 0;
m.m31 = 0; m.m32 = 0; m.m33 = 1; m.m34 = 0;
m.m41 = m.e = 0; m.m42 = m.f = 0; m.m43 = 0; m.m44 = 1;
return this
}
/**
* Sets a new `Boolean` flag value for `this.is2D` matrix property.
*
* @param {Boolean} value sets a new `Boolean` flag for this property
*/
set is2D(value){
this.is2D = value
}
/**
* Transform a tuple (3d point) with this CSSMatrix
*
* @param {Tuple} an object with x, y, z and w properties
* @return {Tuple} the passed tuple
* might use later ;)
*/
// transform = function(t /* tuple */ ){
// let m = this,
// x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w,
// y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w,
// z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w,
// w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w;
/**
* Transforms the specified point using the matrix, returning a new
* `DOMPoint` like *Object* containing the transformed point.
* Neither the matrix nor the original point are altered.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* JavaScript implementation by thednp
*
* @param {Tuple} vector the *Object* with `x`, `y`, `z` and `w` properties
* @return {Tuple} a new `{x,y,z,w}` *Object*
*/
transformPoint(v){
let _m = this, m = Translate(v.x, v.y, v.z)
// t.x = x / w;
// t.y = y / w;
// t.z = z / w;
m.m44 = v.w || 1
m = _m.multiply(m)
// return t;
// }
}
return {
x: m.m41,
y: m.m42,
z: m.m43,
w: m.m44
}
}
}
// export Transform Functions and static methods to global
CSSMatrix.Translate = Translate
CSSMatrix.Rotate = Rotate
CSSMatrix.RotateAxisAngle = RotateAxisAngle
CSSMatrix.Scale = Scale
CSSMatrix.SkewX = SkewX
CSSMatrix.SkewY = SkewY
CSSMatrix.Multiply = Multiply
CSSMatrix.fromMatrix = fromMatrix
CSSMatrix.fromArray = fromArray
CSSMatrix.feedFromArray = feedFromArray
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