Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dommatrix - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5-alpha1
| /*! | ||
| * DOMMatrix v0.0.4 (https://github.com/thednp/dommatrix) | ||
| * Copyright 2020 © thednp | ||
| * DOMMatrix v0.0.5-alpha1 (https://github.com/thednp/dommatrix) | ||
| * Copyright 2021 © thednp | ||
| * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE) | ||
| */ | ||
| function Translate(x, y, z){ | ||
| /** | ||
| * DOMMatrix shim - CSSMatrix | ||
| * | ||
| * 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 column major order. | ||
| * @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix | ||
| * @param {[m11,m21,m31,m41..]} Arguments representing the 16 elements of a 3d matrix | ||
| */ | ||
| 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 } }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| 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); | ||
| }; | ||
| /** | ||
| * Sets a new `Boolean` flag value for `this.isIdentity` matrix property. | ||
| * | ||
| * @param {Boolean} value sets a new `Boolean` flag for this property | ||
| */ | ||
| prototypeAccessors.isIdentity.set = function (value) { | ||
| this.isIdentity = value; | ||
| }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| 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); | ||
| }; | ||
| /** | ||
| * Sets a new `Boolean` flag value for `this.is2D` matrix property. | ||
| * | ||
| * @param {Boolean} value sets a new `Boolean` flag for this property | ||
| */ | ||
| prototypeAccessors.is2D.set = function (value) { | ||
| this.is2D = value; | ||
| }; | ||
| Object.defineProperties( CSSMatrix.prototype, prototypeAccessors ); | ||
| // export proto for custom compile via Buble | ||
| var CSSMatrixProto = CSSMatrix.prototype; | ||
| // Transform Functions | ||
| // https://www.w3.org/TR/css-transforms-1/#transform-functions | ||
| /** | ||
| * Creates a new `CSSMatrix` for the translation matrix and returns it. | ||
| * This method is equivalent to the CSS `translate3d()` function. | ||
| * | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| m.m41 = m.e = x; | ||
| m.m42 = m.f = y; | ||
| m.m41 = x; | ||
| m.e = x; | ||
| m.m42 = y; | ||
| m.f = y; | ||
| m.m43 = z; | ||
| return m | ||
| return m; | ||
| } | ||
| function Rotate(rx, ry, rz){ | ||
| /** | ||
| * 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. | ||
| */ | ||
| 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; | ||
| var radX = (rx * Math.PI) / 180; | ||
| var radY = (ry * Math.PI) / 180; | ||
| var radZ = (rz * Math.PI) / 180; | ||
| // minus sin() because of right-handed system | ||
| var cosx = Math.cos(radX); | ||
| var sinx = -Math.sin(radX); | ||
| var cosy = Math.cos(radY); | ||
| var siny = -Math.sin(radY); | ||
| var cosz = Math.cos(radZ); | ||
| var sinz = -Math.sin(radZ); | ||
| var cycz = cosy * cosz; | ||
| var cysz = -cosy * sinz; | ||
| m.m11 = cycz; | ||
| m.a = cycz; | ||
| m.m12 = cysz; | ||
| m.b = cysz; | ||
| m.m13 = siny; | ||
| m.m21 = m.c = sinx * siny * cosz + cosx * sinz; | ||
| m.m22 = m.d = cosx * cosz - sinx * siny * sinz; | ||
| var sxsy = sinx * siny * cosz + cosx * sinz; | ||
| m.m21 = sxsy; | ||
| m.c = sxsy; | ||
| var cxcz = cosx * cosz - sinx * siny * sinz; | ||
| m.m22 = cxcz; | ||
| m.d = cxcz; | ||
| m.m23 = -sinx * cosy; | ||
| m.m31 = sinx * sinz - cosx * siny * cosz; | ||
| m.m32 = sinx * cosz + cosx * siny * sinz; | ||
| m.m33 = cosx * cosy; | ||
| return m | ||
| 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; | ||
| /** | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| var radA = (angle * Math.PI) / 360; | ||
| var sinA = Math.sin(radA); | ||
| var cosA = Math.cos(radA); | ||
| var sinA2 = sinA * sinA; | ||
| var length = Math.sqrt(x * x + y * y + z * z); | ||
| var X = 0; | ||
| var Y = 0; | ||
| var Z = 1; | ||
| // bad vector length, use something reasonable | ||
| if (length !== 0) { | ||
| X = x / length; | ||
| Y = y / length; | ||
| Z = 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); | ||
| var x2 = X * X; | ||
| var y2 = Y * Y; | ||
| var z2 = Z * Z; | ||
| var m11 = 1 - 2 * (y2 + z2) * sinA2; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| var m12 = 2 * (x * y * sinA2 + z * sinA * cosA); | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| 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; | ||
| var m21 = 2 * (y * x * sinA2 - z * sinA * cosA); | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| var m22 = 1 - 2 * (z2 + x2) * sinA2; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA); | ||
@@ -58,194 +211,517 @@ m.m31 = 2 * (z * x * sinA2 + y * 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.m14 = 0; | ||
| m.m24 = 0; | ||
| m.m34 = 0; | ||
| m.m41 = 0; | ||
| m.e = 0; | ||
| m.m42 = 0; | ||
| m.f = 0; | ||
| m.m43 = 0; | ||
| m.m44 = 1; | ||
| return m | ||
| return m; | ||
| } | ||
| function Scale(x, y, z){ | ||
| /** | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| m.m11 = m.a = x; | ||
| m.m22 = m.d = y; | ||
| m.m11 = x; | ||
| m.a = x; | ||
| m.m22 = y; | ||
| m.d = y; | ||
| m.m33 = z; | ||
| return m | ||
| return m; | ||
| } | ||
| function SkewX(angle){ | ||
| angle *= Math.PI / 180; | ||
| /** | ||
| * 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) { | ||
| var radA = (angle * Math.PI) / 180; | ||
| var m = new CSSMatrix(); | ||
| m.m21 = m.c = Math.tan(angle); | ||
| return m | ||
| var t = Math.tan(radA); | ||
| m.m21 = t; | ||
| m.c = t; | ||
| return m; | ||
| } | ||
| function SkewY(angle){ | ||
| angle *= Math.PI / 180; | ||
| /** | ||
| * 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) { | ||
| var radA = (angle * Math.PI) / 180; | ||
| var m = new CSSMatrix(); | ||
| m.m12 = m.b = Math.tan(angle); | ||
| return m | ||
| var t = Math.tan(radA); | ||
| m.m12 = t; | ||
| m.b = t; | ||
| 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; | ||
| /** | ||
| * 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) { | ||
| var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41; | ||
| var m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42; | ||
| var m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43; | ||
| var m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44; | ||
| var m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41; | ||
| var m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42; | ||
| var m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43; | ||
| var m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44; | ||
| var m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41; | ||
| var m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42; | ||
| var m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43; | ||
| var m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44; | ||
| var m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41; | ||
| var m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42; | ||
| var m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43; | ||
| var 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]) | ||
| [m11, m21, m31, m41, | ||
| m12, m22, m32, m42, | ||
| m13, m23, m33, m43, | ||
| m14, m24, m34, m44] | ||
| ); | ||
| } | ||
| function fromMatrix(m){ | ||
| /** | ||
| * 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, ..) | ||
| */ | ||
| // 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, ..) | ||
| */ | ||
| // 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` initialization to feed values from | ||
| */ | ||
| 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]) | ||
| // 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] | ||
| ); | ||
| } | ||
| function fromArray(a){ | ||
| return feedFromArray(new CSSMatrix(),a) | ||
| } | ||
| function feedFromArray(m,array){ | ||
| /** | ||
| * 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) { | ||
| 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]; | ||
| if (a.length === 16) { | ||
| var m11 = a[0]; | ||
| var m21 = a[1]; | ||
| var m31 = a[2]; | ||
| var m41 = a[3]; | ||
| var m12 = a[4]; | ||
| var m22 = a[5]; | ||
| var m32 = a[6]; | ||
| var m42 = a[7]; | ||
| var m13 = a[8]; | ||
| var m23 = a[9]; | ||
| var m33 = a[10]; | ||
| var m43 = a[11]; | ||
| var m14 = a[12]; | ||
| var m24 = a[13]; | ||
| var m34 = a[14]; | ||
| var m44 = a[15]; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| m.m31 = m31; | ||
| m.m41 = m41; | ||
| m.e = m41; | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m32 = m32; | ||
| m.m42 = m42; | ||
| m.f = m42; | ||
| m.m13 = m13; | ||
| m.m23 = m23; | ||
| m.m33 = m33; | ||
| m.m43 = m43; | ||
| m.m14 = m14; | ||
| m.m24 = m24; | ||
| m.m34 = m34; | ||
| m.m44 = m44; | ||
| } else if (a.length === 6) { | ||
| var m11$1 = a[0]; | ||
| var m12$1 = a[1]; | ||
| var m21$1 = a[2]; | ||
| var m22$1 = a[3]; | ||
| var m14$1 = a[4]; | ||
| var m24$1 = a[5]; | ||
| m.m11 = m11$1; | ||
| m.a = m11$1; | ||
| m.m12 = m12$1; | ||
| m.b = m12$1; | ||
| m.m21 = m21$1; | ||
| m.c = m21$1; | ||
| m.m22 = m22$1; | ||
| m.d = m22$1; | ||
| m.m14 = m14$1; | ||
| m.e = m14$1; | ||
| m.m24 = m24$1; | ||
| m.f = m24$1; | ||
| } else { | ||
| console.error("CSSMatrix: expecting a 6/16 values Array"); | ||
| throw new TypeError('CSSMatrix: expecting a 6/16 values Array'); | ||
| } | ||
| return m | ||
| 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){ | ||
| /** | ||
| * 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); | ||
| } | ||
| /** | ||
| * 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 float array 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); | ||
| // } | ||
| /** | ||
| * 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()`. | ||
| */ | ||
| CSSMatrixProto.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; } | ||
| if (!source || !source.length) { // no parameters or source | ||
| return m; | ||
| } if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source | ||
| var string = String(source[0]).trim(); var type = ''; var | ||
| 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); | ||
| .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"); | ||
| throw new TypeError('CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax'); | ||
| } | ||
| } else if (source[0] instanceof CSSMatrix) { | ||
| feedFromArray(m,source[0]); | ||
| } else if (Array.isArray(source[0])) { | ||
| feedFromArray(m,source[0]); | ||
| } else if (Array.isArray(source)) { | ||
| feedFromArray(m,source); | ||
| } 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 | ||
| return m; | ||
| }; | ||
| CSSMatrix.prototype.toString = function toString (){ | ||
| var m = this, type = m.is2D ? 'matrix' : 'matrix3d'; | ||
| return (type + "(" + (m.toArray(1).join(',')) + ")") | ||
| /** | ||
| * 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, ...)* | ||
| * @matrix *matrix(a, b, c, d, e, f)* | ||
| * | ||
| * @return {String} `String` representation of the matrix | ||
| */ | ||
| CSSMatrixProto.toString = function toString() { | ||
| var m = this; | ||
| var type = m.is2D ? 'matrix' : 'matrix3d'; | ||
| return (type + "(" + (m.toArray(1).join(',')) + ")"); | ||
| }; | ||
| CSSMatrix.prototype.toArray = function toArray (transposed){ | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.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, | ||
| var result; | ||
| if (m.is2D) { | ||
| result = [m.a, m.b, m.c, m.d, m.e, m.f]; | ||
| } else if (transposed) { | ||
| result = [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, | ||
| m.m41, m.m42, m.m43, m.m44]; | ||
| } else { | ||
| result = [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] | ||
| m.m14, m.m24, m.m34, m.m44]; | ||
| } | ||
| return result; | ||
| }; | ||
| CSSMatrix.prototype.multiply = function multiply (m2){ | ||
| return Multiply(this,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 is not modified. | ||
| * | ||
| * @param {CSSMatrix} m2 CSSMatrix | ||
| * @return {CSSMatrix} The result matrix. | ||
| */ | ||
| CSSMatrixProto.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)) | ||
| /** | ||
| * | ||
| * These methods will be implemented later into an extended version to provide | ||
| * additional functionality. | ||
| */ | ||
| // inverse = function(){} | ||
| // determinant = function(){} | ||
| // transpose = function(){} | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.translate = function translate(x, y, z) { | ||
| var X = x; | ||
| var Y; | ||
| var 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)) | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.scale = function scale(x, y, z) { | ||
| var X = x; | ||
| var Y; | ||
| var Z; | ||
| if (z === null) { Z = x; } | ||
| if (y === null) { Y = 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)) | ||
| /** | ||
| * 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, or Z if Y and Z are null. | ||
| * @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 | ||
| */ | ||
| CSSMatrixProto.rotate = function rotate(rx, ry, rz) { | ||
| var RX = rx; | ||
| var RY; | ||
| var 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 | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.rotateAxisAngle = function rotateAxisAngle(x, y, z, angle) { | ||
| if (arguments.length !== 4) { | ||
| throw new TypeError('CSSMatrix: expecting 4 values'); | ||
| } | ||
| return Multiply(this,RotateAxisAngle(x, y, z, angle)) | ||
| return Multiply(this, RotateAxisAngle(x, y, z, angle)); | ||
| }; | ||
| CSSMatrix.prototype.skewX = function 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 | ||
| */ | ||
| CSSMatrixProto.skewX = function skewX(angle) { | ||
| return Multiply(this, SkewX(angle)); | ||
| }; | ||
| CSSMatrix.prototype.skewY = function 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 | ||
| */ | ||
| CSSMatrixProto.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) | ||
| /** | ||
| * Set the current `CSSMatrix` instance to the identity form and returns it. | ||
| * | ||
| * @return {CSSMatrix} this `CSSMatrix` instance | ||
| */ | ||
| CSSMatrixProto.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); | ||
| /** | ||
| * Transforms the specified point using the matrix, returning a new | ||
| * *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 {Point} point the *Object* with `x`, `y`, `z` and `w` components | ||
| * @return {Point} a new `{x,y,z,w}` *Object* | ||
| */ | ||
| CSSMatrixProto.transformPoint = function transformPoint(v) { | ||
| var M = this; | ||
| var m = Translate(v.x, v.y, v.z); | ||
| m.m44 = v.w || 1; | ||
| m = _m.multiply(m); | ||
| m = M.multiply(m); | ||
| return { | ||
@@ -255,6 +731,30 @@ x: m.m41, | ||
| z: m.m43, | ||
| w: m.m44 | ||
| } | ||
| w: m.m44, | ||
| }; | ||
| }; | ||
| Object.defineProperties( CSSMatrix.prototype, prototypeAccessors ); | ||
| /** | ||
| * Transforms the specified vector using the matrix, returning a new | ||
| * {x,y,z,w} *Object* comprising the transformed vector. | ||
| * Neither the matrix nor the original vector are altered. | ||
| * | ||
| * @param {Tuple} tupple an object with x, y, z and w components | ||
| * @return {Tuple} the passed tuple | ||
| */ | ||
| CSSMatrixProto.transform = function transform(t) { | ||
| var m = this; | ||
| var x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w; | ||
| var y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w; | ||
| var z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w; | ||
| var w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w; | ||
| return { | ||
| x: x / w, | ||
| y: y / w, | ||
| z: z / w, | ||
| w: w, | ||
| }; | ||
| }; | ||
| // Add Transform Functions to CSSMatrix object | ||
| CSSMatrix.Translate = Translate; | ||
@@ -261,0 +761,0 @@ CSSMatrix.Rotate = Rotate; |
@@ -1,2 +0,2 @@ | ||
| // DOMMatrix v0.0.4 | 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||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; | ||
| // DOMMatrix v0.0.5-alpha1 | thednp © 2021 | MIT-License | ||
| var m=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},t={isIdentity:{configurable:!0},is2D:{configurable:!0}};t.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},t.isIdentity.set=function(m){this.isIdentity=m},t.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},t.is2D.set=function(m){this.is2D=m},Object.defineProperties(m.prototype,t);var r=m.prototype;function n(t,r,n){var e=new m;return e.m41=t,e.e=t,e.m42=r,e.f=r,e.m43=n,e}function e(t,r,n){var e=new m,i=t*Math.PI/180,a=r*Math.PI/180,u=n*Math.PI/180,s=Math.cos(i),o=-Math.sin(i),f=Math.cos(a),c=-Math.sin(a),h=Math.cos(u),l=-Math.sin(u),y=f*h,v=-f*l;e.m11=y,e.a=y,e.m12=v,e.b=v,e.m13=c;var x=o*c*h+s*l;e.m21=x,e.c=x;var w=s*h-o*c*l;return e.m22=w,e.d=w,e.m23=-o*f,e.m31=o*l-s*c*h,e.m32=o*h+s*c*l,e.m33=s*f,e}function i(t,r,n,e){var i=new m,a=e*Math.PI/360,u=Math.sin(a),s=Math.cos(a),o=u*u,f=Math.sqrt(t*t+r*r+n*n),c=0,h=0,l=1;0!==f&&(c=t/f,h=r/f,l=n/f);var y=c*c,v=h*h,x=l*l,w=1-2*(v+x)*o;i.m11=w,i.a=w;var M=2*(t*r*o+n*u*s);i.m12=M,i.b=M,i.m13=2*(t*n*o-r*u*s);var g=2*(r*t*o-n*u*s);i.m21=g,i.c=g;var d=1-2*(x+y)*o;return i.m22=d,i.d=d,i.m23=2*(r*n*o+t*u*s),i.m31=2*(n*t*o+r*u*s),i.m32=2*(n*r*o-t*u*s),i.m33=1-2*(y+v)*o,i.m14=0,i.m24=0,i.m34=0,i.m41=0,i.e=0,i.m42=0,i.f=0,i.m43=0,i.m44=1,i}function a(t,r,n){var e=new m;return e.m11=t,e.a=t,e.m22=r,e.d=r,e.m33=n,e}function u(t){var r=t*Math.PI/180,n=new m,e=Math.tan(r);return n.m21=e,n.c=e,n}function s(t){var r=t*Math.PI/180,n=new m,e=Math.tan(r);return n.m12=e,n.b=e,n}function o(t,r){var n=r.m11*t.m11+r.m12*t.m21+r.m13*t.m31+r.m14*t.m41,e=r.m11*t.m12+r.m12*t.m22+r.m13*t.m32+r.m14*t.m42,i=r.m11*t.m13+r.m12*t.m23+r.m13*t.m33+r.m14*t.m43,a=r.m11*t.m14+r.m12*t.m24+r.m13*t.m34+r.m14*t.m44,u=r.m21*t.m11+r.m22*t.m21+r.m23*t.m31+r.m24*t.m41,s=r.m21*t.m12+r.m22*t.m22+r.m23*t.m32+r.m24*t.m42,o=r.m21*t.m13+r.m22*t.m23+r.m23*t.m33+r.m24*t.m43,f=r.m21*t.m14+r.m22*t.m24+r.m23*t.m34+r.m24*t.m44,c=r.m31*t.m11+r.m32*t.m21+r.m33*t.m31+r.m34*t.m41,h=r.m31*t.m12+r.m32*t.m22+r.m33*t.m32+r.m34*t.m42,l=r.m31*t.m13+r.m32*t.m23+r.m33*t.m33+r.m34*t.m43,y=r.m31*t.m14+r.m32*t.m24+r.m33*t.m34+r.m34*t.m44,v=r.m41*t.m11+r.m42*t.m21+r.m43*t.m31+r.m44*t.m41,x=r.m41*t.m12+r.m42*t.m22+r.m43*t.m32+r.m44*t.m42,w=r.m41*t.m13+r.m42*t.m23+r.m43*t.m33+r.m44*t.m43,M=r.m41*t.m14+r.m42*t.m24+r.m43*t.m34+r.m44*t.m44;return new m([n,u,c,v,e,s,h,x,i,o,l,w,a,f,y,M])}function f(m,t){var r=Array.from(t);if(16===r.length){var n=r[0],e=r[1],i=r[2],a=r[3],u=r[4],s=r[5],o=r[6],f=r[7],c=r[8],h=r[9],l=r[10],y=r[11],v=r[12],x=r[13],w=r[14],M=r[15];m.m11=n,m.a=n,m.m21=e,m.c=e,m.m31=i,m.m41=a,m.e=a,m.m12=u,m.b=u,m.m22=s,m.d=s,m.m32=o,m.m42=f,m.f=f,m.m13=c,m.m23=h,m.m33=l,m.m43=y,m.m14=v,m.m24=x,m.m34=w,m.m44=M}else{if(6!==r.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");var g=r[0],d=r[1],p=r[2],A=r[3],S=r[4],I=r[5];m.m11=g,m.a=g,m.m12=d,m.b=d,m.m21=p,m.c=p,m.m22=A,m.d=A,m.m14=S,m.e=S,m.m24=I,m.f=I}return m}r.setMatrixValue=function(t){var r=this;if(!t||!t.length)return r;if(t.length&&"string"==typeof t[0]&&t[0].length){var n,e,i=String(t[0]).trim();if("none"===i)return r;if(n=i.slice(0,i.indexOf("(")),e=i.slice("matrix"===n?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(e.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");f(r,e)}else t[0]instanceof m?f(r,t[0].toArray()):Array.isArray(t[0])?f(r,t[0]):Array.isArray(t)&&f(r,t);return r},r.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},r.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]},r.multiply=function(m){return o(this,m)},r.translate=function(m,t,r){var e,i;return null===r&&(i=0),null===t&&(e=0),o(this,n(m,e,i))},r.scale=function(m,t,r){var n,e;return null===r&&(e=m),null===t&&(n=m),o(this,a(m,n,e))},r.rotate=function(m,t,r){var n,i,a=m;return null===t&&(n=0),null===r&&(i=m,a=0),o(this,e(a,n,i))},r.rotateAxisAngle=function(m,t,r,n){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return o(this,i(m,t,r,n))},r.skewX=function(m){return o(this,u(m))},r.skewY=function(m){return o(this,s(m))},r.setIdentity=function(){return f(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},r.transformPoint=function(m){var t=n(m.x,m.y,m.z);return t.m44=m.w||1,{x:(t=this.multiply(t)).m41,y:t.m42,z:t.m43,w:t.m44}},r.transform=function(m){var t=this,r=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,n=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:r/i,y:n/i,z:e/i,w:i}},m.Translate=n,m.Rotate=e,m.RotateAxisAngle=i,m.Scale=a,m.SkewX=u,m.SkewY=s,m.Multiply=o,m.fromMatrix=function(t){return new m([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])},m.fromArray=function(t){return f(new m,t)},m.feedFromArray=f;export default m; |
| /*! | ||
| * DOMMatrix v0.0.4 (https://github.com/thednp/dommatrix) | ||
| * Copyright 2020 © thednp | ||
| * DOMMatrix v0.0.5-alpha1 (https://github.com/thednp/dommatrix) | ||
| * Copyright 2021 © thednp | ||
| * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE) | ||
@@ -12,50 +12,203 @@ */ | ||
| function Translate(x, y, z){ | ||
| /** | ||
| * DOMMatrix shim - CSSMatrix | ||
| * | ||
| * 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 column major order. | ||
| * @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix | ||
| * @param {[m11,m21,m31,m41..]} Arguments representing the 16 elements of a 3d matrix | ||
| */ | ||
| 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 } }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| 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); | ||
| }; | ||
| /** | ||
| * Sets a new `Boolean` flag value for `this.isIdentity` matrix property. | ||
| * | ||
| * @param {Boolean} value sets a new `Boolean` flag for this property | ||
| */ | ||
| prototypeAccessors.isIdentity.set = function (value) { | ||
| this.isIdentity = value; | ||
| }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| 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); | ||
| }; | ||
| /** | ||
| * Sets a new `Boolean` flag value for `this.is2D` matrix property. | ||
| * | ||
| * @param {Boolean} value sets a new `Boolean` flag for this property | ||
| */ | ||
| prototypeAccessors.is2D.set = function (value) { | ||
| this.is2D = value; | ||
| }; | ||
| Object.defineProperties( CSSMatrix.prototype, prototypeAccessors ); | ||
| // export proto for custom compile via Buble | ||
| var CSSMatrixProto = CSSMatrix.prototype; | ||
| // Transform Functions | ||
| // https://www.w3.org/TR/css-transforms-1/#transform-functions | ||
| /** | ||
| * Creates a new `CSSMatrix` for the translation matrix and returns it. | ||
| * This method is equivalent to the CSS `translate3d()` function. | ||
| * | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| m.m41 = m.e = x; | ||
| m.m42 = m.f = y; | ||
| m.m41 = x; | ||
| m.e = x; | ||
| m.m42 = y; | ||
| m.f = y; | ||
| m.m43 = z; | ||
| return m | ||
| return m; | ||
| } | ||
| function Rotate(rx, ry, rz){ | ||
| /** | ||
| * 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. | ||
| */ | ||
| 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; | ||
| var radX = (rx * Math.PI) / 180; | ||
| var radY = (ry * Math.PI) / 180; | ||
| var radZ = (rz * Math.PI) / 180; | ||
| // minus sin() because of right-handed system | ||
| var cosx = Math.cos(radX); | ||
| var sinx = -Math.sin(radX); | ||
| var cosy = Math.cos(radY); | ||
| var siny = -Math.sin(radY); | ||
| var cosz = Math.cos(radZ); | ||
| var sinz = -Math.sin(radZ); | ||
| var cycz = cosy * cosz; | ||
| var cysz = -cosy * sinz; | ||
| m.m11 = cycz; | ||
| m.a = cycz; | ||
| m.m12 = cysz; | ||
| m.b = cysz; | ||
| m.m13 = siny; | ||
| m.m21 = m.c = sinx * siny * cosz + cosx * sinz; | ||
| m.m22 = m.d = cosx * cosz - sinx * siny * sinz; | ||
| var sxsy = sinx * siny * cosz + cosx * sinz; | ||
| m.m21 = sxsy; | ||
| m.c = sxsy; | ||
| var cxcz = cosx * cosz - sinx * siny * sinz; | ||
| m.m22 = cxcz; | ||
| m.d = cxcz; | ||
| m.m23 = -sinx * cosy; | ||
| m.m31 = sinx * sinz - cosx * siny * cosz; | ||
| m.m32 = sinx * cosz + cosx * siny * sinz; | ||
| m.m33 = cosx * cosy; | ||
| return m | ||
| 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; | ||
| /** | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| var radA = (angle * Math.PI) / 360; | ||
| var sinA = Math.sin(radA); | ||
| var cosA = Math.cos(radA); | ||
| var sinA2 = sinA * sinA; | ||
| var length = Math.sqrt(x * x + y * y + z * z); | ||
| var X = 0; | ||
| var Y = 0; | ||
| var Z = 1; | ||
| // bad vector length, use something reasonable | ||
| if (length !== 0) { | ||
| X = x / length; | ||
| Y = y / length; | ||
| Z = 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); | ||
| var x2 = X * X; | ||
| var y2 = Y * Y; | ||
| var z2 = Z * Z; | ||
| var m11 = 1 - 2 * (y2 + z2) * sinA2; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| var m12 = 2 * (x * y * sinA2 + z * sinA * cosA); | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| 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; | ||
| var m21 = 2 * (y * x * sinA2 - z * sinA * cosA); | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| var m22 = 1 - 2 * (z2 + x2) * sinA2; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA); | ||
@@ -65,194 +218,517 @@ m.m31 = 2 * (z * x * sinA2 + y * 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.m14 = 0; | ||
| m.m24 = 0; | ||
| m.m34 = 0; | ||
| m.m41 = 0; | ||
| m.e = 0; | ||
| m.m42 = 0; | ||
| m.f = 0; | ||
| m.m43 = 0; | ||
| m.m44 = 1; | ||
| return m | ||
| return m; | ||
| } | ||
| function Scale(x, y, z){ | ||
| /** | ||
| * 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) { | ||
| var m = new CSSMatrix(); | ||
| m.m11 = m.a = x; | ||
| m.m22 = m.d = y; | ||
| m.m11 = x; | ||
| m.a = x; | ||
| m.m22 = y; | ||
| m.d = y; | ||
| m.m33 = z; | ||
| return m | ||
| return m; | ||
| } | ||
| function SkewX(angle){ | ||
| angle *= Math.PI / 180; | ||
| /** | ||
| * 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) { | ||
| var radA = (angle * Math.PI) / 180; | ||
| var m = new CSSMatrix(); | ||
| m.m21 = m.c = Math.tan(angle); | ||
| return m | ||
| var t = Math.tan(radA); | ||
| m.m21 = t; | ||
| m.c = t; | ||
| return m; | ||
| } | ||
| function SkewY(angle){ | ||
| angle *= Math.PI / 180; | ||
| /** | ||
| * 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) { | ||
| var radA = (angle * Math.PI) / 180; | ||
| var m = new CSSMatrix(); | ||
| m.m12 = m.b = Math.tan(angle); | ||
| return m | ||
| var t = Math.tan(radA); | ||
| m.m12 = t; | ||
| m.b = t; | ||
| 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; | ||
| /** | ||
| * 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) { | ||
| var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41; | ||
| var m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42; | ||
| var m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43; | ||
| var m14 = m2.m11 * m1.m14 + m2.m12 * m1.m24 + m2.m13 * m1.m34 + m2.m14 * m1.m44; | ||
| var m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41; | ||
| var m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42; | ||
| var m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43; | ||
| var m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44; | ||
| var m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41; | ||
| var m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42; | ||
| var m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43; | ||
| var m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44; | ||
| var m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41; | ||
| var m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42; | ||
| var m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43; | ||
| var 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]) | ||
| [m11, m21, m31, m41, | ||
| m12, m22, m32, m42, | ||
| m13, m23, m33, m43, | ||
| m14, m24, m34, m44] | ||
| ); | ||
| } | ||
| function fromMatrix(m){ | ||
| /** | ||
| * 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, ..) | ||
| */ | ||
| // 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, ..) | ||
| */ | ||
| // 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` initialization to feed values from | ||
| */ | ||
| 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]) | ||
| // 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] | ||
| ); | ||
| } | ||
| function fromArray(a){ | ||
| return feedFromArray(new CSSMatrix(),a) | ||
| } | ||
| function feedFromArray(m,array){ | ||
| /** | ||
| * 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) { | ||
| 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]; | ||
| if (a.length === 16) { | ||
| var m11 = a[0]; | ||
| var m21 = a[1]; | ||
| var m31 = a[2]; | ||
| var m41 = a[3]; | ||
| var m12 = a[4]; | ||
| var m22 = a[5]; | ||
| var m32 = a[6]; | ||
| var m42 = a[7]; | ||
| var m13 = a[8]; | ||
| var m23 = a[9]; | ||
| var m33 = a[10]; | ||
| var m43 = a[11]; | ||
| var m14 = a[12]; | ||
| var m24 = a[13]; | ||
| var m34 = a[14]; | ||
| var m44 = a[15]; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| m.m31 = m31; | ||
| m.m41 = m41; | ||
| m.e = m41; | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m32 = m32; | ||
| m.m42 = m42; | ||
| m.f = m42; | ||
| m.m13 = m13; | ||
| m.m23 = m23; | ||
| m.m33 = m33; | ||
| m.m43 = m43; | ||
| m.m14 = m14; | ||
| m.m24 = m24; | ||
| m.m34 = m34; | ||
| m.m44 = m44; | ||
| } else if (a.length === 6) { | ||
| var m11$1 = a[0]; | ||
| var m12$1 = a[1]; | ||
| var m21$1 = a[2]; | ||
| var m22$1 = a[3]; | ||
| var m14$1 = a[4]; | ||
| var m24$1 = a[5]; | ||
| m.m11 = m11$1; | ||
| m.a = m11$1; | ||
| m.m12 = m12$1; | ||
| m.b = m12$1; | ||
| m.m21 = m21$1; | ||
| m.c = m21$1; | ||
| m.m22 = m22$1; | ||
| m.d = m22$1; | ||
| m.m14 = m14$1; | ||
| m.e = m14$1; | ||
| m.m24 = m24$1; | ||
| m.f = m24$1; | ||
| } else { | ||
| console.error("CSSMatrix: expecting a 6/16 values Array"); | ||
| throw new TypeError('CSSMatrix: expecting a 6/16 values Array'); | ||
| } | ||
| return m | ||
| 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){ | ||
| /** | ||
| * 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); | ||
| } | ||
| /** | ||
| * 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 float array 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); | ||
| // } | ||
| /** | ||
| * 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()`. | ||
| */ | ||
| CSSMatrixProto.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; } | ||
| if (!source || !source.length) { // no parameters or source | ||
| return m; | ||
| } if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source | ||
| var string = String(source[0]).trim(); var type = ''; var | ||
| 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); | ||
| .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"); | ||
| throw new TypeError('CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax'); | ||
| } | ||
| } else if (source[0] instanceof CSSMatrix) { | ||
| feedFromArray(m,source[0]); | ||
| } else if (Array.isArray(source[0])) { | ||
| feedFromArray(m,source[0]); | ||
| } else if (Array.isArray(source)) { | ||
| feedFromArray(m,source); | ||
| } 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 | ||
| return m; | ||
| }; | ||
| CSSMatrix.prototype.toString = function toString (){ | ||
| var m = this, type = m.is2D ? 'matrix' : 'matrix3d'; | ||
| return (type + "(" + (m.toArray(1).join(',')) + ")") | ||
| /** | ||
| * 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, ...)* | ||
| * @matrix *matrix(a, b, c, d, e, f)* | ||
| * | ||
| * @return {String} `String` representation of the matrix | ||
| */ | ||
| CSSMatrixProto.toString = function toString() { | ||
| var m = this; | ||
| var type = m.is2D ? 'matrix' : 'matrix3d'; | ||
| return (type + "(" + (m.toArray(1).join(',')) + ")"); | ||
| }; | ||
| CSSMatrix.prototype.toArray = function toArray (transposed){ | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.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, | ||
| var result; | ||
| if (m.is2D) { | ||
| result = [m.a, m.b, m.c, m.d, m.e, m.f]; | ||
| } else if (transposed) { | ||
| result = [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, | ||
| m.m41, m.m42, m.m43, m.m44]; | ||
| } else { | ||
| result = [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] | ||
| m.m14, m.m24, m.m34, m.m44]; | ||
| } | ||
| return result; | ||
| }; | ||
| CSSMatrix.prototype.multiply = function multiply (m2){ | ||
| return Multiply(this,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 is not modified. | ||
| * | ||
| * @param {CSSMatrix} m2 CSSMatrix | ||
| * @return {CSSMatrix} The result matrix. | ||
| */ | ||
| CSSMatrixProto.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)) | ||
| /** | ||
| * | ||
| * These methods will be implemented later into an extended version to provide | ||
| * additional functionality. | ||
| */ | ||
| // inverse = function(){} | ||
| // determinant = function(){} | ||
| // transpose = function(){} | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.translate = function translate(x, y, z) { | ||
| var X = x; | ||
| var Y; | ||
| var 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)) | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.scale = function scale(x, y, z) { | ||
| var X = x; | ||
| var Y; | ||
| var Z; | ||
| if (z === null) { Z = x; } | ||
| if (y === null) { Y = 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)) | ||
| /** | ||
| * 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, or Z if Y and Z are null. | ||
| * @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 | ||
| */ | ||
| CSSMatrixProto.rotate = function rotate(rx, ry, rz) { | ||
| var RX = rx; | ||
| var RY; | ||
| var 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 | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.rotateAxisAngle = function rotateAxisAngle(x, y, z, angle) { | ||
| if (arguments.length !== 4) { | ||
| throw new TypeError('CSSMatrix: expecting 4 values'); | ||
| } | ||
| return Multiply(this,RotateAxisAngle(x, y, z, angle)) | ||
| return Multiply(this, RotateAxisAngle(x, y, z, angle)); | ||
| }; | ||
| CSSMatrix.prototype.skewX = function 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 | ||
| */ | ||
| CSSMatrixProto.skewX = function skewX(angle) { | ||
| return Multiply(this, SkewX(angle)); | ||
| }; | ||
| CSSMatrix.prototype.skewY = function 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 | ||
| */ | ||
| CSSMatrixProto.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) | ||
| /** | ||
| * Set the current `CSSMatrix` instance to the identity form and returns it. | ||
| * | ||
| * @return {CSSMatrix} this `CSSMatrix` instance | ||
| */ | ||
| CSSMatrixProto.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); | ||
| /** | ||
| * Transforms the specified point using the matrix, returning a new | ||
| * *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 {Point} point the *Object* with `x`, `y`, `z` and `w` components | ||
| * @return {Point} a new `{x,y,z,w}` *Object* | ||
| */ | ||
| CSSMatrixProto.transformPoint = function transformPoint(v) { | ||
| var M = this; | ||
| var m = Translate(v.x, v.y, v.z); | ||
| m.m44 = v.w || 1; | ||
| m = _m.multiply(m); | ||
| m = M.multiply(m); | ||
| return { | ||
@@ -262,6 +738,30 @@ x: m.m41, | ||
| z: m.m43, | ||
| w: m.m44 | ||
| } | ||
| w: m.m44, | ||
| }; | ||
| }; | ||
| Object.defineProperties( CSSMatrix.prototype, prototypeAccessors ); | ||
| /** | ||
| * Transforms the specified vector using the matrix, returning a new | ||
| * {x,y,z,w} *Object* comprising the transformed vector. | ||
| * Neither the matrix nor the original vector are altered. | ||
| * | ||
| * @param {Tuple} tupple an object with x, y, z and w components | ||
| * @return {Tuple} the passed tuple | ||
| */ | ||
| CSSMatrixProto.transform = function transform(t) { | ||
| var m = this; | ||
| var x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w; | ||
| var y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w; | ||
| var z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w; | ||
| var w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w; | ||
| return { | ||
| x: x / w, | ||
| y: y / w, | ||
| z: z / w, | ||
| w: w, | ||
| }; | ||
| }; | ||
| // Add Transform Functions to CSSMatrix object | ||
| CSSMatrix.Translate = Translate; | ||
@@ -268,0 +768,0 @@ CSSMatrix.Rotate = Rotate; |
@@ -1,2 +0,2 @@ | ||
| // DOMMatrix v0.0.4 | 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||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})); | ||
| // DOMMatrix v0.0.5-alpha1 | thednp © 2021 | MIT-License | ||
| !function(m,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(m="undefined"!=typeof globalThis?globalThis:m||self).CSSMatrix=t()}(this,(function(){"use strict";var m=function(){for(var m=[],t=arguments.length;t--;)m[t]=arguments[t];return this.setIdentity(),m&&m.length&&this.setMatrixValue(m)},t={isIdentity:{configurable:!0},is2D:{configurable:!0}};t.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},t.isIdentity.set=function(m){this.isIdentity=m},t.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},t.is2D.set=function(m){this.is2D=m},Object.defineProperties(m.prototype,t);var n=m.prototype;function r(t,n,r){var e=new m;return e.m41=t,e.e=t,e.m42=n,e.f=n,e.m43=r,e}function e(t,n,r){var e=new m,i=t*Math.PI/180,a=n*Math.PI/180,u=r*Math.PI/180,o=Math.cos(i),s=-Math.sin(i),f=Math.cos(a),c=-Math.sin(a),h=Math.cos(u),l=-Math.sin(u),y=f*h,v=-f*l;e.m11=y,e.a=y,e.m12=v,e.b=v,e.m13=c;var d=s*c*h+o*l;e.m21=d,e.c=d;var x=o*h-s*c*l;return e.m22=x,e.d=x,e.m23=-s*f,e.m31=s*l-o*c*h,e.m32=s*h+o*c*l,e.m33=o*f,e}function i(t,n,r,e){var i=new m,a=e*Math.PI/360,u=Math.sin(a),o=Math.cos(a),s=u*u,f=Math.sqrt(t*t+n*n+r*r),c=0,h=0,l=1;0!==f&&(c=t/f,h=n/f,l=r/f);var y=c*c,v=h*h,d=l*l,x=1-2*(v+d)*s;i.m11=x,i.a=x;var w=2*(t*n*s+r*u*o);i.m12=w,i.b=w,i.m13=2*(t*r*s-n*u*o);var M=2*(n*t*s-r*u*o);i.m21=M,i.c=M;var g=1-2*(d+y)*s;return i.m22=g,i.d=g,i.m23=2*(n*r*s+t*u*o),i.m31=2*(r*t*s+n*u*o),i.m32=2*(r*n*s-t*u*o),i.m33=1-2*(y+v)*s,i.m14=0,i.m24=0,i.m34=0,i.m41=0,i.e=0,i.m42=0,i.f=0,i.m43=0,i.m44=1,i}function a(t,n,r){var e=new m;return e.m11=t,e.a=t,e.m22=n,e.d=n,e.m33=r,e}function u(t){var n=t*Math.PI/180,r=new m,e=Math.tan(n);return r.m21=e,r.c=e,r}function o(t){var n=t*Math.PI/180,r=new m,e=Math.tan(n);return r.m12=e,r.b=e,r}function s(t,n){var r=n.m11*t.m11+n.m12*t.m21+n.m13*t.m31+n.m14*t.m41,e=n.m11*t.m12+n.m12*t.m22+n.m13*t.m32+n.m14*t.m42,i=n.m11*t.m13+n.m12*t.m23+n.m13*t.m33+n.m14*t.m43,a=n.m11*t.m14+n.m12*t.m24+n.m13*t.m34+n.m14*t.m44,u=n.m21*t.m11+n.m22*t.m21+n.m23*t.m31+n.m24*t.m41,o=n.m21*t.m12+n.m22*t.m22+n.m23*t.m32+n.m24*t.m42,s=n.m21*t.m13+n.m22*t.m23+n.m23*t.m33+n.m24*t.m43,f=n.m21*t.m14+n.m22*t.m24+n.m23*t.m34+n.m24*t.m44,c=n.m31*t.m11+n.m32*t.m21+n.m33*t.m31+n.m34*t.m41,h=n.m31*t.m12+n.m32*t.m22+n.m33*t.m32+n.m34*t.m42,l=n.m31*t.m13+n.m32*t.m23+n.m33*t.m33+n.m34*t.m43,y=n.m31*t.m14+n.m32*t.m24+n.m33*t.m34+n.m34*t.m44,v=n.m41*t.m11+n.m42*t.m21+n.m43*t.m31+n.m44*t.m41,d=n.m41*t.m12+n.m42*t.m22+n.m43*t.m32+n.m44*t.m42,x=n.m41*t.m13+n.m42*t.m23+n.m43*t.m33+n.m44*t.m43,w=n.m41*t.m14+n.m42*t.m24+n.m43*t.m34+n.m44*t.m44;return new m([r,u,c,v,e,o,h,d,i,s,l,x,a,f,y,w])}function f(m,t){var n=Array.from(t);if(16===n.length){var r=n[0],e=n[1],i=n[2],a=n[3],u=n[4],o=n[5],s=n[6],f=n[7],c=n[8],h=n[9],l=n[10],y=n[11],v=n[12],d=n[13],x=n[14],w=n[15];m.m11=r,m.a=r,m.m21=e,m.c=e,m.m31=i,m.m41=a,m.e=a,m.m12=u,m.b=u,m.m22=o,m.d=o,m.m32=s,m.m42=f,m.f=f,m.m13=c,m.m23=h,m.m33=l,m.m43=y,m.m14=v,m.m24=d,m.m34=x,m.m44=w}else{if(6!==n.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");var M=n[0],g=n[1],p=n[2],A=n[3],S=n[4],b=n[5];m.m11=M,m.a=M,m.m12=g,m.b=g,m.m21=p,m.c=p,m.m22=A,m.d=A,m.m14=S,m.e=S,m.m24=b,m.f=b}return m}return n.setMatrixValue=function(t){var n=this;if(!t||!t.length)return n;if(t.length&&"string"==typeof t[0]&&t[0].length){var r,e,i=String(t[0]).trim();if("none"===i)return n;if(r=i.slice(0,i.indexOf("(")),e=i.slice("matrix"===r?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(e.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");f(n,e)}else t[0]instanceof m?f(n,t[0].toArray()):Array.isArray(t[0])?f(n,t[0]):Array.isArray(t)&&f(n,t);return n},n.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},n.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]},n.multiply=function(m){return s(this,m)},n.translate=function(m,t,n){var e,i;return null===n&&(i=0),null===t&&(e=0),s(this,r(m,e,i))},n.scale=function(m,t,n){var r,e;return null===n&&(e=m),null===t&&(r=m),s(this,a(m,r,e))},n.rotate=function(m,t,n){var r,i,a=m;return null===t&&(r=0),null===n&&(i=m,a=0),s(this,e(a,r,i))},n.rotateAxisAngle=function(m,t,n,r){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return s(this,i(m,t,n,r))},n.skewX=function(m){return s(this,u(m))},n.skewY=function(m){return s(this,o(m))},n.setIdentity=function(){return f(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},n.transformPoint=function(m){var t=r(m.x,m.y,m.z);return t.m44=m.w||1,{x:(t=this.multiply(t)).m41,y:t.m42,z:t.m43,w:t.m44}},n.transform=function(m){var t=this,n=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,r=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,e=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:n/i,y:r/i,z:e/i,w:i}},m.Translate=r,m.Rotate=e,m.RotateAxisAngle=i,m.Scale=a,m.SkewX=u,m.SkewY=o,m.Multiply=s,m.fromMatrix=function(t){return new m([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])},m.fromArray=function(t){return f(new m,t)},m.feedFromArray=f,m})); |
| { | ||
| "name": "dommatrix", | ||
| "version": "0.0.4", | ||
| "version": "0.0.5-alpha1", | ||
| "description": "ES6+ shim for DOMMatrix", | ||
@@ -14,4 +14,6 @@ "main": "dist/dommatrix.min.js", | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "build": "npm-run-all --parallel build-*", | ||
| "build": "npm run fix:js && npm-run-all --parallel build-*", | ||
| "custom-build": "rollup -c --environment", | ||
| "fix:js": "eslint src/*.js --config .eslintrc --fix", | ||
| "lint:js": "eslint src/*.js --config .eslintrc", | ||
| "build-js": "rollup --environment FORMAT:umd,MIN:false -c", | ||
@@ -38,12 +40,16 @@ "build-js-min": "rollup --environment FORMAT:umd,MIN:true -c", | ||
| "homepage": "https://github.com/thednp/dommatrix", | ||
| "devDependencies": { | ||
| "dependencies": { | ||
| "@rollup/plugin-buble": "^0.21.3", | ||
| "@rollup/plugin-json": "^4.1.0", | ||
| "rollup-plugin-terser": "^5.3.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-node-resolve": "^7.1.3", | ||
| "eslint": "^7.22.0", | ||
| "eslint-config-airbnb-base": "^14.2.1", | ||
| "eslint-plugin-import": "^2.22.1", | ||
| "eslint-plugin-vue": "^7.7.0", | ||
| "npm-run-all": "^4.1.5", | ||
| "rollup": "^2.26.3", | ||
| "rollup-plugin-cleanup": "^3.1.1", | ||
| "rollup-plugin-terser": "^5.3.0" | ||
| }, | ||
| "dependencies": {} | ||
| "rollup": "^2.28.1" | ||
| } | ||
| } |
231
README.md
| # DOMMatrix shim | ||
| 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. | ||
| An ES6+ sourced [DOMMatrix](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) shim for **Node.js** apps and legacy browsers. Since this source is modernized, legacy browsers might need some additional shims. | ||
| [](https://www.npmjs.com/package/dommatrix) | ||
| [](http://npm-stat.com/charts.html?dommatrix) | ||
| [](https://www.jsdelivr.com/package/npm/dommatrix) | ||
| 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`. | ||
| # WIKI | ||
| Head over to the [wiki pages](https://github.com/thednp/DOMMatrix/wiki) for developer guidelines. | ||
| # More Info | ||
| 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: | ||
@@ -16,3 +24,2 @@ | ||
| * *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*; | ||
@@ -25,221 +32,5 @@ * **added** `is2D` (*getter* and *setter*) property; | ||
| * **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. | ||
| * **added** `transformPoint()` instance method which works like the original. | ||
| # Install | ||
| ``` | ||
| npm install dommatrix | ||
| ``` | ||
| # Usage | ||
| The initialization doesn't support CSS syntax strings with transform functions like `rotate()` or `translate()` only `matrix()` and `matrix3d()`, or 6/16 elements arrays. | ||
| **Basics** | ||
| ```js | ||
| // ES6+ | ||
| import CSSMatrix from 'dommatrix' | ||
| // init | ||
| let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)') | ||
| ``` | ||
| OR | ||
| ```js | ||
| // Node.js | ||
| var CSSMatrix = require('dommatrix'); | ||
| // init | ||
| let myMatrix = new CSSMatrix() | ||
| ``` | ||
| **Advanced API Examples** | ||
| ```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` / `toFloat32Array` 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 | ||
@@ -250,2 +41,2 @@ * Arian Stolwijk for his [CSSMatrix](https://github.com/arian/CSSMatrix/) | ||
| # License | ||
| DOMMatrix shim is [MIT Licensed](https://github.com/thednp/DOMMatrix/blob/master/LICENSE). | ||
| DOMMatrix shim is [MIT Licensed](https://github.com/thednp/DOMMatrix/blob/master/LICENSE). |
1038
src/index.js
@@ -0,1 +1,70 @@ | ||
| /** | ||
| * DOMMatrix shim - CSSMatrix | ||
| * | ||
| * 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 column major order. | ||
| * @param {[a,b,c,d,e,f]} Arguments representing the 6 elements of a 2d matrix | ||
| * @param {[m11,m21,m31,m41..]} Arguments representing the 16 elements of a 3d matrix | ||
| */ | ||
| class CSSMatrix { | ||
| constructor(...args) { | ||
| this.setIdentity(); | ||
| return args && args.length && this.setMatrixValue(args); | ||
| } | ||
| /** | ||
| * 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() { | ||
| const 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; | ||
| } | ||
| /** | ||
| * 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() { | ||
| const m = this; | ||
| return (m.m31 === 0 && m.m32 === 0 && m.m33 === 1 && m.m34 === 0 && m.m43 === 0 && m.m44 === 1); | ||
| } | ||
| /** | ||
| * 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; | ||
| } | ||
| } | ||
| // export proto for custom compile via Buble | ||
| const CSSMatrixProto = CSSMatrix.prototype; | ||
| // Transform Functions | ||
@@ -7,5 +76,5 @@ // https://www.w3.org/TR/css-transforms-1/#transform-functions | ||
| * This method is equivalent to the CSS `translate3d()` function. | ||
| * | ||
| * | ||
| * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d | ||
| * | ||
| * | ||
| * @param {Number} x the `x-axis` position. | ||
@@ -15,8 +84,10 @@ * @param {Number} y the `y-axis` position. | ||
| */ | ||
| function Translate(x, y, z){ | ||
| let m = new CSSMatrix(); | ||
| m.m41 = m.e = x; | ||
| m.m42 = m.f = y; | ||
| function Translate(x, y, z) { | ||
| const m = new CSSMatrix(); | ||
| m.m41 = x; | ||
| m.e = x; | ||
| m.m42 = y; | ||
| m.f = y; | ||
| m.m43 = z; | ||
| return m | ||
| return m; | ||
| } | ||
@@ -26,5 +97,5 @@ | ||
| * 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. | ||
@@ -35,27 +106,43 @@ * @param {Number} ry the `y-axis` rotation. | ||
| function Rotate(rx, ry, rz){ | ||
| let m = new CSSMatrix() | ||
| function Rotate(rx, ry, rz) { | ||
| const m = new CSSMatrix(); | ||
| rx *= Math.PI / 180 | ||
| ry *= Math.PI / 180 | ||
| rz *= Math.PI / 180 | ||
| const radX = (rx * Math.PI) / 180; | ||
| const radY = (ry * Math.PI) / 180; | ||
| const radZ = (rz * Math.PI) / 180; | ||
| // 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); | ||
| const cosx = Math.cos(radX); | ||
| const sinx = -Math.sin(radX); | ||
| const cosy = Math.cos(radY); | ||
| const siny = -Math.sin(radY); | ||
| const cosz = Math.cos(radZ); | ||
| const sinz = -Math.sin(radZ); | ||
| m.m11 = m.a = cosy * cosz | ||
| m.m12 = m.b = -cosy * sinz | ||
| m.m13 = siny | ||
| const cycz = cosy * cosz; | ||
| const cysz = -cosy * sinz; | ||
| m.m21 = m.c = sinx * siny * cosz + cosx * sinz | ||
| m.m22 = m.d = cosx * cosz - sinx * siny * sinz | ||
| m.m23 = -sinx * cosy | ||
| m.m11 = cycz; | ||
| m.a = cycz; | ||
| m.m31 = sinx * sinz - cosx * siny * cosz | ||
| m.m32 = sinx * cosz + cosx * siny * sinz | ||
| m.m33 = cosx * cosy | ||
| m.m12 = cysz; | ||
| m.b = cysz; | ||
| return m | ||
| m.m13 = siny; | ||
| const sxsy = sinx * siny * cosz + cosx * sinz; | ||
| m.m21 = sxsy; | ||
| m.c = sxsy; | ||
| const cxcz = cosx * cosz - sinx * siny * sinz; | ||
| m.m22 = cxcz; | ||
| m.d = cxcz; | ||
| m.m23 = -sinx * cosy; | ||
| m.m31 = sinx * sinz - cosx * siny * cosz; | ||
| m.m32 = sinx * cosz + cosx * siny * sinz; | ||
| m.m33 = cosx * cosy; | ||
| return m; | ||
| } | ||
@@ -66,5 +153,5 @@ | ||
| * 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. | ||
@@ -75,29 +162,42 @@ * @param {Number} y the `y-axis` vector length. | ||
| */ | ||
| function RotateAxisAngle(x, y, z, angle){ | ||
| angle *= Math.PI / 360; | ||
| function RotateAxisAngle(x, y, z, angle) { | ||
| const m = new CSSMatrix(); | ||
| const radA = (angle * Math.PI) / 360; | ||
| const sinA = Math.sin(radA); | ||
| const cosA = Math.cos(radA); | ||
| const sinA2 = sinA * sinA; | ||
| const length = Math.sqrt(x * x + y * y + z * z); | ||
| let X = 0; | ||
| let Y = 0; | ||
| let Z = 1; | ||
| 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; | ||
| // bad vector length, use something reasonable | ||
| if (length !== 0) { | ||
| X = x / length; | ||
| Y = y / length; | ||
| Z = z / length; | ||
| } | ||
| let x2 = x * x, y2 = y * y, z2 = z * z; | ||
| const x2 = X * X; | ||
| const y2 = Y * Y; | ||
| const 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); | ||
| const m11 = 1 - 2 * (y2 + z2) * sinA2; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| const m12 = 2 * (x * y * sinA2 + z * sinA * cosA); | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| 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; | ||
| const m21 = 2 * (y * x * sinA2 - z * sinA * cosA); | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| const m22 = 1 - 2 * (z2 + x2) * sinA2; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA); | ||
@@ -107,7 +207,16 @@ m.m31 = 2 * (z * x * sinA2 + y * 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.m14 = 0; | ||
| m.m24 = 0; | ||
| m.m34 = 0; | ||
| m.m41 = 0; | ||
| m.e = 0; | ||
| m.m42 = 0; | ||
| m.f = 0; | ||
| m.m43 = 0; | ||
| m.m44 = 1; | ||
| return m | ||
| return m; | ||
| } | ||
@@ -118,5 +227,5 @@ | ||
| * 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. | ||
@@ -126,496 +235,517 @@ * @param {Number} y the `y-axis` scale. | ||
| */ | ||
| function Scale(x, y, z){ | ||
| let m = new CSSMatrix(); | ||
| m.m11 = m.a = x; | ||
| m.m22 = m.d = y; | ||
| function Scale(x, y, z) { | ||
| const m = new CSSMatrix(); | ||
| m.m11 = x; | ||
| m.a = x; | ||
| m.m22 = y; | ||
| m.d = y; | ||
| m.m33 = z; | ||
| return m | ||
| return m; | ||
| } | ||
| /** | ||
| * Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and | ||
| * 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 | ||
| function SkewX(angle) { | ||
| const radA = (angle * Math.PI) / 180; | ||
| const m = new CSSMatrix(); | ||
| const t = Math.tan(radA); | ||
| m.m21 = t; | ||
| m.c = t; | ||
| return m; | ||
| } | ||
| /** | ||
| * Creates a new `CSSMatrix` for the shear of the `y-axis` rotation matrix and | ||
| * 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 | ||
| function SkewY(angle) { | ||
| const radA = (angle * Math.PI) / 180; | ||
| const m = new CSSMatrix(); | ||
| const t = Math.tan(radA); | ||
| m.m12 = t; | ||
| m.b = t; | ||
| return m; | ||
| } | ||
| /** | ||
| * Creates a new `CSSMatrix` resulted from the multiplication of two matrixes | ||
| * 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) { | ||
| const m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41; | ||
| const m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42; | ||
| const m13 = m2.m11 * m1.m13 + m2.m12 * m1.m23 + m2.m13 * m1.m33 + m2.m14 * m1.m43; | ||
| const 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, | ||
| const m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41; | ||
| const m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42; | ||
| const m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43; | ||
| const 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, | ||
| const m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41; | ||
| const m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42; | ||
| const m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43; | ||
| const 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 | ||
| const m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41; | ||
| const m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42; | ||
| const m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43; | ||
| const m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44; | ||
| return new CSSMatrix( | ||
| [m11, m21, m31, m41, | ||
| m12, m22, m32, m42, | ||
| m13, m23, m33, m43, | ||
| m14, m24, m34, m44]) | ||
| [m11, m21, m31, m41, | ||
| m12, m22, m32, m42, | ||
| m13, m23, m33, m43, | ||
| m14, m24, m34, 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) | ||
| * 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, ..) | ||
| */ | ||
| // toFloat32Array(){ | ||
| // return Float32Array.from(this.toArray()) | ||
| // 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) | ||
| */ | ||
| * 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, ..) | ||
| */ | ||
| // toFloat64Array(){ | ||
| // return Float64Array.from(this.toArray()) | ||
| // return Float64Array.from(this.toArray()); | ||
| // } | ||
| /** | ||
| * Creates a new mutable `CSSMatrix` object given an existing matrix or a | ||
| * 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 | ||
| * | ||
| * @param {CSSMatrix} CSSMatrix the source `CSSMatrix` initialization to feed values from | ||
| */ | ||
| function fromMatrix(m){ | ||
| 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]) | ||
| [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], | ||
| ); | ||
| } | ||
| /** | ||
| * 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) { | ||
| const a = Array.from(array); | ||
| if (a.length === 16) { | ||
| const [m11, m21, m31, m41, | ||
| m12, m22, m32, m42, | ||
| m13, m23, m33, m43, | ||
| m14, m24, m34, m44] = a; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| m.m31 = m31; | ||
| m.m41 = m41; | ||
| m.e = m41; | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m32 = m32; | ||
| m.m42 = m42; | ||
| m.f = m42; | ||
| m.m13 = m13; | ||
| m.m23 = m23; | ||
| m.m33 = m33; | ||
| m.m43 = m43; | ||
| m.m14 = m14; | ||
| m.m24 = m24; | ||
| m.m34 = m34; | ||
| m.m44 = m44; | ||
| } else if (a.length === 6) { | ||
| const [m11, m12, m21, m22, m14, m24] = a; | ||
| m.m11 = m11; | ||
| m.a = m11; | ||
| m.m12 = m12; | ||
| m.b = m12; | ||
| m.m21 = m21; | ||
| m.c = m21; | ||
| m.m22 = m22; | ||
| m.d = m22; | ||
| m.m14 = m14; | ||
| m.e = m14; | ||
| m.m24 = m24; | ||
| m.f = m24; | ||
| } else { | ||
| throw new TypeError('CSSMatrix: expecting a 6/16 values Array'); | ||
| } | ||
| return m; | ||
| } | ||
| /** | ||
| * 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, | ||
| * | ||
| * 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) | ||
| function fromArray(a) { | ||
| return feedFromArray(new CSSMatrix(), a); | ||
| } | ||
| /** | ||
| * Each create a new mutable `CSSMatrix` object given an array of single/double-precision | ||
| * 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, | ||
| * | ||
| * 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. | ||
| * | ||
| * @param {Float32Array|Float64Array} array The source float array 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 fromFloat32Array(a){ | ||
| // return feedFromArray(new CSSMatrix(), a); | ||
| // } | ||
| // function fromFloat64Array(a){ // more of an alias | ||
| // return feedFromArray(new CSSMatrix(),a) | ||
| // return feedFromArray(new CSSMatrix(), a); | ||
| // } | ||
| /** | ||
| * 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. | ||
| * 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()`. | ||
| */ | ||
| 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`) | ||
| CSSMatrixProto.setMatrixValue = function setMatrixValue(source) { | ||
| const m = this; | ||
| if (!source || !source.length) { // no parameters or source | ||
| return m; | ||
| } if (source.length && typeof source[0] === 'string' && source[0].length) { // CSS transform String source | ||
| const string = String(source[0]).trim(); let type = ''; let | ||
| values = []; | ||
| 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)); | ||
| if ([6, 16].indexOf(values.length) > -1) { | ||
| feedFromArray(m, values); | ||
| } else { | ||
| throw new TypeError('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 | ||
| } | ||
| 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 | ||
| * 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, ...)* | ||
| * @matrix *matrix(a, b, c, d, e, f)* | ||
| * | ||
| * @return {String} `String` representation of the matrix | ||
| */ | ||
| CSSMatrixProto.toString = function toString() { | ||
| const m = this; | ||
| const type = m.is2D ? 'matrix' : 'matrix3d'; | ||
| export default class CSSMatrix { | ||
| constructor(...args){ | ||
| this.setIdentity() | ||
| return args && args.length && this.setMatrixValue(args) | ||
| } | ||
| return `${type}(${m.toArray(1).join(',')})`; | ||
| }; | ||
| /** | ||
| * 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 | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.toArray = function toArray(transposed) { | ||
| const m = this; | ||
| let result; | ||
| 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 = []; | ||
| 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) | ||
| 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]) | ||
| } 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 | ||
| if (m.is2D) { | ||
| result = [m.a, m.b, m.c, m.d, m.e, m.f]; | ||
| } else if (transposed) { | ||
| result = [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]; | ||
| } else { | ||
| result = [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]; | ||
| } | ||
| /** | ||
| * 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(',')})` | ||
| } | ||
| return result; | ||
| }; | ||
| /** | ||
| * 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] | ||
| } | ||
| /** | ||
| * 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. | ||
| */ | ||
| CSSMatrixProto.multiply = function multiply(m2) { | ||
| return Multiply(this, 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 is not modified. | ||
| * | ||
| * @param {CSSMatrix} m2 CSSMatrix | ||
| * @return {CSSMatrix} The result matrix. | ||
| */ | ||
| multiply(m2){ | ||
| return Multiply(this,m2) | ||
| } | ||
| /** | ||
| * | ||
| * These methods will be implemented later into an extended version to provide | ||
| * additional functionality. | ||
| */ | ||
| // inverse = function(){} | ||
| // determinant = function(){} | ||
| // transpose = function(){} | ||
| /** | ||
| * | ||
| * These methods will be implemented later into an extended version to provide | ||
| * additional functionality. | ||
| */ | ||
| // inverse = function(){} | ||
| // determinant = function(){} | ||
| // transpose = function(){} | ||
| /** | ||
| * 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 | ||
| */ | ||
| /** | ||
| * 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 | ||
| */ | ||
| CSSMatrixProto.translate = function translate(x, y, z) { | ||
| const X = x; | ||
| let Y; | ||
| let Z; | ||
| if (z === null) Z = 0; | ||
| if (y === null) Y = 0; | ||
| return Multiply(this, Translate(X, Y, Z)); | ||
| }; | ||
| translate(x, y, z){ | ||
| if (z == null) z = 0 | ||
| if (y == null) y = 0 | ||
| return Multiply(this,Translate(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. | ||
| * | ||
| * @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 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 | ||
| */ | ||
| CSSMatrixProto.scale = function scale(x, y, z) { | ||
| const X = x; | ||
| let Y; | ||
| let Z; | ||
| if (z === null) Z = x; | ||
| if (y === null) Y = x; | ||
| scale(x, y, z){ | ||
| if (y == null) y = x; | ||
| if (z == null) z = x; | ||
| return Multiply(this,Scale(x, y, z)) | ||
| } | ||
| return Multiply(this, Scale(X, Y, Z)); | ||
| }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| /** | ||
| * 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, or Z if Y and Z are null. | ||
| * @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 | ||
| */ | ||
| rotate(rx, ry, rz){ | ||
| if (ry == null) ry = 0; | ||
| if (rz == null) {rz = rx; rx = 0} | ||
| return Multiply(this,Rotate(rx, ry, rz)) | ||
| } | ||
| CSSMatrixProto.rotate = function rotate(rx, ry, rz) { | ||
| let RX = rx; | ||
| let RY; | ||
| let RZ; | ||
| if (ry === null) RY = 0; | ||
| if (rz === null) { RZ = rx; RX = 0; } | ||
| return Multiply(this, Rotate(RX, RY, RZ)); | ||
| }; | ||
| /** | ||
| * 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 | ||
| */ | ||
| /** | ||
| * 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 | ||
| */ | ||
| 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)) | ||
| CSSMatrixProto.rotateAxisAngle = function rotateAxisAngle(x, y, z, angle) { | ||
| if (arguments.length !== 4) { | ||
| throw new TypeError('CSSMatrix: expecting 4 values'); | ||
| } | ||
| return Multiply(this, RotateAxisAngle(x, y, z, 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. | ||
| * This matrix is not modified. | ||
| * | ||
| * @param {number} angle The angle amount in degrees to skew. | ||
| * @return {CSSMatrix} The `CSSMatrix` result | ||
| */ | ||
| skewX(angle){ | ||
| return Multiply(this,SkewX(angle)) | ||
| } | ||
| CSSMatrixProto.skewX = function skewX(angle) { | ||
| return Multiply(this, SkewX(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 | ||
| */ | ||
| /** | ||
| * 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 | ||
| */ | ||
| skewY(angle){ | ||
| return Multiply(this,SkewY(angle)) | ||
| } | ||
| CSSMatrixProto.skewY = function skewY(angle) { | ||
| return Multiply(this, SkewY(angle)); | ||
| }; | ||
| /** | ||
| * 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) | ||
| } | ||
| /** | ||
| * Set the current `CSSMatrix` instance to the identity form and returns it. | ||
| * | ||
| * @return {CSSMatrix} this `CSSMatrix` instance | ||
| */ | ||
| CSSMatrixProto.setIdentity = function setIdentity() { | ||
| const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; | ||
| return feedFromArray(this, identity); | ||
| }; | ||
| /** | ||
| * 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) | ||
| } | ||
| /** | ||
| * Transforms the specified point using the matrix, returning a new | ||
| * *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 {Point} point the *Object* with `x`, `y`, `z` and `w` components | ||
| * @return {Point} a new `{x,y,z,w}` *Object* | ||
| */ | ||
| CSSMatrixProto.transformPoint = function transformPoint(v) { | ||
| const M = this; | ||
| let m = Translate(v.x, v.y, v.z); | ||
| /** | ||
| * 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 | ||
| } | ||
| m.m44 = v.w || 1; | ||
| m = M.multiply(m); | ||
| /** | ||
| * 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) | ||
| } | ||
| return { | ||
| x: m.m41, | ||
| y: m.m42, | ||
| z: m.m43, | ||
| w: m.m44, | ||
| }; | ||
| }; | ||
| /** | ||
| * 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 | ||
| } | ||
| /** | ||
| * Transforms the specified vector using the matrix, returning a new | ||
| * {x,y,z,w} *Object* comprising the transformed vector. | ||
| * Neither the matrix nor the original vector are altered. | ||
| * | ||
| * @param {Tuple} tupple an object with x, y, z and w components | ||
| * @return {Tuple} the passed tuple | ||
| */ | ||
| CSSMatrixProto.transform = function transform(t) { | ||
| const m = this; | ||
| const x = m.m11 * t.x + m.m12 * t.y + m.m13 * t.z + m.m14 * t.w; | ||
| const y = m.m21 * t.x + m.m22 * t.y + m.m23 * t.z + m.m24 * t.w; | ||
| const z = m.m31 * t.x + m.m32 * t.y + m.m33 * t.z + m.m34 * t.w; | ||
| const w = m.m41 * t.x + m.m42 * t.y + m.m43 * t.z + m.m44 * t.w; | ||
| /** | ||
| * 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) | ||
| return { | ||
| x: x / w, | ||
| y: y / w, | ||
| z: z / w, | ||
| w, | ||
| }; | ||
| }; | ||
| m.m44 = v.w || 1 | ||
| m = _m.multiply(m) | ||
| // Add Transform Functions to CSSMatrix object | ||
| 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 { | ||
| 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 | ||
| export default CSSMatrix; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by34.91%
86284
- Lines of code
- increased by79.68%
2034
Worsened metrics
- Dependency count
- increased byInfinity%
3
- Number of lines in readme file
- decreased by-83.87%
40
Dependency changes
+ Added@rollup/plugin-buble@^0.21.3
+ Added@rollup/plugin-json@^4.1.0
+ Addedrollup-plugin-terser@^5.3.0
+ Added@babel/code-frame@7.26.2(transitive)
+ Added@babel/helper-validator-identifier@7.25.9(transitive)
+ Added@rollup/plugin-buble@0.21.3(transitive)
+ Added@rollup/plugin-json@4.1.0(transitive)
+ Added@rollup/pluginutils@3.1.0(transitive)
+ Added@types/buble@0.19.2(transitive)
+ Added@types/estree@0.0.39(transitive)
+ Addedacorn@6.4.2(transitive)
+ Addedacorn-dynamic-import@4.0.0(transitive)
+ Addedacorn-jsx@5.3.2(transitive)
+ Addedansi-styles@3.2.1(transitive)
+ Addedbuble@0.20.0(transitive)
+ Addedbuffer-from@1.1.2(transitive)
+ Addedchalk@2.4.2(transitive)
+ Addedcolor-convert@1.9.3(transitive)
+ Addedcolor-name@1.1.3(transitive)
+ Addedcommander@2.20.3(transitive)
+ Addedescape-string-regexp@1.0.5(transitive)
+ Addedestree-walker@0.6.11.0.1(transitive)
+ Addedfsevents@2.3.3(transitive)
+ Addedhas-flag@3.0.0(transitive)
+ Addedjest-worker@24.9.0(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedjsesc@0.5.0(transitive)
+ Addedmagic-string@0.25.9(transitive)
+ Addedmerge-stream@2.0.0(transitive)
+ Addedminimist@1.2.8(transitive)
+ Addedpicocolors@1.1.1(transitive)
+ Addedpicomatch@2.3.1(transitive)
+ Addedrandombytes@2.1.0(transitive)
+ Addedregenerate@1.4.2(transitive)
+ Addedregenerate-unicode-properties@8.2.0(transitive)
+ Addedregexpu-core@4.5.4(transitive)
+ Addedregjsgen@0.5.2(transitive)
+ Addedregjsparser@0.6.9(transitive)
+ Addedrollup@2.79.2(transitive)
+ Addedrollup-plugin-terser@5.3.1(transitive)
+ Addedrollup-pluginutils@2.8.2(transitive)
+ Addedsafe-buffer@5.2.1(transitive)
+ Addedserialize-javascript@4.0.0(transitive)
+ Addedsource-map@0.6.1(transitive)
+ Addedsource-map-support@0.5.21(transitive)
+ Addedsourcemap-codec@1.4.8(transitive)
+ Addedsupports-color@5.5.06.1.0(transitive)
+ Addedterser@4.8.1(transitive)
+ Addedunicode-canonical-property-names-ecmascript@1.0.4(transitive)
+ Addedunicode-match-property-ecmascript@1.0.4(transitive)
+ Addedunicode-match-property-value-ecmascript@1.2.0(transitive)
+ Addedunicode-property-aliases-ecmascript@1.1.0(transitive)