dommatrix - npm Package Compare versions

Comparing version 0.0.3-e to 0.0.3-f

dist/dommatrix.esm.js

 /*!
-* DOMMatrix v0.0.3e (https://github.com/thednp/dommatrix)
+* DOMMatrix v0.0.3f (https://github.com/thednp/dommatrix)
 * Copyright 2020 © thednp
@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)

dist/dommatrix.esm.min.js

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

dist/dommatrix.js

 /*!
-* DOMMatrix v0.0.3e (https://github.com/thednp/dommatrix)
+* DOMMatrix v0.0.3f (https://github.com/thednp/dommatrix)
 * Copyright 2020 © thednp
@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)

dist/dommatrix.min.js

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

package.json

 {
   "name": "dommatrix",
-  "version": "0.0.3e",
+  "version": "0.0.3f",
   "description": "ES6+ shim for DOMMatrix",
@@ -5,0 +5,0 @@ "main": "dist/dommatrix.min.js",

README.md

@@ -8,2 +8,6 @@ # DOMMatrix shim
  * **changed** the order of the initialization parameters of a 3D matrix, now uses the column major order, as decribed in the specification pages; this change is to accomodate outputs of `toFloat64Array()` calls (which also returns items in the expected order);
+ * **changed** how the constructor determines if the matrix is 2D, based on a [more accurate method](https://github.com/jsidea/jsidea/blob/2b4486c131d5cca2334293936fa13454b34fcdef/ts/jsidea/geom/Matrix3D.ts#L788) which is actually checking the designated values of the 3D space; in contrast, the old *CSSMatrix* constructor sets `afine` property at initialization only and based on the number of arguments or the type of the input CSS transform syntax; also *DOMMatrix* determines `is2D` if you either set a rotation on X or Y axis, or a translation on Z axis or an un-uniform scale, without checking the perspective; 
+ * **fixed** the `translate()`, `scale()` and `rotate()` instance methods to work with one axis transformation, also inline with **DOMMatrix**;
+ * **changed** `toString()` instance method to work with the new method `toArray()` described below;
+ * **changed** `setMatrixValue()` instance method to do all the heavy duty work with parameters;
  * *removed* `afine` property, it's a very old *WebKitCSSMatrix* defined property;
@@ -13,5 +17,2 @@ * *removed* `inverse()` instance method, will be re-added later for other implementations;
  * *removed* `toFullString()` instance method, probably something also from *WebKitCSSMatrix*;
- * **fixed** the `translate()`, `scale()` and `rotate()` instance methods to work with one axis transformation, also inline with **DOMMatrix**;
- * **changed** `toString()` instance method to work with the new method `toArray()` described below;
- * **changed** `setMatrixValue()` instance method to do all the heavy duty work with parameters;
  * **added** `is2D` (*getter* and *setter*) property;
@@ -130,3 +131,3 @@ * **added** `isIdentity` (*getter* and *setter*) property;
 
-The `angle` parameters sets the amount in degrees to skew.
+The `angle` parameter sets the amount in degrees to skew.
 
@@ -138,3 +139,3 @@
 
-The `angle` parameters sets the amount in degrees to skew.
+The `angle` parameter sets the amount in degrees to skew.
 
@@ -190,3 +191,3 @@
 
-**toArray()**
+**toArray(transposed)**
 
@@ -202,6 +203,4 @@ 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`).
 
-**toFloat64Array()** and **toFloat32Array()**
+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. Both these methods utilize the above described method.
 
-Both 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. Both these methods utilize the above described method.
-
 The result can be immediatelly fed as parameter for the initialization of a new matrix. 
@@ -215,11 +214,11 @@
 
-**fromArray(array)**, **fromFloat64Array(array)** and **fromFloat32Array(array)**
+**fromArray(array)**
 
-Each of these methods create a new mutable `CSSMatrix` object given an array of values. The `fromFloat64Array` and `fromFloat32Array` are only aliases for `fromArray` for now, but will be updated accordingly later if required.
+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.
 
-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.
 
+
 # Getters and Setters
@@ -226,0 +225,0 @@

src/index.js

@@ -1,594 +0,19 @@
-const INVALID_MATRIX_VALUE = 'CSSMatrix: '
+import CSSMatrix from './constructor/DOMMatrix.js'
+import functions from './functions/functions.js'
 
-// Transform Functions
-// https://www.w3.org/TR/css-transforms-1/#transform-functions
-// ===================
+for (let f in functions) CSSMatrix[f] = functions[f]
 
-/**
- * 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.
- */
+export default CSSMatrix
 
-function Rotate(rx, ry, rz){
-	let m = new CSSMatrix()
 
-	rx *= Math.PI / 180
-	ry *= Math.PI / 180
-  rz *= Math.PI / 180
 
-	// minus sin() because of right-handed system
-	const cosx = Math.cos(rx), sinx = -Math.sin(rx),
-        cosy = Math.cos(ry), siny = -Math.sin(ry),
-        cosz = Math.cos(rz), sinz = -Math.sin(rz);
 
-	m.m11 = m.a = cosy * cosz
-	m.m12 = m.b = -cosy * sinz
-	m.m13 = siny
 
-	m.m21 = m.c = sinx * siny * cosz + cosx * sinz
-	m.m22 = m.d = cosx * cosz - sinx * siny * sinz
-	m.m23 = -sinx * cosy
 
-	m.m31 = sinx * sinz - cosx * siny * cosz
-	m.m32 = sinx * cosz + cosx * siny * sinz
-	m.m33 = cosx * cosy
 
-	return m
-}
 
-/**
- * Creates a new `CSSMatrix` for the rotation matrix and returns it.
- * This method is equivalent to the CSS `rotate3d()` function.
- * 
- * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
- *  
- * @param {Number} x the `x-axis` vector length.
- * @param {Number} y the `y-axis` vector length.
- * @param {Number} z the `z-axis` vector length.
- * @param {Number} angle the value in degrees of the rotation.
- */
-function RotateAxisAngle(x, y, z, angle){
-	angle *= Math.PI / 360;
 
-	const 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;
-	}
 
-	const x2 = x * x, y2 = y * y, z2 = z * z;
 
-	let m = new CSSMatrix();
-	m.m11 = m.a = 1 - 2 * (y2 + z2) * sinA2;
-	m.m12 = m.b = 2 * (x * y * sinA2 + z * sinA * cosA);
-	m.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
-	m.m21 = m.c = 2 * (y * x * sinA2 - z * sinA * cosA);
-	m.m22 = m.d = 1 - 2 * (z2 + x2) * sinA2;
-	m.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
-	m.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
-	m.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
-	m.m33 = 1 - 2 * (x2 + y2) * sinA2;
-	m.m14 = m.m24 = m.m34 = 0;
-	m.m41 = m.e = m.m42 = m.f = m.m43 = 0;
-	m.m44 = 1;
 
