Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dommatrix - npm Package Compare versions
Comparing version 0.0.4-c to 0.0.4-d
| /*! | ||
| * DOMMatrix v0.0.4c (https://github.com/thednp/dommatrix) | ||
| * DOMMatrix v0.0.4d (https://github.com/thednp/dommatrix) | ||
| * Copyright 2020 © thednp | ||
@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE) |
@@ -1,2 +0,2 @@ | ||
| // DOMMatrix v0.0.4c | thednp © 2020 | MIT-License | ||
| // DOMMatrix v0.0.4d | thednp © 2020 | 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}};m.prototype.setMatrixValue=function(t){var r=this;if(!t||!t.length)return r;if(t.length&&"string"==typeof t[0]&&t[0].length){var e,n,i=String(t[0]).trim();if("none"==i)return r;if(e=i.slice(0,i.indexOf("(")),n=i.slice("matrix"===e?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(n.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");feedFromArray(r,n)}else t[0]instanceof m?feedFromArray(r,t[0].toArray()):Array.isArray(t[0])?feedFromArray(r,t[0]):Array.isArray(t)&&feedFromArray(r,t);return r},m.prototype.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},m.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]},m.prototype.multiply=function(m){return Multiply(this,m)},m.prototype.translate=function(m,t,r){return null==r&&(r=0),null==t&&(t=0),Multiply(this,Translate(m,t,r))},m.prototype.scale=function(m,t,r){return null==t&&(t=m),null==r&&(r=m),Multiply(this,Scale(m,t,r))},m.prototype.rotate=function(m,t,r){return null==t&&(t=0),null==r&&(r=m,m=0),Multiply(this,Rotate(m,t,r))},m.prototype.rotateAxisAngle=function(m,t,r,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return Multiply(this,RotateAxisAngle(m,t,r,e))},m.prototype.skewX=function(m){return Multiply(this,SkewX(m))},m.prototype.skewY=function(m){return Multiply(this,SkewY(m))},m.prototype.setIdentity=function(){return feedFromArray(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},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},m.prototype.transformPoint=function(m){var t=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}},m.prototype.transform=function(m){var t=this,r=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,e=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,n=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:r/i,y:e/i,z:n/i,w:i}},Object.defineProperties(m.prototype,t),m.Translate=function(t,r,e){var n=new m;return n.m41=n.e=t,n.m42=n.f=r,n.m43=e,n},m.Rotate=function(t,r,e){var n=new m;t*=Math.PI/180,r*=Math.PI/180,e*=Math.PI/180;var i=Math.cos(t),a=-Math.sin(t),o=Math.cos(r),u=-Math.sin(r),s=Math.cos(e),l=-Math.sin(e);return n.m11=n.a=o*s,n.m12=n.b=-o*l,n.m13=u,n.m21=n.c=a*u*s+i*l,n.m22=n.d=i*s-a*u*l,n.m23=-a*o,n.m31=a*l-i*u*s,n.m32=a*s+i*u*l,n.m33=i*o,n},m.RotateAxisAngle=function(t,r,e,n){n*=Math.PI/360;var i=Math.sin(n),a=Math.cos(n),o=i*i,u=Math.sqrt(t*t+r*r+e*e);0===u?(t=0,r=0,e=1):(t/=u,r/=u,e/=u);var s=t*t,l=r*r,f=e*e,y=new m;return y.m11=y.a=1-2*(l+f)*o,y.m12=y.b=2*(t*r*o+e*i*a),y.m13=2*(t*e*o-r*i*a),y.m21=y.c=2*(r*t*o-e*i*a),y.m22=y.d=1-2*(f+s)*o,y.m23=2*(r*e*o+t*i*a),y.m31=2*(e*t*o+r*i*a),y.m32=2*(e*r*o-t*i*a),y.m33=1-2*(s+l)*o,y.m14=y.m24=y.m34=0,y.m41=y.e=y.m42=y.f=y.m43=0,y.m44=1,y},m.Scale=function(t,r,e){var n=new m;return n.m11=n.a=t,n.m22=n.d=r,n.m33=e,n},m.SkewX=function(t){t*=Math.PI/180;var r=new m;return r.m21=r.c=Math.tan(t),r},m.SkewY=function(t){t*=Math.PI/180;var r=new m;return r.m12=r.b=Math.tan(t),r},m.Multiply=function(t,r){var e=r.m11*t.m11+r.m12*t.m21+r.m13*t.m31+r.m14*t.m41,n=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,o=r.m21*t.m11+r.m22*t.m21+r.m23*t.m31+r.m24*t.m41,u=r.m21*t.m12+r.m22*t.m22+r.m23*t.m32+r.m24*t.m42,s=r.m21*t.m13+r.m22*t.m23+r.m23*t.m33+r.m24*t.m43,l=r.m21*t.m14+r.m22*t.m24+r.m23*t.m34+r.m24*t.m44,f=r.m31*t.m11+r.m32*t.m21+r.m33*t.m31+r.m34*t.m41,y=r.m31*t.m12+r.m32*t.m22+r.m33*t.m32+r.m34*t.m42,c=r.m31*t.m13+r.m32*t.m23+r.m33*t.m33+r.m34*t.m43,h=r.m31*t.m14+r.m32*t.m24+r.m33*t.m34+r.m34*t.m44,p=r.m41*t.m11+r.m42*t.m21+r.m43*t.m31+r.m44*t.m41,M=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,x=r.m41*t.m14+r.m42*t.m24+r.m43*t.m34+r.m44*t.m44;return new m([e,o,f,p,n,u,y,M,i,s,c,w,a,l,h,x])},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 feedFromArray(new m,t)},m.feedFromArray=function(m,t){var r=Array.from(t);if(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];else{if(6!=r.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");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]}return m};export default m; |
| /*! | ||
| * DOMMatrix v0.0.4c (https://github.com/thednp/dommatrix) | ||
| * DOMMatrix v0.0.4d (https://github.com/thednp/dommatrix) | ||
| * Copyright 2020 © thednp | ||
@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE) |
@@ -1,2 +0,2 @@ | ||
| // DOMMatrix v0.0.4c | thednp © 2020 | MIT-License | ||
| // DOMMatrix v0.0.4d | 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";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}};return m.prototype.setMatrixValue=function(t){var r=this;if(!t||!t.length)return r;if(t.length&&"string"==typeof t[0]&&t[0].length){var e,n,i=String(t[0]).trim();if("none"==i)return r;if(e=i.slice(0,i.indexOf("(")),n=i.slice("matrix"===e?7:9,-1).split(",").map((function(m){return Math.abs(m)<1e-6?0:+m})),!([6,16].indexOf(n.length)>-1))throw new TypeError("CSSMatrix: expecting valid CSS matrix() / matrix3d() syntax");feedFromArray(r,n)}else t[0]instanceof m?feedFromArray(r,t[0].toArray()):Array.isArray(t[0])?feedFromArray(r,t[0]):Array.isArray(t)&&feedFromArray(r,t);return r},m.prototype.toString=function(){return(this.is2D?"matrix":"matrix3d")+"("+this.toArray(1).join(",")+")"},m.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]},m.prototype.multiply=function(m){return Multiply(this,m)},m.prototype.translate=function(m,t,r){return null==r&&(r=0),null==t&&(t=0),Multiply(this,Translate(m,t,r))},m.prototype.scale=function(m,t,r){return null==t&&(t=m),null==r&&(r=m),Multiply(this,Scale(m,t,r))},m.prototype.rotate=function(m,t,r){return null==t&&(t=0),null==r&&(r=m,m=0),Multiply(this,Rotate(m,t,r))},m.prototype.rotateAxisAngle=function(m,t,r,e){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return Multiply(this,RotateAxisAngle(m,t,r,e))},m.prototype.skewX=function(m){return Multiply(this,SkewX(m))},m.prototype.skewY=function(m){return Multiply(this,SkewY(m))},m.prototype.setIdentity=function(){return feedFromArray(this,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},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},m.prototype.transformPoint=function(m){var t=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}},m.prototype.transform=function(m){var t=this,r=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,e=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,n=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:r/i,y:e/i,z:n/i,w:i}},Object.defineProperties(m.prototype,t),m.Translate=function(t,r,e){var n=new m;return n.m41=n.e=t,n.m42=n.f=r,n.m43=e,n},m.Rotate=function(t,r,e){var n=new m;t*=Math.PI/180,r*=Math.PI/180,e*=Math.PI/180;var i=Math.cos(t),o=-Math.sin(t),a=Math.cos(r),u=-Math.sin(r),s=Math.cos(e),f=-Math.sin(e);return n.m11=n.a=a*s,n.m12=n.b=-a*f,n.m13=u,n.m21=n.c=o*u*s+i*f,n.m22=n.d=i*s-o*u*f,n.m23=-o*a,n.m31=o*f-i*u*s,n.m32=o*s+i*u*f,n.m33=i*a,n},m.RotateAxisAngle=function(t,r,e,n){n*=Math.PI/360;var i=Math.sin(n),o=Math.cos(n),a=i*i,u=Math.sqrt(t*t+r*r+e*e);0===u?(t=0,r=0,e=1):(t/=u,r/=u,e/=u);var s=t*t,f=r*r,l=e*e,y=new m;return y.m11=y.a=1-2*(f+l)*a,y.m12=y.b=2*(t*r*a+e*i*o),y.m13=2*(t*e*a-r*i*o),y.m21=y.c=2*(r*t*a-e*i*o),y.m22=y.d=1-2*(l+s)*a,y.m23=2*(r*e*a+t*i*o),y.m31=2*(e*t*a+r*i*o),y.m32=2*(e*r*a-t*i*o),y.m33=1-2*(s+f)*a,y.m14=y.m24=y.m34=0,y.m41=y.e=y.m42=y.f=y.m43=0,y.m44=1,y},m.Scale=function(t,r,e){var n=new m;return n.m11=n.a=t,n.m22=n.d=r,n.m33=e,n},m.SkewX=function(t){t*=Math.PI/180;var r=new m;return r.m21=r.c=Math.tan(t),r},m.SkewY=function(t){t*=Math.PI/180;var r=new m;return r.m12=r.b=Math.tan(t),r},m.Multiply=function(t,r){var e=r.m11*t.m11+r.m12*t.m21+r.m13*t.m31+r.m14*t.m41,n=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,o=r.m11*t.m14+r.m12*t.m24+r.m13*t.m34+r.m14*t.m44,a=r.m21*t.m11+r.m22*t.m21+r.m23*t.m31+r.m24*t.m41,u=r.m21*t.m12+r.m22*t.m22+r.m23*t.m32+r.m24*t.m42,s=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,l=r.m31*t.m11+r.m32*t.m21+r.m33*t.m31+r.m34*t.m41,y=r.m31*t.m12+r.m32*t.m22+r.m33*t.m32+r.m34*t.m42,c=r.m31*t.m13+r.m32*t.m23+r.m33*t.m33+r.m34*t.m43,p=r.m31*t.m14+r.m32*t.m24+r.m33*t.m34+r.m34*t.m44,h=r.m41*t.m11+r.m42*t.m21+r.m43*t.m31+r.m44*t.m41,d=r.m41*t.m12+r.m42*t.m22+r.m43*t.m32+r.m44*t.m42,M=r.m41*t.m13+r.m42*t.m23+r.m43*t.m33+r.m44*t.m43,x=r.m41*t.m14+r.m42*t.m24+r.m43*t.m34+r.m44*t.m44;return new m([e,a,l,h,n,u,y,d,i,s,c,M,o,f,p,x])},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 feedFromArray(new m,t)},m.feedFromArray=function(m,t){var r=Array.from(t);if(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];else{if(6!=r.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");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]}return m},m})); |
| { | ||
| "name": "dommatrix", | ||
| "version": "0.0.4c", | ||
| "version": "0.0.4d", | ||
| "description": "ES6+ shim for DOMMatrix", | ||
@@ -5,0 +5,0 @@ "main": "dist/dommatrix.min.js", |
329
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`. | ||
| In contrast with the [original source](https://github.com/arian/CSSMatrix/) there have been a series of changes to the prototype for consistency, performance as well as requirements to better accomodate the **DOMMatrix** interface: | ||
| * **changed** the order of the initialization parameters of a 3D matrix, now uses the column major order, as described in the specification pages; this change is to accommodate outputs of `toFloat64Array()` of the DOMMatrix constructor (which also returns items in the expected order); | ||
| * **changed** how the constructor determines if the matrix is 2D, based on a [more accurate method](https://github.com/jsidea/jsidea/blob/2b4486c131d5cca2334293936fa13454b34fcdef/ts/jsidea/geom/Matrix3D.ts#L788) which is actually checking the designated values of the 3D space; in contrast, the old *CSSMatrix* constructor sets `afine` property at initialization only and based on the number of arguments or the type of the input CSS transform syntax; | ||
| * **fixed** the `translate()`, `scale()` and `rotate()` instance methods to work with one axis transformation, also inline with **DOMMatrix**; | ||
| * **changed** `toString()` instance method to utilize the new method `toArray()` described below; | ||
| * **changed** `setMatrixValue()` instance method to do all the heavy duty work with parameters; | ||
| * *removed* `afine` property, it's a very old *WebKitCSSMatrix* defined property; | ||
| * *removed* `inverse()` instance method, will be re-added later for other implementations (probably going to be accompanied by `determinant()`, `transpose()` and others); | ||
| * *removed* `toFullString()` instance method, probably something also from *WebKitCSSMatrix*; | ||
| * **added** `is2D` (*getter* and *setter*) property; | ||
| * **added** `isIdentity` (*getter* and *setter*) property; | ||
| * **added** `feedFromArray` static method, not present in the constructor prototype; | ||
| * **added** `fromMatrix` static method, not present in the constructor prototype; | ||
| * **added** `fromArray()`, `fromFloat64Array()` and `fromFloat32Array()` static methods, not present in the constructor prototype, the last 2 are not published since `fromArray()` can also process *Float32Array* / *Float64Array* via `Array.from()`; | ||
| * **added** `toArray()`, `toFloat64Array()` and `toFloat32Array()` instance methods, the last two are not present in the constructor prototype; | ||
| * **added** `transformPoint()` instance method which works like the original. | ||
| # Install | ||
@@ -32,82 +18,14 @@ | ||
| # 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. | ||
| # CDN | ||
| **Basics** | ||
| ```js | ||
| // ES6+ | ||
| import CSSMatrix from 'dommatrix' | ||
| Link available on [jsdelivr](https://www.jsdelivr.com/package/npm/dommatrix). | ||
| // init | ||
| let myMatrix = new CSSMatrix('matrix(1,0.25,-0.25,1,0,0)') | ||
| ``` | ||
| OR | ||
| ```js | ||
| // Node.js | ||
| var CSSMatrix = require('dommatrix'); | ||
| # Standard Methods | ||
| // init | ||
| let myMatrix = new CSSMatrix() | ||
| ``` | ||
| Main instance methods described in the [MDN specifications](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix). | ||
| ## translate(*x, y, z*) | ||
| **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) | ||
| ``` | ||
| # Adding Perspective To Matrix | ||
| ```js | ||
| import CSSMatrix from 'dommatrix' | ||
| // perspective | ||
| let perspective = 400 | ||
| // init | ||
| let myMatrix = new CSSMatrix() | ||
| // set perspective | ||
| myMatrix.m34 = -1/perspective | ||
| // now your matrix is always 3D | ||
| // we can apply any 3D transformation | ||
| myMatrix = myMatrix.rotate(45,0,0) | ||
| // this matrix is now equivalent with this | ||
| // CSS transformation syntax | ||
| // perspective(400px) rotateX(45deg) | ||
| ``` | ||
| # 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 | ||
@@ -122,3 +40,3 @@ modified. | ||
| **rotate(rx, ry, rz)** | ||
| ## rotate(*rx, ry, rz*) | ||
@@ -134,3 +52,3 @@ 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 | ||
| **rotateAxisAngle(x, y, z, angle)** | ||
| ## rotateAxisAngle(*x, y, z, angle*) | ||
@@ -147,3 +65,3 @@ 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 | ||
| **scale(x, y, z)** | ||
| ## scale(*x, y, z*) | ||
@@ -158,3 +76,3 @@ 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. | ||
| **skewX(angle)** | ||
| ## skewX(*angle*) | ||
@@ -166,3 +84,3 @@ Specifies a skew transformation along the `x-axis` by the given angle. This matrix is not modified. | ||
| **skewY(angle)** | ||
| ## skewY(*angle*) | ||
@@ -174,3 +92,3 @@ Specifies a skew transformation along the `y-axis` by the given angle. This matrix is not modified. | ||
| **toString()** | ||
| ## toString() | ||
@@ -186,48 +104,48 @@ Creates and returns a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation. | ||
| **transformPoint(point)** | ||
| # Additional Methods | ||
| 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. | ||
| ## multiply(*m2*) | ||
| The method is equivalent with `transformPoint()` method of the `DOMMatrix` constructor. | ||
| 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 `point` parameter expects a `DOMPoint` or an *Object* with `x`, `y`, `z` and `w` components. | ||
| The `m2` parameter is expecting a `CSSMatrix` or `DOMMatrix` instance. | ||
| **transform(vector)** | ||
| ## setMatrixValue(*string*) | ||
| 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. | ||
| This method replaces the existing matrix with one computed in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`. | ||
| The `vector` parameter expects an *Object* with `x`, `y`, `z` and `w` components. | ||
| 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. | ||
| # Additional Methods | ||
| Parameter: | ||
| * The `source` parameter can be 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. | ||
| **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. | ||
| ## setIdentity() | ||
| The `m2` parameter is expecting a `CSSMatrix` or `DOMMatrix` instance. | ||
| Set the current `CSSMatrix` instance to the identity form and returns it. | ||
| **setMatrixValue(string)** | ||
| ## transformPoint(*point*) | ||
| The setMatrixValue method replaces the existing matrix with one computed in the browser. EG: `matrix(1,0.25,-0.25,1,0,0)`. | ||
| 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 also accepts 6/16 elements *Float64Array* / *Float32Array* / *Array* values, the result of `CSSMatrix` => `toArray()` / `DOMMatrix` => `toFloat64Array()` / `toFloat32Array()`. | ||
| The method is equivalent with `transformPoint()` method of the `DOMMatrix` constructor. | ||
| For simplicity reasons, this method expects only valid *matrix()* / *matrix3d()* string values, which means other transform functions like *translate()*, *rotate()* are not supported. | ||
| The `point` parameter expects a `DOMPoint` or an *Object* with `x`, `y`, `z` and `w` components. | ||
| 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. | ||
| ## transform(*vector*) | ||
| **setIdentity()** | ||
| 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. This method was in the [original source](https://github.com/arian/CSSMatrix/) and I chose to keep it. | ||
| Set the current `CSSMatrix` instance to the identity form and returns it. | ||
| The `vector` parameter expects an *Object* with `x`, `y`, `z` and `w` components. | ||
| **toArray(transposed)** | ||
| ## toArray(*transposed*) | ||
@@ -249,3 +167,3 @@ 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`). | ||
| **isIdentity** | ||
| ## isIdentity | ||
@@ -255,3 +173,3 @@ 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** | ||
| ## is2D | ||
@@ -261,10 +179,12 @@ 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 | ||
| # Static Methods | ||
| **fromMatrix(m2)** | ||
| The methods attached to the `CSSMatrix` *Object* but not included in the constructor prototype. Some methods aim to be equivalents while others provide utility. | ||
| ## 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)** | ||
| ## fromArray(*array*) | ||
@@ -278,3 +198,3 @@ 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. | ||
| **feedFromArray(array)** | ||
| ## feedFromArray(*array*) | ||
@@ -285,5 +205,158 @@ Feed a `CSSMatrix` object with the values of a 6/16 values array and returns the updated 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. | ||
| # 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('matrix(1,0.25,-0.25,1,0,0)') | ||
| ``` | ||
| ## Advanced API Examples** | ||
| ### Provide Values on Initialization | ||
| ```js | ||
| // the above are 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]) | ||
| ``` | ||
| ### Use Static Methods to Initialize | ||
| ```js | ||
| let myTranlateMatrix = new CSSMatrix(1,0,0,1,150,150) | ||
| // fromMatrix will create a clone of the above matrix | ||
| let myMatrix = CSSMatrix.fromMatrix(myTranlateMatrix) | ||
| // create a new CSSMatrix from an Array, Float32Array, Float64Array | ||
| let myMatrix = CSSMatrix.fromArray([1,0.25,-0.25,1,0,0]) | ||
| ``` | ||
| ### Using Main Methods | ||
| ```js | ||
| // 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) | ||
| ``` | ||
| ### Manipulate The Matrix values | ||
| ```js | ||
| // reset the matrix to identity form | ||
| // the equivalent of the CSS "transform: none" | ||
| myMatrix.setIdentity() | ||
| // replace existing matrix with values from array | ||
| // it's best to use the above setIdentity() before | ||
| // replacing the current matrix or feed from a 16 values Array | ||
| CSSMatrix.feedFromArray(myMatrix, [1,0.25,-0.25,1,0,0]) | ||
| // replace existing matrix with values from array | ||
| // as if your're re-initializing the matrix | ||
| myMatrix.setMatrixValue(1,0.25,-0.25,1,0,0) | ||
| // apply additional transformations to an existing matrix | ||
| // by calling instance methods | ||
| myMatrix = myMatrix.translate(15).skewX(45) | ||
| // apply additional transformations to an existing matrix | ||
| // by calling a static method to create a new matrix; | ||
| // the result of the multiply instance method and | ||
| // the result of the Rotate static method combined create | ||
| // a third CSSMatrix instance that replaces the original | ||
| // matrix entirely | ||
| myMatrix = myMatrix.multiply(CSSMatrix.Rotate(0,45)) | ||
| ``` | ||
| Calling the transform function instance methods (translate,rotate) after initialization will not change the instance *Object* unless you put the "=" sign between your instance name and the return of the call. Only `setIdentity` and `setMatrixValue` instance methods as well as the `feedFromArray` static method can do that. | ||
| ### Exporting The Matrix | ||
| ```js | ||
| // export to the CSS syntax transform | ||
| let myMatrix = new CSSMatrix().translate(15).toString() | ||
| // export to Array | ||
| let myMatrix = new CSSMatrix().rotate(45).toArray() | ||
| // if the matrix is 3D you can also export a transposed matrix array | ||
| // which is compatible with the CSS syntax row major order representation | ||
| let myMatrix = new CSSMatrix().translate(15,0,0).toArray(true) | ||
| ``` | ||
| ### Adding Perspective To Matrix | ||
| ```js | ||
| import CSSMatrix from 'dommatrix' | ||
| // perspective | ||
| let perspective = 400 | ||
| // init | ||
| let myMatrix = new CSSMatrix() | ||
| // set perspective | ||
| myMatrix.m34 = -1/perspective | ||
| // now your matrix is always 3D | ||
| // we can apply any 3D transformation | ||
| myMatrix = myMatrix.rotate(45,0,0) | ||
| // this matrix is now equivalent with this | ||
| // CSS transformation syntax | ||
| // perspective(400px) rotateX(45deg) | ||
| ``` | ||
| # 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: | ||
| * **changed** the order of the initialization parameters of a 3D matrix, now uses the column major order, as described in the specification pages; this change is to accommodate outputs of `toFloat64Array()` of the DOMMatrix constructor (which also returns items in the expected order); | ||
| * **changed** how the constructor determines if the matrix is 2D, based on a [more accurate method](https://github.com/jsidea/jsidea/blob/2b4486c131d5cca2334293936fa13454b34fcdef/ts/jsidea/geom/Matrix3D.ts#L788) which is actually checking the designated values of the 3D space; in contrast, the old *CSSMatrix* constructor sets `afine` property at initialization only and based on the number of arguments or the type of the input CSS transform syntax; | ||
| * **fixed** the `translate()`, `scale()` and `rotate()` instance methods to work with one axis transformation, also inline with **DOMMatrix**; | ||
| * **changed** `toString()` instance method to utilize the new method `toArray()` described below; | ||
| * **changed** `setMatrixValue()` instance method to do all the heavy duty work with parameters; | ||
| * *removed* `afine` property, it's a very old *WebKitCSSMatrix* defined property; | ||
| * *removed* `inverse()` instance method, will be re-added later for other implementations (probably going to be accompanied by `determinant()`, `transpose()` and others); | ||
| * *removed* `toFullString()` instance method, probably something also from *WebKitCSSMatrix*; | ||
| * **added** `is2D` (*getter* and *setter*) property; | ||
| * **added** `isIdentity` (*getter* and *setter*) property; | ||
| * **added** `feedFromArray` static method, not present in the constructor prototype; | ||
| * **added** `fromMatrix` static method, not present in the constructor prototype; | ||
| * **added** `fromArray()`, `fromFloat64Array()` and `fromFloat32Array()` static methods, not present in the constructor prototype, the last 2 are not published since `fromArray()` can also process *Float32Array* / *Float64Array* via `Array.from()`; | ||
| * **added** `toArray()`, `toFloat64Array()` and `toFloat32Array()` instance methods, the last two are not present in the constructor prototype; | ||
| * **added** `transformPoint()` instance method which works like the original. | ||
| # Thanks | ||
@@ -290,0 +363,0 @@ * Arian Stolwijk for his [CSSMatrix](https://github.com/arian/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
Manifest confusion
Supply chain riskThis 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
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
Manifest confusion
Supply chain riskThis 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
- Total package byte prevSize
- increased by4.02%
69300
- Number of lines in readme file
- increased by25.98%
354
- Number of medium supply chain risk alerts
- decreased by-50%
1
No dependency changes