search

jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.42k stars 714 forks source link

Node moved to different position #815

Closed applibs closed 5 months ago

applibs commented 5 months ago

When I Drop new node it is moved to little different position. How to fix it?

jerosoler commented 5 months ago

You would have to save the click position in the drag node. You would have to calculate the difference with the size of the node and adjust the position.

applibs commented 5 months ago

And why isn't this resolved within Drawflow?

jerosoler commented 5 months ago

Because it is not part of the library.

For example in the drawflow demo: https://jerosoler.github.io/Drawflow/

A small rectangle is being dragged.

And when the drop is made, the rectangle is completely different.

And drag and drop is native to javascript.

applibs commented 5 months ago

What do you mean that its not part of library. Of course that its part of library in function drop(ev) and addNodeToDrawFlow(name, pos_x, pos_y).

jerosoler commented 5 months ago

addNodeToDrawFlow not is part of library. Is addNode part of library. addNodeToDrawFlow is example drag and drop in demo

applibs commented 5 months ago

Ohh sorry I see it now. I integrated all outside code into class and on drag I saved mouse position:

this.mouse.x = ev.offsetX
this.mouse.y = ev.offsetY

and on drop function I changed line: this.addNodeToDrawFlow(ev, data, ev.clientX - this.mouse.x, ev.clientY - this.mouse.y);

and now it looks much much better.