fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
1 lines • 11.7 kB
Source Map (JSON)
{"version":3,"file":"matrix.min.mjs","names":[],"sources":["../../../../src/util/misc/matrix.ts"],"sourcesContent":["import { iMatrix } from '../../constants';\nimport type { XY } from '../../Point';\nimport { Point } from '../../Point';\nimport type { TDegree, TRadian, TMat2D } from '../../typedefs';\nimport { cos } from './cos';\nimport { degreesToRadians, radiansToDegrees } from './radiansDegreesConversion';\nimport { sin } from './sin';\n\nexport type TRotateMatrixArgs = {\n angle?: TDegree;\n};\n\nexport type TTranslateMatrixArgs = {\n translateX?: number;\n translateY?: number;\n};\n\nexport type TScaleMatrixArgs = {\n scaleX?: number;\n scaleY?: number;\n flipX?: boolean;\n flipY?: boolean;\n skewX?: TDegree;\n skewY?: TDegree;\n};\n\nexport type TComposeMatrixArgs = TTranslateMatrixArgs &\n TRotateMatrixArgs &\n TScaleMatrixArgs;\n\nexport type TQrDecomposeOut = Required<\n Omit<TComposeMatrixArgs, 'flipX' | 'flipY'>\n>;\n\nexport const isIdentityMatrix = (mat: TMat2D) =>\n mat.every((value, index) => value === iMatrix[index]);\n\n/**\n * Apply transform t to point p\n * @deprecated use {@link Point#transform}\n * @param {Point | XY} p The point to transform\n * @param {Array} t The transform\n * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied\n * @return {Point} The transformed point\n */\nexport const transformPoint = (\n p: XY,\n t: TMat2D,\n ignoreOffset?: boolean,\n): Point => new Point(p).transform(t, ignoreOffset);\n\n/**\n * Invert transformation t\n * @param {Array} t The transform\n * @return {Array} The inverted transform\n */\nexport const invertTransform = (t: TMat2D): TMat2D => {\n const a = 1 / (t[0] * t[3] - t[1] * t[2]),\n r = [a * t[3], -a * t[1], -a * t[2], a * t[0], 0, 0] as TMat2D,\n { x, y } = new Point(t[4], t[5]).transform(r, true);\n r[4] = -x;\n r[5] = -y;\n return r;\n};\n\n/**\n * Multiply matrix A by matrix B to nest transformations\n * @param {TMat2D} a First transformMatrix\n * @param {TMat2D} b Second transformMatrix\n * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices\n * @return {TMat2D} The product of the two transform matrices\n */\nexport const multiplyTransformMatrices = (\n a: TMat2D,\n b: TMat2D,\n is2x2?: boolean,\n): TMat2D =>\n [\n a[0] * b[0] + a[2] * b[1],\n a[1] * b[0] + a[3] * b[1],\n a[0] * b[2] + a[2] * b[3],\n a[1] * b[2] + a[3] * b[3],\n is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4],\n is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5],\n ] as TMat2D;\n\n/**\n * Multiplies the matrices array such that a matrix defines the plane for the rest of the matrices **after** it\n *\n * `multiplyTransformMatrixArray([A, B, C, D])` is equivalent to `A(B(C(D)))`\n *\n * @param matrices an array of matrices\n * @param [is2x2] flag to multiply matrices as 2x2 matrices\n * @returns the multiplication product\n */\nexport const multiplyTransformMatrixArray = (\n matrices: (TMat2D | undefined | null | false)[],\n is2x2?: boolean,\n) =>\n matrices.reduceRight(\n (product: TMat2D, curr) =>\n curr && product\n ? multiplyTransformMatrices(curr, product, is2x2)\n : curr || product,\n undefined as unknown as TMat2D,\n ) || iMatrix.concat();\n\nexport const calcPlaneRotation = ([a, b]: TMat2D) =>\n Math.atan2(b, a) as TRadian;\n\n/**\n * Decomposes standard 2x3 matrix into transform components\n * @param {TMat2D} a transformMatrix\n * @return {Object} Components of transform\n */\nexport const qrDecompose = (a: TMat2D): TQrDecomposeOut => {\n const angle = calcPlaneRotation(a),\n denom = Math.pow(a[0], 2) + Math.pow(a[1], 2),\n scaleX = Math.sqrt(denom),\n scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,\n skewX = Math.atan2(a[0] * a[2] + a[1] * a[3], denom);\n return {\n angle: radiansToDegrees(angle),\n scaleX,\n scaleY,\n skewX: radiansToDegrees(skewX),\n skewY: 0 as TDegree,\n translateX: a[4] || 0,\n translateY: a[5] || 0,\n };\n};\n\n/**\n * Generate a translation matrix\n *\n * A translation matrix in the form of\n * [ 1 0 x ]\n * [ 0 1 y ]\n * [ 0 0 1 ]\n *\n * See {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#translate} for more details\n *\n * @param {number} x translation on X axis\n * @param {number} [y] translation on Y axis\n * @returns {TMat2D} matrix\n */\nexport const createTranslateMatrix = (x: number, y = 0): TMat2D => [\n 1,\n 0,\n 0,\n 1,\n x,\n y,\n];\n\n/**\n * Generate a rotation matrix around around a point (x,y), defaulting to (0,0)\n *\n * A matrix in the form of\n * [cos(a) -sin(a) -x*cos(a)+y*sin(a)+x]\n * [sin(a) cos(a) -x*sin(a)-y*cos(a)+y]\n * [0 0 1 ]\n *\n *\n * @param {TDegree} angle rotation in degrees\n * @param {XY} [pivotPoint] pivot point to rotate around\n * @returns {TMat2D} matrix\n */\nexport function createRotateMatrix(\n { angle = 0 }: TRotateMatrixArgs = {},\n { x = 0, y = 0 }: Partial<XY> = {},\n): TMat2D {\n const angleRadiant = degreesToRadians(angle),\n cosValue = cos(angleRadiant),\n sinValue = sin(angleRadiant);\n return [\n cosValue,\n sinValue,\n -sinValue,\n cosValue,\n x ? x - (cosValue * x - sinValue * y) : 0,\n y ? y - (sinValue * x + cosValue * y) : 0,\n ];\n}\n\n/**\n * Generate a scale matrix around the point (0,0)\n *\n * A matrix in the form of\n * [x 0 0]\n * [0 y 0]\n * [0 0 1]\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#scale}\n *\n * @param {number} x scale on X axis\n * @param {number} [y] scale on Y axis\n * @returns {TMat2D} matrix\n */\nexport const createScaleMatrix = (x: number, y: number = x): TMat2D => [\n x,\n 0,\n 0,\n y,\n 0,\n 0,\n];\n\nexport const angleToSkew = (angle: TDegree) =>\n Math.tan(degreesToRadians(angle));\n\nexport const skewToAngle = (value: TRadian) =>\n radiansToDegrees(Math.atan(value));\n\n/**\n * Generate a skew matrix for the X axis\n *\n * A matrix in the form of\n * [1 x 0]\n * [0 1 0]\n * [0 0 1]\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#skewx}\n *\n * @param {TDegree} skewValue translation on X axis\n * @returns {TMat2D} matrix\n */\nexport const createSkewXMatrix = (skewValue: TDegree): TMat2D => [\n 1,\n 0,\n angleToSkew(skewValue),\n 1,\n 0,\n 0,\n];\n\n/**\n * Generate a skew matrix for the Y axis\n *\n * A matrix in the form of\n * [1 0 0]\n * [y 1 0]\n * [0 0 1]\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#skewy}\n *\n * @param {TDegree} skewValue translation on Y axis\n * @returns {TMat2D} matrix\n */\nexport const createSkewYMatrix = (skewValue: TDegree): TMat2D => [\n 1,\n angleToSkew(skewValue),\n 0,\n 1,\n 0,\n 0,\n];\n\n/**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet.\n * is called DimensionsTransformMatrix because those properties are the one that influence\n * the size of the resulting box of the object.\n * @param {Object} options\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewY]\n * @return {Number[]} transform matrix\n */\nexport const calcDimensionsMatrix = ({\n scaleX = 1,\n scaleY = 1,\n flipX = false,\n flipY = false,\n skewX = 0 as TDegree,\n skewY = 0 as TDegree,\n}: TScaleMatrixArgs) => {\n let matrix = createScaleMatrix(\n flipX ? -scaleX : scaleX,\n flipY ? -scaleY : scaleY,\n );\n if (skewX) {\n matrix = multiplyTransformMatrices(matrix, createSkewXMatrix(skewX), true);\n }\n if (skewY) {\n matrix = multiplyTransformMatrices(matrix, createSkewYMatrix(skewY), true);\n }\n return matrix;\n};\n\n/**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet\n * Before changing this function look at: src/benchmarks/calcTransformMatrix.mjs\n * @param {Object} options\n * @param {Number} [options.angle]\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewY]\n * @param {Number} [options.translateX]\n * @param {Number} [options.translateY]\n * @return {Number[]} transform matrix\n */\nexport const composeMatrix = (options: TComposeMatrixArgs): TMat2D => {\n const { translateX = 0, translateY = 0, angle = 0 as TDegree } = options;\n let matrix = createTranslateMatrix(translateX, translateY);\n if (angle) {\n matrix = multiplyTransformMatrices(matrix, createRotateMatrix({ angle }));\n }\n const scaleMatrix = calcDimensionsMatrix(options);\n if (!isIdentityMatrix(scaleMatrix)) {\n matrix = multiplyTransformMatrices(matrix, scaleMatrix);\n }\n return matrix;\n};\n"],"mappings":"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"}