Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TreeLayout

Hierarchy

This layout positions nodes of a tree-structured graph in layers (rows or columns).

For a discussion and examples of the most commonly used properties, see Trees page in the Introduction. If you want to experiment interactively with most of the properties, try the Tree Layout sample. See samples that make use of TreeLayout in the samples index.

This layout makes use of a LayoutNetwork of TreeVertexes and TreeEdges that normally correspond to the Nodes and Links of the Diagram.

The most commonly set properties for controlling the results of a TreeLayout are:

  • angle: the direction in which the tree grows, from parent to child; the default value of zero means that the tree grows towards the right, with the children of a node arranged in a layer that is a column. An angle of 0 or 180 means that children form vertical layers -- breadth is height and depth is width; an angle of 90 or 270 means that children form horizontal layers -- breadth is width and depth is height.
  • layerSpacing: the distance between layers -- between a parent node and its child nodes.
  • nodeSpacing: the distance between nodes within a layer -- between siblings.
  • alignment: the relative position of a parent node with its children.
  • sorting and comparer: specify the order of the immediate children of a parent node.
  • compaction: whether subtrees should be packed closer together if there is room.
  • layerStyle: whether the children of one node are aligned with the children of a sibling node.
  • setsPortSpot, portSpot, setsChildPortSpot, and childPortSpot: this controls whether to set the Link.fromSpot and Link.toSpot to be sensible for the angle.
  • nodeIndent and nodeIndentPastParent: if the alignment is TreeLayout.AlignmentStart or TreeLayout.AlignmentEnd, control how much extra space the first child is given when positioned.
  • breadthLimit, rowSpacing: try to limit the total breadth of a subtree to a certain distance; when there are too many children or when they are too broad, this puts children into additional rows (or columns, depending on the angle) thereby limiting the breadth while increasing the depth of the tree.

When you set one of the TreeLayout properties listed above, that property normally applies to all of the nodes in the tree. What if you want alignment to be TreeLayout.AlignmentCenterChildren for the root node but TreeLayout.AlignmentBus for the other nodes in the tree? Or what if you want want layerSpacing to be 50 for all layers except for the layer separating "leaf" nodes from their parent?

One common solution is to set treeStyle. For the former scenario, you could set treeStyle to TreeLayout.StyleRootOnly; the value of alignment would only apply to the root node. For the latter scenario, you could set it to TreeLayout.StyleLastParents; the value of layerSpacing would apply to all nodes except those that have children but that do not have grandchildren. How do you then set the alignment or layerSpacing for the other nodes? By setting the TreeLayout properties whose names start with "alternate...". In these cases that would mean setting alternateAlignment or alternateLayerSpacing.

These TreeLayout properties actually apply to the TreeVertex that the TreeLayout uses to represent a Node within the LayoutNetwork. All of those TreeLayout properties are actually stored in rootDefaults; all of the "alternate..." properties are stored in alternateDefaults. Depending on the value of treeStyle, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults. In the default case where treeStyle is TreeLayout.StyleLayered, the alternateDefaults are ignored. (Note that treeStyle, and a few other properties such as path and arrangement, apply to the whole layout, not to an individual node/vertex.)

The use of treeStyle and "alternate..." TreeLayout properties will cover a lot of common needs for tree layout customization. However, there may be times when that is not enough. Imagine a situation where you want a special TreeVertex property value for a particular Node. The solution is to override assignTreeVertexValues, where you can examine the given TreeVertex, including its corresponding LayoutVertex.node, to decide what TreeVertex property values should apply.

Index

Inherited Members

Constructors

