create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
642 lines • 181 kB
HTML
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><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/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"><a class="!text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"><svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:!bg-inherit"><a href="../../learn/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></div></div></div></div></nav><script>window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></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"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="TreeLayout.html">TreeLayout</a></li></ul><h1 class="flex items-center">Class TreeLayout</h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#TreeLayout">view full</a>)</h4><ul class="tsd-hierarchy"><li><a href="Layout.html" class="tsd-signature-type 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 tsd-kind-class">FishboneLayout</a></li><li><a href="ParallelLayout.html" class="tsd-signature-type 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>.
<p>This layout makes use of a <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a> of
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es and <a href="TreeEdge.html" class="tsd-kind-class">TreeEdge</a>s that normally
correspond to the <a href="Node.html" class="tsd-kind-class">Node</a>s and <a href="Link.html" class="tsd-kind-class">Link</a>s of the <a href="Diagram.html" class="tsd-kind-class">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" class="tsd-kind-accessor">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" class="tsd-kind-accessor">layerSpacing</a>: the distance between layers -- between a parent node and its child nodes.</li>
<li><a href="TreeLayout.html#nodeSpacing" class="tsd-kind-accessor">nodeSpacing</a>: the distance between nodes within a layer -- between siblings.</li>
<li><a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>: the relative position of a parent node with its children.</li>
<li><a href="TreeLayout.html#sorting" class="tsd-kind-accessor">sorting</a> and <a href="TreeLayout.html#comparer" class="tsd-kind-accessor">comparer</a>: specify the order of the immediate children of a parent node.</li>
<li><a href="TreeLayout.html#compaction" class="tsd-kind-accessor">compaction</a>: whether subtrees should be packed closer together if there is room.</li>
<li><a href="TreeLayout.html#layerStyle" class="tsd-kind-accessor">layerStyle</a>: whether the children of one node are aligned with the children of a sibling node.</li>
<li><a href="TreeLayout.html#setsPortSpot" class="tsd-kind-accessor">setsPortSpot</a>, <a href="TreeLayout.html#portSpot" class="tsd-kind-accessor">portSpot</a>, <a href="TreeLayout.html#setsChildPortSpot" class="tsd-kind-accessor">setsChildPortSpot</a>, and <a href="TreeLayout.html#childPortSpot" class="tsd-kind-accessor">childPortSpot</a>: this controls whether to set the <a href="Link.html#fromSpot" class="tsd-kind-accessor">Link.fromSpot</a> and
<a href="Link.html#toSpot" class="tsd-kind-accessor">Link.toSpot</a> to be sensible for the <a href="TreeLayout.html#angle" class="tsd-kind-accessor">angle</a>.</li>
<li><a href="TreeLayout.html#nodeIndent" class="tsd-kind-accessor">nodeIndent</a> and <a href="TreeLayout.html#nodeIndentPastParent" class="tsd-kind-accessor">nodeIndentPastParent</a>: if the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a> is <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">TreeAlignment.Start</a> or <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">TreeAlignment.End</a>,
control how much extra space the first child is given when positioned.</li>
<li><a href="TreeLayout.html#breadthLimit" class="tsd-kind-accessor">breadthLimit</a>, <a href="TreeLayout.html#rowSpacing" class="tsd-kind-accessor">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" class="tsd-kind-accessor">alignment</a> to be <a href="TreeAlignment.html#CenterChildren" class="tsd-kind-enum-member">TreeAlignment.CenterChildren</a> for the root node but <a href="TreeAlignment.html#Bus" class="tsd-kind-enum-member">TreeAlignment.Bus</a> for the other nodes in the tree?
Or what if you want want <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">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" class="tsd-kind-accessor">treeStyle</a>.
For the former scenario, you could set <a href="TreeLayout.html#treeStyle" class="tsd-kind-accessor">treeStyle</a> to <a href="TreeStyle.html#RootOnly" class="tsd-kind-enum-member">TreeStyle.RootOnly</a>; the value of <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a> would only apply to the root node.
For the latter scenario, you could set it to <a href="TreeStyle.html#LastParents" class="tsd-kind-enum-member">TreeStyle.LastParents</a>;
the value of <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">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" class="tsd-kind-accessor">alternateAlignment</a> or <a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-accessor">alternateLayerSpacing</a>.</p>
<p>These TreeLayout properties actually apply to the <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> that the TreeLayout uses to represent a <a href="Node.html" class="tsd-kind-class">Node</a> within the <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a>.
All of those TreeLayout properties are actually stored in <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>; all of the "alternate..." properties are stored in <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>.
Depending on the value of <a href="TreeLayout.html#treeStyle" class="tsd-kind-accessor">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="TreeStyle.html#Layered" class="tsd-kind-enum-member">TreeStyle.Layered</a>, the alternateDefaults are ignored.
(Note that treeStyle, and a few other properties such as <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> and <a href="TreeLayout.html#arrangement" class="tsd-kind-accessor">arrangement</a>, apply to the whole layout, not to an individual node/vertex.)</p>
<p>The use of <a href="TreeLayout.html#treeStyle" class="tsd-kind-accessor">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" class="tsd-kind-class">TreeVertex</a> property value for a particular <a href="Node.html" class="tsd-kind-class">Node</a>.
The solution is to override <a href="TreeLayout.html#assignTreeVertexValues" class="tsd-kind-method">assignTreeVertexValues</a>, where you can examine the given <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>,
including its corresponding <a href="LayoutVertex.html#node" class="tsd-kind-accessor">LayoutVertex.node</a>, to decide what TreeVertex property values should apply.</p>
</div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="TreeLayout.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="TreeLayout.html#alignment" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alignment</span></a>
<a href="TreeLayout.html#alternateAlignment" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Alignment</span></a>
<a href="TreeLayout.html#alternateAngle" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Angle</span></a>
<a href="TreeLayout.html#alternateBreadthLimit" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Breadth<wbr/>Limit</span></a>
<a href="TreeLayout.html#alternateChildPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Child<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#alternateCommentMargin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comment<wbr/>Margin</span></a>
<a href="TreeLayout.html#alternateCommentSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comment<wbr/>Spacing</span></a>
<a href="TreeLayout.html#alternateCompaction" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Compaction</span></a>
<a href="TreeLayout.html#alternateComparer" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comparer</span></a>
<a href="TreeLayout.html#alternateDefaults" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Defaults</span></a>
<a href="TreeLayout.html#alternateLayerSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Layer<wbr/>Spacing</span></a>
<a href="TreeLayout.html#alternateLayerSpacingParentOverlap" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span></a>
<a href="TreeLayout.html#alternateNodeIndent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Indent</span></a>
<a href="TreeLayout.html#alternateNodeIndentPastParent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Indent<wbr/>Past<wbr/>Parent</span></a>
<a href="TreeLayout.html#alternateNodeSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Spacing</span></a>
<a href="TreeLayout.html#alternatePortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#alternateRowIndent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Row<wbr/>Indent</span></a>
<a href="TreeLayout.html#alternateRowSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Row<wbr/>Spacing</span></a>
<a href="TreeLayout.html#alternateSetsChildPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sets<wbr/>Child<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#alternateSetsPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sets<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#alternateSorting" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sorting</span></a>
<a href="TreeLayout.html#angle" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>angle</span></a>
<a href="TreeLayout.html#arrangement" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arrangement</span></a>
<a href="TreeLayout.html#arrangementSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arrangement<wbr/>Spacing</span></a>
<a href="TreeLayout.html#breadthLimit" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>breadth<wbr/>Limit</span></a>
<a href="TreeLayout.html#childPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>child<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#commentMargin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comment<wbr/>Margin</span></a>
<a href="TreeLayout.html#commentSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comment<wbr/>Spacing</span></a>
<a href="TreeLayout.html#comments" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comments</span></a>
<a href="TreeLayout.html#compaction" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>compaction</span></a>
<a href="TreeLayout.html#comparer" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comparer</span></a>
<a href="TreeLayout.html#layerSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Spacing</span></a>
<a href="TreeLayout.html#layerSpacingParentOverlap" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span></a>
<a href="TreeLayout.html#layerStyle" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Style</span></a>
<a href="TreeLayout.html#nodeIndent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Indent</span></a>
<a href="TreeLayout.html#nodeIndentPastParent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Indent<wbr/>Past<wbr/>Parent</span></a>
<a href="TreeLayout.html#nodeSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Spacing</span></a>
<a href="TreeLayout.html#path" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>path</span></a>
<a href="TreeLayout.html#portSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>port<wbr/>Spot</span></a>
<a href="TreeLayout.html#rootDefaults" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>root<wbr/>Defaults</span></a>
<a href="TreeLayout.html#roots" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>roots</span></a>
<a href="TreeLayout.html#rowIndent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>row<wbr/>Indent</span></a>
<a href="TreeLayout.html#rowSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>row<wbr/>Spacing</span></a>
<a href="TreeLayout.html#setsChildPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sets<wbr/>Child<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#setsPortSpot" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sets<wbr/>Port<wbr/>Spot</span></a>
<a href="TreeLayout.html#sorting" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sorting</span></a>
<a href="TreeLayout.html#treeStyle" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>tree<wbr/>Style</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="TreeLayout.html#addComments" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Comments</span></a>
<a href="TreeLayout.html#arrangeTrees" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange<wbr/>Trees</span></a>
<a href="TreeLayout.html#assignTreeVertexValues" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>assign<wbr/>Tree<wbr/>Vertex<wbr/>Values</span></a>
<a href="TreeLayout.html#commitLayers" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layers</span></a>
<a href="TreeLayout.html#commitLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layout</span></a>
<a href="TreeLayout.html#commitLinks" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Links</span></a>
<a href="TreeLayout.html#commitNodes" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Nodes</span></a>
<a href="TreeLayout.html#createNetwork" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>create<wbr/>Network</span></a>
<a href="TreeLayout.html#doLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Layout</span></a>
<a href="TreeLayout.html#initializeTreeVertexValues" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>initialize<wbr/>Tree<wbr/>Vertex<wbr/>Values</span></a>
<a href="TreeLayout.html#layoutComments" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>layout<wbr/>Comments</span></a>
<a href="TreeLayout.html#makeNetwork" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>make<wbr/>Network</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="TreeLayout.html#AlignmentBottomRightBus" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><g id="subicon-S,#FF984D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF984D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bottom<wbr/>Right<wbr/>Bus</span></a>
<a href="TreeLayout.html#AlignmentBus" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bus</span></a>
<a href="TreeLayout.html#AlignmentBusBranching" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bus<wbr/>Branching</span></a>
<a href="TreeLayout.html#AlignmentCenterChildren" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Center<wbr/>Children</span></a>
<a href="TreeLayout.html#AlignmentCenterSubtrees" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Center<wbr/>Subtrees</span></a>
<a href="TreeLayout.html#AlignmentEnd" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>End</span></a>
<a href="TreeLayout.html#AlignmentStart" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Start</span></a>
<a href="TreeLayout.html#AlignmentTopLeftBus" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Top<wbr/>Left<wbr/>Bus</span></a>
<a href="TreeLayout.html#ArrangementFixedRoots" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Fixed<wbr/>Roots</span></a>
<a href="TreeLayout.html#ArrangementHorizontal" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Horizontal</span></a>
<a href="TreeLayout.html#ArrangementVertical" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Vertical</span></a>
<a href="TreeLayout.html#CompactionBlock" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Compaction<wbr/>Block</span></a>
<a href="TreeLayout.html#CompactionNone" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Compaction<wbr/>None</span></a>
<a href="TreeLayout.html#LayerIndividual" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Individual</span></a>
<a href="TreeLayout.html#LayerSiblings" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Siblings</span></a>
<a href="TreeLayout.html#LayerUniform" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Uniform</span></a>
<a href="TreeLayout.html#PathDefault" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Default</span></a>
<a href="TreeLayout.html#PathDestination" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Destination</span></a>
<a href="TreeLayout.html#PathSource" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Source</span></a>
<a href="TreeLayout.html#SortingAscending" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Ascending</span></a>
<a href="TreeLayout.html#SortingDescending" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Descending</span></a>
<a href="TreeLayout.html#SortingForwards" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Forwards</span></a>
<a href="TreeLayout.html#SortingReverse" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Reverse</span></a>
<a href="TreeLayout.html#StyleAlternating" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Alternating</span></a>
<a href="TreeLayout.html#StyleLastParents" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Last<wbr/>Parents</span></a>
<a href="TreeLayout.html#StyleLayered" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Layered</span></a>
<a href="TreeLayout.html#StyleRootOnly" class="tsd-index-link deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Root<wbr/>Only</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion"><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Inherited Index</h5></summary><div class="tsd-accordion-details"><div class="tsd-index-content"><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="Layout.html#arrangementOrigin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.arrangement<wbr/>Origin</span></a>
<a href="Layout.html#boundsComputation" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.bounds<wbr/>Computation</span></a>
<a href="Layout.html#diagram" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF4D4D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.diagram</span></a>
<a href="Layout.html#group" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.group</span></a>
<a href="Layout.html#isInitial" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Initial</span></a>
<a href="Layout.html#isOngoing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Ongoing</span></a>
<a href="Layout.html#isRealtime" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Realtime</span></a>
<a href="Layout.html#isRouting" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Routing</span></a>
<a href="Layout.html#isValidLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Valid<wbr/>Layout</span></a>
<a href="Layout.html#isViewportSized" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Viewport<wbr/>Sized</span></a>
<a href="Layout.html#network" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.network</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="Layout.html#collectParts" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.collect<wbr/>Parts</span></a>
<a href="Layout.html#copy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.copy</span></a>
<a href="Layout.html#getLayoutBounds" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.get<wbr/>Layout<wbr/>Bounds</span></a>
<a href="Layout.html#initialOrigin" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.initial<wbr/>Origin</span></a>
<a href="Layout.html#invalidateLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.invalidate<wbr/>Layout</span></a>
<a href="Layout.html#updateParts" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.update<wbr/>Parts</span></a>
</div></section></div></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_TreeLayout" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Tree<wbr/>Layout</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">init</span><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 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 tsd-kind-class">TreeLayout</a><a href="#constructor.new_TreeLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Constructs a <a href="TreeLayout.html" class="tsd-kind-class">TreeLayout</a> with no <a href="Layout.html#network" class="tsd-kind-accessor">Layout.network</a>
and with no owning <a href="Layout.html#diagram" class="tsd-kind-accessor">Layout.diagram</a>.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">init</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TreeLayout.html" class="tsd-signature-type 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></div><h4 class="tsd-returns-title">Returns <a href="TreeLayout.html" class="tsd-signature-type tsd-kind-class">TreeLayout</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="alignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alignment</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeAlignment.html" class="tsd-signature-type tsd-kind-enum">TreeAlignment</a></div><a href="#alignment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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 <a href="TreeAlignment.html" class="tsd-kind-enum">TreeAlignment</a> value.</p>
<p>The default value is <a href="TreeAlignment.html#CenterChildren" class="tsd-kind-enum-member">TreeAlignment.CenterChildren</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateAlignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Alignment</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeAlignment.html" class="tsd-signature-type tsd-kind-enum">TreeAlignment</a></div><a href="#alternateAlignment" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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 <a href="TreeAlignment.html" class="tsd-kind-enum">TreeAlignment</a> value.</p>
<p>The default value is <a href="TreeAlignment.html#CenterChildren" class="tsd-kind-enum-member">TreeAlignment.CenterChildren</a>.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateAngle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Angle</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateAngle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate direction for tree growth.</p>
<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" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateBreadthLimit" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Breadth<wbr/>Limit</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateBreadthLimit" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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>
<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" class="tsd-kind-accessor">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" class="tsd-kind-accessor">alternateRowIndent</a> property specifies that space at the
start of each row.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateChildPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Child<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type tsd-kind-class">Spot</a></div><a href="#alternateChildPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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#Default" class="tsd-kind-property">Spot.Default</a>.</p>
<p>A value of <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a> will cause the TreeLayout
to assign a ToSpot based on the parent node's <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a>.</p>
<p>If the value is other than NoSpot, it is just assigned.
When <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> is <a href="TreePath.html#Source" class="tsd-kind-enum-member">Source</a>,
the port's FromSpot is set instead of the ToSpot.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateCommentMargin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Comment<wbr/>Margin</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateCommentMargin" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate distance between a node and its comments.</p>
<p>The default value is 20.</p>
<p>This is used by <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> and <a href="TreeLayout.html#layoutComments" class="tsd-kind-method">layoutComments</a>.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateCommentSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Comment<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateCommentSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate distance between comments.</p>
<p>The default value is 10.</p>
<p>This is used by <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> and <a href="TreeLayout.html#layoutComments" class="tsd-kind-method">layoutComments</a>.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateCompaction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Compaction</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeCompaction.html" class="tsd-signature-type tsd-kind-enum">TreeCompaction</a></div><a href="#alternateCompaction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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 a <a href="TreeCompaction.html" class="tsd-kind-enum">TreeCompaction</a> value.</p>
<p>The default value is <a href="TreeCompaction.html#Block" class="tsd-kind-enum-member">TreeCompaction.Block</a>.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateComparer" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Comparer</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">a</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a>, <span class="tsd-kind-parameter">b</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span></div><a href="#alternateComparer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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>
<p>The default comparer compares the <a href="LayoutVertex.html#node" class="tsd-kind-accessor">LayoutVertex.node</a> Text values.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.
Whether this comparison function is used is determined by the value of <a href="TreeLayout.html#alternateSorting" class="tsd-kind-accessor">alternateSorting</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateDefaults" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Defaults</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></div><a href="#alternateDefaults" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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" class="tsd-kind-class">TreeVertex</a>es,
used when the <a href="TreeLayout.html#treeStyle" class="tsd-kind-accessor">treeStyle</a> is <a href="TreeStyle.html#Alternating" class="tsd-kind-enum-member">Alternating</a> or <a href="TreeStyle.html#LastParents" class="tsd-kind-enum-member">LastParents</a>.</p>
<p>See the list of inheritable properties in the documentation for <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>.
The other properties of this <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> are ignored.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateLayerSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Layer<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateLayerSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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>
<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" class="tsd-kind-accessor">alternateNodeSpacing</a> property determines the distance between siblings.
The <a href="TreeLayout.html#alternateRowSpacing" class="tsd-kind-accessor">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" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateLayerSpacingParentOverlap" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateLayerSpacingParentOverlap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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>
<p>The default value is 0.0 -- there is overlap between layers only if <a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-accessor">alternateLayerSpacing</a> is negative.
A value of 1.0 and a zero <a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-accessor">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" class="tsd-kind-accessor">alternateLayerSpacing</a> is large enough.
A value of zero might still allow overlap between layers,
if <a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-accessor">alternateLayerSpacing</a> is negative.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateNodeIndent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Node<wbr/>Indent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateNodeIndent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate indentation of the first child.</p>
<p>The default value is zero. The value should be non-negative.</p>
<p>This property is only sensible when the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>
is <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">Start</a> or <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">End</a>.
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 <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateNodeIndentPastParent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Node<wbr/>Indent<wbr/>Past<wbr/>Parent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateNodeIndentPastParent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the fraction of this node's breadth is added to <a href="TreeLayout.html#alternateNodeIndent" class="tsd-kind-accessor">alternateNodeIndent</a>
to determine any spacing at the start of the children.</p>
<p>The default value is 0.0 -- the only indentation is specified by <a href="TreeLayout.html#alternateNodeIndent" class="tsd-kind-accessor">alternateNodeIndent</a>.
When the value is 1.0, the children will be indented past the breadth of the parent node.</p>
<p>This property is only sensible when the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>
is <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">Start</a> or <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">End</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateNodeSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Node<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateNodeSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate distance between child nodes.</p>
<p>The default value is 20.</p>
<p>A negative value causes sibling nodes to overlap.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternatePortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type tsd-kind-class">Spot</a></div><a href="#alternatePortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate spot that this node's port gets as its FromSpot.</p>
<p>The default value is <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a>.</p>
<p>A value of <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a> will cause the TreeLayout
to assign a FromSpot based on the parent node's <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a>.
If the value is other than NoSpot, it is just assigned.
When <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> is <a href="TreePath.html#Source" class="tsd-kind-enum-member">Source</a>,
the port's ToSpot is set instead of the FromSpot.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateRowIndent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Row<wbr/>Indent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateRowIndent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate indentation of the first child of each row,
if the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a> is not a "Center" alignment.</p>
<p>The default value is 10. The value should be non-negative.</p>
<p>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 <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateRowSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Row<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#alternateRowSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate distance between rows of children.</p>
<p>The default value is 25.</p>
<p>This property is only used when there is more than one
row of children for a given parent node.
The <a href="TreeLayout.html#alternateLayerSpacing" class="tsd-kind-accessor">alternateLayerSpacing</a> property determines the distance between
the parent node and its first row of child nodes.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateSetsChildPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Sets<wbr/>Child<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#alternateSetsChildPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether the TreeLayout should set the
ToSpot for each child node port.</p>
<p>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.</p>
<p>The spot used depends on the value of <a href="TreeLayout.html#alternateChildPortSpot" class="tsd-kind-accessor">alternateChildPortSpot</a>.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateSetsPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Sets<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#alternateSetsPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether the TreeLayout should set the
FromSpot for this parent node port.</p>
<p>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.</p>
<p>The spot used depends on the value of <a href="TreeLayout.html#alternatePortSpot" class="tsd-kind-accessor">alternatePortSpot</a>.
This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="alternateSorting" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>alternate<wbr/>Sorting</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeSorting.html" class="tsd-signature-type tsd-kind-enum">TreeSorting</a></div><a href="#alternateSorting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the alternate sorting policy for ordering the immediate children of a vertex.
Must be a <a href="TreeSorting.html" class="tsd-kind-enum">TreeSorting</a> value.</p>
<p>The default value is <a href="TreeSorting.html#Forwards" class="tsd-kind-enum-member">Forwards</a>.</p>
<p>This sets the <a href="TreeLayout.html#alternateDefaults" class="tsd-kind-accessor">alternateDefaults</a>' property of the same name.
The sort order is determined by <a href="TreeLayout.html#alternateComparer" class="tsd-kind-accessor">alternateComparer</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="angle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>angle</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#angle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default direction for tree growth.</p>
<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.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="arrangement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>arrangement</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeArrangement.html" class="tsd-signature-type tsd-kind-enum">TreeArrangement</a></div><a href="#arrangement" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets how <a href="TreeLayout.html#arrangeTrees" class="tsd-kind-method">arrangeTrees</a> should lay out the separate trees.
Must be a <a href="TreeArrangement.html" class="tsd-kind-enum">TreeArrangement</a> value.</p>
<p>The default value is <a href="TreeArrangement.html#Vertical" class="tsd-kind-enum-member">TreeArrangement.Vertical</a></p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="arrangementSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>arrangement<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type tsd-kind-class">Size</a></div><a href="#arrangementSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the space between which <a href="TreeLayout.html#arrangeTrees" class="tsd-kind-method">arrangeTrees</a> will position the trees.</p>
<p>This defaults to the Size(10, 10).</p>
<p>This property is ignored if <a href="TreeLayout.html#arrangement" class="tsd-kind-accessor">arrangement</a> is <a href="TreeArrangement.html#FixedRoots" class="tsd-kind-enum-member">TreeArrangement.FixedRoots</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="breadthLimit" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>breadth<wbr/>Limit</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#breadthLimit" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets a limit on how broad a tree should be.</p>
<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#rowSpacing" class="tsd-kind-accessor">rowSpacing</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#rowIndent" class="tsd-kind-accessor">rowIndent</a> property specifies that space at the
start of each row.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="childPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>child<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type tsd-kind-class">Spot</a></div><a href="#childPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the spot that children nodes' ports get as their ToSpot.</p>
<p>The default value is <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a>.</p>
<p>A value of <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a> will cause the TreeLayout
to assign a ToSpot based on the parent node's <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a>.
If the value is other than NoSpot, it is just assigned.
When <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> is <a href="TreePath.html#Source" class="tsd-kind-enum-member">Source</a>,
the port's FromSpot is set instead of the ToSpot.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="commentMargin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>comment<wbr/>Margin</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#commentMargin" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the distance between a node and its comments.</p>
<p>The default value is 20.</p>
<p>This is used by <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> and <a href="TreeLayout.html#layoutComments" class="tsd-kind-method">layoutComments</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="commentSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>comment<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#commentSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the distance between comments.</p>
<p>The default value is 10.</p>
<p>This is used by <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> and <a href="TreeLayout.html#layoutComments" class="tsd-kind-method">layoutComments</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="comments" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>comments</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#comments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether this layout should find all <a href="Node.html" class="tsd-kind-class">Node</a>s
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.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="compaction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>compaction</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeCompaction.html" class="tsd-signature-type tsd-kind-enum">TreeCompaction</a></div><a href="#compaction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><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 a <a href="TreeCompaction.html" class="tsd-kind-enum">TreeCompaction</a> value.</p>
<p>The default value is <a href="TreeCompaction.html#Block" class="tsd-kind-enum-member">Block</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="comparer" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>comparer</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">a</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a>, <span class="tsd-kind-parameter">b</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span></div><a href="#comparer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default comparison function used for sorting the immediate children of a vertex.</p>
<p>The default comparer compares the <a href="LayoutVertex.html#node" class="tsd-kind-accessor">LayoutVertex.node</a> Text values.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.
Whether this comparison function is used is determined by the value of <a href="TreeLayout.html#sorting" class="tsd-kind-accessor">sorting</a>.</p>
<pre><code class="language-js"><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">TreeLayout</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-4">sorting:</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">TreeSorting</span><span class="hl-2">.</span><span class="hl-4">Ascending</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-5">comparer</span><span class="hl-4">:</span><span class="hl-2"> (</span><span class="hl-4">va</span><span class="hl-2">, </span><span class="hl-4">vb</span><span class="hl-2">) </span><span class="hl-1">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-3">da</span><span class="hl-2"> = </span><span class="hl-4">va</span><span class="hl-2">.</span><span class="hl-4">node</span><span class="hl-2">.</span><span class="hl-4">data</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-3">db</span><span class="hl-2"> = </span><span class="hl-4">vb</span><span class="hl-2">.</span><span class="hl-4">node</span><span class="hl-2">.</span><span class="hl-4">data</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-4">da</span><span class="hl-2">.</span><span class="hl-4">someProperty</span><span class="hl-2"> < </span><span class="hl-4">db</span><span class="hl-2">.</span><span class="hl-4">someProperty</span><span class="hl-2">) </span><span class="hl-8">return</span><span class="hl-2"> -</span><span class="hl-7">1</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-4">da</span><span class="hl-2">.</span><span class="hl-4">someProperty</span><span class="hl-2"> > </span><span class="hl-4">db</span><span class="hl-2">.</span><span class="hl-4">someProperty</span><span class="hl-2">) </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-7">1</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">return</span><span class="hl-2"> </span><span class="hl-7">0</span><span class="hl-2">;</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">})</span>
</code><button>Copy</button></pre>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="layerSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>layer<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#layerSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the distance between a parent node and its children.</p>
<p>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.</p>
<p>The <a href="TreeLayout.html#nodeSpacing" class="tsd-kind-accessor">nodeSpacing</a> property determines the distance between siblings.
The <a href="TreeLayout.html#rowSpacing" class="tsd-kind-accessor">rowSpacing</a> property determines the distance
between multiple rows or columns of children.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="layerSpacingParentOverlap" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#layerSpacingParentOverlap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.</p>
<p>The default value is 0.0 -- there is overlap between layers only if <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</a> is negative.
A value of 1.0 and a zero <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</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#layerSpacing" class="tsd-kind-accessor">layerSpacing</a> is large enough.
A value of zero might still allow overlap between layers,
if <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</a> is negative.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="layerStyle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>layer<wbr/>Style</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeLayerStyle.html" class="tsd-signature-type tsd-kind-enum">TreeLayerStyle</a></div><a href="#layerStyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the manner in which the nodes are aligned in layers.
Must be a <a href="TreeLayerStyle.html" class="tsd-kind-enum">TreeLayerStyle</a> value.</p>
<p>The default value is <a href="TreeLayerStyle.html#Individual" class="tsd-kind-enum-member">TreeLayerStyle.Individual</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="nodeIndent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>node<wbr/>Indent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#nodeIndent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default indentation of the first child.</p>
<p>The default value is zero. The value should be non-negative.</p>
<p>This property is only sensible when the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>
is <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">Start</a> or <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">End</a>.
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.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="nodeIndentPastParent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>node<wbr/>Indent<wbr/>Past<wbr/>Parent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#nodeIndentPastParent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the fraction of this node's breadth is added to <a href="TreeLayout.html#nodeIndent" class="tsd-kind-accessor">nodeIndent</a>
to determine any spacing at the start of the children.</p>
<p>The default value is 0.0 -- the only indentation is specified by <a href="TreeLayout.html#nodeIndent" class="tsd-kind-accessor">nodeIndent</a>.
When the value is 1.0, the children will be indented past the breadth of the parent node.</p>
<p>This property is only sensible when the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>
is <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">Start</a> or <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">End</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="nodeSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>node<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#nodeSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the distance between child nodes.</p>
<p>This is the distance between sibling nodes.
A negative value causes sibling nodes to overlap.
The default value is 20.</p>
<p>The <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</a> property determines the distance between a parent node and the layer of its children.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="path" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>path</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreePath.html" class="tsd-signature-type tsd-kind-enum">TreePath</a></div><a href="#path" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets how the tree should be constructed from the
<a href="TreeEdge.html" class="tsd-kind-class">TreeEdge</a>s connecting <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es.
Must be a <a href="TreePath.html" class="tsd-kind-enum">TreePath</a> value.</p>
<p>The default value is <a href="TreePath.html#Default" class="tsd-kind-enum-member">TreePath.Default</a>,
where the value of <a href="Diagram.html#isTreePathToChildren" class="tsd-kind-accessor">Diagram.isTreePathToChildren</a> determines the effective value of this property.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="portSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type tsd-kind-class">Spot</a></div><a href="#portSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the spot that this node's port gets as its FromSpot.</p>
<p>The default value is <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a>.</p>
<p>A value of <a href="Spot.html#Default" class="tsd-kind-property">Spot.Default</a> will cause the TreeLayout
to assign a FromSpot based on the parent node's <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a>.
If the value is other than NoSpot, it is just assigned.
When <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> is <a href="TreePath.html#Source" class="tsd-kind-enum-member">Source</a>,
the port's ToSpot is set instead of the FromSpot.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="rootDefaults" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>root<wbr/>Defaults</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></div><a href="#rootDefaults" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the object holding the default values for root <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es.</p>
<p>The values for the following inheritable properties are actually stored in this object:
<a href="TreeLayout.html#sorting" class="tsd-kind-accessor">sorting</a>, <a href="TreeLayout.html#comparer" class="tsd-kind-accessor">comparer</a>, <a href="TreeLayout.html#angle" class="tsd-kind-accessor">angle</a>,
<a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a>, <a href="TreeLayout.html#nodeIndent" class="tsd-kind-accessor">nodeIndent</a>, <a href="TreeLayout.html#nodeIndentPastParent" class="tsd-kind-accessor">nodeIndentPastParent</a>,
<a href="TreeLayout.html#nodeSpacing" class="tsd-kind-accessor">nodeSpacing</a>, <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</a>, <a href="TreeLayout.html#layerSpacingParentOverlap" class="tsd-kind-accessor">layerSpacingParentOverlap</a>,
<a href="TreeLayout.html#compaction" class="tsd-kind-accessor">compaction</a>, <a href="TreeLayout.html#breadthLimit" class="tsd-kind-accessor">breadthLimit</a>, <a href="TreeLayout.html#rowSpacing" class="tsd-kind-accessor">rowSpacing</a>, <a href="TreeLayout.html#rowIndent" class="tsd-kind-accessor">rowIndent</a>,
<a href="TreeLayout.html#commentSpacing" class="tsd-kind-accessor">commentSpacing</a>, <a href="TreeLayout.html#commentMargin" class="tsd-kind-accessor">commentMargin</a>,
<a href="TreeLayout.html#setsPortSpot" class="tsd-kind-accessor">setsPortSpot</a>, <a href="TreeLayout.html#portSpot" class="tsd-kind-accessor">portSpot</a>, <a href="TreeLayout.html#setsChildPortSpot" class="tsd-kind-accessor">setsChildPortSpot</a>, <a href="TreeLayout.html#childPortSpot" class="tsd-kind-accessor">childPortSpot</a>.
The other properties of this <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> are ignored.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="roots" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>roots</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type tsd-kind-class">Set</a><span class="tsd-signature-symbol"><</span><a href="Node.html" class="tsd-signature-type tsd-kind-class">Node</a><span class="tsd-signature-symbol"> | </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">></span></div><a href="#roots" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the collection of root vertexes.</p>
<p>Initially this will be an empty <a href="Set.html" class="tsd-kind-class">go.Set</a>.</p>
<p>If the <a href="TreeLayout.html#path" class="tsd-kind-accessor">path</a> is either <a href="TreePath.html#Destination" class="tsd-kind-enum-member">Destination</a> or
<a href="TreePath.html#Source" class="tsd-kind-enum-member">Source</a>, 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 <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="rowIndent" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>row<wbr/>Indent</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#rowIndent" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default indentation of the first child of each row,
if the <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">alignment</a> is not a "Center" alignment,
when the breadth occupied by the children is limited by <a href="TreeLayout.html#breadthLimit" class="tsd-kind-accessor">breadthLimit</a>.</p>
<p>The default value is 10. The value should be non-negative.</p>
<p>This is used to leave room for the links that connect a parent node
with the child nodes that are in additional rows.
The <a href="TreeLayout.html#rowSpacing" class="tsd-kind-accessor">rowSpacing</a> property determines the distance between the rows or columns when there is more than one.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="rowSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>row<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#rowSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the distance between multiple rows or columns of a parent node's immediate children
when the breadth occupied by the children is limited by <a href="TreeLayout.html#breadthLimit" class="tsd-kind-accessor">breadthLimit</a>.</p>
<p>The default value is 25.</p>
<p>This property is only used when there is more than one
row of children for a given parent node.
The <a href="TreeLayout.html#nodeSpacing" class="tsd-kind-accessor">nodeSpacing</a> property determines the distance between siblings.
The <a href="TreeLayout.html#layerSpacing" class="tsd-kind-accessor">layerSpacing</a> property determines the distance between
the parent node and its first row or column of child nodes.
The <a href="TreeLayout.html#rowIndent" class="tsd-kind-accessor">rowIndent</a> property determines any indentation for all of the rows.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="setsChildPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sets<wbr/>Child<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#setsChildPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether the TreeLayout should set the
ToSpot for each child node port.</p>
<p>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.</p>
<p>The spot used depends on the value of <a href="TreeLayout.html#childPortSpot" class="tsd-kind-accessor">childPortSpot</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="setsPortSpot" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sets<wbr/>Port<wbr/>Spot</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#setsPortSpot" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets whether the TreeLayout should set the
FromSpot for this parent node port.</p>
<p>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.</p>
<p>The spot used depends on the value of <a href="TreeLayout.html#portSpot" class="tsd-kind-accessor">portSpot</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="sorting" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sorting</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeSorting.html" class="tsd-signature-type tsd-kind-enum">TreeSorting</a></div><a href="#sorting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the default sorting policy for ordering the immediate children of a vertex.
Must be a <a href="TreeSorting.html" class="tsd-kind-enum">TreeSorting</a> value.</p>
<p>The default value is <a href="TreeSorting.html#Forwards" class="tsd-kind-enum-member">TreeSorting.Forwards</a>.</p>
<p>This sets the <a href="TreeLayout.html#rootDefaults" class="tsd-kind-accessor">rootDefaults</a>' property of the same name.
The sort order is determined by <a href="TreeLayout.html#comparer" class="tsd-kind-accessor">comparer</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="treeStyle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>tree<wbr/>Style</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="TreeStyle.html" class="tsd-signature-type tsd-kind-enum">TreeStyle</a></div><a href="#treeStyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the Style for the resulting trees.
Must be a <a href="TreeStyle.html" class="tsd-kind-enum">TreeStyle</a> value.</p>
<p>The default value is <a href="TreeStyle.html#Layered" class="tsd-kind-enum-member">TreeStyle.Layered</a>.</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="addComments" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>add<wbr/>Comments</span><a href="#addComments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="addComments.addComments-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">add<wbr/>Comments</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#addComments.addComments-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Find any associated objects to be positioned along with the <a href="LayoutVertex.html#node" class="tsd-kind-accessor">LayoutVertex.node</a>.</p>
<p>This looks for visible <a href="Node.html" class="tsd-kind-class">Node</a>'s whose category is "Comment" and
that refer to the tree vertex's <a href="Node.html" class="tsd-kind-class">Node</a>.
This method is only called when <a href="TreeLayout.html#comments" class="tsd-kind-accessor">comments</a> is true.</p>
<p>You may want to override this method in order to customize how
any associated objects are found and how the node's <a href="LayoutVertex.html#bounds" class="tsd-kind-accessor">LayoutVertex.bounds</a>
are set to reserve space for those associated objects.
This method should not walk the tree, since it is called for each
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> in an indeterminate order.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="arrangeTrees" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>arrange<wbr/>Trees</span><a href="#arrangeTrees" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="arrangeTrees.arrangeTrees-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">arrange<wbr/>Trees</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#arrangeTrees.arrangeTrees-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Position each separate tree.</p>
<p>This is called after each tree has been laid out and thus each subtree
bounds are known.
The <a href="TreeLayout.html#arrangement" class="tsd-kind-accessor">arrangement</a> and <a href="TreeLayout.html#arrangementSpacing" class="tsd-kind-accessor">arrangementSpacing</a> and <a href="Layout.html#arrangementOrigin" class="tsd-kind-accessor">Layout.arrangementOrigin</a>
properties affect this method's behavior.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="assignTreeVertexValues" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>assign<wbr/>Tree<wbr/>Vertex<wbr/>Values</span><a href="#assignTreeVertexValues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="assignTreeVertexValues.assignTreeVertexValues-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">assign<wbr/>Tree<wbr/>Vertex<wbr/>Values</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#assignTreeVertexValues.assignTreeVertexValues-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Assign final property values for a <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>.</p>
<p>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
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es, so you can examine and modify the
values of related tree nodes.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
<p>However, when <a href="TreeVertex.html#alignment" class="tsd-kind-accessor">TreeVertex.alignment</a> is <a href="TreeAlignment.html#BusBranching" class="tsd-kind-enum-member">TreeAlignment.BusBranching</a>,
changing the <a href="TreeVertex.html#sorting" class="tsd-kind-accessor">TreeVertex.sorting</a> or
<a href="TreeVertex.html#comparer" class="tsd-kind-accessor">TreeVertex.comparer</a> properties in this method will have no effect.</p>
<p>This method should not walk the tree, since it is called for each
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> in a depth-first manner starting at a root.</p>
<p>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 <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>
properties that are automatically computed for you, <a href="TreeVertex.html#childrenCount" class="tsd-kind-accessor">TreeVertex.childrenCount</a> and <a href="TreeVertex.html#descendantCount" class="tsd-kind-accessor">TreeVertex.descendantCount</a>.</p>
<pre><code class="language-js"><span class="hl-1">class</span><span class="hl-2"> </span><span class="hl-14">SqueezingTreeLayout</span><span class="hl-2"> </span><span class="hl-1">extends</span><span class="hl-2"> </span><span class="hl-14">go</span><span class="hl-2">.</span><span class="hl-14">TreeLayout</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-5">assignTreeVertexValues</span><span class="hl-2">(</span><span class="hl-4">v</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">childrenCount</span><span class="hl-2"> > </span><span class="hl-7">6</span><span class="hl-2"> && </span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">childrenCount</span><span class="hl-2"> === </span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">descendantCount</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">alignment</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">TreeAlignment</span><span class="hl-2">.</span><span class="hl-4">BottomRightBus</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">layerSpacing</span><span class="hl-2"> = </span><span class="hl-7">10</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">v</span><span class="hl-2">.</span><span class="hl-4">rowSpacing</span><span class="hl-2"> = </span><span class="hl-7">0</span><span class="hl-2">;</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span>
</code><button>Copy</button></pre>
<p>If you need to assign TreeVertex values and also have them be "inherited" by the child vertexes,
you should override <a href="TreeLayout.html#initializeTreeVertexValues" class="tsd-kind-method">initializeTreeVertexValues</a> instead.
However at the time that method is called, the computed properties of TreeVertex will not be available.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="commitLayers" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <code class="tsd-tag ts-flagVirtual">Virtual</code><span>commit<wbr/>Layers</span><a href="#commitLayers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="commitLayers.commitLayers-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">commit<wbr/>Layers</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">layerRects</span><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><span class="tsd-signature-symbol">[]</span>, <span class="tsd-kind-parameter">offset</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type tsd-kind-class">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#commitLayers.commitLayers-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This overridable method is called by <a href="TreeLayout.html#commitLayout" class="tsd-kind-method">commitLayout</a>
if <a href="TreeLayout.html#layerStyle" class="tsd-kind-accessor">layerStyle</a> is LayerUniform
to support custom arrangement of bands or labels across each layout layer.
By default this method does nothing.</p>
<p>The coordinates used in the resulting Rects may need to be offset by the <a href="Layout.html#arrangementOrigin" class="tsd-kind-accessor">Layout.arrangementOrigin</a>
and/or by the arrangement of subtrees done by <a href="TreeLayout.html#arrangeTrees" class="tsd-kind-method">arrangeTrees</a>.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">layerRects</span>: <a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a><span class="tsd-signature-symbol">[]</span></h5><div class="tsd-comment tsd-typography"><p>an Array of <a href="Rect.html" class="tsd-kind-class">Rect</a>s with the bounds of each of the "layers"</p>
</div></li><li><h5><span class="tsd-kind-parameter">offset</span>: <a href="Point.html" class="tsd-signature-type tsd-kind-class">Point</a></h5><div class="tsd-comment tsd-typography"><p>the position of the top-left corner of the banded area relative to the coordinates given by the layerRects</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="commitLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>commit<wbr/>Layout</span><a href="#commitLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="commitLayout.commitLayout-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">commit<wbr/>Layout</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#commitLayout.commitLayout-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Set the fromSpot and toSpot on each Link, position each Node according
to the vertex position, and then position/route the Links.</p>
<p>This calls the <a href="TreeLayout.html#commitNodes" class="tsd-kind-method">commitNodes</a> and <a href="TreeLayout.html#commitLinks" class="tsd-kind-method">commitLinks</a> 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 <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="commitLinks" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <code class="tsd-tag ts-flagVirtual">Virtual</code><span>commit<wbr/>Links</span><a href="#commitLinks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="commitLinks.commitLinks-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">commit<wbr/>Links</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#commitLinks.commitLinks-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Routes the links.</p>
<p>This is called by <a href="TreeLayout.html#commitLayout" class="tsd-kind-method">commitLayout</a>.
This is only called if <a href="Layout.html#isRouting" class="tsd-kind-accessor">Layout.isRouting</a> is true.
See also <a href="TreeLayout.html#commitNodes" class="tsd-kind-method">commitNodes</a>.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="commitNodes" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <code class="tsd-tag ts-flagVirtual">Virtual</code><span>commit<wbr/>Nodes</span><a href="#commitNodes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="commitNodes.commitNodes-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">commit<wbr/>Nodes</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#commitNodes.commitNodes-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Commit the position of all nodes.</p>
<p>This is called by <a href="TreeLayout.html#commitLayout" class="tsd-kind-method">commitLayout</a>.
See also <a href="TreeLayout.html#commitLinks" class="tsd-kind-method">commitLinks</a>.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="createNetwork" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>create<wbr/>Network</span><a href="#createNetwork" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="createNetwork.createNetwork-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">create<wbr/>Network</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="TreeNetwork.html" class="tsd-signature-type tsd-kind-class">TreeNetwork</a><a href="#createNetwork.createNetwork-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create a new <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a> of <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es and <a href="TreeEdge.html" class="tsd-kind-class">TreeEdge</a>s.</p>
</div><h4 class="tsd-returns-title">Returns <a href="TreeNetwork.html" class="tsd-signature-type tsd-kind-class">TreeNetwork</a></h4><p>a new <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a>.</p>
</li></ul></section><section class="tsd-panel tsd-member"><a id="doLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>do<wbr/>Layout</span><a href="#doLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="doLayout.doLayout-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">do<wbr/>Layout</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">coll</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type tsd-kind-interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type tsd-kind-class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type tsd-kind-class">Group</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#doLayout.doLayout-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Perform the tree layout.</p>
<p>If there is no <a href="Layout.html#network" class="tsd-kind-accessor">Layout.network</a>, this calls <a href="TreeLayout.html#makeNetwork" class="tsd-kind-method">makeNetwork</a> to create a <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a> from the given collection of Parts.</p>
<p>If there are no <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> <a href="TreeLayout.html#roots" class="tsd-kind-accessor">roots</a> specified, this finds all roots in the <a href="Layout.html#network" class="tsd-kind-accessor">Layout.network</a>.</p>
<p>This initializes all of the <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>es and <a href="TreeEdge.html" class="tsd-kind-class">TreeEdge</a>s, calling <a href="TreeLayout.html#initializeTreeVertexValues" class="tsd-kind-method">initializeTreeVertexValues</a> on each vertex,
supporting inheritance of vertex values.
Then it calls <a href="TreeLayout.html#assignTreeVertexValues" class="tsd-kind-method">assignTreeVertexValues</a> on each one, to allow for node/vertex-specific customizations.
Next it sorts all of the child vertexes for each parent vertex, if needed.</p>
<p>This also calls <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> of each vertex, in order to find any comment nodes associated with each vertex,
so that they can be accommodated by the layout.</p>
<p>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 <a href="TreeLayout.html#arrangeTrees" class="tsd-kind-method">arrangeTrees</a> to position each separate tree relative to each other.</p>
<p>Finally this calls <a href="Layout.html#updateParts" class="tsd-kind-method">Layout.updateParts</a> to commit the Node positions from the vertex positions and the Link routes from the edges.
<a href="Layout.html#updateParts" class="tsd-kind-method">Layout.updateParts</a> calls <a href="TreeLayout.html#commitLayout" class="tsd-kind-method">commitLayout</a> within a transaction.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">coll</span>: <a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type tsd-kind-interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type tsd-kind-class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type tsd-kind-class">Group</a></h5><div class="tsd-comment tsd-typography"><p>A <a href="Diagram.html" class="tsd-kind-class">Diagram</a> or a <a href="Group.html" class="tsd-kind-class">Group</a> or a collection of <a href="Part.html" class="tsd-kind-class">Part</a>s.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="initializeTreeVertexValues" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>initialize<wbr/>Tree<wbr/>Vertex<wbr/>Values</span><a href="#initializeTreeVertexValues" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="initializeTreeVertexValues.initializeTreeVertexValues-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">initialize<wbr/>Tree<wbr/>Vertex<wbr/>Values</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#initializeTreeVertexValues.initializeTreeVertexValues-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Assign initial property values for a <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a>.</p>
<p>The values may be inherited, so this method is called while
propagating values from the root nodes.
This method should not walk the tree, since it is called for each
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> in a depth-first manner starting at a root.</p>
<p>You probably do not need to override this method,
but if you do you should call first either the base method
or <a href="TreeVertex.html#copyInheritedPropertiesFrom" class="tsd-kind-method">TreeVertex.copyInheritedPropertiesFrom</a>, since they
assign most of the <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> property values
used to influence the layout.
Informational properties such as <a href="TreeVertex.html#descendantCount" class="tsd-kind-accessor">TreeVertex.descendantCount</a>
and <a href="TreeVertex.html#maxGenerationCount" class="tsd-kind-accessor">TreeVertex.maxGenerationCount</a> will not yet have been initialized
by the time this method is called.
It is more common to override <a href="TreeLayout.html#assignTreeVertexValues" class="tsd-kind-method">assignTreeVertexValues</a> in order to
modify a property or two to customize the layout at that node.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
<p>When the <a href="TreeVertex.html#alignment" class="tsd-kind-accessor">TreeVertex.alignment</a> is <a href="TreeAlignment.html#BusBranching" class="tsd-kind-enum-member">TreeAlignment.BusBranching</a>,
this will modify the <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a> appropriately depending on which
side of the bus the vertex is on.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="layoutComments" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><span>layout<wbr/>Comments</span><a href="#layoutComments" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="layoutComments.layoutComments-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">layout<wbr/>Comments</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#layoutComments.layoutComments-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Position and <a href="TreeVertex.html#comments" class="tsd-kind-accessor">TreeVertex.comments</a> around the vertex.</p>
<p>This method should not walk the tree, since it is called for each
<a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> in an indeterminate order.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="TreeVertex.html" class="tsd-signature-type tsd-kind-class">TreeVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="makeNetwork" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOverride">Override</code><span>make<wbr/>Network</span><a href="#makeNetwork" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="makeNetwork.makeNetwork-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">make<wbr/>Network</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">coll</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type tsd-kind-interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type tsd-kind-class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type tsd-kind-class">Group</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="LayoutNetwork.html" class="tsd-signature-type tsd-kind-class">LayoutNetwork</a><a href="#makeNetwork.makeNetwork-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create and initialize a <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a> with the given nodes and links.</p>
<p>This does not include any nodes of category "Comment".
Comment nodes are added by the <a href="TreeLayout.html#addComments" class="tsd-kind-method">addComments</a> method.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">coll</span>: <a href="Diagram.html" class="tsd-signature-type tsd-kind-class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type tsd-kind-interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type tsd-kind-class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type tsd-kind-class">Group</a></h5><div class="tsd-comment tsd-typography"><p>A <a href="Diagram.html" class="tsd-kind-class">Diagram</a> or a <a href="Group.html" class="tsd-kind-class">Group</a> or a collection of <a href="Part.html" class="tsd-kind-class">Part</a>s.</p>
</div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="LayoutNetwork.html" class="tsd-signature-type tsd-kind-class">LayoutNetwork</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Properties</h2><section class="tsd-panel tsd-member"><a id="AlignmentBottomRightBus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Bottom<wbr/>Right<wbr/>Bus</span><a href="#AlignmentBottomRightBus" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#BottomRightBus" class="tsd-kind-enum-member">TreeAlignment.BottomRightBus</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentBus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Bus</span><a href="#AlignmentBus" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#Bus" class="tsd-kind-enum-member">TreeAlignment.Bus</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentBusBranching" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Bus<wbr/>Branching</span><a href="#AlignmentBusBranching" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#BusBranching" class="tsd-kind-enum-member">TreeAlignment.BusBranching</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentCenterChildren" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Center<wbr/>Children</span><a href="#AlignmentCenterChildren" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#CenterChildren" class="tsd-kind-enum-member">TreeAlignment.CenterChildren</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentCenterSubtrees" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Center<wbr/>Subtrees</span><a href="#AlignmentCenterSubtrees" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#CenterSubtrees" class="tsd-kind-enum-member">TreeAlignment.CenterSubtrees</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentEnd" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>End</span><a href="#AlignmentEnd" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#End" class="tsd-kind-enum-member">TreeAlignment.End</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentStart" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Start</span><a href="#AlignmentStart" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#Start" class="tsd-kind-enum-member">TreeAlignment.Start</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="AlignmentTopLeftBus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Alignment<wbr/>Top<wbr/>Left<wbr/>Bus</span><a href="#AlignmentTopLeftBus" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeAlignment.html#TopLeftBus" class="tsd-kind-enum-member">TreeAlignment.TopLeftBus</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="ArrangementFixedRoots" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Arrangement<wbr/>Fixed<wbr/>Roots</span><a href="#ArrangementFixedRoots" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeArrangement.html#FixedRoots" class="tsd-kind-enum-member">TreeArrangement.FixedRoots</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="ArrangementHorizontal" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Arrangement<wbr/>Horizontal</span><a href="#ArrangementHorizontal" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeArrangement.html#Horizontal" class="tsd-kind-enum-member">TreeArrangement.Horizontal</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="ArrangementVertical" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Arrangement<wbr/>Vertical</span><a href="#ArrangementVertical" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeArrangement.html#Vertical" class="tsd-kind-enum-member">TreeArrangement.Vertical</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="CompactionBlock" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Compaction<wbr/>Block</span><a href="#CompactionBlock" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeCompaction.html#Block" class="tsd-kind-enum-member">TreeCompaction.Block</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="CompactionNone" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Compaction<wbr/>None</span><a href="#CompactionNone" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeCompaction.html#None" class="tsd-kind-enum-member">TreeCompaction.None</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="LayerIndividual" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Layer<wbr/>Individual</span><a href="#LayerIndividual" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeLayerStyle.html#Individual" class="tsd-kind-enum-member">TreeLayerStyle.Individual</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="LayerSiblings" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Layer<wbr/>Siblings</span><a href="#LayerSiblings" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeLayerStyle.html#Siblings" class="tsd-kind-enum-member">TreeLayerStyle.Siblings</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="LayerUniform" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Layer<wbr/>Uniform</span><a href="#LayerUniform" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeLayerStyle.html#Uniform" class="tsd-kind-enum-member">TreeLayerStyle.Uniform</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="PathDefault" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Path<wbr/>Default</span><a href="#PathDefault" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreePath.html#Default" class="tsd-kind-enum-member">TreePath.Default</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="PathDestination" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Path<wbr/>Destination</span><a href="#PathDestination" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreePath.html#Destination" class="tsd-kind-enum-member">TreePath.Destination</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="PathSource" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Path<wbr/>Source</span><a href="#PathSource" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreePath.html#Source" class="tsd-kind-enum-member">TreePath.Source</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="SortingAscending" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Sorting<wbr/>Ascending</span><a href="#SortingAscending" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeSorting.html#Ascending" class="tsd-kind-enum-member">TreeSorting.Ascending</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="SortingDescending" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Sorting<wbr/>Descending</span><a href="#SortingDescending" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeSorting.html#Descending" class="tsd-kind-enum-member">TreeSorting.Descending</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="SortingForwards" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Sorting<wbr/>Forwards</span><a href="#SortingForwards" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeSorting.html#Forwards" class="tsd-kind-enum-member">TreeSorting.Forwards</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="SortingReverse" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Sorting<wbr/>Reverse</span><a href="#SortingReverse" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeSorting.html#Reverse" class="tsd-kind-enum-member">TreeSorting.Reverse</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="StyleAlternating" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Style<wbr/>Alternating</span><a href="#StyleAlternating" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeStyle.html#Alternating" class="tsd-kind-enum-member">TreeStyle.Alternating</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="StyleLastParents" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Style<wbr/>Last<wbr/>Parents</span><a href="#StyleLastParents" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeStyle.html#LastParents" class="tsd-kind-enum-member">TreeStyle.LastParents</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="StyleLayered" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Style<wbr/>Layered</span><a href="#StyleLayered" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeStyle.html#Layered" class="tsd-kind-enum-member">TreeStyle.Layered</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="StyleRootOnly" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <code class="tsd-tag ts-flagReadonly">Readonly</code> <span class="deprecated">Style<wbr/>Root<wbr/>Only</span><a href="#StyleRootOnly" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">deprecated</code><p>See <a href="TreeStyle.html#RootOnly" class="tsd-kind-enum-member">TreeStyle.RootOnly</a>.</p>
</div></div></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#alignment"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alignment</span></a></li><li><a href="#alternateAlignment"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Alignment</span></a></li><li><a href="#alternateAngle"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Angle</span></a></li><li><a href="#alternateBreadthLimit"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Breadth<wbr/>Limit</span></a></li><li><a href="#alternateChildPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Child<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#alternateCommentMargin"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comment<wbr/>Margin</span></a></li><li><a href="#alternateCommentSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comment<wbr/>Spacing</span></a></li><li><a href="#alternateCompaction"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Compaction</span></a></li><li><a href="#alternateComparer"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Comparer</span></a></li><li><a href="#alternateDefaults"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Defaults</span></a></li><li><a href="#alternateLayerSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Layer<wbr/>Spacing</span></a></li><li><a href="#alternateLayerSpacingParentOverlap"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span></a></li><li><a href="#alternateNodeIndent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Indent</span></a></li><li><a href="#alternateNodeIndentPastParent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Indent<wbr/>Past<wbr/>Parent</span></a></li><li><a href="#alternateNodeSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Node<wbr/>Spacing</span></a></li><li><a href="#alternatePortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#alternateRowIndent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Row<wbr/>Indent</span></a></li><li><a href="#alternateRowSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Row<wbr/>Spacing</span></a></li><li><a href="#alternateSetsChildPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sets<wbr/>Child<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#alternateSetsPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sets<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#alternateSorting"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>alternate<wbr/>Sorting</span></a></li><li><a href="#angle"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>angle</span></a></li><li><a href="#arrangement"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arrangement</span></a></li><li><a href="#arrangementSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arrangement<wbr/>Spacing</span></a></li><li><a href="#breadthLimit"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>breadth<wbr/>Limit</span></a></li><li><a href="#childPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>child<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#commentMargin"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comment<wbr/>Margin</span></a></li><li><a href="#commentSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comment<wbr/>Spacing</span></a></li><li><a href="#comments"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comments</span></a></li><li><a href="#compaction"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>compaction</span></a></li><li><a href="#comparer"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>comparer</span></a></li><li><a href="#layerSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Spacing</span></a></li><li><a href="#layerSpacingParentOverlap"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Spacing<wbr/>Parent<wbr/>Overlap</span></a></li><li><a href="#layerStyle"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>layer<wbr/>Style</span></a></li><li><a href="#nodeIndent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Indent</span></a></li><li><a href="#nodeIndentPastParent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Indent<wbr/>Past<wbr/>Parent</span></a></li><li><a href="#nodeSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>node<wbr/>Spacing</span></a></li><li><a href="#path"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>path</span></a></li><li><a href="#portSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>port<wbr/>Spot</span></a></li><li><a href="#rootDefaults"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>root<wbr/>Defaults</span></a></li><li><a href="#roots"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>roots</span></a></li><li><a href="#rowIndent"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>row<wbr/>Indent</span></a></li><li><a href="#rowSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>row<wbr/>Spacing</span></a></li><li><a href="#setsChildPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sets<wbr/>Child<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#setsPortSpot"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sets<wbr/>Port<wbr/>Spot</span></a></li><li><a href="#sorting"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sorting</span></a></li><li><a href="#treeStyle"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>tree<wbr/>Style</span></a></li><li><a href="#addComments"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Comments</span></a></li><li><a href="#arrangeTrees"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>arrange<wbr/>Trees</span></a></li><li><a href="#assignTreeVertexValues"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>assign<wbr/>Tree<wbr/>Vertex<wbr/>Values</span></a></li><li><a href="#commitLayers" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layers</span></a></li><li><a href="#commitLayout"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layout</span></a></li><li><a href="#commitLinks" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Links</span></a></li><li><a href="#commitNodes" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Nodes</span></a></li><li><a href="#createNetwork"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>create<wbr/>Network</span></a></li><li><a href="#doLayout"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>do<wbr/>Layout</span></a></li><li><a href="#initializeTreeVertexValues"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>initialize<wbr/>Tree<wbr/>Vertex<wbr/>Values</span></a></li><li><a href="#layoutComments"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>layout<wbr/>Comments</span></a></li><li><a href="#makeNetwork"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>make<wbr/>Network</span></a></li><li><a href="#AlignmentBottomRightBus" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bottom<wbr/>Right<wbr/>Bus</span></a></li><li><a href="#AlignmentBus" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bus</span></a></li><li><a href="#AlignmentBusBranching" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Bus<wbr/>Branching</span></a></li><li><a href="#AlignmentCenterChildren" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Center<wbr/>Children</span></a></li><li><a href="#AlignmentCenterSubtrees" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Center<wbr/>Subtrees</span></a></li><li><a href="#AlignmentEnd" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>End</span></a></li><li><a href="#AlignmentStart" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Start</span></a></li><li><a href="#AlignmentTopLeftBus" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Alignment<wbr/>Top<wbr/>Left<wbr/>Bus</span></a></li><li><a href="#ArrangementFixedRoots" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Fixed<wbr/>Roots</span></a></li><li><a href="#ArrangementHorizontal" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Horizontal</span></a></li><li><a href="#ArrangementVertical" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Arrangement<wbr/>Vertical</span></a></li><li><a href="#CompactionBlock" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Compaction<wbr/>Block</span></a></li><li><a href="#CompactionNone" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Compaction<wbr/>None</span></a></li><li><a href="#LayerIndividual" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Individual</span></a></li><li><a href="#LayerSiblings" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Siblings</span></a></li><li><a href="#LayerUniform" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Layer<wbr/>Uniform</span></a></li><li><a href="#PathDefault" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Default</span></a></li><li><a href="#PathDestination" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Destination</span></a></li><li><a href="#PathSource" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Path<wbr/>Source</span></a></li><li><a href="#SortingAscending" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Ascending</span></a></li><li><a href="#SortingDescending" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Descending</span></a></li><li><a href="#SortingForwards" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Forwards</span></a></li><li><a href="#SortingReverse" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Sorting<wbr/>Reverse</span></a></li><li><a href="#StyleAlternating" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Alternating</span></a></li><li><a href="#StyleLastParents" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Last<wbr/>Parents</span></a></li><li><a href="#StyleLayered" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Layered</span></a></li><li><a href="#StyleRootOnly" class="deprecated"><svg class="static tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-S,#FF984D"></use></svg><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF984D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>Style<wbr/>Root<wbr/>Only</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>