Add element rotation

[beavcast]

Hi to everyone,

I'm using react-rnd 7.2.0 in my projects and glad to say it's a very good package.

I was wondering if there is (or it'll be) the possibility to rotate the elements as well as drag and resize. I'd like to include that feature in my components, but I don't know how to do it properly.

Someone can help? Thanks in advance.

[anthonyalviz]

+1

[Adamkzh]

https://codepen.io/anon/pen/YZrrWM

Check this out, It's pretty cool, I was wondering if we could add a input to let the user enter the rotate degree, also let the user decided the resize degree. Looking forward to your help.

[chemitaxis]

Hi guys, here you have a good start point...

https://codepen.io/jacazek/pen/wWddgv

[chemitaxis]

Hi @Adamkzh @anthonyalviz @bokuweb @beavcast here you have a demo of a resizing, rotating and dragging that works perfect:

https://www.jqueryscript.net/demo/jQuery-Plugin-To-Transform-DOM-Elements-On-Web-Page-Free-Transform/example/

I have "googled" the entire web, but I can't find any good solution except that.

The repo is public, and here is the link (https://github.com/gthmb/jquery-free-transform), the maths is a little complex and I will try to adapt it to react-dnd (I have been programming with jQuery and Vanilla Javascript during ten years, I think I can do it, but I'm going to need some help 😅 )

I have seen that the plugin works with matrix and I prefer transform. If the final result is in matrix, you can transform to degree in a easy way.

What do you think? Thanks guys...

[Adamkzh]

Hey guys check this out, I think when we did the rotation, it will change the original coordinate of the image, So when we suppose to drag the image , it won't follow the cursor. I think we need to find a way to deal with the offset. https://codesandbox.io/s/v6lqpv4xm7

[oallouch]

https://github.com/daybrush/moveable/tree/master/packages/react-moveable