create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
174 lines (171 loc) • 49.2 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>GridLayout | 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="GridLayout.html">GridLayout</a></li></ul><h1 class="flex items-center">Class GridLayout</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#GridLayout">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">GridLayout</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
and wrapping as needed. It ignores any Links connecting the Nodes being laid out.
There are many samples that use GridLayout.
Every <a href="Palette.html" class="tsd-kind-class">Palette</a> uses a GridLayout by default.</p>
<p class="box">
If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
<p>By default this layout will sort all of the Parts alphabetically
(comparing <a href="Part.html#text" class="tsd-kind-accessor">Part.text</a> values, respecting case)
and position them left-to-right, separated by <a href="GridLayout.html#spacing" class="tsd-kind-accessor">spacing</a><code>.width</code>,
until they do not fit in the current row.
At that time it starts a new row, separated from the previous row by <a href="GridLayout.html#spacing" class="tsd-kind-accessor">spacing</a><code>.height</code>.
There is a uniform cell size equal to the maximum Part width (plus spacing width)
and the maximum part height (plus spacing height).
At least one part is placed in each row, even if the part by itself is wider than the wrapping width.</p>
<p>You can specify values for the <a href="GridLayout.html#cellSize" class="tsd-kind-accessor">cellSize</a> <code>width</code> and <code>height</code>.
If a part is wider than the cell size, it spans more than one cell in the row.</p>
<p>When the value of <a href="GridLayout.html#wrappingWidth" class="tsd-kind-accessor">wrappingWidth</a> is set to <code>NaN</code>, as it is by default,
the value of <a href="Layout.html#isViewportSized" class="tsd-kind-accessor">Layout.isViewportSized</a> will be set to true.
This causes the layout to be performed again automatically as the viewport changes size.
You can also specify a real number value for the <a href="GridLayout.html#wrappingWidth" class="tsd-kind-accessor">wrappingWidth</a>,
which will be used instead of the diagram's viewport width, to control when each row is considered "full".</p>
<p>You can also set <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a> to limit the number of items in each row.
By default <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a> is <code>NaN</code>, meaning that there is no limit on the number of items in any one row.
Both the <a href="GridLayout.html#wrappingWidth" class="tsd-kind-accessor">wrappingWidth</a> and the <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a> are respected when deciding when to wrap to the next row.</p>
<p>This layout is sufficiently simple that it does not use a <a href="LayoutNetwork.html" class="tsd-kind-class">LayoutNetwork</a>.</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="GridLayout.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="GridLayout.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="GridLayout.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="GridLayout.html#cellSize" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>cell<wbr/>Size</span></a>
<a href="GridLayout.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="GridLayout.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="GridLayout.html#spacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>spacing</span></a>
<a href="GridLayout.html#wrappingColumn" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>wrapping<wbr/>Column</span></a>
<a href="GridLayout.html#wrappingWidth" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>wrapping<wbr/>Width</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="GridLayout.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>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="GridLayout.html#Ascending" 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>Ascending</span></a>
<a href="GridLayout.html#Descending" 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>Descending</span></a>
<a href="GridLayout.html#Forward" 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>Forward</span></a>
<a href="GridLayout.html#LeftToRight" 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>Left<wbr/>To<wbr/>Right</span></a>
<a href="GridLayout.html#Location" 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>Location</span></a>
<a href="GridLayout.html#Position" 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>Position</span></a>
<a href="GridLayout.html#Reverse" 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>Reverse</span></a>
<a href="GridLayout.html#RightToLeft" 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>Right<wbr/>To<wbr/>Left</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#commitLayout" 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.commit<wbr/>Layout</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#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>Layout.create<wbr/>Network</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#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>Layout.make<wbr/>Network</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_GridLayout" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Grid<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="GridLayout.html" class="tsd-signature-type tsd-kind-class">GridLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GridLayout.html" class="tsd-signature-type tsd-kind-class">GridLayout</a><a href="#constructor.new_GridLayout" 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="GridLayout.html" class="tsd-kind-class">GridLayout</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="GridLayout.html" class="tsd-signature-type tsd-kind-class">GridLayout</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="GridLayout.html" class="tsd-signature-type tsd-kind-class">GridLayout</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="GridAlignment.html" class="tsd-signature-type tsd-kind-enum">GridAlignment</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 whether the <a href="Part.html#location" class="tsd-kind-accessor">Part.location</a> or the position should be used
to arrange each part.</p>
<p>The default value is <a href="GridAlignment.html#Location" class="tsd-kind-enum-member">GridAlignment.Location</a> -- the <a href="Part.html#location" class="tsd-kind-accessor">Part.location</a>s will
be aligned in a grid.</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="GridArrangement.html" class="tsd-signature-type tsd-kind-enum">GridArrangement</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 to arrange the parts.
Must be a <a href="GridArrangement.html" class="tsd-kind-enum">GridArrangement</a> value.</p>
<p>The default value is <a href="GridArrangement.html#LeftToRight" class="tsd-kind-enum-member">GridArrangement.LeftToRight</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="cellSize" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>cell<wbr/>Size</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="#cellSize" 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 minimum part size by which each part is positioned in the grid.</p>
<p>The default value is NaN x NaN.
The units are in document coordinates.</p>
<p>When the cell size is smaller than a part, the part will occupy more than one cell.
This allows parts to be positioned closer to each other, but then variations in part
sizes may cause them not to be aligned in perfect rows or columns.</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="Part.html" class="tsd-signature-type tsd-kind-class">Part</a>, <span class="tsd-kind-parameter">b</span><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><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 comparison function used to sort the parts.</p>
<p>The default value is a case-insensitive alphabetic comparison
using the <a href="Part.html#text" class="tsd-kind-accessor">Part.text</a> property of each part.</p>
<pre><code class="language-js"><span class="hl-2"> </span><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">GridLayout</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">GridSorting</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">pa</span><span class="hl-2">, </span><span class="hl-4">pb</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">pa</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">pb</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="sorting" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sorting</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="GridSorting.html" class="tsd-signature-type tsd-kind-enum">GridSorting</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 what order to place the parts.
Must be a <a href="GridSorting.html" class="tsd-kind-enum">GridSorting</a> value.</p>
<p>The default value is <a href="GridSorting.html#Ascending" class="tsd-kind-enum-member">GridSorting.Ascending</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="spacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>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="#spacing" 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 minimum horizontal and vertical space between parts.</p>
<p>The default value is 10 x 10.
The units are in document coordinates.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="wrappingColumn" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>wrapping<wbr/>Column</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#wrappingColumn" 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 maximum number of items that the layout will arrange in a single row.</p>
<p>The default is NaN, meaning not to limit the number of columns.
1 is a common value to produce a single column of parts.
The value must be positive or NaN.</p>
<p>When <a href="Diagram.html#initialAutoScale" class="tsd-kind-accessor">Diagram.initialAutoScale</a> or <a href="Diagram.html#autoScale" class="tsd-kind-accessor">Diagram.autoScale</a> are not None,
it is common to set <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a> and <a href="GridLayout.html#wrappingWidth" class="tsd-kind-accessor">wrappingWidth</a> to large values --
whatever seems reasonable given the number and size of the parts that will be laid out
and the size of the viewport.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="wrappingWidth" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>wrapping<wbr/>Width</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#wrappingWidth" 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 width beyond which the layout will start a new row.</p>
<p>The default is NaN, meaning to use the width of the diagram's panel's viewport.
Infinity is a common value to produce a single row of parts, unless limited by <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a>.
The value must be positive or NaN.</p>
<p>If the new value is NaN, <a href="Layout.html#isViewportSized" class="tsd-kind-accessor">Layout.isViewportSized</a> will be set to true.
When <a href="Diagram.html#initialAutoScale" class="tsd-kind-accessor">Diagram.initialAutoScale</a> or <a href="Diagram.html#autoScale" class="tsd-kind-accessor">Diagram.autoScale</a> are not None,
it is common to set <a href="GridLayout.html#wrappingColumn" class="tsd-kind-accessor">wrappingColumn</a> and <a href="GridLayout.html#wrappingWidth" class="tsd-kind-accessor">wrappingWidth</a> to large values --
whatever seems reasonable given the number and size of the parts that will be laid out
and the size of the viewport.</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="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>Assign the positions of the parts, ignoring any links.</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><section class="tsd-panel-group tsd-member-group"><h2>Properties</h2><section class="tsd-panel tsd-member"><a id="Ascending" 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">Ascending</span><a href="#Ascending" 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="GridSorting.html#Ascending" class="tsd-kind-enum-member">GridSorting.Ascending</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Descending" 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">Descending</span><a href="#Descending" 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="GridSorting.html#Descending" class="tsd-kind-enum-member">GridSorting.Descending</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Forward" 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">Forward</span><a href="#Forward" 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="GridSorting.html#Forwards" class="tsd-kind-enum-member">GridSorting.Forwards</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="LeftToRight" 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">Left<wbr/>To<wbr/>Right</span><a href="#LeftToRight" 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="GridArrangement.html#LeftToRight" class="tsd-kind-enum-member">GridArrangement.LeftToRight</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Location" 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">Location</span><a href="#Location" 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="GridAlignment.html#Location" class="tsd-kind-enum-member">GridAlignment.Location</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Position" 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">Position</span><a href="#Position" 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="GridAlignment.html#Position" class="tsd-kind-enum-member">GridAlignment.Position</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="Reverse" 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">Reverse</span><a href="#Reverse" 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="GridSorting.html#Reverse" class="tsd-kind-enum-member">GridSorting.Reverse</a>.</p>
</div></div></section><section class="tsd-panel tsd-member"><a id="RightToLeft" 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">Right<wbr/>To<wbr/>Left</span><a href="#RightToLeft" 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="GridArrangement.html#RightToLeft" class="tsd-kind-enum-member">GridArrangement.RightToLeft</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="#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="#cellSize"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>cell<wbr/>Size</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="#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="#spacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>spacing</span></a></li><li><a href="#wrappingColumn"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>wrapping<wbr/>Column</span></a></li><li><a href="#wrappingWidth"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>wrapping<wbr/>Width</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="#Ascending" 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>Ascending</span></a></li><li><a href="#Descending" 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>Descending</span></a></li><li><a href="#Forward" 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>Forward</span></a></li><li><a href="#LeftToRight" 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>Left<wbr/>To<wbr/>Right</span></a></li><li><a href="#Location" 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>Location</span></a></li><li><a href="#Position" 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>Position</span></a></li><li><a href="#Reverse" 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>Reverse</span></a></li><li><a href="#RightToLeft" 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>Right<wbr/>To<wbr/>Left</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>