TreeLayout class

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.

Implemented types

Layout

Available Extensions

Annotations

@JS()
@staticInterop

Constructors

TreeLayout([dynamic init]): factory

Properties

hashCode → int: The hash code for this object.
no setterinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Static Properties

alignmentBottomRightBus ↔ EnumValue: 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.
getter/setter pair
alignmentBus ↔ EnumValue: 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.
getter/setter pair
alignmentBusBranching ↔ EnumValue: 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.
getter/setter pair
alignmentCenterChildren ↔ EnumValue: 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.
getter/setter pair
alignmentCenterSubtrees ↔ EnumValue: The parent is centered at the middle of the range of its child subtrees; this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
getter/setter pair
alignmentEnd ↔ EnumValue: The parent is positioned near the last of its children; this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
getter/setter pair
alignmentStart ↔ EnumValue: The parent is positioned near the first of its children; this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
getter/setter pair
alignmentTopLeftBus ↔ EnumValue: 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.
getter/setter pair
arrangementFixedRoots ↔ EnumValue: Do not move each root node, but position all of their descendants relative to their root; this value is used for TreeLayout#arrangement.
getter/setter pair
arrangementHorizontal ↔ EnumValue: Position each tree in a non-overlapping fashion by increasing X coordinates, starting at the Layout#arrangementOrigin; this value is used for TreeLayout#arrangement.
getter/setter pair
arrangementVertical ↔ EnumValue: Position each tree in a non-overlapping fashion by increasing Y coordinates, starting at the Layout#arrangementOrigin; this value is used for TreeLayout#arrangement.
getter/setter pair
compactionBlock ↔ EnumValue: A simple fitting of subtrees; this value is used for TreeLayout#compaction or TreeLayout#alternateCompaction.
getter/setter pair
compactionNone ↔ EnumValue: 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.
getter/setter pair
layerIndividual ↔ EnumValue: The normal layer style, where each node takes up only the depth that it needs; this value is used for TreeLayout#layerStyle.
getter/setter pair
layerSiblings ↔ EnumValue: 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.
getter/setter pair
layerUniform ↔ EnumValue: 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.
getter/setter pair
pathDefault ↔ EnumValue: This value for TreeLayout#path causes the value of Diagram#isTreePathToChildren to effectively choose either TreeLayout.PathDestination (if true) or TreeLayout.PathSource (if false).
getter/setter pair
pathDestination ↔ EnumValue: The children of a TreeVertex are its LayoutVertex#destinationVertexes, the collection of connected LayoutEdge#toVertexes; this value is used for TreeLayout#path.
getter/setter pair
pathSource ↔ EnumValue: The children of a TreeVertex are its LayoutVertex#sourceVertexes, the collection of connected LayoutEdge#fromVertexes; this value is used for TreeLayout#path.
getter/setter pair
sortingAscending ↔ EnumValue: Lay out each child according to the sort order given by TreeVertex#comparer; this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
getter/setter pair
sortingDescending ↔ EnumValue: Lay out each child in reverse sort order given by TreeVertex#comparer; this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
getter/setter pair
sortingForwards ↔ EnumValue: Lay out each child in the order in which they were found; this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
getter/setter pair
sortingReverse ↔ EnumValue: Lay out each child in reverse order from which they were found; this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
getter/setter pair
styleAlternating ↔ EnumValue: Alternate layers of the tree have different properties, typically including the angle; this value is used for TreeLayout#treeStyle.
getter/setter pair
styleLastParents ↔ EnumValue: 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.
getter/setter pair
styleLayered ↔ EnumValue: 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.
getter/setter pair
styleRootOnly ↔ EnumValue: All of the nodes get the alternate properties, except the root node gets the default properties; this value is used for TreeLayout#treeStyle.
getter/setter pair