How do I modify the layout of only 1 node?

GoJS
1

I have the layout on the left and I’m trying to create the layout on the right:

image
image2297×761 57.7 KB

The only difference is that the first node (Process) needs to have a custom layout (the alternating layout, not the regular one). Can I customize the layout somehow for just that first root node?

Here’s how I’m initializing my diagram:

    this._diagram = GO(go.Diagram, div, {
      layout: GO(go.TreeLayout, {
        alignment: go.TreeLayout.AlignmentStart,
        layerSpacing: 60,
        layerSpacingParentOverlap: 0,
        nodeIndent: 0,
        nodeIndentPastParent: 0,
        portSpot: go.Spot.Default,

        // This is what makes the alternating node links appear correctly
        treeStyle: go.TreeLayout.StyleAlternating,
        alternateAlignment: go.TreeLayout.AlignmentStart,
        alternateLayerSpacing: 40, // Left/right spacing
        alternateLayerSpacingParentOverlap: 1.0,
        alternateNodeIndent: 5,
        alternateNodeIndentPastParent: 1.0,
        alternateNodeSpacing: 20, // Up/down spacing
        alternatePortSpot: new go.Spot(0.001, 1, 15, 0),

        // Make sure the nodes are in order
        sorting: go.TreeLayout.SortingAscending,
        comparer: (v1, v2) => (v1.node.data.order - v2.node.data.order),
      }),
      "undoManager.isEnabled": true,
      "draggingTool.dragsTree": true,
      padding: GO(go.Margin, go.Margin.parse("50, 20, 50, 20")),
    });

Any ideas?

2

One possibility is, after the regular layout, to move that root node and adjust the fromSpot and toSpot so that the connected links route the same way as they do elsewhere in your tree.

You could do that in a “LayoutCompleted” DiagramEvent listener. Maybe something like:

      $(go.Diagram, . . .,
          {
            layout: $(go.TreeLayout, {
              . . .
            }),
            "LayoutCompleted": function(e) {
              e.diagram.findTreeRoots().each(function(root) {
                var p = root.position;
                // adjust these numbers for your nodes, or calculate based on first child's position
                root.position = new go.Point(p.x + 70, p.y - 40);
                root.findLinksConnected().each(function(link) {
                  link.fromSpot = e.diagram.layout.alternatePortSpot;
                });
              });
            }
          });
3

Thank you! I ended up going with slightly different x & y co-ordinates but this mostly works.

My last issue is that now the diagram is constantly trying to center itself rather than staying on the left side of the screen when I expand / contract nodes. I tried adding the alignDocument() command below but it made it worse, scrolling the view port up and down so that I can’t see what I just expanded. Any suggestions?

      // Make the root node (Process) links work like the alternate ones
      "LayoutCompleted": e => {
        e.diagram.findTreeRoots().each(root => {
          let p = root.position;
          // adjust these numbers for your nodes, or calculate based on first child's position
          root.position = new go.Point(p.x + 220, p.y - 40);
          root.findLinksConnected().each(function(link) {
            link.fromSpot = e.diagram.layout.alternatePortSpot;
          });
        });
        e.diagram.alignDocument(go.Spot.Left, go.Spot.Left); // I added this, but it didn't help
      },
4

What properties have you set on your Diagram that relate to where it shows content?

5

Thanks! I hadn’t set any at all, so this was an easy fix:

let diagram = GO(go.Diagram, div, {
  ...
  contentAlignment: go.Spot.Left,
});