initialAutoScale not working on TreeLayout

GoJS
1

I’ve got a TreeLayout diagram set to initialAutoScale: go.Diagram.Uniform, but the diagram loads larger than the user’s browser window. If the browser is very wide, the diagram loads within the viewport but is located at the top right, instead of the specified TopCenter.

This diagram does make use of nodes with collapsed trees, which is the only thing I can identify that might be causing the issue. Any ideas?

Screen Shot 2016-01-19 at 6.12.18 PM.png1218×553 77.9 KB 

myDiagram =
  $(go.Diagram, "myDiagram", // the ID of the DIV HTML element
    {
      initialContentAlignment: go.Spot.TopCenter, // center Diagram contents
      initialAutoScale: go.Diagram.Uniform, // zoom to fit
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, //TreeLayout.AlignmentCenterChildren. specify a Diagram.layout that arranges trees
      {
        angle: 90,
        nodeSpacing: 40,
        layerSpacing: 125
      }),
      "commandHandler.archetypeGroupData": { isGroup: true, category: "OfNodes" },
      "undoManager.isEnabled": true,
});
2

Would you mind trying to make a reproducible case somewhere? I’m thinking this might be a div/CSS issue, but I’m not very sure.

What happens if you point to the beta in your <script> reference? Does the problem still exist?

http://gojs.net/beta/release/go.js

3

Thanks for responding, Simon. I tried swapping go.js with the beta release and was still seeing the same issue.

You can check out a working example of this diagram at Malnutrition | IRC Theory of Change.

After a bit more digging, I think the issue has to do with this code below, which I’m not running until after initial layout has completed, and which expands the tree by 2 levels:

  // Upon initial load, expand trees for first two levels
  myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
    e.diagram.findTreeRoots().each(function(r) {
      r.expandTree(2);
    });
  });

How can I call this / set up the expansion level before initialAutoScale so the diagram scales to fit the window properly?

4

Thanks for the case, I’ll look into this.

One thing I see:

wrap: go.TextBlock.Wrap,

This is not a valid value for wrap, and it should output an error or warning in the console if you use go-debug.js

(That is most likely unrelated to the problem at hand, though.)

5

Also, be careful not to use minified names for properties, as they will most likely change between versions of GoJS.

                var outcomeLevel = node.sh.outcome;

should probably be

                var outcomeLevel = node.data.outcome;

I think. There are a lot of these in the script and I suggest changing all of them.

6

Got it, thanks for these tips. This is a rough prototype and your advice will be helpful when we begin the official build.

I changed the wrap line to:

wrap: go.TextBlock.WrapFit

Still seeing the issue with initialAutoScale. Any ideas about that?

7

Ah I see the problem, its this:

  load();

  // Upon initial load, expand trees for first two levels
  myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
    e.diagram.findTreeRoots().each(function(r) {
      r.expandTree(2);
    });
  });

You don’t want to expand the tree after the layout is finished, you want to do it before that, immediately after loading your model. So instead, replace the above with this simplification:

  load();
  // Upon initial load, expand trees for first two levels
  myDiagram.findTreeRoots().each(function(r) {
    r.expandTree(2);
  });

That should fix it.

(Why it moves to the right after expansion is another issue, and there must be something else in the code doing that)

8

Awesome, thank you so much! This makes sense.