Convert matrix3d from Warpable to rotateX,Y,Z & translateX,Y,Z & scaleX,Y,Z

[ngocducdim]

Hi, can I ask the warpable when warping it return the matrix3d css string and we have to manually set that css string to DOM element, I want to get all the transform values(the rotate, translate, scale, skew, perperctive,...) instead matrix3d string, is it posible? Thank you

[daybrush]

The warpable itself is matrix3d, and the process is also matrix3d x matrix3d.

So, matrix3d => translate, rotate, skew seems impossible yet.

[ngocducdim]

In react-moveable, I use draggable & rotatable & scalable, in onBeforeRenderStart option I use event.setTransform to set translate(0px, 0px) rotate(120deg) scale(1, 2) and it seem return css string follow format that I set, not the matrix3d string, can I use it with warpable?

[daybrush]

@ngocducdim

I don't know if I understand it right

1. do you want to keep the existing rotate, translate, scale?

You don't have to use beforeRenderStart and setTransform.

<Moveable
                    target={...}
                    warpable={true}
                    onWarp={e => {
                        e.target.style.cssText += e.cssText;
                    }}
                />

2. do you want to change the final value to matrix3d?

// install css-to-mat
import { parseMat } from "css-to-mat";
onWarp={e => {
  const matrix3d = parseMat(e.transform);

  e.target.style.transform = `matrix3d(${matrix3d.join(", ")})`;
}}

[javierP1647]

hello, how can I persist the warp state and load again?