chrvadala/transformation-matrix

Javascript isomorphic 2D affine transformations written in ES6 syntax. Manipulate transformation matrices with this totally tested library!

Hi, I'm Christian Vadalà 👋

React.js & Node.js open source developer

📬 Follow me

👉 https://chrvadala.github.io

💼 Linkedin

📦 NPM

transformation-matrix's Issues

Type definitions for transform and compose should accept a single Matrix[]

The implementations of transform() and compose currently accept either multiple Matrix parameters or a single Matrix[] parameter. Unfortunately, the current type definitions do not cover the case of a single Matrix[] parameter. This requires TypeScript code to be written as transform(...fromDefinition(arrayOfDefinitions)) when in fact, the ... should be uneccessary.

I propose adding the following overloads without ...:

  export function transform(matrices: Matrix[]): Matrix;
  export function compose(matrices: Matrix[]): Matrix;

These would appear adjacent to the following lines:

• transformation-matrix/transformation-matrix.d.ts

  Line 136 in 06321d4

  export function transform(...matrices: Matrix[]): Matrix;

• transformation-matrix/transformation-matrix.d.ts

  Line 143 in 06321d4

  export function compose(...matrices: Matrix[]): Matrix;

And the documentation can be improved by changing the parameter description as follows:

 * @param matrices {...Matrix | Matrix[]} Matrices listed as separate parameters or in an array

• transformation-matrix/src/transform.js

  Line 3 in 06321d4

  * @param matrices {Matrix[]} Array of affine matrix

• transformation-matrix/src/transform.js

  Line 39 in 06321d4

  * @param matrices {Matrix[]} Array of matrix

'matrix(0.707 0.409 -0.707 0.409 0 0)' is not a matrix

fromString('matrix(0.707 0.409 -0.707 0.409 0 0)') not support 'matrix(0.707 0.409 -0.707 0.409 0 0)' is not a matrix

missing files in v2.16.0

Hi, we notice that in v2.16.0 the build-commonjs and build-umd folder are no longer included in the package however they are still reference in the package.json resulting in errors. Could someone help to take a look into the issue?

v2.16.0

v2.15.0

Is flipY() exported?

I'm a little rusty on matrix math but I think this is the right library. I'm trying to do coordinate conversions from one system to another. This is for a project where I'm drawing on Canvas and using some json Objects for points.

For Canvas; the origin is at the top left.
For the json Objects data; the origin is at the bottom left.

I was thinking I needed to simply flip the Y axis to convert from the json Objects to draw it on Canvas. However, I get the following error:

import { translate, applyToPoint, flipY } from 'transformation-matrix';
                                  ^^^^^
SyntaxError: Named export 'flipY' not found. The requested module 'transformation-matrix' is a CommonJS module, which may not support all module.exports as named exports.

My need is as follows:

let jsonPointOrigin = {x: 0, y: 0};
let canvasPointBottomLeft = applyToPoint(matrix, jsonPointOrigin);
let jsonPointMax = {x: 407, y: 407};
let canvasPointTopRight = applyToPoint(matrix, jsonPointMax );

Output:
{x: 0, y: 407}
{x: 407, y: 0}

Add a fromTriangles function

I will provide a PR for this function soon if you don't mind. @chrvadala maybe you can add me as a collaborator so I can create one :)

Return type of fromTransformAttribute should be MatrixDescriptor[]

The return type of fromTransformAttribute() is incorrectly specified as Matrix[] when it should be MatrixDescriptor[]. This causes errors when using the function in TypeScript.

Lines that need changing include:

• transformation-matrix/src/fromTransformAttribute.js

  Line 7 in 06321d4

  * @returns {Matrix[]} Array of MatrixDescriptor

• transformation-matrix/transformation-matrix.d.ts

  Line 233 in 06321d4

  * @returns {Matrix[]} Array of MatrixDescriptor

• transformation-matrix/transformation-matrix.d.ts

  Line 246 in 06321d4

  export function fromTransformAttribute(transformString: string): Matrix[];

No compose function

I tried to import this function. Does not exist.
Have checked sources after. Have not found.
Compose function does not exist in library.
Even search on the whole project have gave just result in REAME.md file.

Add shear operation

Uncaught Error: 'matrix(1, 0, 0, 1, 0, -6.6763e-06)' is not a matrix

Chrome sometimes return transform matrix in an exponential notation, e.g. -6.6763e-06 in this case.
Is this not supported?

how to get original value after transformed by matrix

Hey;
This lib is nice;
Is there any way to get original coordinator？The follow is demo code:

const coordinate = { x: 1, y: 1 };
const compensationAngle = 90;
const compensationOffset = { x: 1, y: 1 };