-	return m
-}
-
-/**
- * Creates a new `CSSMatrix` for the scale matrix and returns it.
- * This method is equivalent to the CSS `scale3d()` function.
- * 
- * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d
- *  
- * @param {Number} x the `x-axis` scale.
- * @param {Number} y the `y-axis` scale.
- * @param {Number} z the `z-axis` scale.
- */
-function Scale(x, y, z){
-	let m = new CSSMatrix();
-	m.m11 = m.a = x;
-	m.m22 = m.d = y;
-	m.m33 = z;
-	return m
-}
-
-/**
- * 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
-}
-
-/**
- * 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
-}
-
-/**
- * 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){
-	let m = new CSSMatrix();
-	m.m41 = m.e = x;
-	m.m42 = m.f = y;
-	m.m43 = z;
-	return m
-}
-
-/**
- * Creates a new `CSSMatrix` resulted from the multiplication of two matrixes 
- * and returns it. Both matrixes are not changed.
- * 
- * @param {CSSMatrix} m1 the first matrix.
- * @param {CSSMatrix} m2 the second matrix.
- */
-function Multiply(m1, m2){
-	if (m2 == null) {
-    console.error(`${INVALID_MATRIX_VALUE}expecting 2 parameters`)
-    return m1
-	}
-
-	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,
-
-			m21 = m2.m21 * m1.m11 + m2.m22 * m1.m21 + m2.m23 * m1.m31 + m2.m24 * m1.m41,
-			m22 = m2.m21 * m1.m12 + m2.m22 * m1.m22 + m2.m23 * m1.m32 + m2.m24 * m1.m42,
-			m23 = m2.m21 * m1.m13 + m2.m22 * m1.m23 + m2.m23 * m1.m33 + m2.m24 * m1.m43,
-			m24 = m2.m21 * m1.m14 + m2.m22 * m1.m24 + m2.m23 * m1.m34 + m2.m24 * m1.m44,
-
-			m31 = m2.m31 * m1.m11 + m2.m32 * m1.m21 + m2.m33 * m1.m31 + m2.m34 * m1.m41,
-			m32 = m2.m31 * m1.m12 + m2.m32 * m1.m22 + m2.m33 * m1.m32 + m2.m34 * m1.m42,
-			m33 = m2.m31 * m1.m13 + m2.m32 * m1.m23 + m2.m33 * m1.m33 + m2.m34 * m1.m43,
-			m34 = m2.m31 * m1.m14 + m2.m32 * m1.m24 + m2.m33 * m1.m34 + m2.m34 * m1.m44,
-
-			m41 = m2.m41 * m1.m11 + m2.m42 * m1.m21 + m2.m43 * m1.m31 + m2.m44 * m1.m41,
-			m42 = m2.m41 * m1.m12 + m2.m42 * m1.m22 + m2.m43 * m1.m32 + m2.m44 * m1.m42,
-			m43 = m2.m41 * m1.m13 + m2.m42 * m1.m23 + m2.m43 * m1.m33 + m2.m44 * m1.m43,
-			m44 = m2.m41 * m1.m14 + m2.m42 * m1.m24 + m2.m43 * m1.m34 + m2.m44 * m1.m44
-
-	return new CSSMatrix(
-		m11, m21, m31, m41,
-		m12, m22, m32, m42,
-		m13, m23, m33, m43,
-		m14, m24, m34, m44
-	)
-}
-
-/**
- * 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
- */
-
-export default class CSSMatrix {
-	constructor(...args){
-		this.setIdentity()
-    return args && args.length && this.setMatrixValue(args)
-  }  
-
-	/**
-	 * 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
-
-    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){
-        m = m.fromArray(values)
-      } else {
-        console.error(`${INVALID_MATRIX_VALUE}expecting valid CSS matrix() / matrix3d() formatted String`)
-      }
-		} else if (source[0] instanceof CSSMatrix) { // CSSMatrix instance
-      m = m.fromMatrix(source[0])
-		} else if (Array.isArray(source[0])) { // Float32Array,Float64Array source
-      m = m.fromArray(source[0])    
-		} else if (Array.isArray(source)) { // Arguments list come here
-      m = m.fromArray(source)
-    }
-		return m
-	}
-  
-	/**
-	 * Creates and returns a string representation of the matrix in `CSS` matrix syntax, 
-	 * using the appropriate `CSS` matrix notation.
-	 * 
-	 * The 16 items in the array 3D matrix array are *transposed* in row-major order.
-	 * 
-	 * @matrix3d *matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)*
-	 * @matrix *matrix(a, b, c, d, e, f)*
-	 * 
-	 * @return {String} `String` representation of the matrix
-	 */
-	toString(){
-		const m = this, type = m.is2D ? 'matrix' : 'matrix3d'
-		return `${type}(${m.toArray(1).join(',')})`
-  }
-
-	/**
-	 * 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 CSSMatrix and all other methods
-				m.m12, m.m22, m.m32, m.m42,
-				m.m13, m.m23, m.m33, m.m43,
-				m.m14, m.m24, m.m34, m.m44]
-	}
-
-	/**
-	 * Returns a new Float32Array containing all 16 elements which comprise the matrix. 
-	 * The elements are stored into the array as single-precision floating-point numbers 
-	 * in column-major (colexographical access access or "colex") order. 
-	 * 
-	 * @return {Float32Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
-	 */
-	// toFloat32Array(){
-	// 	return Float32Array.from(this.toArray())
-	// }
-
-	/**
-	 * Returns a new Float64Array containing all 16 elements which comprise the matrix. 
-	 * The elements are stored into the array as double-precision floating-point numbers 
-	 * in column-major (colexographical access access or "colex") order. 
-	 * 
-	 * @return {Float64Array} matrix elements (m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44) 
-	 */	
-	// toFloat64Array(){
-	// 	return Float64Array.from(this.toArray())
-	// }
-
-	/**
-	 * Creates a new mutable `CSSMatrix` object given an existing matrix or a 
-	 * `DOMMatrix` *Object* which provides the values for its properties.
-	 * 
-	 * @param {CSSMatrix} CSSMatrix the source `CSSMatrix` / `DOMMatrix` initialization to feed values from
-	 */
-	fromMatrix(m2){
-		return new CSSMatrix(
-      // DOMMatrix elements order
-      m2.m11, m2.m21, m2.m31, m2.m41, 
-      m2.m12, m2.m22, m2.m32, m2.m42,
-      m2.m13, m2.m23, m2.m33, m2.m43,
-      m2.m14, m2.m24, m2.m34, m2.m44)
-	}
-
-	/**
-	 * Creates a new mutable `CSSMatrix` object given an array of no precision, 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 {Array} array The source `Array` to feed values from.
-	 * @param {Float32Array} array The source `Float32Array` to feed values from.
-	 * @param {Float64Array} array The source `Float64Array` to feed values from.
-	 * @return {CSSMatrix} a The source array to feed values from.
-	 */
-	fromArray(array){
-		let m = new CSSMatrix(), 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(`${INVALID_MATRIX_VALUE}expecting Array with 6/16 values`)
-		}
-		return m
-	}
-	// more of an alias for now, will update later if it's the case
-	// fromFloat32Array(a){ 
-	// 	return this.fromArray(a)
-	// }
-	// fromFloat64Array(a){ // more of an alias
-	// 	return this.fromArray(a)
-	// }
-
-	/**
-	 * 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(){}
-
-	/**
-	 * 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
-	 */
-
-	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
-	 */
-
-	scale(x, y, z){
-		if (y == null) y = x;
-		if (z == null) z = x;
-		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
-	 */
-
-	rotate(rx, ry, 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
-	 */
-
-	rotateAxisAngle(x, y, z, angle){
-		if (arguments.length!==4){
-      console.error(`${INVALID_MATRIX_VALUE}expecting 4 values`)
-      return this
-		}
-		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
-	 */
-
-	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
-	 */
-
-	skewY(angle){
-		return Multiply(this,SkewY(angle))
-  }
-  
-  
-	/**
-	 * A `Boolean` whose value is `true` if the matrix is the identity matrix. The identity 
-	 * matrix is one in which every value is 0 except those on the main diagonal from top-left 
-	 * to bottom-right corner (in other words, where the offsets in each direction are equal).
-	 *
-	 * @return {Boolean} `Boolean` the current property value
-	 */
-	get isIdentity(){
-		let m = this;
-		return (m.m11 == 1 && m.m12 == 0 && m.m13 == 0 && m.m14 == 0 &&
-						m.m21 == 0 && m.m22 == 1 && m.m23 == 0 && m.m24 == 0 &&
-						m.m31 == 0 && m.m32 == 0 && m.m33 == 1 && m.m34 == 0 &&
-						m.m41 == 0 && m.m42 == 0 && m.m43 == 0 && m.m44 == 1)
-	}
-
-	/**
-	 * Sets a new `Boolean` flag value for `this.isIdentity` matrix property.
-	 *
-	 * @param {Boolean} value sets a new `Boolean` flag for this property
-	 */
-	set isIdentity(value){
-		this.isIdentity = value
-	}
-
-	/**
-	 * 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)
-	}
-
-	/**
-	 * 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
-	}
-
-	/**
-	 * Set the current `CSSMatrix` instance to the identity form and returns it.
-	 *
-	 * @return {CSSMatrix} this `CSSMatrix` instance
-	 */
-	setIdentity(){
-		let m = this
-    m.m11 = m.a = 1; 
-    m.m12 = m.b = 0; 
-    m.m13 = 0; m.m14 = 0
-    m.m21 = m.c = 0; 
-    m.m22 = m.d = 1; 
-    m.m23 = 0; m.m24 = 0
-    m.m31 = 0; m.m32 = 0; 
-    m.m33 = 1; m.m34 = 0
-    m.m41 = m.e = 0; 
-    m.m42 = m.f = 0; 
-    m.m43 = 0; m.m44 = 1
-		return m
-	}
-
-	/**
-	 * 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 = new CSSMatrix().translate(v.x, v.y, v.z)
-
-		m.m44 = v.w || 1
-		m = _m.multiply(m)
-
-		return {
-			x: m.m41,
-			y: m.m42,
-			z: m.m43,
-			w: m.m44
-		}
-	}	
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Package 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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

12

increased by50%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

43665

decreased by-28.65%

Lines of code

607

decreased by-45.27%

Number of lines in readme file

233

decreased by-0.43%

No dependency changes