create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
93 lines (91 loc) • 17.1 kB
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>TreeAlignment | 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="TreeAlignment.html">TreeAlignment</a></li></ul><h1 class="flex items-center">Enumeration TreeAlignment</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-comment"><div class="tsd-comment tsd-typography"><p>This enumeration specifies how to position a parent <a href="TreeVertex.html" class="tsd-kind-class">TreeVertex</a> relative to its children,
or how to align children in a bus.
Used for <a href="TreeLayout.html#alignment" class="tsd-kind-accessor">TreeLayout.alignment</a> or <a href="TreeLayout.html#alternateAlignment" class="tsd-kind-accessor">TreeLayout.alternateAlignment</a>.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>3.0</p>
</div></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">Enumeration Members</h3><div class="tsd-index-list"><a href="TreeAlignment.html#BottomRightBus" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bottom<wbr/>Right<wbr/>Bus</span></a>
<a href="TreeAlignment.html#Bus" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bus</span></a>
<a href="TreeAlignment.html#BusBranching" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bus<wbr/>Branching</span></a>
<a href="TreeAlignment.html#CenterChildren" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Center<wbr/>Children</span></a>
<a href="TreeAlignment.html#CenterSubtrees" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Center<wbr/>Subtrees</span></a>
<a href="TreeAlignment.html#End" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>End</span></a>
<a href="TreeAlignment.html#Start" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Start</span></a>
<a href="TreeAlignment.html#TopLeftBus" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Top<wbr/>Left<wbr/>Bus</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Enumeration Members</h2><section class="tsd-panel tsd-member"><a id="BottomRightBus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Bottom<wbr/>Right<wbr/>Bus</span><a href="#BottomRightBus" 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 tsd-typography"><p>The children are positioned in a bus, only on the bottom or right side of the parent.</p>
<p>A bus does not take <a href="TreeVertex.html#breadthLimit" class="tsd-kind-accessor">TreeVertex.breadthLimit</a> into account.</p>
</div></section><section class="tsd-panel tsd-member"><a id="Bus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Bus</span><a href="#Bus" 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 tsd-typography"><p>The children are positioned in a bus on both sides of an "aisle" where the links to them go,
with the last odd child (if any) placed at the end of the aisle in the middle.</p>
<p>The children, if they are themselves parents, continue at the same inherited angle;
use <a href="TreeAlignment.html#BusBranching" class="tsd-kind-enum-member">BusBranching</a> if you want grandchildren to proceed growing in
the different angle as determined by the side.</p>
<p>A bus does not take <a href="TreeVertex.html#breadthLimit" class="tsd-kind-accessor">TreeVertex.breadthLimit</a> into account.</p>
</div></section><section class="tsd-panel tsd-member"><a id="BusBranching" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Bus<wbr/>Branching</span><a href="#BusBranching" 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 tsd-typography"><p>Like <a href="TreeAlignment.html#Bus" class="tsd-kind-enum-member">Bus</a> with the children arranged on both sides of an "aisle"
with any last odd child placed at the end of the aisle,
but the children get an <a href="TreeVertex.html#angle" class="tsd-kind-accessor">TreeVertex.angle</a> that depends on which side of the aisle
they were placed.</p>
<p>This only works well when the <a href="TreeLayout.html#treeStyle" class="tsd-kind-accessor">TreeLayout.treeStyle</a> is <a href="TreeStyle.html#Layered" class="tsd-kind-enum-member">TreeStyle.Layered</a>.</p>
<p>A bus does not take <a href="TreeVertex.html#breadthLimit" class="tsd-kind-accessor">TreeVertex.breadthLimit</a> into account.</p>
</div></section><section class="tsd-panel tsd-member"><a id="CenterChildren" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Center<wbr/>Children</span><a href="#CenterChildren" 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 tsd-typography"><p>The parent is centered at the middle of the range of its immediate child nodes.</p>
<p>When there is a breadth limit that causes there to be multiple rows,
the links that extend from the parent to those children in rows past
the first one may cross over the nodes that are in earlier rows.</p>
</div></section><section class="tsd-panel tsd-member"><a id="CenterSubtrees" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Center<wbr/>Subtrees</span><a href="#CenterSubtrees" 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 tsd-typography"><p>The parent is centered at the middle of the range of its child subtrees.</p>
<p>When there is a breadth limit that causes there to be multiple rows,
the links that extend from the parent to those children in rows past
the first one may cross over the nodes that are in earlier rows.</p>
</div></section><section class="tsd-panel tsd-member"><a id="End" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>End</span><a href="#End" 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 tsd-typography"><p>The parent is positioned near the last of its children.</p>
</div></section><section class="tsd-panel tsd-member"><a id="Start" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Start</span><a href="#Start" 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 tsd-typography"><p>The parent is positioned near the first of its children.</p>
</div></section><section class="tsd-panel tsd-member"><a id="TopLeftBus" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>Top<wbr/>Left<wbr/>Bus</span><a href="#TopLeftBus" 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 tsd-typography"><p>The children are positioned in a bus, only on the top or left side of the parent.</p>
<p>A bus does not take <a href="TreeVertex.html#breadthLimit" class="tsd-kind-accessor">TreeVertex.breadthLimit</a> into account.</p>
</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="#BottomRightBus"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bottom<wbr/>Right<wbr/>Bus</span></a></li><li><a href="#Bus"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bus</span></a></li><li><a href="#BusBranching"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Bus<wbr/>Branching</span></a></li><li><a href="#CenterChildren"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Center<wbr/>Children</span></a></li><li><a href="#CenterSubtrees"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Center<wbr/>Subtrees</span></a></li><li><a href="#End"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>End</span></a></li><li><a href="#Start"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Start</span></a></li><li><a href="#TopLeftBus"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-16"></use></svg><span>Top<wbr/>Left<wbr/>Bus</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>