gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
143 lines • 189 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>TreeLayout | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class TreeLayout </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a><ul class="tsd-hierarchy"><li><span class="target">TreeLayout</span><ul class="tsd-hierarchy"><li><a href="FishboneLayout.html" class="tsd-signature-type" data-tsd-kind="Class">FishboneLayout</a></li><li><a href="ParallelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">ParallelLayout</a></li></ul></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>This layout positions nodes of a tree-structured graph in layers (rows or columns).</p>
<p class="boxrun">
For a discussion and examples of the most commonly used properties, see <a href="../../intro/trees.html">Trees</a> page in the Introduction.
If you want to experiment interactively with most of the properties, try the <a href="../../samples/tLayout.html">Tree Layout</a> sample.
See samples that make use of TreeLayout in the <a href="../../samples/index.html#treelayout">samples index</a>.<div><p>This layout makes use of a <a href="LayoutNetwork.html">LayoutNetwork</a> of
<a href="TreeVertex.html">TreeVertex</a>es and <a href="TreeEdge.html">TreeEdge</a>s that normally
correspond to the <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s of the <a href="Diagram.html">Diagram</a>.</p>
<p>The most commonly set properties for controlling the results of a TreeLayout are:</p>
<ul>
<li><a href="TreeLayout.html#angle">angle</a>: 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.</li>
<li><a href="TreeLayout.html#layerSpacing">layerSpacing</a>: the distance between layers -- between a parent node and its child nodes.</li>
<li><a href="TreeLayout.html#nodeSpacing">nodeSpacing</a>: the distance between nodes within a layer -- between siblings.</li>
<li><a href="TreeLayout.html#alignment">alignment</a>: the relative position of a parent node with its children.</li>
<li><a href="TreeLayout.html#sorting">sorting</a> and <a href="TreeLayout.html#comparer">comparer</a>: specify the order of the immediate children of a parent node.</li>
<li><a href="TreeLayout.html#compaction">compaction</a>: whether subtrees should be packed closer together if there is room.</li>
<li><a href="TreeLayout.html#layerStyle">layerStyle</a>: whether the children of one node are aligned with the children of a sibling node.</li>
<li><a href="TreeLayout.html#setsPortSpot">setsPortSpot</a>, <a href="TreeLayout.html#portSpot">portSpot</a>, <a href="TreeLayout.html#setsChildPortSpot">setsChildPortSpot</a>, and <a href="TreeLayout.html#childPortSpot">childPortSpot</a>: this controls whether to set the <a href="Link.html#fromSpot">Link.fromSpot</a> and
<a href="Link.html#toSpot">Link.toSpot</a> to be sensible for the <a href="TreeLayout.html#angle">angle</a>.</li>
<li><a href="TreeLayout.html#nodeIndent">nodeIndent</a> and <a href="TreeLayout.html#nodeIndentPastParent">nodeIndentPastParent</a>: if the <a href="TreeLayout.html#alignment">alignment</a> is <a href="TreeLayout.html#static-AlignmentStart">TreeLayout.AlignmentStart</a> or <a href="TreeLayout.html#static-AlignmentEnd">TreeLayout.AlignmentEnd</a>,
control how much extra space the first child is given when positioned.</li>
<li><a href="TreeLayout.html#breadthLimit">breadthLimit</a>, <a href="TreeLayout.html#rowSpacing">rowSpacing</a>: 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.</li>
</ul>
<p>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 <a href="TreeLayout.html#alignment">alignment</a> to be <a href="TreeLayout.html#static-AlignmentCenterChildren">TreeLayout.AlignmentCenterChildren</a> for the root node but <a href="TreeLayout.html#static-AlignmentBus">TreeLayout.AlignmentBus</a> for the other nodes in the tree?
Or what if you want want <a href="TreeLayout.html#layerSpacing">layerSpacing</a> to be 50 for all layers except for the layer separating "leaf" nodes from their parent?</p>
<p>One common solution is to set <a href="TreeLayout.html#treeStyle">treeStyle</a>.
For the former scenario, you could set <a href="TreeLayout.html#treeStyle">treeStyle</a> to <a href="TreeLayout.html#static-StyleRootOnly">TreeLayout.StyleRootOnly</a>; the value of <a href="TreeLayout.html#alignment">alignment</a> would only apply to the root node.
For the latter scenario, you could set it to <a href="TreeLayout.html#static-StyleLastParents">TreeLayout.StyleLastParents</a>;
the value of <a href="TreeLayout.html#layerSpacing">layerSpacing</a> 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 <a href="TreeLayout.html#alternateAlignment">alternateAlignment</a> or <a href="TreeLayout.html#alternateLayerSpacing">alternateLayerSpacing</a>.</p>
<p>These TreeLayout properties actually apply to the <a href="TreeVertex.html">TreeVertex</a> that the TreeLayout uses to represent a <a href="Node.html">Node</a> within the <a href="LayoutNetwork.html">LayoutNetwork</a>.
All of those TreeLayout properties are actually stored in <a href="TreeLayout.html#rootDefaults">rootDefaults</a>; all of the "alternate..." properties are stored in <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>.
Depending on the value of <a href="TreeLayout.html#treeStyle">treeStyle</a>, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults.
In the default case where treeStyle is <a href="TreeLayout.html#static-StyleLayered">TreeLayout.StyleLayered</a>, the alternateDefaults are ignored.
(Note that treeStyle, and a few other properties such as <a href="TreeLayout.html#path">path</a> and <a href="TreeLayout.html#arrangement">arrangement</a>, apply to the whole layout, not to an individual node/vertex.)</p>
<p>The use of <a href="TreeLayout.html#treeStyle">treeStyle</a> 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 <a href="TreeVertex.html">TreeVertex</a> property value for a particular <a href="Node.html">Node</a>.
The solution is to override <a href="TreeLayout.html#assignTreeVertexValues">assignTreeVertexValues</a>, where you can examine the given <a href="TreeVertex.html">TreeVertex</a>,
including its corresponding <a href="LayoutVertex.html#node">LayoutVertex.node</a>, to decide what TreeVertex property values should apply.</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="TreeLayout.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alignment" class="tsd-kind-icon">alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateAlignment" class="tsd-kind-icon">alternate<wbr/>Alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateAngle" class="tsd-kind-icon">alternate<wbr/>Angle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateBreadthLimit" class="tsd-kind-icon">alternate<wbr/>Breadth<wbr/>Limit</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateChildPortSpot" class="tsd-kind-icon">alternate<wbr/>Child<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateCommentMargin" class="tsd-kind-icon">alternate<wbr/>Comment<wbr/>Margin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateCommentSpacing" class="tsd-kind-icon">alternate<wbr/>Comment<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateCompaction" class="tsd-kind-icon">alternate<wbr/>Compaction</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateComparer" class="tsd-kind-icon">alternate<wbr/>Comparer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateDefaults" class="tsd-kind-icon">alternate<wbr/>Defaults</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-icon">alternate<wbr/>Layer<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateLayerSpacingParentOverlap" class="tsd-kind-icon">alternate<wbr/>Layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateNodeIndent" class="tsd-kind-icon">alternate<wbr/>Node<wbr/>Indent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateNodeIndentPastParent" class="tsd-kind-icon">alternate<wbr/>Node<wbr/>Indent<wbr/>Past<wbr/>Parent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateNodeSpacing" class="tsd-kind-icon">alternate<wbr/>Node<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternatePortSpot" class="tsd-kind-icon">alternate<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateRowIndent" class="tsd-kind-icon">alternate<wbr/>Row<wbr/>Indent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateRowSpacing" class="tsd-kind-icon">alternate<wbr/>Row<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateSetsChildPortSpot" class="tsd-kind-icon">alternate<wbr/>Sets<wbr/>Child<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateSetsPortSpot" class="tsd-kind-icon">alternate<wbr/>Sets<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#alternateSorting" class="tsd-kind-icon">alternate<wbr/>Sorting</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#angle" class="tsd-kind-icon">angle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#arrangement" class="tsd-kind-icon">arrangement</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#arrangementSpacing" class="tsd-kind-icon">arrangement<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#breadthLimit" class="tsd-kind-icon">breadth<wbr/>Limit</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#childPortSpot" class="tsd-kind-icon">child<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#commentMargin" class="tsd-kind-icon">comment<wbr/>Margin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#commentSpacing" class="tsd-kind-icon">comment<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#comments" class="tsd-kind-icon">comments</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#compaction" class="tsd-kind-icon">compaction</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#comparer" class="tsd-kind-icon">comparer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#layerSpacing" class="tsd-kind-icon">layer<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#layerSpacingParentOverlap" class="tsd-kind-icon">layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#layerStyle" class="tsd-kind-icon">layer<wbr/>Style</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#nodeIndent" class="tsd-kind-icon">node<wbr/>Indent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#nodeIndentPastParent" class="tsd-kind-icon">node<wbr/>Indent<wbr/>Past<wbr/>Parent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#nodeSpacing" class="tsd-kind-icon">node<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#path" class="tsd-kind-icon">path</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#portSpot" class="tsd-kind-icon">port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#rootDefaults" class="tsd-kind-icon">root<wbr/>Defaults</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#roots" class="tsd-kind-icon">roots</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#rowIndent" class="tsd-kind-icon">row<wbr/>Indent</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#rowSpacing" class="tsd-kind-icon">row<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#setsChildPortSpot" class="tsd-kind-icon">sets<wbr/>Child<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#setsPortSpot" class="tsd-kind-icon">sets<wbr/>Port<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#sorting" class="tsd-kind-icon">sorting</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="TreeLayout.html#treeStyle" class="tsd-kind-icon">tree<wbr/>Style</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="TreeLayout.html#addComments" class="tsd-kind-icon">add<wbr/>Comments</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="TreeLayout.html#arrangeTrees" class="tsd-kind-icon">arrange<wbr/>Trees</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="TreeLayout.html#assignTreeVertexValues" class="tsd-kind-icon">assign<wbr/>Tree<wbr/>Vertex<wbr/>Values</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="TreeLayout.html#commitLayers" class="tsd-kind-icon">commit<wbr/>Layers</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite tsd-is-protected"><a href="TreeLayout.html#commitLayout" class="tsd-kind-icon">commit<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="TreeLayout.html#commitLinks" class="tsd-kind-icon">commit<wbr/>Links</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="TreeLayout.html#commitNodes" class="tsd-kind-icon">commit<wbr/>Nodes</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="TreeLayout.html#createNetwork" class="tsd-kind-icon">create<wbr/>Network</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="TreeLayout.html#doLayout" class="tsd-kind-icon">do<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="TreeLayout.html#initializeTreeVertexValues" class="tsd-kind-icon">initialize<wbr/>Tree<wbr/>Vertex<wbr/>Values</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="TreeLayout.html#layoutComments" class="tsd-kind-icon">layout<wbr/>Comments</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="TreeLayout.html#makeNetwork" class="tsd-kind-icon">make<wbr/>Network</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentBottomRightBus" class="tsd-kind-icon">Alignment<wbr/>Bottom<wbr/>Right<wbr/>Bus</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentBus" class="tsd-kind-icon">Alignment<wbr/>Bus</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentBusBranching" class="tsd-kind-icon">Alignment<wbr/>Bus<wbr/>Branching</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentCenterChildren" class="tsd-kind-icon">Alignment<wbr/>Center<wbr/>Children</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentCenterSubtrees" class="tsd-kind-icon">Alignment<wbr/>Center<wbr/>Subtrees</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentEnd" class="tsd-kind-icon">Alignment<wbr/>End</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentStart" class="tsd-kind-icon">Alignment<wbr/>Start</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-AlignmentTopLeftBus" class="tsd-kind-icon">Alignment<wbr/>Top<wbr/>Left<wbr/>Bus</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-ArrangementFixedRoots" class="tsd-kind-icon">Arrangement<wbr/>Fixed<wbr/>Roots</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-ArrangementHorizontal" class="tsd-kind-icon">Arrangement<wbr/>Horizontal</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-ArrangementVertical" class="tsd-kind-icon">Arrangement<wbr/>Vertical</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-CompactionBlock" class="tsd-kind-icon">Compaction<wbr/>Block</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-CompactionNone" class="tsd-kind-icon">Compaction<wbr/>None</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-LayerIndividual" class="tsd-kind-icon">Layer<wbr/>Individual</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-LayerSiblings" class="tsd-kind-icon">Layer<wbr/>Siblings</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-LayerUniform" class="tsd-kind-icon">Layer<wbr/>Uniform</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-PathDefault" class="tsd-kind-icon">Path<wbr/>Default</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-PathDestination" class="tsd-kind-icon">Path<wbr/>Destination</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-PathSource" class="tsd-kind-icon">Path<wbr/>Source</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-SortingAscending" class="tsd-kind-icon">Sorting<wbr/>Ascending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-SortingDescending" class="tsd-kind-icon">Sorting<wbr/>Descending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-SortingForwards" class="tsd-kind-icon">Sorting<wbr/>Forwards</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-SortingReverse" class="tsd-kind-icon">Sorting<wbr/>Reverse</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-StyleAlternating" class="tsd-kind-icon">Style<wbr/>Alternating</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-StyleLastParents" class="tsd-kind-icon">Style<wbr/>Last<wbr/>Parents</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-StyleLayered" class="tsd-kind-icon">Style<wbr/>Layered</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="TreeLayout.html#static-StyleRootOnly" class="tsd-kind-icon">Style<wbr/>Root<wbr/>Only</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#arrangementOrigin" class="tsd-kind-icon">Layout.arrangement<wbr/>Origin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#boundsComputation" class="tsd-kind-icon">Layout.bounds<wbr/>Computation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#diagram" class="tsd-kind-icon">Layout.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#group" class="tsd-kind-icon">Layout.group</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isInitial" class="tsd-kind-icon">Layout.is<wbr/>Initial</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isOngoing" class="tsd-kind-icon">Layout.is<wbr/>Ongoing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRealtime" class="tsd-kind-icon">Layout.is<wbr/>Realtime</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRouting" class="tsd-kind-icon">Layout.is<wbr/>Routing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isValidLayout" class="tsd-kind-icon">Layout.is<wbr/>Valid<wbr/>Layout</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isViewportSized" class="tsd-kind-icon">Layout.is<wbr/>Viewport<wbr/>Sized</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#network" class="tsd-kind-icon">Layout.network</a></li></ul></section><section class="tsd-index-section undefined"><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#collectParts" class="tsd-kind-icon">Layout.collect<wbr/>Parts</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#copy" class="tsd-kind-icon">Layout.copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#getLayoutBounds" class="tsd-kind-icon">Layout.get<wbr/>Layout<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#initialOrigin" class="tsd-kind-icon">Layout.initial<wbr/>Origin</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#invalidateLayout" class="tsd-kind-icon">Layout.invalidate<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#updateParts" class="tsd-kind-icon">Layout.update<wbr/>Parts</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">new <wbr/>Tree<wbr/>Layout<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="TreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeLayout</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Constructs a <a href="TreeLayout.html">TreeLayout</a> with no <a href="Layout.html#network">Layout.network</a>
and with no owning <a href="Layout.html#diagram">Layout.diagram</a>.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeLayout</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional initialization properties.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="TreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeLayout</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alignment<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#alignment" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the default alignment of parents relative to their children.
Must be a static constant of <a href="TreeLayout.html">TreeLayout</a> whose name starts with "Alignment".</p>
<div><p>The default value is <a href="TreeLayout.html#static-AlignmentCenterChildren">TreeLayout.AlignmentCenterChildren</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults">rootDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateAlignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Alignment<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#alternateAlignment" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate alignment of parents relative to their children.
Must be a static constant of <a href="TreeLayout.html">TreeLayout</a> whose name starts with "Alignment".</p>
<div><p>The default value is <a href="TreeLayout.html#static-AlignmentCenterChildren">TreeLayout.AlignmentCenterChildren</a>.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateAngle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Angle<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateAngle" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate direction for tree growth.</p>
<div><p>The default value is 0; the value must be one of: 0, 90, 180, 270.</p>
<p>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 <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateBreadthLimit" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Breadth<wbr/>Limit<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateBreadthLimit" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets an alternate limit on how broad a tree should be.</p>
<div><p>A value of zero (the default) means there is no limit;
a positive value specifies a limit.
The default value is zero.</p>
<p>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 <a href="TreeLayout.html#alternateRowSpacing">alternateRowSpacing</a>.
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
<a href="TreeLayout.html#alternateRowIndent">alternateRowIndent</a> property specifies that space at the
start of each row.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateChildPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Child<wbr/>Port<wbr/>Spot<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a><a href="#alternateChildPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate spot that children nodes' ports get as their ToSpot
The default value is <a href="Spot.html#static-Default">Spot.Default</a>.</p>
<div><p>A value of <a href="Spot.html#static-Default">Spot.Default</a> will cause the TreeLayout
to assign a ToSpot based on the parent node's <a href="TreeVertex.html#angle">TreeVertex.angle</a>.</p>
<p>If the value is other than NoSpot, it is just assigned.
When <a href="TreeLayout.html#path">path</a> is <a href="TreeLayout.html#static-PathSource">PathSource</a>,
the port's FromSpot is set instead of the ToSpot.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateCommentMargin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Comment<wbr/>Margin<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateCommentMargin" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate distance between a node and its comments.</p>
<div><p>The default value is 20.</p>
<p>This is used by <a href="TreeLayout.html#addComments">addComments</a> and <a href="TreeLayout.html#layoutComments">layoutComments</a>.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateCommentSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Comment<wbr/>Spacing<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateCommentSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate distance between comments.</p>
<div><p>The default value is 10.</p>
<p>This is used by <a href="TreeLayout.html#addComments">addComments</a> and <a href="TreeLayout.html#layoutComments">layoutComments</a>.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateCompaction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Compaction<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#alternateCompaction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets how closely to pack the child nodes of a subtree.
Must be either <a href="TreeLayout.html#static-CompactionBlock">TreeLayout.CompactionBlock</a> or <a href="TreeLayout.html#static-CompactionNone">TreeLayout.CompactionNone</a>.</p>
<div><p>The default value is <a href="TreeLayout.html#static-CompactionBlock">TreeLayout.CompactionBlock</a>.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateComparer" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Comparer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type" data-tsd-kind="Class">TreeVertex</a>, b<span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type" data-tsd-kind="Class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">number</span><a href="#alternateComparer" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate comparison function used for sorting the immediate children of a vertex.</p>
<div><p>The default comparer compares the <a href="LayoutVertex.html#node">LayoutVertex.node</a> Text values.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.
Whether this comparison function is used is determined by the value of <a href="TreeLayout.html#alternateSorting">alternateSorting</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateDefaults" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Defaults<span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type" data-tsd-kind="Class">TreeVertex</a><a href="#alternateDefaults" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the object holding the default values for alternate layer <a href="TreeVertex.html">TreeVertex</a>es,
used when the <a href="TreeLayout.html#treeStyle">treeStyle</a> is <a href="TreeLayout.html#static-StyleAlternating">StyleAlternating</a> or <a href="TreeLayout.html#static-StyleLastParents">StyleLastParents</a>.</p>
<div><p>See the list of inheritable properties in the documentation for <a href="TreeLayout.html#rootDefaults">rootDefaults</a>.
The other properties of this <a href="TreeVertex.html">TreeVertex</a> are ignored.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateLayerSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Layer<wbr/>Spacing<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateLayerSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate distance between a parent node and its children.</p>
<div><p>The default value is 50.</p>
<p>This is the distance between a parent node and its first row
of children, in case there are multiple rows of its children.
The <a href="TreeLayout.html#alternateNodeSpacing">alternateNodeSpacing</a> property determines the distance between siblings.
The <a href="TreeLayout.html#alternateRowSpacing">alternateRowSpacing</a> property determines the distance
between rows of children.
Negative values may cause children to overlap with the parent.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateLayerSpacingParentOverlap" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#alternateLayerSpacingParentOverlap" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.</p>
<div><p>The default value is 0.0 -- there is overlap between layers only if <a href="TreeLayout.html#alternateLayerSpacing">alternateLayerSpacing</a> is negative.
A value of 1.0 and a zero <a href="TreeLayout.html#alternateLayerSpacing">alternateLayerSpacing</a> will cause child nodes to completely overlap the parent.</p>
<p>A value greater than zero may still cause overlap between layers,
unless the value of <a href="TreeLayout.html#alternateLayerSpacing">alternateLayerSpacing</a> is large enough.
A value of zero might still allow overlap between layers,
if <a href="TreeLayout.html#alternateLayerSpacing">alternateLayerSpacing</a> is negative.
This sets the <a href="TreeLayout.html#alternateDefaults">alternateDefaults</a>' property of the same name.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alternateNodeIndent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alternate<wbr/>Node<wbr/>Indent<span class="tsd-signature-symbol">: </span><sp