const matrixParams = [];
matrixParams.push(translate(compensationOffset.x, compensationOffset.y));
matrixParams.push(rotateDEG(compensationAngle));

let matrix = compose(...matrixParams);
matrix = smoothMatrix(matrix)
const { x, y } = applyToPoint(matrix, coordinate);
console.log(x, y);

the final result is: (0, 2).
And then I want to get the original coordinator coordinate = { x: 1, y: 1 } by result & matrix
This could be a strange question, but it is indeed a problem encountered in the development. Thx

applying a scale transformation and keeping the element centered

I would be grateful if you could help me understand the maths with regards to applying a scale and keeping the element centred.

I want to apply a scale and also keep the element centred, if I only apply a scale at elements a and d of the affine matrix then I get this effect.

What I want is this effect with the element remaining centred.

I've been looking at the code in react-svg-pan and I don't quite understand how they achieve this.

The first thing they do is call this function:

export const getSVGPoint = (value: Matrix, viewerX: number, viewerY: number) => {
  const matrix = fromObject(value);

  const inverseMatrix = inverse(matrix);

  return applyToPoint(inverseMatrix, { x: viewerX, y: viewerY });
};

// const svgPoint = getSVGPoint(matrix, width / 2, height / 2);

Why is the inverse of the matrix found? How does this help find the elements point from the midpoint of the element?

The code then uses the x and y coordinates of the point to create a new matrix from this code:

const matrix = transform(
    fromObject(current),
    translate(SVGPointX, SVGPointY),
    scale(scaleFactor, scaleFactor),
    translate(-SVGPointX, -SVGPointY)
  );

The only bit above I understand is the scale part. I don't understand what the fromObject and the 2 translate calls do.

I would be grateful for an explanation.

2.16.0 is missing build folders build-commonjs/, build-umd/.

Error: Cannot find package '.../node_modules/transformation-matrix/package.json' imported from '...'

The package.json "main" points to a missing build folder.

Love the library btw <3

Export types Matrix and Point

