UML Class Diagram Arrows overlap when we add new nodes to existing diagram


I have implemented UML class diagram using UML Class diagram samples(UML Class Nodes). And also I implemented right click context menu to add new child node to selected node. The problem is the arrows are getting overlapped after adding child node as shown below.

I know redrawing of entire diagram should fix this alignment issue but we don’t want to do that because whatever changes user has done until now to current diagram will be overwritten.

Want to know if there is a way to fix the arrow alignment issue.

What kind of link did you add to the new node? Was its data.relationship === “generalization”? Have you modified the link template at all from the UML Class Nodes sample?

Yes the relationship is “generalization” and no changes to link template. I used the link template from sample.

Have you taken out the Diagram.layout? That would mean each node would have to have a data binding on Node.location or GraphObject.position and have that property on each node data.

I’m just wondering what caused the node to be positioned where it is.

If you move that new node interactively, is the route of the link reasonable?

And that new “POM_Object” node isn’t a child of the “Enter Business Object Name” node, is it? It’s a parent.

Initial diagram was having only two nodes BusinessObject(Parent) and POM_object(child) and then I added “Enter Business Object Name” node as child by right clicking “BusinessObject” node and after this “POM_object” node’s arrow is overlapping with newly added node.

I didn’t take out diagram.layout. I still have below code

let classDiagram = $(go.Diagram, this.classDiagramDivId,
initialContentAlignment: go.Spot.Center,
“undoManager.isEnabled”: true,
layout: $(go.TreeLayout,
angle: 90,
path: go.TreeLayout.PathSource,
setsPortSpot: false,
setsChildPortSpot: false,
arrangement: go.TreeLayout.ArrangementHorizontal

Can you give us a way to reproduce the problem?

Below is the code that I am using to update existing UML diagram(Call the method having below code on right click add node action). I moved nodeData from sample to createNodeData method and linkData to createLinkData.

let nodedata1 = this.createNodeData(this.props,this.methods,types);
let linkdata1 = this.createLinkData(types);
this.classDiagram.startTransaction(“Add Node and Create Link”);
for(let data of nodedata1){
for(let link of linkdata1){
this.classDiagram.commitTransaction(“Add Node and Create Link”);

Above code adds nodedata and linkdata to exisitng diagram and in this case I reuse the diagram, nodeTemplate and linkTemplate that was created initially

I think I figured out the issue. fromSpot and toSpot for node are set as go.Spot.AllSides so the links were overlapped.

Changing fromSpot to go.Spot.Top has fixed my issue