Layered Digraph Layout has very large gaps between nodes

GoJS
#1

Hi there! I have a Layered Digraph Layout with several layers of group nesting. Everything is working fine except that in some layouts, when all subgroups are expanded, some of the nodes are set very far apart from one another with very long links. I have tweaked various layout settings found in LayeredDigraphLayout but nothing seems to work.

Here is a screen shot of what I am seeing:

Screen Shot 2021-07-27 at 09.33.49
Screen Shot 2021-07-27 at 09.33.49522×1296 23.5 KB

Any suggestions would be greatly appreciated!

Thanks

#2

How are your Diagram.layout and Group.layout defined?

#3

Here is my diagram layout:

let myDiagram =
  $(go.Diagram,
    {
      layout: $(go.LayeredDigraphLayout,
        {
          // for layout options, see https://gojs.net/latest/api/symbols/LayeredDigraphLayout.html
          layerSpacing: 5,
          columnSpacing: 5,
          direction: 90
        }),
      initialAutoScale: go.Diagram.UniformToFill,
      allowCopy: false,
      allowDelete: false,
      // feedback that dropping in the background is not allowed
      mouseDragOver: function (e) {
        e.diagram.currentCursor = "not-allowed";
      },
      "undoManager.isEnabled": true,
      maxSelectionCount: 1, // no more than 1 element can be selected at a time
      contentAlignment: go.Spot.Center,
    });

And here is my group:

  return $(go.Group, "Auto",
    { // define the group's internal layout
      layout: $(go.LayeredDigraphLayout,
        {
          layerSpacing: 30,
          columnSpacing: 30,
          direction: 90
        }),
      toolTip: nodeToolTip,

      // the group begins unexpanded;
      // upon expansion, a DiagramWrapper Listener will generate contents for the group
      isSubGraphExpanded: false,

      // when a group is expanded, if it contains no parts, generate a subGraph inside of it
      subGraphExpandedChanged: function(group) {
        // When group is expanded, hide the original group node; restore it upon collapse
        var shp;
        if (group.isSubGraphExpanded){
          shp = group.findObject(NodeConstants.NODE_SHAPE);
          if (shp != null) {
            shp.opacity = 0;
          }
          shp = group.findObject(NodeConstants.NODE_TEXT);
          if (shp != null) {
            shp.opacity = 0;
          }
        } else {
          shp = group.findObject(NodeConstants.NODE_SHAPE);
          if (shp != null) {
            shp.opacity = 1;
          }
          shp = group.findObject(NodeConstants.NODE_TEXT);
          if (shp != null) {
            shp.opacity = 1;
          }
          group.opacity = 1;
        }
        myDiagram.zoomToFit();
      }
    },
#4

That doesn’t look too bad. The only obvious problem is that you are calling Diagram.zoomToFit repeatedly as groups are expanded. It would be better to put that in a “SubGraphExpanded” DiagramEvent listener, which will be called only once after one (or more) groups are expanded.

So I cannot explain the problem. How can I reproduce the problem?

#5

Thanks, I removed the call to zoomToFit. I tried to export the diagram to JSON for you to try on your own, but that throws a

Maximum call stack size exceeded

error. I forgot to mention that I am using GoJS-react.

#6

You have circular references in your model data? That’s unusual and apparently not helpful.

I assume your group template includes a Placeholder, yes?

What happens if you do not set Group.isSubGraphExpanded to false in your template?