Individual transform properties

[ssvendsen]

Is it possible to make Moveable work with individual transform properties, such as https://developer.mozilla.org/en-US/docs/Web/CSS/rotate? If the target element has rotations applied using the "rotate" CSS property instead of the "transform" CSS property, Moveable doesn't seem to render the control box with the correct initial rotation. Thanks!

[daybrush]

@ssvendsen

• croact-moveable 0.6.2
• @moveable/helper 0.1.3
• lit-moveable 0.27.2
• moveable 0.50.2
• preact-moveable 0.52.2
• react-moveable 0.53.2
• svelte-moveable 0.42.2
• vue-moveable 2.0.0-beta.81
• vue3-moveable 0.25.2
• ngx-moveable 0.47.2

moveable's new version iis released.

Rendering will work.

However, support for the value of individual transform is planned in the future.

[ssvendsen]

Thanks for the quick response. This seems to cover our use case. We'll try it out within a few days and let you know.

[ssvendsen]

I gave the updates a try. I wonder if there are some issues with matrix calculations in the internal getMatrixStackInfo() function when applying the new style rotate prop in isolation. If I apply the classic transform prop (e.g. transform: translate(0,0)) at the same time things work fine. What I see in the error case is that the Moveable rectangle + handles do not render. I got a feeling it is related to 2d vs 3d matrix handling in mentioned function but I might be wrong.
Other than that I realize that the individual transform properties are always applied before the classic transform property (by the browser), causing some challenges in my particular case. But that is another story.

[daybrush]

@ssvendsen

moveable's new version is released. Check it again.

If not, can you tell me the address where I can test it?

[ssvendsen]

Yes, with 0.54.1 the Moveable rectangle renders as expected when individual rotate is used - thanks.
As I mentioned above, I realized my use case in any case poses some challenges. In my case I apply the transform reported by Moveable in onDrag to the target element during the drag operation, but in onDragEnd I clear the transform and set the 'left' and 'top' style props of the target element instead. But with an individual rotate set on the target element, the 'left' and 'top' props reported in by Moveable in onDragEnd are 'rotated' as well, which complicates things a bit. But I should be able to do the math to make it work. Thanks for the help, you can close this if you want.

[daybrush]

@ssvendsen

left, top are very inaccurate.

The browser rounds up and renders in units of 1px.

So you have to use translate.