gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
127 lines (125 loc) • 44.2 kB
HTML
<html class="default"><head><meta charSet="utf-8"/><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/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class GridLayout </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a><ul class="tsd-hierarchy"><li><span class="target">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">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>.<div><p>By default this layout will sort all of the Parts alphabetically
(comparing <a href="Part.html#text">Part.text</a> values, respecting case)
and position them left-to-right, separated by <a href="GridLayout.html#spacing">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">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">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.
You can also specify a value for the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a>,
which will be used instead of the diagram's viewport width, to control when each row is considered "full".
The value of <a href="Layout.html#isViewportSized">Layout.isViewportSized</a> will be true when
the value of <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> is <code>NaN</code>.
This causes the layout to be performed again automatically as the viewport changes size.</p>
<p>You can also set <a href="GridLayout.html#wrappingColumn">wrappingColumn</a> to limit the number of items in each row.
Both the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> and the <a href="GridLayout.html#wrappingColumn">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">LayoutNetwork</a>.</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr/>Size</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr/>Column</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr/>Width</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr/>Layout</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr/>To<wbr/>Right</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr/>To<wbr/>Left</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#arrangementOrigin" class="tsd-kind-icon">Layout.arrangement<wbr/>Origin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#boundsComputation" class="tsd-kind-icon">Layout.bounds<wbr/>Computation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#diagram" class="tsd-kind-icon">Layout.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#group" class="tsd-kind-icon">Layout.group</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isInitial" class="tsd-kind-icon">Layout.is<wbr/>Initial</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isOngoing" class="tsd-kind-icon">Layout.is<wbr/>Ongoing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRealtime" class="tsd-kind-icon">Layout.is<wbr/>Realtime</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRouting" class="tsd-kind-icon">Layout.is<wbr/>Routing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isValidLayout" class="tsd-kind-icon">Layout.is<wbr/>Valid<wbr/>Layout</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isViewportSized" class="tsd-kind-icon">Layout.is<wbr/>Viewport<wbr/>Sized</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#network" class="tsd-kind-icon">Layout.network</a></li></ul></section><section class="tsd-index-section undefined"><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#collectParts" class="tsd-kind-icon">Layout.collect<wbr/>Parts</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#commitLayout" class="tsd-kind-icon">Layout.commit<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#copy" class="tsd-kind-icon">Layout.copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#createNetwork" class="tsd-kind-icon">Layout.create<wbr/>Network</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#getLayoutBounds" class="tsd-kind-icon">Layout.get<wbr/>Layout<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#initialOrigin" class="tsd-kind-icon">Layout.initial<wbr/>Origin</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#invalidateLayout" class="tsd-kind-icon">Layout.invalidate<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#makeNetwork" class="tsd-kind-icon">Layout.make<wbr/>Network</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#updateParts" class="tsd-kind-icon">Layout.update<wbr/>Parts</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">new <wbr/>Grid<wbr/>Layout<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GridLayout.html" class="tsd-signature-type" data-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" data-tsd-kind="Class">GridLayout</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Constructs a <a href="GridLayout.html">GridLayout</a> with no <a href="Layout.html#network">Layout.network</a>
and with no owning <a href="Layout.html#diagram">Layout.diagram</a>.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GridLayout.html" class="tsd-signature-type" data-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><h4 class="tsd-returns-title">Returns <a href="GridLayout.html" class="tsd-signature-type" data-tsd-kind="Class">GridLayout</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="alignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> alignment<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#alignment" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether the <a href="Part.html#location">Part.location</a> or the position should be used
to arrange each part.</p>
<div><p>The default value is <a href="GridLayout.html#static-Location">GridLayout.Location</a> -- the <a href="Part.html#location">Part.location</a>s will
be aligned in a grid.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="arrangement" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> arrangement<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#arrangement" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets how to arrange the parts.
Must be <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a> or <a href="GridLayout.html#static-RightToLeft">GridLayout.RightToLeft</a>.</p>
<div><p>The default value is <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="cellSize" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> cell<wbr/>Size<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a><a href="#cellSize" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the minimum part size by which each part is positioned in the grid.</p>
<div><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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="comparer" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> comparer<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a>, b<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">number</span><a href="#comparer" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the comparison function used to sort the parts.</p>
<div><p>The default value is a case-insensitive alphabetic comparison
using the <a href="Part.html#text">Part.text</a> property of each part.</p>
<pre><code class="language-js"><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">GridLayout</span><span class="hl-2">,</span><br/><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">GridLayout</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">var</span><span class="hl-2"> </span><span class="hl-4">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">var</span><span class="hl-2"> </span><span class="hl-4">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><br/><span class="hl-2"> )</span>
</code></pre>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sorting" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> sorting<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#sorting" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets what order to place the parts.
Must be <a href="GridLayout.html#static-Forward">GridLayout.Forward</a>, <a href="GridLayout.html#static-Reverse">GridLayout.Reverse</a>,
<a href="GridLayout.html#static-Ascending">GridLayout.Ascending</a>, or <a href="GridLayout.html#static-Descending">GridLayout.Descending</a>.</p>
<div><p>The default value is <a href="GridLayout.html#static-Ascending">GridLayout.Ascending</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="spacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> spacing<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a><a href="#spacing" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the minimum horizontal and vertical space between parts.</p>
<div><p>The default value is 10 x 10.
The units are in document coordinates.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="wrappingColumn" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> wrapping<wbr/>Column<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#wrappingColumn" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the maximum number of columns.</p>
<div><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.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="wrappingWidth" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> wrapping<wbr/>Width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#wrappingWidth" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the wrapping width.</p>
<div><p>The default is NaN, meaning to use the width of the diagram's panel's viewport.
Must be a value greater than 0.</p>
</div></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a id="doLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> do<wbr/>Layout<a href="#doLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">do<wbr/>Layout<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-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" data-tsd-kind="Class">Group</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Assign the positions of the parts, ignoring any links.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>coll: <a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-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" data-tsd-kind="Class">Group</a></h5><div class="tsd-comment tsd-typography">
<p>A <a href="Diagram.html">Diagram</a> or a <a href="Group.html">Group</a> or a collection of <a href="Part.html">Part</a>s.</p>
</div></li></ul><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>Constants</h2><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Ascending" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Ascending<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Ascending" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Lay out each child according to the sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Descending" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Descending<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Descending" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Lay out each child in reverse sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Forward" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Forward<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Forward" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Lay out each child in the order in which they were found;
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-LeftToRight" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Left<wbr/>To<wbr/>Right<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-LeftToRight" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Fill each row from left to right;
This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Location" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Location<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Location" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Position the part's <a href="Part.html#location">Part.location</a> at a grid point;
This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Position" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Position<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Position" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Position the top-left corner of each part at a grid point;
This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Reverse" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Reverse<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-Reverse" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Lay out each child in reverse order from which they were found;
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-RightToLeft" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> Right<wbr/>To<wbr/>Left<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#static-RightToLeft" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-comment tsd-typography">
<p>Fill each row from right to left;
This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
</div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">GoJS Class Index</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class"><a href="GridLayout.html" class="tsd-kind-icon">Grid<wbr/>Layout</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr/>Size</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr/>Column</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr/>Width</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr/>Layout</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr/>To<wbr/>Right</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr/>To<wbr/>Left</a></li></ul></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-2022 by Northwoods Software Corporation.</div></div><footer class=""><div class="tsd w-full max-w-screen-xl mx-auto px-2"><h2>Settings</h2><p class="mb-4">Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');
});
</script></body></html>