How to align the last smaller node to align horizontally with previous node?

GoJS
1

Trying to get the last node to align with the image or previous node. The last node is smaller height and currently is aligned to the center or the larger previous node.

This is the settings for the tree layout:

  layout: $(go.TreeLayout,
    {
      angle: 0,
      comparer: go.LayoutVertex.smartComparer,
      alignment: go.TreeLayout.AlignmentCenterSubtrees,
      nodeSpacing: 5,
      nodeIndent: 0,
      nodeIndentPastParent: 0,
      layerSpacing: 10,
      layerSpacingParentOverlap: 0,
      sorting: go.TreeLayout.SortingForwards,
      rowSpacing: 10,
      rowIndent: 0,
      setsPortSpot: true,
      setsChildPortSpot: true,
      treeStyle: go.TreeLayout.StyleLayered
    }
  ),

image1

2

You are using:

So it makes sense that the big “Case Field_2” node is centered about its children, which is that small “+” circle.

If you use TreeLayout.AlignmentStart, is it closer to what you want?

If so, you might need to artificially increase the height of those circular “+” nodes so that its circle aligns up with the vertical center of the “Case Field” node’s circle.

Another possibility:
https://gojs.net/extras/StraighterTreeLayout.html

3

This is the result of using AlignmentStart. Can you briefly explain what Straighter Tree Layout is doing?
image2

4

You haven’t artificially increased the height of the small “+” circle node so that it would line up with the other nodes.

StraighterTreeLayout, as defined in that sample, adjusts the position of each parent node so that it lines up better with the center child node. I haven’t tried it in your case to see if it would help or not.

5

Thank you. I guess I have to think of some other way to display the add. Can you direct me to a pattern that I would be able to display the add button as an adornment to the last node? I know I can set visible property of adornment, but that means I have to bind it to the node data and keep up with which node is the last node!

6

Well, one generally has two choices:

  • add the button (or whatever you want) into the visual tree of the Node template
  • add an Adornment that is shown in particular situations – perhaps most commonly in the “Selection” Adornment: Part.selectionAdornmentTemplate

So if you want it to be present in the Node all the time (but perhaps not visible depending on a Binding), then you would put it in the node template.

But if you only want it shown when the Node is selected (but perhaps not visible depending on a Binding), then add it to the selectionAdornmentTemplate.