Drag and drop nodes and connect nodes with mouse

[wanderernxa]

Hi,
Thank you for the fantastic tool. Is it possible to do drag and drop of nodes from a pallette and then draw the connections(edge) between them? Like Visio for example?

thanks

[dash14]

Hi @wanderernxa,
I apologize that it has been quite some time since you asked that question.
It may not be useful anymore, but I have created a example and share it below.

https://codesandbox.io/p/sandbox/v-network-graph-make-link-by-drag-6m2tfv?file=%2Fsrc%2FApp.vue%3A1%2C1

linking.mov

It uses the layer feature, specifying raw event handlers for nodes, and the coordinate transformation feature.
See the examples below for more details on each of these features.

• https://dash14.github.io/v-network-graph/examples/layers.html
• https://dash14.github.io/v-network-graph/examples/misc.html#coordinates-translation
• https://dash14.github.io/v-network-graph/examples/event.html#set-raw-event-handlers-to-the-node-elements

I am not familiar with Visio so this may not be the behavior you expect. Sorry if that is the case.
Best regards.

[wanderernxa]

This is perfect, thank you so much!

[piliadis]

Hello there!
Thanks for your work @dash14 ! We all appreciate it!
I was trying to create a graph where the user can drag and drop nodes, and also link them according to the above examples.
I was getting a nasty bug: the drag and drop functionality was working perfectly, until the first edge be drawn. Then the dropped nodes were placed in the center (default behaviour). I tried to replicate the error in a sandbox, but i failed as it works as expected:
sandbox <- select the open in a new tab in the upper right corner
Fortunately I found the solution and I'm noting it here to help someone else. The solution is to avoid using reactive layouts and instead use simple ref. Then all works perfect!
Cheers!