Properties

  • Gets or sets the alternate direction for tree growth.

    The default value is 0; the value must be one of: 0, 90, 180, 270.

    These values are in degrees, where 0 is along the positive X axis, and where 90 is along the positive Y axis. This sets the alternateDefaults' property of the same name.

  • Gets or sets an alternate limit on how broad a tree should be.

    A value of zero (the default) means there is no limit; a positive value specifies a limit. The default value is zero.

    This property is just a suggested constraint on how broadly the tree will be laid out. When there isn't enough breadth for all of the children of a node, the children are placed in as many rows as needed to try to stay within the given breadth limit. If the value is too small, since this layout algorithm does not modify the size or shape of any node, the nodes will just be laid out in a line, one per row, and the breadth is determined by the broadest node. The distance between rows is specified by alternateRowSpacing. To make room for the links that go around earlier rows to get to later rows, when the alignment is not a "center" alignment, the alternateRowIndent property specifies that space at the start of each row. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate spot that children nodes' ports get as their ToSpot The default value is Spot.Default.

    A value of Spot.Default will cause the TreeLayout to assign a ToSpot based on the parent node's TreeVertex.angle.

    If the value is other than NoSpot, it is just assigned. When path is PathSource, the port's FromSpot is set instead of the ToSpot. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate comparison function used for sorting the immediate children of a vertex.

    The default comparer compares the LayoutVertex.node Text values.

    This sets the alternateDefaults' property of the same name. Whether this comparison function is used is determined by the value of alternateSorting.

  • Gets or sets the alternate distance between a parent node and its children.

    The default value is 50.

    This is the distance between a parent node and its first row of children, in case there are multiple rows of its children. The alternateNodeSpacing property determines the distance between siblings. The alternateRowSpacing property determines the distance between rows of children. Negative values may cause children to overlap with the parent. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.

    The default value is 0.0 -- there is overlap between layers only if alternateLayerSpacing is negative. A value of 1.0 and a zero alternateLayerSpacing will cause child nodes to completely overlap the parent.

    A value greater than zero may still cause overlap between layers, unless the value of alternateLayerSpacing is large enough. A value of zero might still allow overlap between layers, if alternateLayerSpacing is negative. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate indentation of the first child.

    The default value is zero. The value should be non-negative.

    This property is only sensible when the alignment is AlignmentStart or AlignmentEnd. Having a positive value is useful if you want to reserve space at the start of the row of children for some reason. For example, if you want to pretend the parent node is infinitely deep, you can set this to be the breadth of the parent node. This sets the alternateDefaults' property of the same name.

  • Gets or sets the fraction of this node's breadth is added to alternateNodeIndent to determine any spacing at the start of the children.

    The default value is 0.0 -- the only indentation is specified by alternateNodeIndent. When the value is 1.0, the children will be indented past the breadth of the parent node.

    This property is only sensible when the alignment is AlignmentStart or AlignmentEnd.

  • Gets or sets the alternate distance between child nodes.

    The default value is 20.

    A negative value causes sibling nodes to overlap. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate spot that this node's port gets as its FromSpot.

    The default value is Spot.Default.

    A value of Spot.Default will cause the TreeLayout to assign a FromSpot based on the parent node's TreeVertex.angle. If the value is other than NoSpot, it is just assigned. When path is PathSource, the port's ToSpot is set instead of the FromSpot. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate indentation of the first child of each row, if the alignment is not a "Center" alignment.

    The default value is 10. The value should be non-negative.

    This is used to leave room for the links that connect a parent node with the child nodes that are in additional rows. This sets the alternateDefaults' property of the same name.

  • Gets or sets the alternate distance between rows of children.

    The default value is 25.

    This property is only used when there is more than one row of children for a given parent node. The alternateLayerSpacing property determines the distance between the parent node and its first row of child nodes. This sets the alternateDefaults' property of the same name.

  • Gets or sets whether the TreeLayout should set the ToSpot for each child node port.

    The default value is true -- this may modify the spot of the ports of the children nodes, if the node has only a single port.

    The spot used depends on the value of alternateChildPortSpot. This sets the alternateDefaults' property of the same name.

  • Gets or sets whether the TreeLayout should set the FromSpot for this parent node port.

    The default value is true -- this may modify the spot of the port of this node, the parent, if the node has only a single port.

    The spot used depends on the value of alternatePortSpot. This sets the alternateDefaults' property of the same name.

  • Gets or sets the default direction for tree growth.

    The default value is 0; the value must be one of: 0, 90, 180, 270.

    These values are in degrees, where 0 is along the positive X axis, and where 90 is along the positive Y axis.

    This sets the rootDefaults' property of the same name.

  • Gets or sets a limit on how broad a tree should be.

    A value of zero (the default) means there is no limit; a positive value specifies a limit. The default value is zero.

    This property is just a suggested constraint on how broadly the tree will be laid out. When there isn't enough breadth for all of the children of a node, the children are placed in as many rows as needed to try to stay within the given breadth limit. If the value is too small, since this layout algorithm does not modify the size or shape of any node, the nodes will just be laid out in a line, one per row, and the breadth is determined by the broadest node. The distance between rows is specified by rowSpacing. To make room for the links that go around earlier rows to get to later rows, when the alignment is not a "center" alignment, the rowIndent property specifies that space at the start of each row.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the spot that children nodes' ports get as their ToSpot.

    The default value is Spot.Default.

    A value of Spot.Default will cause the TreeLayout to assign a ToSpot based on the parent node's TreeVertex.angle. If the value is other than NoSpot, it is just assigned. When path is PathSource, the port's FromSpot is set instead of the ToSpot.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the distance between a node and its comments.

    The default value is 20.

    This is used by addComments and layoutComments.

    This sets the rootDefaults' property of the same name.

  • Gets or sets whether this layout should find all Nodes whose category is "Comment" and whose anchors are nodes represented in the network, and increase the size of the corresponding TreeVertex to make room for the comment nodes. The default value is true.

    since

    1.3

  • Gets or sets the default comparison function used for sorting the immediate children of a vertex.

    The default comparer compares the LayoutVertex.node Text values.

    This sets the rootDefaults' property of the same name. Whether this comparison function is used is determined by the value of sorting.

      $(go.TreeLayout,
    {
    sorting: go.TreeLayout.SortingAscending,
    comparer: (va, vb) => {
    var da = va.node.data;
    var db = vb.node.data;
    if (da.someProperty < db.someProperty) return -1;
    if (da.someProperty > db.someProperty) return 1;
    return 0;
    }
    }
    )
  • Gets or sets the distance between a parent node and its children.

    This is the distance between a parent node and the layer of its children. Negative values may cause children to overlap with the parent. The default value is 50.

    The nodeSpacing property determines the distance between siblings. The rowSpacing property determines the distance between multiple rows or columns of children.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.

    The default value is 0.0 -- there is overlap between layers only if layerSpacing is negative. A value of 1.0 and a zero layerSpacing will cause child nodes to completely overlap the parent.

    A value greater than zero may still cause overlap between layers, unless the value of layerSpacing is large enough. A value of zero might still allow overlap between layers, if layerSpacing is negative.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the default indentation of the first child.

    The default value is zero. The value should be non-negative.

    This property is only sensible when the alignment is AlignmentStart or AlignmentEnd. Having a positive value is useful if you want to reserve space at the start of the row of children for some reason. For example, if you want to pretend the parent node is infinitely deep, you can set this to be the breadth of the parent node.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the fraction of this node's breadth is added to nodeIndent to determine any spacing at the start of the children.

    The default value is 0.0 -- the only indentation is specified by nodeIndent. When the value is 1.0, the children will be indented past the breadth of the parent node.

    This property is only sensible when the alignment is AlignmentStart or AlignmentEnd.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the distance between child nodes.

    This is the distance between sibling nodes. A negative value causes sibling nodes to overlap. The default value is 20.

    The layerSpacing property determines the distance between a parent node and the layer of its children.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the spot that this node's port gets as its FromSpot.

    The default value is Spot.Default.

    A value of Spot.Default will cause the TreeLayout to assign a FromSpot based on the parent node's TreeVertex.angle. If the value is other than NoSpot, it is just assigned. When path is PathSource, the port's ToSpot is set instead of the FromSpot.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the collection of root vertexes.

    Initially this will be an empty Set.

    If the path is either PathDestination or PathSource, this layout can easily determine all of the tree roots by searching the whole network. Otherwise, you should explicitly initialize this collection with one or more TreeVertexes.

  • Gets or sets the default indentation of the first child of each row, if the alignment is not a "Center" alignment.

    The default value is 10. The value should be non-negative.

    This is used to leave room for the links that connect a parent node with the child nodes that are in additional rows.

    This sets the rootDefaults' property of the same name.

  • Gets or sets the distance between rows or columns of a parent node's immediate children.

    The default value is 25.

    This property is only used when there is more than one row of children for a given parent node. The nodeSpacing property determines the distance between siblings. The layerSpacing property determines the distance between the parent node and its first row or column of child nodes.

    This sets the rootDefaults' property of the same name.

  • Gets or sets whether the TreeLayout should set the ToSpot for each child node port.

    The default value is true -- this may modify the spot of the ports of the children nodes, if the node has only a single port.

    The spot used depends on the value of childPortSpot.

    This sets the rootDefaults' property of the same name.

  • Gets or sets whether the TreeLayout should set the FromSpot for this parent node port.

    The default value is true -- this may modify the spot of the port of this node, the parent, if the node has only a single port.

    The spot used depends on the value of portSpot.

    This sets the rootDefaults' property of the same name.

