create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
193 lines (191 loc) • 46.3 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>PackedLayout | 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="PackedLayout.html">PackedLayout</a></li></ul><h1 class="flex items-center">Class PackedLayout</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-extension"><p>This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the <a href="../../intro/extensions.html">Extensions intro page</a> for more information.</p></section><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#PackedLayout">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">PackedLayout</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Custom layout which attempts to pack nodes as close together as possible
without overlap. Each node is assumed to be either rectangular or
circular (dictated by the <a href="PackedLayout.html#hasCircularNodes" class="tsd-kind-accessor">hasCircularNodes</a> property). This layout
supports packing nodes into either a rectangle or an ellipse, with the
shape determined by the packShape property and the aspect ratio determined
by either the aspectRatio property or the specified width and height
(depending on the packMode).</p>
<p>Nodes with 0 width or height cannot be packed, so they are treated by this
layout as having a width or height of 0.1 instead.</p>
<p>If you want to experiment with this extension, try the <a href="../../samples/PackedLayout.html">PackedLayout</a> sample.</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="PackedLayout.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="PackedLayout.html#actualBounds" 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>actual<wbr/>Bounds</span></a>
<a href="PackedLayout.html#actualSpacing" 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>actual<wbr/>Spacing</span></a>
<a href="PackedLayout.html#arrangesToOrigin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arranges<wbr/>To<wbr/>Origin</span></a>
<a href="PackedLayout.html#aspectRatio" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>aspect<wbr/>Ratio</span></a>
<a href="PackedLayout.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="PackedLayout.html#enclosingCircle" 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>enclosing<wbr/>Circle</span></a>
<a href="PackedLayout.html#hasCircularNodes" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>has<wbr/>Circular<wbr/>Nodes</span></a>
<a href="PackedLayout.html#packMode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pack<wbr/>Mode</span></a>
<a href="PackedLayout.html#packShape" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pack<wbr/>Shape</span></a>
<a href="PackedLayout.html#size" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>size</span></a>
<a href="PackedLayout.html#sortMode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sort<wbr/>Mode</span></a>
<a href="PackedLayout.html#sortOrder" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sort<wbr/>Order</span></a>
<a href="PackedLayout.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>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="PackedLayout.html#commitLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layout</span></a>
<a href="PackedLayout.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></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"><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.diagram</span></a>
<a href="Layout.html#group" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.group</span></a>
<a href="Layout.html#isInitial" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Initial</span></a>
<a href="Layout.html#isOngoing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Ongoing</span></a>
<a href="Layout.html#isRealtime" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Realtime</span></a>
<a href="Layout.html#isRouting" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Routing</span></a>
<a href="Layout.html#isValidLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Valid<wbr/>Layout</span></a>
<a href="Layout.html#isViewportSized" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Viewport<wbr/>Sized</span></a>
<a href="Layout.html#network" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.network</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="Layout.html#collectParts" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.collect<wbr/>Parts</span></a>
<a href="Layout.html#copy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.copy</span></a>
<a href="Layout.html#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_PackedLayout" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Packed<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="PackedLayout.html" class="tsd-signature-type tsd-kind-class">PackedLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="PackedLayout.html" class="tsd-signature-type tsd-kind-class">PackedLayout</a><a href="#constructor.new_PackedLayout" 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-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="PackedLayout.html" class="tsd-signature-type tsd-kind-class">PackedLayout</a><span class="tsd-signature-symbol">></span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <a href="PackedLayout.html" class="tsd-signature-type tsd-kind-class">PackedLayout</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="actualBounds" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>actual<wbr/>Bounds</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a></div><a href="#actualBounds" 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>This read-only property returns the actual rectangular bounds occupied by the packed nodes.
This property does not take into account any kind of spacing around the packed nodes.</p>
<p>Note that this property will only return a valid value after a layout has been performed. Before
then, its behavior is undefined.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="actualSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>actual<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#actualSpacing" 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>This read-only property is the effective spacing calculated after <a href="PackedLayout.html#doLayout" class="tsd-kind-method">doLayout</a>.</p>
<p>If the <a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a> is <a href="PackMode.html#AspectOnly" class="tsd-kind-enum-member">PackMode.AspectOnly</a>, this will simply be the
<a href="PackedLayout.html#spacing" class="tsd-kind-accessor">spacing</a> property. However, in the <a href="PackMode.html#Fit" class="tsd-kind-enum-member">PackMode.Fit</a> and
<a href="PackMode.html#ExpandToFit" class="tsd-kind-enum-member">PackMode.ExpandToFit</a> modes, this property will include the forced spacing added by
the modes themselves.</p>
<p>Note that this property will only return a valid value after a layout has been performed. Before
then, its behavior is undefined.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="arrangesToOrigin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>arranges<wbr/>To<wbr/>Origin</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#arrangesToOrigin" 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 or not to use the <a href="Layout.html#arrangementOrigin" class="tsd-kind-accessor">go.Layout.arrangementOrigin</a>
property when placing nodes.</p>
<p>The default value is true.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="aspectRatio" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>aspect<wbr/>Ratio</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#aspectRatio" 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 aspect ratio for the shape that nodes will be packed into.
The provided aspect ratio should be a nonzero postive number.</p>
<p>Note that this only applies if the <a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a> is
<a href="PackMode.html#AspectOnly" class="tsd-kind-enum-member">PackMode.AspectOnly</a>. Otherwise, the <a href="PackedLayout.html#size" class="tsd-kind-accessor">size</a>
will determine the aspect ratio of the packed shape.</p>
<p>The default value is 1.</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="Node.html" class="tsd-signature-type tsd-kind-class">Node</a>, <span class="tsd-kind-parameter">b</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type tsd-kind-class">Node</a><span class="tsd-signature-symbol">)</span><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 for sorting nodes.</p>
<p>By default, the comparison function is set according to the values of <a href="PackedLayout.html#sortMode" class="tsd-kind-accessor">sortMode</a>
and <a href="PackedLayout.html#sortOrder" class="tsd-kind-accessor">sortOrder</a>.</p>
<p>Whether this comparison function is used is determined by the value of <a href="PackedLayout.html#sortMode" class="tsd-kind-accessor">sortMode</a>.
Any value except <a href="SortMode.html#None" class="tsd-kind-enum-member">SortMode.None</a> will result in the comparison function being used.</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-5">PackedLayout</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-4">sortMode:</span><span class="hl-2"> </span><span class="hl-4">SortMode</span><span class="hl-2">.</span><span class="hl-4">Area</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">na</span><span class="hl-2">, </span><span class="hl-4">nb</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">na</span><span class="hl-2"> = </span><span class="hl-4">na</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">nb</span><span class="hl-2"> = </span><span class="hl-4">nb</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="enclosingCircle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadOnly">Readonly</code><span>enclosing<wbr/>Circle</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type tsd-kind-class">Rect</a></div><a href="#enclosingCircle" 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>This read-only property returns the smallest enclosing circle around the packed nodes. It makes
use of the <a href="PackedLayout.html#hasCircularNodes" class="tsd-kind-accessor">hasCircularNodes</a> property to determine whether or not to make
enclosing circle calculations for rectangles or for circles. This property does not take into
account any kind of spacing around the packed nodes. The enclosing circle calculation is
performed the first time this property is retrieved, and then cached to prevent slow accesses
in the future.</p>
<p>Note that this property will only return a valid value after a layout has been performed. Before
then, its behavior is undefined.</p>
<p>This property is included as it may be useful for some data visualizations.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="hasCircularNodes" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>has<wbr/>Circular<wbr/>Nodes</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></div><a href="#hasCircularNodes" 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 or not to assume that nodes are circular. This changes
the packing algorithm to one that is much more efficient for circular nodes.</p>
<p>As this algorithm expects circles, it is assumed that if this property is set
to true that the given nodes will all have the same height and width. All
calculations are done using the width of the given nodes, so unexpected results
may occur if the height differs from the width.</p>
<p>The default value is false.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="packMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>pack<wbr/>Mode</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="PackMode.html" class="tsd-signature-type tsd-kind-enum">PackMode</a></div><a href="#packMode" 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 mode that the layout will use to determine its size.
Valid values are <a href="PackMode.html" class="tsd-kind-enum">PackMode</a> values.</p>
<p>The default value is <a href="PackMode.html#AspectOnly" class="tsd-kind-enum-member">PackMode.AspectOnly</a>. In this mode, the layout will simply
grow as needed, attempting to keep the aspect ratio defined by <a href="PackedLayout.html#aspectRatio" class="tsd-kind-accessor">aspectRatio</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="packShape" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>pack<wbr/>Shape</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="PackShape.html" class="tsd-signature-type tsd-kind-enum">PackShape</a></div><a href="#packShape" 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 shape that nodes will be packed into.
Valid values are <a href="PackShape.html" class="tsd-kind-enum">PackShape</a> values.</p>
<p>In <a href="PackShape.html#Spiral" class="tsd-kind-enum-member">PackShape.Spiral</a> mode, nodes are not packed into a particular
shape, but rather packed consecutively one after another in a spiral fashion.
The <a href="PackedLayout.html#aspectRatio" class="tsd-kind-accessor">aspectRatio</a> property is ignored in this mode, and
the <a href="PackedLayout.html#size" class="tsd-kind-accessor">size</a> property (if provided) is expected to be square.
If it is not square, the largest dimension given will be used. This mode
currently only works with circular nodes, so setting it cause the assume that
layout to assume that <a href="PackedLayout.html#hasCircularNodes" class="tsd-kind-accessor">hasCircularNodes</a> is true.</p>
<p>Note that this property sets only the shape, not the aspect ratio. The aspect
ratio of this shape is determined by either <a href="PackedLayout.html#aspectRatio" class="tsd-kind-accessor">aspectRatio</a>
or <a href="PackedLayout.html#size" class="tsd-kind-accessor">size</a>, depending on the <a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a>.</p>
<p>When the <a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a> is <a href="PackMode.html#Fit" class="tsd-kind-enum-member">PackMode.Fit</a> or
<a href="PackMode.html#ExpandToFit" class="tsd-kind-enum-member">PackMode.ExpandToFit</a> and this property is set to true, the
layout will attempt to make the diameter of the enclosing circle of the
layout approximately equal to the greater dimension of the given
<a href="PackedLayout.html#size" class="tsd-kind-accessor">size</a> property.</p>
<p>The default value is <a href="PackShape.html#Elliptical" class="tsd-kind-enum-member">PackShape.Elliptical</a>.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="size" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>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="#size" 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 size for the shape that nodes will be packed into.
To fill the viewport, set a size with a width and height of NaN. Size
values of 0 are considered for layout purposes to instead be 1.</p>
<p>If the width and height are set to NaN (to fill the viewport), but this
layout has no diagram associated with it, the default value of size will
be used instead.</p>
<p>Note that this only applies if the <a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a> is
<a href="PackMode.html#Fit" class="tsd-kind-enum-member">PackMode.Fit</a> or <a href="PackMode.html#ExpandToFit" class="tsd-kind-enum-member">PackMode.ExpandToFit</a>.</p>
<p>The default value is 500x500.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="sortMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sort<wbr/>Mode</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="SortMode.html" class="tsd-signature-type tsd-kind-enum">SortMode</a></div><a href="#sortMode" 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 method by which nodes will be sorted before being packed.
To change the order, see <a href="PackedLayout.html#sortOrder" class="tsd-kind-accessor">sortOrder</a>.</p>
<p>The default value is <a href="SortMode.html#None" class="tsd-kind-enum-member">SortMode.None</a>, in which nodes will not be sorted at all.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="sortOrder" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>sort<wbr/>Order</span><div class="membertype"><span class="tsd-signature-symbol">: </span><a href="SortOrder.html" class="tsd-signature-type tsd-kind-enum">SortOrder</a></div><a href="#sortOrder" 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 order that nodes will be sorted in before being packed.
To change the sort method, see <a href="PackedLayout.html#sortMode" class="tsd-kind-accessor">sortMode</a>.</p>
<p>The default value is <a href="SortOrder.html#Descending" class="tsd-kind-enum-member">SortOrder.Descending</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><span class="tsd-signature-type">number</span></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 spacing between nodes. This value can be set to any
real number (a negative spacing will compress nodes together, and a
positive spacing will leave space between them).</p>
<p>Note that the spacing value is only respected in the <a href="PackMode.html#Fit" class="tsd-kind-enum-member">PackMode.Fit</a>
<a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a> if it does not cause the layout to grow outside
of the specified bounds. In the <a href="PackMode.html#ExpandToFit" class="tsd-kind-enum-member">PackMode.ExpandToFit</a>
<a href="PackedLayout.html#packMode" class="tsd-kind-accessor">packMode</a>, this property does not do anything.</p>
<p>The default value is 0.</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="commitLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagVirtual">Virtual</code><code class="tsd-tag ts-flagOverride">Override</code><span>commit<wbr/>Layout</span><a href="#commitLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="commitLayout.commitLayout-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">commit<wbr/>Layout</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#commitLayout.commitLayout-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This method is called at the end of <a href="PackedLayout.html#doLayout" class="tsd-kind-method">doLayout</a>, but
before the layout transaction is committed. It can be overriden and
used to customize layout behavior. By default, the method does nothing.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member"><a id="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>Performs the PackedLayout.</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">go.Diagram</a> or a <a href="Group.html" class="tsd-kind-class">go.Group</a> or a collection of <a href="Part.html" class="tsd-kind-class">go.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></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="#actualBounds"><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>actual<wbr/>Bounds</span></a></li><li><a href="#actualSpacing"><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>actual<wbr/>Spacing</span></a></li><li><a href="#arrangesToOrigin"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>arranges<wbr/>To<wbr/>Origin</span></a></li><li><a href="#aspectRatio"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>aspect<wbr/>Ratio</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="#enclosingCircle"><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>enclosing<wbr/>Circle</span></a></li><li><a href="#hasCircularNodes"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>has<wbr/>Circular<wbr/>Nodes</span></a></li><li><a href="#packMode"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pack<wbr/>Mode</span></a></li><li><a href="#packShape"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>pack<wbr/>Shape</span></a></li><li><a href="#size"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>size</span></a></li><li><a href="#sortMode"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sort<wbr/>Mode</span></a></li><li><a href="#sortOrder"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>sort<wbr/>Order</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="#commitLayout"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>commit<wbr/>Layout</span></a></li><li><a href="#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></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>