We are having issues with Webpack packaging a library that depends on transformation-matrix (swimlane/ngx-graph#67).

Webpack seems to ignore the Matrix type as it is not exported in https://github.com/chrvadala/transformation-matrix/blob/master/transformation-matrix.d.ts whereas it is used by functions that are themselves exported. We end up with type definitions that reference Matrix without it being declared anywhere.

Can you export that type as well as Point? (I am not using Point but I guess it has the same problem)

Thanks for the library, by the way!

Point union in typescript is not helpful

Hi,

I have just upgraded to the latest version and the type definition for Point has changed to a union which is not helpful.

type Point = { x: number; y: number } | [number, number];

For every union that is created, I have to use type narrowing to determine what it is if the inference cannot work it out.

It was perfect before:

type Point = { x: number; y: number }

I would have a new type for the tuple.

Would you be open to a PR that reverted this?

How to know the point after the rectangle is rotated around the center point？

How to know the point after the rectangle is rotated around the center point？

There is a 100x200 rectangle in a 1000 x 1000 canvas. What are the points after a 40 degree rotation?
try

         const matrix = compose(
          fromString('matrix(1,0,0,1,0,0)'),
          translate(base.cc.x, base.cc.y),
          rotateDEG(el.base.rotate),
          scale(0, 0),
          translate(-base.cc.x, -base.cc.y),
        );

transformation-matrix.d.ts incorrect usage of rest operator syntax

TypeScript does not like this:

export function fromDefinition(...definitionOrArrayOfDefinition: MatrixDescriptor | MatrixDescriptor[]): Matrix[];

It borks with

TS2370: A rest parameter must be of an array type

Perhaps use method overloading?

  export function fromDefinition(definition: MatrixDescriptor): Matrix[];
  export function fromDefinition(...arrayOfDefinition: MatrixDescriptor[]): Matrix[];

or just remove the ... rest parameter syntax?

I had to roll back to 2.0.4 in order for this pkg to compile in my build pipe line.

Request support for matrix3d

Request support for matrix3d.

fromString method and negativeValues

When I'am trying to use fromString method with negative element in any position I am getting an error Error: 'matrix(0,1,0,1,0,-1)' is not a matrix.

You may see an example here

add decompose function

Exponent notation is not parsed correctly in transform attribute

So this took me couple hours to debug. When parsing transform attribute and using toSVG on it, it's not uncommon to get values in exponent notation. Upon parsing these values again, exponent part is ignored and we get a very different matrix.
You should either update the parser or if that's not viable, you could check for exponent and apply some rounding.
I don't think dropping decimals that far down would affect results in any way.

Add new npm lock file

npm/npm#16244

PR #49 Breaks WebPack Compile

declare module 'transformation-matrix/fromDefinition' and declare module 'transformation-matrix/fromTransformAttribute' are missing.
import { Point, Matrix } from 'transformation-matrix'`

and

export function fromDefinition(...definitionOrArrayOfDefinition: Matrix[]): Matix[];

Matix should be Matrix

Optimize parsing performance

Can we parse matrices with normal regular expressions? Now using PEG, the performance is relatively poor

Possible to get decomposed transform from 2 sets of given points?

Discussed in #92

^{Originally posted by lsps9150414 May 23, 2022}
I'm working on gesture handling where users can scale, drag, and rotate a shape with 2 fingers.

The gesture system can let me know (a) where the initial touchpoints are and (b) where the current touchpoints are.
I need to apply a transform style to the shape being manipulated to reflect the manipulation.

Is it possible for this lib to output the translate, scale, and rotate parameters (i.e. the decomposed transform matrix) by giving it 2 sets of points, the init touch points { (x1, y1), (x2, y2) } and the final touch points { (x1', y1'), (x2', y2') }?

Rotate 90 degrees with coordinate = 0

Hey!

This is probably not library-related issue, but I supposed there was a way to handle it in the library.

Check out the output of the following code.
It is expected that it would be { x: 0, y: 10 }.

const {rotate, applyToPoint} = require('transformation-matrix')
const matrix = rotate(Math.PI/2);
const result = applyToPoint(matrix, {x: 10, y: 0});
// { x: 6.123233995736766e-16, y: 10 }

Is there a hint allowing getting correct 90 degrees rotation value for coordinates having 0 value?
Thank you!

compose vs transform

Hi! Thanks for the lib! I have one question that is not clear from the docs: what is the difference between compose and transform?

add fromObject function

Get rotation angle from affine transform matrix

I’m very glad to use this amazing package for my project.
though, im having some trouble applying this package for my specific use - getting the rotation angle from the affine matrix array data.

Is there any existing function for extracting the rotation angle from givven affine transform matrix?

index.js missing export fromTriangles

does exist:

• node_modules/transformation-matrix/build-commonjs/fromTriangles.js
• require('transformation-matrix/build-commonjs/fromTriangles').fromTriangles

does not exist:

• require('transformation-matrix').fromTriangles

Support rotateX, rotateY and rotateZ

I would be nice if one could do:

const matrixDescription = fromTransformAttribute(
  'rotateX(45deg) rotateY(0deg) rotateZ(45deg)'
);

or is this already possible in another way?

Using the transformation-matrix library in an Angular 4 project

Installing the transformation-matrix library in an Angular 4 project, the rotate method seems to be missing the extra parameters, cx & cy

The method is defined as..
rotate(angle, [cx], [cy]) ⇒ Object
Calculate a rotation matrix

and the transformation-matrix.d.ts file contains...
declare module 'transformation-matrix/rotate' {

• /** Calculate a rotation matrix */
• export function rotate(angle: number): Matrix;
• /** Calculate a rotation matrix with a DEG angle */
• export function rotateDEG(angle: number): Matrix;
  +}

add interpolate function

TypeScript definitions missing for flipX & flipY

I'm unable to import the flipX & flipY methods in my typescript project.
Would be great to have them available :)

accept CSS/SVG shorthand notation

What do you think about supporting shorthand notations like scale(.5) in addition to scale(.5, .5)? Would you mind a PR or would you like to keep this lib unrelated to web stuff?

Add skew operation

Type definitions for applyToPoint and applyToPoints should accept arrays

The current type definitions specify that applyToPoint() requires a Point and applyToPoints() requires a Point[]. This is more restrictive than the actual implementations, which also allow [number, number] and [number, number][], respectively.

One way to fix this is to include a union of types in the function signatures, similar to what was done for fromTriangles() here:

transformation-matrix/transformation-matrix.d.ts

Line 168 in 06321d4

export function fromTriangles(t1: Array<Array<number>> | Array<Point>, t2: Array<Array<number>> | Array<Point>): Matrix;

Perhaps a better way would be to change the definition of Point to include object and array forms, if the intention is to support both forms everywhere. I'm suggesting something like this:

  type Point = { x: number; y: number } | [number, number];

The change would go here:

transformation-matrix/transformation-matrix.d.ts

Line 11 in 06321d4

type Point = { x: number; y: number };

If this change is made, the function signature for fromTriangles() can be simplified.

fromTransformAttribute does not support units

example: translate(349.196px, 200px) rotate(0deg)