Autolayout difference when using GraphLinksModel

#1

Hi There, First of all thanks for this amazing plugin, GoJS fits our needs perfectly.

I have one question regarding layouting and the different models.

First we loaded our model using:
this.diagram.model = go.Model.fromJson(result);

And we use layout settings:
this.diagram.layout = $(go.LayeredDigraphLayout, {
direction: 90,
layerSpacing: 40,
columnSpacing: 100,
setsPortSpots: false
});

This gave us the layout result we wanted:

result-correct
result-correct.png611×662 14.1 KB

Now I want to add nodes and links programatically, so far I know the best way to do this is using the GraphLinksModel. so I changed the loading of our model to:
this.diagram.model = new go.GraphLinksModel(result.nodeDataArray, result.linkDataArray);

And with the same layout settings I get a totally different layout, is there any way to get back to the old layout result?

This is the new and wrong layout result:

result-wrong
result-wrong.png656×665 14.2 KB

Is there any way to the GraphLinksModel and still get the same result as the first on in this post?
Or is there a way to easily add links, nodes and relink links programitically using the go.Model.fromJson function?

Thanks in advance!

#2

Did you change the order of the node data or the link data in their respective Arrays?

Once you have a model, that you may have created by calling Model.fromJson, you can then call Model.addNodeData and GraphLinksModel.addLinkData. If you are making changes to a model that is already being shown in a diagram, remember to perform a single transaction that surrounds all of the changes.

#3

@walter No, the order is exactly the same, how do I acces the GraphLinksModel.adLlinkData when using Model.from.Json ?

Doens’t seem to exist:
image

#4

Cast it as a GraphLinksModel.

#5

Wow, thanks a lot @walter, this works like a charm. Your support is great and super fast, i’m super sattisfied with that!

Another question, quite off-topic in this one: Is there any possibility to let GoJS set a max links per port. So when I move my nodes around and GoJS changes ports there are always max 1 link per port, so no link in and link out on the same port.

Like here:
image

My wish is that the in takes the top for example, and in and out take left, bottom or right depending on which one is free.

#6

Relevant discussion is at:
https://gojs.net/latest/intro/validation.html#MaxLinksProperties
https://gojs.net/latest/intro/validation.html#GeneralLinkingValidation

#7

@walter Thanks for the links, I tried your suggestions regarding the max links properties, but it doens’t seem t work, link validation only seems to execute when relinking links and not when using autolayout function. Is there any way for the autolayout to do this?

Thanks in advance!

#8

Sorry, I misunderstood the situation that you are interested in. Layout has nothing to do with how many links are connected with a port. Presumably any reasonable layout will not change which ports a link connects.

If your nodes only have one port, you could spread out along each side where links connect at a port by setting fromSpot and toSpot, using “…Side” Spots. https://gojs.net/latest/intro/connectionPoints.html But none of the built-in layouts have options to force links to connect to different sides of a node. You will need to implement that behavior yourself by overriding LayeredDigraphLayout.commitLinks to first call the super method and then adjust each Link.fromSpot and Link.toSpot to meet your needs.