When a new node or edge is added, the entire graph is redrawn

[elainemartina]

Describe the bug
I am developing a solution using Angular v18 that allows users to create a graph, similar to what is possible in Miro, where they can add new nodes and create edges between source and target nodes. However, every time a new node or edge is added, the entire graph is redrawn. I want to prevent this from happening, ensuring that the graph (nodes and edges) remains in the positions where the user placed them. Does anyone know how to achieve this?

Expected behavior
The application has a button to add new nodes. When a node is clicked, an option point appears to create an edge from the source node to the target node. Users are able to drag the nodes to position them as they desire. The graph should not be redrawn every time a new node or edge is added.

@Kr0san89 do you know what should I do?

[Kr0san89]

Hello,

as a general information when you plan to build somthing like miro

• I think this lib has quite a big gap for building something into that direction, i would recommend checking if there are better libs for that
• Building somethink like that is obviously a lot of work. So consider wisely if you want to invest that time

So now for the technical part :)

added, the entire graph is redrawn. I want to prevent this from happening, ensuring that the graph (nodes and edges) remains in the positions where the user placed them.

for that i created already a description here: #322

For other features you might want to add yourself svg elemtens to the ngx-graph by using the content projection and just add normal "svg" Elements to it. https://swimlane.github.io/ngx-graph/custom-templates#custom-svg
There you always have to position the svg's yourself, but there are a lot of information aboud svg's in the internet.

Hope this helps you :)
Would be very happy to here from you, if you succeded and used this or another lib for it

[artem-mangilev]

You could try my library for your task. It allows you to add new nodes and edges to the flow:

https://www.ngx-vflow.org/workshops/drag-and-drop-nodes