Methods

  • Find any associated objects to be positioned along with the LayoutVertex.node.

    This looks for visible Node's whose category is "Comment" and that refer to the tree vertex's Node. This method is only called when comments is true.

    You may want to override this method in order to customize how any associated objects are found and how the node's LayoutVertex.bounds are set to reserve space for those associated objects. This method should not walk the tree, since it is called for each TreeVertex in an indeterminate order. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    since

    1.2

    Parameters

    Returns void

  • arrangeTrees(): void
  • Position each separate tree.

    This is called after each tree has been laid out and thus each subtree bounds are known. The arrangement and arrangementSpacing and Layout.arrangementOrigin properties affect this method's behavior. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    since

    1.2

    Returns void

  • Assign final property values for a TreeVertex.

    This method is commonly overridden in order to provide tree layout properties for particular nodes. This method is called after values have been inherited from other TreeVertexes, so you can examine and modify the values of related tree nodes. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    However, when TreeVertex.alignment is TreeLayout.AlignmentBusBranching, changing the TreeVertex.sorting or TreeVertex.comparer properties in this method will have no effect.

    This method should not walk the tree, since it is called for each TreeVertex in a depth-first manner starting at a root.

    Here is an example where the children are squeezed together if there are many of them, but only on nodes that have no grandchildren. This makes use of two TreeVertex properties that are automatically computed for you, TreeVertex.childrenCount and TreeVertex.descendantCount.

      function SqueezingTreeLayout() {
    go.TreeLayout.call(this);
    }
    go.Diagram.inherit(SqueezingTreeLayout, go.TreeLayout);

    public assignTreeVertexValues(v) {
    if (v.childrenCount > 6 && v.childrenCount === v.descendantCount) {
    v.alignment = go.TreeLayout.AlignmentBottomRightBus;
    v.layerSpacing = 10;
    v.rowSpacing = 0;
    }
    }

    If you need to assign TreeVertex values and also have them be "inherited" by the child vertexes, you should override initializeTreeVertexValues instead. However at the time that method is called, the computed properties of TreeVertex will not be available.

    since

    1.1

    Parameters

    Returns void

  • commitLayers(layerRects: Rect[], offset: Point): void
  • This overridable method is called by commitLayout if layerStyle is LayerUniform to support custom arrangement of bands or labels across each layout layer. By default this method does nothing.

    The coordinates used in the resulting Rects may need to be offset by the Layout.arrangementOrigin and/or by the arrangement of subtrees done by arrangeTrees.

    since

    1.4

    Parameters

    • layerRects: Rect[]

      an Array of Rects with the bounds of each of the "layers"

    • offset: Point

      the position of the top-left corner of the banded area relative to the coordinates given by the layerRects

    Returns void

  • commitLayout(): void
  • Set the fromSpot and toSpot on each Link, position each Node according to the vertex position, and then position/route the Links.

    This calls the commitNodes and commitLinks methods, the latter only if isRouting is true. You should not call this method -- it is a "protected virtual" method. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    Returns void

  • commitLinks(): void
  • commitNodes(): void
  • Commit the position of all nodes.

    This is called by commitLayout. See also commitLinks. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    Returns void

  • Perform the tree layout.

    If there is no Layout.network, this calls makeNetwork to create a LayoutNetwork from the given collection of Parts.

    If there are no TreeVertex roots specified, this finds all roots in the Layout.network.

    This initializes all of the TreeVertexes and TreeEdges, calling initializeTreeVertexValues on each vertex, supporting inheritance of vertex values. Then it calls assignTreeVertexValues on each one, to allow for node/vertex-specific customizations. Next it sorts all of the child vertexes for each parent vertex, if needed.

    This also calls addComments of each vertex, in order to find any comment nodes associated with each vertex, so that they can be accommodated by the layout.

    This then actually does the "layout" of the vertexes and optionally the routing of the edges of each tree in the network. To deal with multiple roots/trees this also calls arrangeTrees to position each separate tree relative to each other.

    Finally this calls Layout.updateParts to commit the Node positions from the vertex positions and the Link routes from the edges. Layout.updateParts calls commitLayout within a transaction.

    Parameters

    Returns void

  • Position and TreeVertex.comments around the vertex.

    This method should not walk the tree, since it is called for each TreeVertex in an indeterminate order. Please read the Introduction page on Extensions for how to override methods and how to call this base method.

    since

    1.2

    Parameters

    Returns void

