gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
146 lines (145 loc) • 62.4 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><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/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 PackedLayout <span class="tsd-flag ts-flagExtension">Extension</span> </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-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. Extensions can be found in the GoJS kit under the <code>extensions</code> (for loading via script tags),<code>extensionsTS</code> (UMD modules), or <code>extensionsJSM</code> (ES6 modules) folders. See the <a href="../../intro/extensions.html">Extensions intro page</a> for more information.</p></section><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">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">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>
<div><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>
</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 tsd-is-inherited"><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><a href="PackedLayout.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-get-signature tsd-parent-kind-class"><a href="PackedLayout.html#actualBounds" class="tsd-kind-icon">actual<wbr/>Bounds</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="PackedLayout.html#actualSpacing" class="tsd-kind-icon">actual<wbr/>Spacing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#arrangesToOrigin" class="tsd-kind-icon">arranges<wbr/>To<wbr/>Origin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#aspectRatio" class="tsd-kind-icon">aspect<wbr/>Ratio</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#comparer" class="tsd-kind-icon">comparer</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="PackedLayout.html#enclosingCircle" class="tsd-kind-icon">enclosing<wbr/>Circle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#hasCircularNodes" class="tsd-kind-icon">has<wbr/>Circular<wbr/>Nodes</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#packMode" class="tsd-kind-icon">pack<wbr/>Mode</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#packShape" class="tsd-kind-icon">pack<wbr/>Shape</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#size" class="tsd-kind-icon">size</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#sortMode" class="tsd-kind-icon">sort<wbr/>Mode</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#sortOrder" class="tsd-kind-icon">sort<wbr/>Order</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PackedLayout.html#spacing" class="tsd-kind-icon">spacing</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Spiral" class="tsd-kind-icon">Spiral</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="PackedLayout.html#commitLayout" class="tsd-kind-icon">commit<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-overwrite"><a href="PackedLayout.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="PackedLayout.html#static-Area" class="tsd-kind-icon">Area</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-AspectOnly" class="tsd-kind-icon">Aspect<wbr/>Only</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Descending" class="tsd-kind-icon">Descending</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Elliptical" class="tsd-kind-icon">Elliptical</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-ExpandToFit" class="tsd-kind-icon">Expand<wbr/>To<wbr/>Fit</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Fit" class="tsd-kind-icon">Fit</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-MaxSide" class="tsd-kind-icon">Max<wbr/>Side</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-None" class="tsd-kind-icon">None</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="PackedLayout.html#static-Rectangular" class="tsd-kind-icon">Rectangular</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"><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 tsd-is-inherited"><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><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-inherited"><li class="tsd-signature tsd-kind-icon">new <wbr/>Packed<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="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</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" data-tsd-kind="Class">PackedLayout</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Create a minimal layout that only positions <a href="Node.html">Node</a>s that do not have a location.</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="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</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="PackedLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PackedLayout</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-get-signature tsd-parent-kind-class"><a id="actualBounds" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagReadOnly">Read-only</span> actual<wbr/>Bounds<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><a href="#actualBounds" 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>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>
<div><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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"><a id="actualSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagReadOnly">Read-only</span> actual<wbr/>Spacing<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#actualSpacing" 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>This read-only property is the effective spacing calculated after <a href="PackedLayout.html#doLayout">PackedLayout.doLayout</a>.</p>
<div><p>If the <a href="PackedLayout.html#packMode">packMode</a> is <a href="PackedLayout.html#static-AspectOnly">PackedLayout.AspectOnly</a>, this will simply be the
<a href="PackedLayout.html#spacing">spacing</a> property. However, in the <a href="PackedLayout.html#static-Fit">PackedLayout.Fit</a> and
<a href="PackedLayout.html#static-ExpandToFit">PackedLayout.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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="arrangesToOrigin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> arranges<wbr/>To<wbr/>Origin<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#arrangesToOrigin" 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 or not to use the <a href="Layout.html#arrangementOrigin">Layout.arrangementOrigin</a>
property when placing nodes.</p>
<div><p>The default value is true.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="aspectRatio" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> aspect<wbr/>Ratio<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#aspectRatio" 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 aspect ratio for the shape that nodes will be packed into.
The provided aspect ratio should be a nonzero postive number.</p>
<div><p>Note that this only applies if the <a href="PackedLayout.html#packMode">packMode</a> is
<a href="PackedLayout.html#static-AspectOnly">PackedLayout.AspectOnly</a>. Otherwise, the <a href="PackedLayout.html#size">size</a>
will determine the aspect ratio of the packed shape.</p>
<p>The default value is 1.</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="Node.html" class="tsd-signature-type" data-tsd-kind="Class">Node</a>, b<span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type" data-tsd-kind="Class">Node</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 for sorting nodes.</p>
<div><p>By default, the comparison function is set according to the values of <a href="PackedLayout.html#sortMode">sortMode</a>
and <a href="PackedLayout.html#sortOrder">sortOrder</a>.</p>
<p>Whether this comparison function is used is determined by the value of <a href="PackedLayout.html#sortMode">sortMode</a>.
Any value except <a href="PackedLayout.html#static-None">PackedLayout.None</a> will result in the comparison function being used.</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">PackedLayout</span><span class="hl-2">,</span><br/><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">PackedLayout</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">var</span><span class="hl-2"> </span><span class="hl-4">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">var</span><span class="hl-2"> </span><span class="hl-4">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><br/><span class="hl-2"> )</span>
</code></pre>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"><a id="enclosingCircle" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagReadOnly">Read-only</span> enclosing<wbr/>Circle<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><a href="#enclosingCircle" 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>This read-only property returns the smallest enclosing circle around the packed nodes. It makes
use of the <a href="PackedLayout.html#hasCircularNodes">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>
<div><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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="hasCircularNodes" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> has<wbr/>Circular<wbr/>Nodes<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#hasCircularNodes" 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 or not to assume that nodes are circular. This changes
the packing algorithm to one that is much more efficient for circular nodes.</p>
<div><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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="packMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> pack<wbr/>Mode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#packMode" 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 mode that the layout will use to determine its size. Valid values
are <a href="PackedLayout.html#static-AspectOnly">PackedLayout.AspectOnly</a>, <a href="PackedLayout.html#static-Fit">PackedLayout.Fit</a>, and <a href="PackedLayout.html#static-ExpandToFit">PackedLayout.ExpandToFit</a>.</p>
<div><p>The default value is <a href="PackedLayout.html#static-AspectOnly">PackedLayout.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">aspectRatio</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="packShape" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> pack<wbr/>Shape<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#packShape" 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 shape that nodes will be packed into. Valid values are
<a href="PackedLayout.html#static-Elliptical">PackedLayout.Elliptical</a>, <a href="PackedLayout.html#static-Rectangular">PackedLayout.Rectangular</a>, and
<a href="PackedLayout.html#static-Spiral">PackedLayout.Spiral</a>.</p>
<div><p>In <a href="PackedLayout.html#static-Spiral">PackedLayout.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">aspectRatio</a> property is ignored in this mode, and
the <a href="PackedLayout.html#size">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">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">aspectRatio</a>
or <a href="PackedLayout.html#size">size</a>, depending on the <a href="PackedLayout.html#packMode">packMode</a>.</p>
<p>When the <a href="PackedLayout.html#packMode">packMode</a> is <a href="PackedLayout.html#static-Fit">PackedLayout.Fit</a> or
<a href="PackedLayout.html#static-ExpandToFit">PackedLayout.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">size</a> property.</p>
<p>The default value is <a href="PackedLayout.html#static-Elliptical">PackedLayout.Elliptical</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="size" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> size<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type" data-tsd-kind="Class">Size</a><a href="#size" 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 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>
<div><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">packMode</a> is
<a href="PackedLayout.html#static-Fit">PackedLayout.Fit</a> or <a href="PackedLayout.html#static-ExpandToFit">PackedLayout.ExpandToFit</a>.</p>
<p>The default value is 500x500.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sortMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> sort<wbr/>Mode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#sortMode" 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 method by which nodes will be sorted before being packed. To change
the order, see <a href="PackedLayout.html#sortOrder">sortOrder</a>.</p>
<div><p>The default value is <a href="PackedLayout.html#static-None">PackedLayout.None</a>, in which nodes will not be sorted at all.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sortOrder" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> sort<wbr/>Order<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#sortOrder" 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 order that nodes will be sorted in before being packed. To change
the sort method, see <a href="PackedLayout.html#sortMode">sortMode</a>.</p>
<div><p>The default value is <a href="PackedLayout.html#static-Descending">PackedLayout.Descending</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><span class="tsd-signature-type">number</span><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 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>
<div><p>Note that the spacing value is only respected in the <a href="PackedLayout.html#static-Fit">PackedLayout.Fit</a>
<a href="PackedLayout.html#packMode">packMode</a> if it does not cause the layout to grow outside
of the specified bounds. In the <a href="PackedLayout.html#static-ExpandToFit">PackedLayout.ExpandToFit</a>
<a href="PackedLayout.html#packMode">packMode</a>, this property does not do anything.</p>
<p>The default value is 0.</p>
</div></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class tsd-is-static"><a id="static-Spiral" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadonly">Readonly</span> Spiral<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">2</span><a href="#static-Spiral" 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>Causes nodes to be packed into a spiral shape; this value is used
for <a href="PackedLayout.html#packShape">packShape</a>.</p>
<div><p>The <a href="PackedLayout.html#aspectRatio">aspectRatio</a> property is ignored in this mode, the
<a href="PackedLayout.html#size">size</a> is expected to be square, and <a href="PackedLayout.html#hasCircularNodes">hasCircularNodes</a>
will be assumed 'true'. Please see <a href="PackedLayout.html#packShape">packShape</a> for more details.</p>
</div></div></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="commitLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagVirtual">Virtual</span> commit<wbr/>Layout<a href="#commitLayout" 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">commit<wbr/>Layout<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></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This method is called at the end of <a href="PackedLayout.html#doLayout">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 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>Performs the PackedLayout.</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-Area" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadonly">Readonly</span> Area<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">22</span><a href="#static-Area" 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>Nodes will be sorted by their area; this value is used for <a href="PackedLayout.html#sortMode">sortMode</a>.</p>
</div></section><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> <span class="tsd-flag ts-flagReadonly">Readonly</span> Ascending<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">31</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>Nodes will be sorted in ascending order; this value is used for <a href="PackedLayout.html#sortOrder">sortOrder</a>.</p>
<div><p>Does nothing if <a href="PackedLayout.html#sortMode">sortMode</a> is set to <a href="PackedLayout.html#static-None">PackedLayout.None</a>.</p>
</div></div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-AspectOnly" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadonly">Readonly</span> Aspect<wbr/>Only<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">10</span><a href="#static-AspectOnly" 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>Nodes will be packed using the <a href="PackedLayout.html#aspectRatio">aspectRatio</a> property, with
no size considerations; this value is used for <a href="PackedLayout.html#packMode">packMode</a>.</p>
<div><p>The <a href="PackedLayout.html#spacing">spacing</a> property will be respected in this mode.</p>
</div></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> <span class="tsd-flag ts-flagReadonly">Readonly</span> Descending<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">30</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>Nodes will be sorted in descending order; this value is used for <a href="PackedLayout.html#sortOrder">sortOrder</a>.</p>
<div><p>Does nothing if <a href="PackedLayout.html#sortMode">sortMode</a> is set to <a href="PackedLayout.html#static-None">PackedLayout.None</a>.</p>
</div></div></section><section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a id="static-Elliptical" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagStatic">Static</span> <span class="tsd-flag ts-flagReadonly">Readonly</span> Elliptical<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">0</span><a href="#static-Elliptical" 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>This value for <a href="PackedLayout.html#packShape">packShape</a> causes nodes to be packed
into an ellipse.</p>