Group auto layout member nodes

GoJS
1

We have implemented (virtualised) diagram and want to auto-layout the diagram including the groups. The group layout is defined as below:

go.GraphObject.make(go.LayeredDigraphLayout, {
      direction: 0,
      layerSpacing: 40,
      isInitial: false,
      isOngoing: false,
      columnSpacing: 30
    });

With this layout we get this result:
Actual

If we change the layout properties isInitial & isOngoing to true, we get this result:
Expected

That is how we want it to look (properly aligned). But the problem here is the group’s nodes keep on changing its position as we scroll through the diagram. i.e. the auto layout process happens every time we scroll. We want to perform auto layout only once when the diagram loads initially. Is there any way to achieve it?

2

Have you virtualized your layout, so that the full model data includes all of the node locations in the data, including the groups?

Does your virtualization code (i.e. “ViewportBoundsChanged” listener) make sure to load all of the member nodes of each group whose bounds intersects with the viewport? If it loads member nodes incrementally as the user scrolls, that means nodes are incrementally being added to the group. Normally that invalidates the Group.layout, although setting Layout.isOngoing to false will prevent that invalidation.

If so, I believe you don’t need to enable the Group.layout, neither Layout.isInitial nor Layout.isOngoing.

3

Yes, the full model data includes location in the data. The location data property is two-way bound in the template.

Yes, the “ViewportBoundsChanged” listener incrementally adds nodes to the group as the users scrolls.

I tried disabling the Group.layout by setting it to null in the group template but that didn’t help.

What could be the reason for member nodes being added to a position different from what is present in the location data property?

4

That’s very odd. How is your code different from what is used in the Virtualized sample? Virtualized Sample with no Layout This has a lot of nodes and links but no layouts at all. Yes, it’s probably good to set Group.layout to null. You should not need to set Diagram.layout either, assuming all nodes have their desired locations in the model data.

5

I found the issue. It was due to incorrect location values generated through a temporary diagram. We have used a temporary diagram for auto layouting the whole model and used the location values provided by the model. The temporary diagram was missing diagram.div property when the diagram.layoutDiagram(true) was called which resulted in incorrect location values for nodes.

Thanks for the help!