wangyifang
/
v2.tiantianxinye.365care
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '232ebbf63d'
${ noResults }
v2.tiantianxinye.365care/public/plugins/gojs/api/symbols/PackedLayout.html

756 lines
43 KiB
Raw Normal View History Unescape

init
5 years ago
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PackedLayout | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html" target="api">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</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>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>&reg; Diagramming Components<br/>version &lt;br/&gt;version 2.0.17 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>-->
<b>GoJS</b>&reg; Diagramming Components<br/>version 2.0.17<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
</div>
<div>
<h1>Class PackedLayout</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<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> or <code>extensionsTS</code> 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">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>
<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>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>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>ToOrigin</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"><a href="PackedLayout.html#commitLayout" class="tsd-kind-icon">commit<wbr>Layout</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><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>ToFit</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-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="actualBounds" class="tsd-anchor"></a>
<h3>
<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">Rect</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>
<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 tsd-kind-get-signature tsd-parent-kind-class">
<a name="actualSpacing" class="tsd-anchor"></a>
<h3>
<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> </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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="arrangesToOrigin" class="tsd-anchor"></a>
<h3>
arranges<wbr>ToOrigin
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </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>
<p>The default value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="aspectRatio" class="tsd-anchor"></a>
<h3>
aspect<wbr>Ratio
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="comparer" class="tsd-anchor"></a>
<h3>
comparer
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">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><span class="tsd-signature-type">undefined</span> </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>
<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="hljs js"> $(PackedLayout,
{
<span class="hljs-attr">sortMode</span>: PackedLayout.Area,
<span class="hljs-attr">comparer</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">na, nb</span>) </span>{
<span class="hljs-keyword">var</span> na = na.data;
<span class="hljs-keyword">var</span> nb = nb.data;
<span class="hljs-keyword">if</span> (da.someProperty &lt; db.someProperty) <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
<span class="hljs-keyword">if</span> (da.someProperty &gt; db.someProperty) <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
}
)</code></pre>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="enclosingCircle" class="tsd-anchor"></a>
<h3>
<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">Rect</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>
<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 tsd-kind-accessor tsd-parent-kind-class">
<a name="hasCircularNodes" class="tsd-anchor"></a>
<h3>
has<wbr>Circular<wbr>Nodes
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </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>
<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 tsd-kind-accessor tsd-parent-kind-class">
<a name="packMode" class="tsd-anchor"></a>
<h3>
pack<wbr>Mode
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="packShape" class="tsd-anchor"></a>
<h3>
pack<wbr>Shape
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="size" class="tsd-anchor"></a>
<h3>
size
<span class="tsd-signature-symbol">: </span><a href="Size.html" class="tsd-signature-type">Size</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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="sortMode" class="tsd-anchor"></a>
<h3>
sort<wbr>Mode
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<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>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="sortOrder" class="tsd-anchor"></a>
<h3>
sort<wbr>Order
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<p>The default value is <a href="PackedLayout.html#static-Descending">PackedLayout.Descending</a></p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="spacing" class="tsd-anchor"></a>
<h3>
spacing
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </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>
<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>
</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 name="static-Spiral" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Spiral
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">2</span> </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>
<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 &#39;true&#39;. Please see <a href="PackedLayout.html#packShape">packShape</a> for more details.</p>
</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">
<a name="commitLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagVirtual">Virtual</span> <span class="tsd-flag ts-flagOverride">Override</span>
commit<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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">
<a name="doLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<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">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</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>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">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type">Iterable</a><span class="tsd-signature-symbol">&lt;</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">&gt;</span></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 name="static-Area" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Area
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">22</span> </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 name="static-Ascending" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Ascending
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">31</span> </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>
<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>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-AspectOnly" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Aspect<wbr>Only
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">10</span> </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>
<p>The <a href="PackedLayout.html#spacing">spacing</a> property will be respected in this mode.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Descending" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Descending
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">30</span> </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>
<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>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Elliptical" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Elliptical
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">0</span> </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>
<p>The aspect ratio of this ellipse is determined by either
<a href="PackedLayout.html#aspectRatio">aspectRatio</a> or <a href="PackedLayout.html#size">size</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-ExpandToFit" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Expand<wbr>ToFit
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">12</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Nodes will be either compressed or spaced evenly to fit the given
<a href="PackedLayout.html#size">size</a>; this value is used for <a href="PackedLayout.html#packMode">packMode</a>.</p>
<p>The <a href="PackedLayout.html#spacing">spacing</a> property will not be respected in this mode, and
will not do anything if set.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Fit" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Fit
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">11</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Nodes will be compressed if necessary (using negative spacing) to fit the given
<a href="PackedLayout.html#size">size</a>. However, if the <a href="PackedLayout.html#size">size</a> is bigger
than the packed shape (with 0 spacing), it will not expand to fit it. This value
is used for <a href="PackedLayout.html#packMode">packMode</a>.</p>
<p>The <a href="PackedLayout.html#spacing">spacing</a> property will be respected in this mode, but only
if it does not cause the layout to grow larger than the <a href="PackedLayout.html#size">size</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-MaxSide" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Max<wbr>Side
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">21</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Nodes will be sorted by their maximum side length before packing; 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 name="static-None" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
None
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">20</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Nodes will not be sorted before packing; 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 name="static-Rectangular" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Rectangular
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">1</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Causes nodes to be packed into a rectangle; this value is used for
<a href="PackedLayout.html#packShape">packShape</a>.</p>
<p>The aspect ratio of this rectangle is determined by either
<a href="PackedLayout.html#aspectRatio">aspectRatio</a> or <a href="PackedLayout.html#size">size</a>.</p>
</div>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class tsd-is-extension">
<a href="PackedLayout.html" class="tsd-kind-icon">Packed<wbr>Layout</a>
<ul>
<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>ToOrigin</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>
<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>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="PackedLayout.html#commitLayout" class="tsd-kind-icon">commit<wbr>Layout</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="PackedLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="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>ToFit</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>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<div class="container-fluid bottom-copyright plr15">
Copyright &copy; 1998-2019 by Northwoods Software Corporation.
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>