How to make editable connections?

[seepine]

Through doc, I can add nodes and establish connections, but I don't know how to delete connections

[seepine]

Maybe I should add the delete icon or implement the Del shortcut, but I don't know where to start

[bcakmakoglu]

"Connections" are called "Edges" in this context and to delete edges, you simply remove them from your elements array or use the helper function

const { removeEdges } = useVueFlow()

removeEdges(['e1-2'])

[seepine]

i know removeEdges can remove edge,
but i dont know how to trigger reasonably

For example, I should add a delete icon to the line segment?

[bcakmakoglu]

Well, I can't tell you how to build your business logic 😅
It really depends on how you want to delete it - if you want the edge to be deletable with a button press, do that.

By default, edges can be deleted by just selecting it (click on the edge, it will be marked as selected) and then just use the Backspace key (this is the default delete key handler, you can customize the key to whatever key you want).
Same goes for nodes.

If you need something else, you can implement that logic using the snippet above (using removeEdges).

[seepine]

thanks

[bcakmakoglu]

fyi: there is an example of an edge with a button that removes the edge here.