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

@thednp/dommatrix

Package Overview
Dependencies
Maintainers
0
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@thednp/dommatrix - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

549

dist/dommatrix.d.ts

@@ -1,65 +0,1 @@

/** A DOMMPoint compatible Tuple. */
export interface PointTuple {
x: number;
y: number;
z: number;
w: number;
}
/** The result of **CSSMatrix.toJSON()** / **DOMMatrix.toJSON()** instance calls. */
export interface JSONMatrix {
m11: number;
m12: number;
m13: number;
m14: number;
m21: number;
m22: number;
m23: number;
m24: number;
m31: number;
m32: number;
m33: number;
m34: number;
m41: number;
m42: number;
m43: number;
m44: number;
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
is2D: boolean;
isIdentity: boolean;
}
/** An array of 6 numbers representing a 2D matrix. */
export type Matrix = [
number,
number,
number,
number,
number,
number
];
/** An array of 16 numbers representing a 3D matrix. */
export type Matrix3d = [
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number
];
/** All CSSMatrix compatible initialization values. */
export type CSSMatrixInput = string | any[] | CSSMatrix | DOMMatrix | JSONMatrix | Float32Array | Float64Array;
/**

@@ -74,216 +10,277 @@ * Creates and returns a new `DOMMatrix` compatible instance

*/
export default class CSSMatrix {
m11: number;
m12: number;
m13: number;
m14: number;
m21: number;
m22: number;
m23: number;
m24: number;
m31: number;
m32: number;
m33: number;
m34: number;
m41: number;
m42: number;
m43: number;
m44: number;
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
static Translate: (x: number, y: number, z: number) => CSSMatrix;
static Rotate: (rx: number, ry: number, rz: number) => CSSMatrix;
static RotateAxisAngle: (x: number, y: number, z: number, alpha: number) => CSSMatrix;
static Scale: (x: number, y: number, z: number) => CSSMatrix;
static SkewX: (angle: number) => CSSMatrix;
static SkewY: (angle: number) => CSSMatrix;
static Skew: (angleX: number, angleY: number) => CSSMatrix;
static Multiply: (m1: CSSMatrix | DOMMatrix | JSONMatrix, m2: CSSMatrix | DOMMatrix | JSONMatrix) => CSSMatrix;
static fromArray: (array: any[] | Float32Array | Float64Array) => CSSMatrix;
static fromMatrix: (m: CSSMatrix | DOMMatrix | JSONMatrix) => CSSMatrix;
static fromString: (source: string) => CSSMatrix;
static toArray: (m: CSSMatrix | DOMMatrix | JSONMatrix, is2D?: boolean) => Matrix | Matrix3d;
static isCompatibleArray: (array?: unknown) => array is Matrix | Matrix3d | Float32Array | Float64Array;
static isCompatibleObject: (object?: unknown) => object is CSSMatrix | DOMMatrix | JSONMatrix;
/**
* @constructor
* @param init accepts all parameter configurations:
* * valid CSS transform string,
* * CSSMatrix/DOMMatrix instance,
* * a 6/16 elements *Array*.
*/
constructor(init?: CSSMatrixInput);
/**
* 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 the current property value
*/
get isIdentity(): boolean;
/**
* A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix
* and `false` if the matrix is 3D.
*
* @return the current property value
*/
get is2D(): boolean;
/**
* 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 any *Array* values, the result of
* `DOMMatrix` instance method `toFloat64Array()` / `toFloat32Array()` calls
* or `CSSMatrix` instance method `toArray()`.
*
* This method expects valid *matrix()* / *matrix3d()* string values, as well
* as other transform functions like *translateX(10px)*.
*
* @param source
* @return the matrix instance
*/
setMatrixValue(source?: CSSMatrixInput): CSSMatrix;
/**
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param is2D *Array* representation of the matrix
* @return an *Array* representation of the matrix
*/
toFloat32Array(is2D?: boolean): Float32Array;
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param is2D *Array* representation of the matrix
* @return an *Array* representation of the matrix
*/
toFloat64Array(is2D?: boolean): Float64Array;
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return a string representation of the matrix
*/
toString(): string;
/**
* Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
* as the `is2D` & `isIdentity` properties.
*
* The result can also be used as a second parameter for the `fromMatrix` static method
* to load values into another matrix instance.
*
* @return an *Object* with all matrix values.
*/
toJSON(): JSONMatrix;
/**
* 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 m2 CSSMatrix
* @return The resulted matrix.
*/
multiply(m2: CSSMatrix | DOMMatrix | JSONMatrix): CSSMatrix;
/**
* 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 x X component of the translation value.
* @param y Y component of the translation value.
* @param z Z component of the translation value.
* @return The resulted matrix
*/
translate(x: number, y?: number, z?: number): CSSMatrix;
/**
* 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 x The X component of the scale value.
* @param y The Y component of the scale value.
* @param z The Z component of the scale value.
* @return The resulted matrix
*/
scale(x: number, y?: number, z?: number): CSSMatrix;
/**
* 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 rx The X component of the rotation, or Z if Y and Z are null.
* @param ry The (optional) Y component of the rotation value.
* @param rz The (optional) Z component of the rotation value.
* @return The resulted matrix
*/
rotate(rx: number, ry?: number, rz?: number): CSSMatrix;
/**
* 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 x The X component of the axis vector.
* @param y The Y component of the axis vector.
* @param z The Z component of the axis vector.
* @param angle The angle of rotation about the axis vector, in degrees.
* @return The resulted matrix
*/
rotateAxisAngle(x: number, y: number, z: number, angle: number): CSSMatrix;
/**
* Specifies a skew transformation along the `x-axis` by the given angle.
* This matrix is not modified.
*
* @param angle The angle amount in degrees to skew.
* @return The resulted matrix
*/
skewX(angle: number): CSSMatrix;
/**
* Specifies a skew transformation along the `y-axis` by the given angle.
* This matrix is not modified.
*
* @param angle The angle amount in degrees to skew.
* @return The resulted matrix
*/
skewY(angle: number): CSSMatrix;
/**
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* @param angleX The X-angle amount in degrees to skew.
* @param angleY The angle amount in degrees to skew.
* @return The resulted matrix
*/
skew(angleX: number, angleY: number): CSSMatrix;
/**
* Transforms a specified vector using the matrix, returning a new
* {x,y,z,w} Tuple *Object* comprising the transformed vector.
* Neither the matrix nor the original vector are altered.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @param t Tuple with `{x,y,z,w}` components
* @return the resulting Tuple
*/
transformPoint(t: PointTuple | DOMPoint): PointTuple | DOMPoint;
declare class CSSMatrix {
m11: number;
m12: number;
m13: number;
m14: number;
m21: number;
m22: number;
m23: number;
m24: number;
m31: number;
m32: number;
m33: number;
m34: number;
m41: number;
m42: number;
m43: number;
m44: number;
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
static Translate: (x: number, y: number, z: number) => CSSMatrix;
static Rotate: (rx: number, ry: number, rz: number) => CSSMatrix;
static RotateAxisAngle: (x: number, y: number, z: number, alpha: number) => CSSMatrix;
static Scale: (x: number, y: number, z: number) => CSSMatrix;
static SkewX: (angle: number) => CSSMatrix;
static SkewY: (angle: number) => CSSMatrix;
static Skew: (angleX: number, angleY: number) => CSSMatrix;
static Multiply: (m1: CSSMatrix | DOMMatrix | JSONMatrix, m2: CSSMatrix | DOMMatrix | JSONMatrix) => CSSMatrix;
static fromArray: (array: number[] | Float32Array | Float64Array) => CSSMatrix;
static fromMatrix: (m: CSSMatrix | DOMMatrix | JSONMatrix) => CSSMatrix;
static fromString: (source: string) => CSSMatrix;
static toArray: (m: CSSMatrix | DOMMatrix | JSONMatrix, is2D?: boolean) => Matrix | Matrix3d;
static isCompatibleArray: (array?: unknown) => array is Matrix | Matrix3d | Float32Array | Float64Array;
static isCompatibleObject: (object?: unknown) => object is CSSMatrix | DOMMatrix | JSONMatrix;
/**
* @constructor
* @param init accepts all parameter configurations:
* * valid CSS transform string,
* * CSSMatrix/DOMMatrix instance,
* * a 6/16 elements *Array*.
*/
constructor(init?: CSSMatrixInput);
/**
* 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 the current property value
*/
get isIdentity(): boolean;
/**
* A `Boolean` flag whose value is `true` if the matrix was initialized as a 2D matrix
* and `false` if the matrix is 3D.
*
* @return the current property value
*/
get is2D(): boolean;
/**
* 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 any *Array* values, the result of
* `DOMMatrix` instance method `toFloat64Array()` / `toFloat32Array()` calls
* or `CSSMatrix` instance method `toArray()`.
*
* This method expects valid *matrix()* / *matrix3d()* string values, as well
* as other transform functions like *translateX(10px)*.
*
* @param source
* @return the matrix instance
*/
setMatrixValue(source?: CSSMatrixInput): CSSMatrix;
/**
* Returns a *Float32Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param is2D *Array* representation of the matrix
* @return an *Array* representation of the matrix
*/
toFloat32Array(is2D?: boolean): Float32Array;
/**
* Returns a *Float64Array* containing elements which comprise the matrix.
* The method can return either the 16 elements or the 6 elements
* depending on the value of the `is2D` parameter.
*
* @param is2D *Array* representation of the matrix
* @return an *Array* representation of the matrix
*/
toFloat64Array(is2D?: boolean): Float64Array;
/**
* Creates and returns a string representation of the matrix in `CSS` matrix syntax,
* using the appropriate `CSS` matrix notation.
*
* matrix3d *matrix3d(m11, m12, m13, m14, m21, ...)*
* matrix *matrix(a, b, c, d, e, f)*
*
* @return a string representation of the matrix
*/
toString(): string;
/**
* Returns a JSON representation of the `CSSMatrix` instance, a standard *Object*
* that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties as well
* as the `is2D` & `isIdentity` properties.
*
* The result can also be used as a second parameter for the `fromMatrix` static method
* to load values into another matrix instance.
*
* @return an *Object* with all matrix values.
*/
toJSON(): JSONMatrix;
/**
* 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 m2 CSSMatrix
* @return The resulted matrix.
*/
multiply(m2: CSSMatrix | DOMMatrix | JSONMatrix): CSSMatrix;
/**
* 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 x X component of the translation value.
* @param y Y component of the translation value.
* @param z Z component of the translation value.
* @return The resulted matrix
*/
translate(x: number, y?: number, z?: number): CSSMatrix;
/**
* 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 x The X component of the scale value.
* @param y The Y component of the scale value.
* @param z The Z component of the scale value.
* @return The resulted matrix
*/
scale(x: number, y?: number, z?: number): CSSMatrix;
/**
* 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 rx The X component of the rotation, or Z if Y and Z are null.
* @param ry The (optional) Y component of the rotation value.
* @param rz The (optional) Z component of the rotation value.
* @return The resulted matrix
*/
rotate(rx: number, ry?: number, rz?: number): CSSMatrix;
/**
* 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 x The X component of the axis vector.
* @param y The Y component of the axis vector.
* @param z The Z component of the axis vector.
* @param angle The angle of rotation about the axis vector, in degrees.
* @return The resulted matrix
*/
rotateAxisAngle(x: number, y: number, z: number, angle: number): CSSMatrix;
/**
* Specifies a skew transformation along the `x-axis` by the given angle.
* This matrix is not modified.
*
* @param angle The angle amount in degrees to skew.
* @return The resulted matrix
*/
skewX(angle: number): CSSMatrix;
/**
* Specifies a skew transformation along the `y-axis` by the given angle.
* This matrix is not modified.
*
* @param angle The angle amount in degrees to skew.
* @return The resulted matrix
*/
skewY(angle: number): CSSMatrix;
/**
* Specifies a skew transformation along both the `x-axis` and `y-axis`.
* This matrix is not modified.
*
* @param angleX The X-angle amount in degrees to skew.
* @param angleY The angle amount in degrees to skew.
* @return The resulted matrix
*/
skew(angleX: number, angleY: number): CSSMatrix;
/**
* Transforms a specified vector using the matrix, returning a new
* {x,y,z,w} Tuple *Object* comprising the transformed vector.
* Neither the matrix nor the original vector are altered.
*
* The method is equivalent with `transformPoint()` method
* of the `DOMMatrix` constructor.
*
* @param t Tuple with `{x,y,z,w}` components
* @return the resulting Tuple
*/
transformPoint(t: PointTuple | DOMPoint): PointTuple | DOMPoint;
}
export default CSSMatrix;
export as namespace CSSMatrix;
/** All CSSMatrix compatible initialization values. */
declare type CSSMatrixInput = string | number[] | CSSMatrix | DOMMatrix | JSONMatrix | Float32Array | Float64Array;
export {};
/** The result of **CSSMatrix.toJSON()** / **DOMMatrix.toJSON()** instance calls. */
declare interface JSONMatrix {
m11: number;
m12: number;
m13: number;
m14: number;
m21: number;
m22: number;
m23: number;
m24: number;
m31: number;
m32: number;
m33: number;
m34: number;
m41: number;
m42: number;
m43: number;
m44: number;
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
is2D: boolean;
isIdentity: boolean;
}
/** An array of 6 numbers representing a 2D matrix. */
declare type Matrix = [number, number, number, number, number, number];
/** An array of 16 numbers representing a 3D matrix. */
declare type Matrix3d = [
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number,
number
];
/** A DOMMPoint compatible Tuple. */
declare interface PointTuple {
x: number;
y: number;
z: number;
w: number;
}
export { }
{
"name": "@thednp/dommatrix",
"version": "2.0.8",
"version": "2.0.9",
"description": "TypeScript shim for DOMMatrix",

@@ -41,40 +41,29 @@ "homepage": "https://thednp.github.io/dommatrix/",

"devDependencies": {
"@testing-library/dom": "^10.4.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@vitest/browser": "^2.0.5",
"@vitest/coverage-istanbul": "^2.0.5",
"@vitest/ui": "^2.0.5",
"dts-bundle-generator": "^8.1.2",
"eslint": "^8.57.0",
"eslint-plugin-jsdoc": "^46.10.1",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-prettier": "^4.2.1",
"istanbul-lib-coverage": "^3.2.2",
"istanbul-lib-instrument": "^5.2.1",
"ncp": "^2.0.0",
"nyc": "^15.1.0",
"playwright": "^1.47.0",
"prettier": "^2.8.8",
"rimraf": "^5.0.10",
"typescript": "^5.5.4",
"vite": "^5.4.3",
"vitest": "^2.0.5"
"@vitest/browser": "^2.1.4",
"@vitest/coverage-istanbul": "^2.1.4",
"@vitest/ui": "^2.1.4",
"playwright": "^1.48.2",
"typescript": "^5.6.3",
"vite": "^5.4.10",
"vite-plugin-dts": "^4.3.0",
"vitest": "^2.1.4"
},
"engines": {
"node": ">=16",
"pnpm": ">=8.6.0"
},
"scripts": {
"pre-test": "npm run clean-coverage",
"test": "npm run pre-test && vitest --config vitest.config.ts",
"test-ui": "npm run pre-test && vitest --config vitest.config-ui.ts --browser=chromium",
"clean-coverage": "rimraf coverage .nyc_output",
"coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
"badges": "npx -p dependency-version-badge update-badge eslint typescript eslint prettier vitest vite",
"format": "prettier --write \"src/**/*.ts\"",
"lint": "npm run lint:ts && npm run check:ts",
"lint:ts": "eslint -c .eslintrc.cjs --ext .ts src",
"pre-test": "pnpm clean-coverage",
"test": "pnpm pre-test && vitest --config vitest.config.mts",
"test-ui": "pnpm pre-test && vitest --config vitest.config-ui.mts --browser=chromium",
"clean-coverage": "rm -rf coverage .nyc_output",
"badges": "npx -p dependency-version-badge update-badge typescript vitest vite",
"format": "deno fmt src",
"lint": "pnpm lint:ts && pnpm check:ts",
"lint:ts": "deno lint src",
"check:ts": "tsc --noEmit",
"fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",
"build": "vite build && npm run dts && npm run docs",
"dts": "dts-bundle-generator --config ./dts.config.ts",
"docs": "ncp dist/dommatrix.js docs/dommatrix.js && ncp dist/dommatrix.js.map docs/dommatrix.js.map"
"fix:ts": "deno lint src --fix",
"build": "vite build && pnpm copy-docs",
"copy-docs": "cp dist/dommatrix.js docs/dommatrix.js && cp dist/dommatrix.js.map docs/dommatrix.js.map"
}
}
# DOMMatrix
[![Coverage Status](https://coveralls.io/repos/github/thednp/dommatrix/badge.svg)](https://coveralls.io/github/thednp/dommatrix)
[![NPM Version](https://img.shields.io/npm/v/@thednp/dommatrix.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/dommatrix)
[![NPM Downloads](https://img.shields.io/npm/dm/@thednp/dommatrix.svg?style=flat-square)](http://npm-stat.com/charts.html?@thednp/dommatrix)
[![NPM Version](https://img.shields.io/npm/v/@thednp/dommatrix.svg)](https://www.npmjs.com/package/@thednp/dommatrix)
[![NPM Downloads](https://img.shields.io/npm/dm/@thednp/dommatrix.svg)](http://npm-stat.com/charts.html?@thednp/dommatrix)
[![ci](https://github.com/thednp/dommatrix/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/dommatrix/actions/workflows/ci.yml)
[![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/dommatrix/badge)](https://www.jsdelivr.com/package/npm/@thednp/dommatrix)
[![typescript version](https://img.shields.io/badge/typescript-5.5.4-brightgreen)](https://www.typescriptlang.org/)
[![eslint version](https://img.shields.io/badge/eslint-8.57.0-brightgreen)](https://github.com/eslint)
[![vitest version](https://img.shields.io/badge/vitest-2.0.5-brightgreen)](https://vitest.dev/)
[![vite version](https://img.shields.io/badge/vite-5.4.3-brightgreen)](https://vitejs.dev/)
[![prettier version](https://img.shields.io/badge/prettier-2.8.8-brightgreen)](https://prettier.io/)
[![typescript version](https://img.shields.io/badge/typescript-5.6.3-brightgreen)](https://www.typescriptlang.org/)
[![vitest version](https://img.shields.io/badge/vitest-2.1.4-brightgreen)](https://vitest.dev/)
[![vite version](https://img.shields.io/badge/vite-5.4.10-brightgreen)](https://vitejs.dev/)

@@ -13,0 +11,0 @@ A TypeScript 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.

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc