Clunky drag and rotate

[zRelux]

How do make a div that by the end of it I can drag and rotate it? I will paste a link of what I have achieved so far and technically it does the thing but it is super clunky and doesn't work very well... am I doing something wrong?

Sandbox or Video
https://codesandbox.io/s/admiring-rain-1d4yp

Checklist:

• I've read the documentation.
• If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[dbismut]

I'm sorry to say but you're using this lib the wrong way 😅 In this case you should only use the drag gesture. The move gesture should only be used when hovering an element.

Here is a sandbox where I'm giving away some tricks on how to handle what I guess you want to do (use the yellow shapes):
https://codesandbox.io/s/suspicious-heisenberg-04e8v

I've had a look at your Ruler file and fixed it a bit to allow for resizing from the red handle.

But you can also have a look at the Alt (for alternative solution) file that uses svg to avoid trigonometry calculations. You should rather look at the logic rather than the actual implementation if you need to continue using divs.

(if you want to test your original component you should probably comment out mine).

[dbismut]

Still unsure about point 2. What do you mean by "zoom to that point"? In any case long press can easily be emulated with useDrag.

[zRelux]

How do you do that? can you provide a snippet for the longpress?

[dbismut]

One would be to set a timer with setTimeout when the user starts the drag and clear it when the user moves or release the pointer.

[zRelux]

Sorry would you mind sharing a quick snippet for this?

[dbismut]

There https://codesandbox.io/s/fervent-hellman-ml9f7