Constants

The children are positioned in a bus, only on the bottom or right side of the parent; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

A bus does not take TreeVertex.breadthLimit into account.

The children are positioned in a bus on both sides of an "aisle" where the links to them go, with the last odd child (if any) placed at the end of the aisle in the middle; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

The children, if they are themselves parents, continue at the same inherited angle; use TreeLayout.AlignmentBusBranching if you want grandchildren to proceed growing in the different angle as determined by the side.

A bus does not take TreeVertex.breadthLimit into account.

Like TreeLayout.AlignmentBus with the children arranged on both sides of an "aisle" with any last odd child placed at the end of the aisle, but the children get an TreeVertex.angle that depends on which side of the aisle they were placed; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

This only works well when the TreeLayout.treeStyle is TreeLayout.StyleLayered.

A bus does not take TreeVertex.breadthLimit into account.

The parent is centered at the middle of the range of its immediate child nodes; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

When there is a breadth limit that causes there to be multiple rows, the links that extend from the parent to those children in rows past the first one may cross over the nodes that are in earlier rows.

The parent is centered at the middle of the range of its child subtrees; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

When there is a breadth limit that causes there to be multiple rows, the links that extend from the parent to those children in rows past the first one may cross over the nodes that are in earlier rows.

The parent is positioned near the last of its children; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

