Cluttered links in TreeLayout after loading data to TreeModel

GoJS
1

Hi! I’m using TreeLayout and TreeModel to display my diagram. I was able to make loading and saving positions by making two way bindings in node locations and setting isInitial and isOngoing to false. However, upon loading the nodeDataArray, the links are cluttered up.

Diagram state to be saved and expected look:

Diagram after loading:

The links will fixed upon invalidating the layout, but that would also cause my nodes to lose the saved location. It seems that the ports is the issue. Any insights on what’s causing this and how to make this work?

Thanks!
Gat

2

TreeLayout sets Link.fromSpot and Link.toSpot on each Link to be appropriate for the direction of the layout. (You can turn off that behavior by setting two properties on the layout.)

But you want to set GraphObject.fromSpot and GraphObject.toSpot on each Node port, so that links will default to connecting at the desired spots. Chances are that your whole Node acts as a single port, so that means setting the spots on your node template.

3

That works perfectly, thank you!

Added the following to my node template:
{ fromSpot: go.Spot.Bottom, toSpot: go.Spot.Top }

4

I realized that this doesn’t work for TreeLayout.AlignmentBus as the toSpot differs on each node (Spot.Default).

My solution was to save the toSpot spots to no avail by biding (new go.Binding(‘toSpot’, ‘toSpot’, go.Spot.parse).makeTwoWay(go.Spot.stringify)). It stringifies it as 0 0 0 0.

result-2.jpg1002×1142 52.2 KB

Is there a way to rebuild just the links as to not reset the location data?

5

EDIT:
Hmmm, Bindings on Links when using TreeModel ought to be using data properties of the child node data. So your TwoWay Binding in your Link template should have worked, assuming your database was faithfully saving and loading those additional node data properties. So I do not know why what you tried did not work.

“0 0 0 0” is the stringified result of Spot.TopLeft.

6

Ah you’re right, I see where I got it wrong. The issue was I was putting the bindings in the NodeTemplate. The solution is to put the TwoWay Bindings in the LinkTemplate. It’s now working perfectly even with just the TreeModel.

As for why it was 0 0 0 0 before… I tried binding it before in the LinkTemplate and saved it but didn’t work, turns out it was being overridden by the GraphObject properties which probably messed up the data.

Again, thank you!