react-move | React Move | Beautiful , data-driven animations for React | Animation library

I'm using react-moveable to have drag and drop support for some component. I'm trying to make the control box disappear until the user clicks on the target.

So first, I want to apply some CSS to the control box, but I can't seem to do it. The docs specify that a className could be set, but it doesn't work for me for some reason.

The component looks something like this:

I want to add 7 custom lines as helper to user.

Like in that picture, I want to add 7 times "div.moveable-line"

Even rotation change, the lines stayed at suitible position => And I want to add them 7 times.

Can we create a line between T1 and B1 (and for the others)?

Or if you have any other solutions, I am open for them as well.

React Moveable - Github

Warpable - StoryBook

Moveable.warpable - Documentation

Here is a demo link

MY COMPONENT

The text in React Movable box gets dragged on left click and edits on right click with the help of "contentEditable" attribute. But in smartphone, I can't find a way to edit the same, it only gets moved.

I've been trying to solve this issue for the last few hours. I'm able to use react-moveable just fine with a simple node.js app. When I try to use the same module inside of a NEXTjs app, it throws an error: TypeError: Cannot read property 'userAgent' of undefined

Here is the issue replicated: https://codesandbox.io/s/hungry-ramanujan-ttqh3?fontsize=14&hidenavigation=1&theme=dark

As far as I can tell, it looks like I'm trying to render something on the server-side that should be on the client-side. Not sure what the solution is though...

Thanks for your help!