The parent is positioned near the first of its children; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

The children are positioned in a bus, only on the top or left side of the parent; this value is used for TreeLayout.alignment or TreeLayout.alternateAlignment.

A bus does not take TreeVertex.breadthLimit into account.

Do not move each root node, but position all of their descendants relative to their root; this value is used for TreeLayout.arrangement.

Position each tree in a non-overlapping fashion by increasing X coordinates, starting at the Layout.arrangementOrigin; this value is used for TreeLayout.arrangement.

Position each tree in a non-overlapping fashion by increasing Y coordinates, starting at the Layout.arrangementOrigin; this value is used for TreeLayout.arrangement.

A simple fitting of subtrees; this value is used for TreeLayout.compaction or TreeLayout.alternateCompaction.

This mode produces more compact trees -- often nicer looking too; Nodes will not overlap each other, unless you have negative values for some of the spacing properties; However it is possible when the links are orthogonally styled that occasionally the subtrees will be placed so close together that some links may overlap the links or even the nodes of other subtrees.

Only simple placement of children next to each other, as determined by their subtree breadth; this value is used for TreeLayout.compaction or TreeLayout.alternateCompaction.

For any node, there will not be another node at any depth occupying the same breadth position, unless there are multiple rows; In other words, if there is no breadth limit resulting in multiple rows, with this compaction mode it is as if every node were infinitely deep.

The normal layer style, where each node takes up only the depth that it needs; this value is used for TreeLayout.layerStyle.

since

1.4

A layer style where all of the children of a parent node take up the same amount of depth -- this typically causes all cousins to be aligned; this value is used for TreeLayout.layerStyle.

since

1.4

A layer style where all nodes with the same TreeVertex.level throughout the tree take up the same amount of depth -- if the TreeVertex.angle is the same for all nodes, this will result in all nodes in the same layer to be aligned; this value is used for TreeLayout.layerStyle.

since

1.4

This value for TreeLayout.path causes the value of Diagram.isTreePathToChildren to effectively choose either TreeLayout.PathDestination (if true) or TreeLayout.PathSource (if false).

The children of a TreeVertex are its LayoutVertex.destinationVertexes, the collection of connected LayoutEdge.toVertexes; this value is used for TreeLayout.path.

The tree roots are those TreeVertexes that have zero source edges.

The children of a TreeVertex are its LayoutVertex.sourceVertexes, the collection of connected LayoutEdge.fromVertexes; this value is used for TreeLayout.path.

The tree roots are those TreeVertexes that have zero destination edges.

Lay out each child according to the sort order given by TreeVertex.comparer; this value is used for TreeLayout.sorting or TreeLayout.alternateSorting.

Lay out each child in reverse sort order given by TreeVertex.comparer; this value is used for TreeLayout.sorting or TreeLayout.alternateSorting.

Lay out each child in the order in which they were found; this value is used for TreeLayout.sorting or TreeLayout.alternateSorting.

Lay out each child in reverse order from which they were found; this value is used for TreeLayout.sorting or TreeLayout.alternateSorting.

Alternate layers of the tree have different properties, typically including the angle; this value is used for TreeLayout.treeStyle.

Each TreeVertex gets its properties from its grandparent node; The root nodes get their defaults from TreeLayout.rootDefaults.

The immediate children of root nodes get their defaults from TreeLayout.alternateDefaults.

Depending on the properties used, it is possible for some link routes to cross over nodes.

Just like the standard layered tree style, except that the nodes with children but no grandchildren have alternate properties; this value is used for TreeLayout.treeStyle.

Each TreeVertex gets its properties from its parent node; However, for those nodes whose TreeVertex.maxGenerationCount is 1, in other words when it has children but no grandchildren, the properties are copied from TreeLayout.alternateDefaults.

If the tree only has two levels, the root node gets the TreeLayout.rootDefaults.

The normal tree style, where all of the children of each TreeVertex are lined up horizontally or vertically; this value is used for TreeLayout.treeStyle.

Each TreeVertex gets its properties from its parent node; TreeLayout.rootDefaults is used for all default TreeVertex property values; TreeLayout.alternateDefaults is ignored.

All of the nodes get the alternate properties, except the root node gets the default properties; this value is used for TreeLayout.treeStyle.

The root node gets the TreeLayout.rootDefaults properties, the root node's children get the TreeLayout.alternateDefaults properties, and all the rest of the TreeVertexes get their properties from their parent node.