markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,665 lines (609 loc) • 51 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® GridLayout Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/fuse.min.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- 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">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="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<div class="searchsumm">
<div class="table-wrap">
<div class="table-cell" id="apisearch" data-base="../">
<div class="title">Search API</div>
<div class="field">
<label for="search-field" class="search-icon"></label>
<input id="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>
</div>
<div class="table-cell" id="apisumm">
<input type="checkbox" id="showsumms" />
<label class="apisumms" for="showsumms">Show Summaries</label>
</div>
</div>
</div>
<!-- ============================== header ================================= -->
<div id="header" class="fineprint">
<b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class GridLayout
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>.</span>
This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
and wrapping as needed. It ignores any Links connecting the Nodes being laid out.
There are many samples that use GridLayout.
Every <a href="../symbols/Palette.html" class="linkConstructor">Palette</a> uses a GridLayout by default.
<p class="box">
If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
<p>
By default this layout will sort all of the Parts alphabetically
(comparing <a href="../symbols/Part.html#text" class="linkProperty">Part.text</a> values, respecting case)
and position them left-to-right, separated by <a href="../symbols/GridLayout.html#spacing" class="linkProperty">spacing</a><code>.width</code>,
until they do not fit in the current row.
At that time it starts a new row, separated from the previous row by <a href="../symbols/GridLayout.html#spacing" class="linkProperty">spacing</a><code>.height</code>.
There is a uniform cell size equal to the maximum Part width (plus spacing width)
and the maximum part height (plus spacing height).
At least one part is placed in each row, even if the part by itself is wider than the wrapping width.
<p>
You can specify values for the <a href="../symbols/GridLayout.html#cellSize" class="linkProperty">cellSize</a> <code>width</code> and <code>height</code>.
If a part is wider than the cell size, it spans more than one cell in the row.
You can also specify a value for the <a href="../symbols/GridLayout.html#wrappingWidth" class="linkProperty">wrappingWidth</a>,
which will be used instead of the diagram's viewport width, to control when each row is considered "full".
The value of <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">Layout.isViewportSized</a> will be true when
the value of <a href="../symbols/GridLayout.html#wrappingWidth" class="linkProperty">wrappingWidth</a> is <code>NaN</code>.
This causes the layout to be performed again automatically as the viewport changes size.
<p>
You can also set <a href="../symbols/GridLayout.html#wrappingColumn" class="linkProperty">wrappingColumn</a> to limit the number of items in each row.
Both the <a href="../symbols/GridLayout.html#wrappingWidth" class="linkProperty">wrappingWidth</a> and the <a href="../symbols/GridLayout.html#wrappingColumn" class="linkProperty">wrappingColumn</a> are respected when deciding when to wrap to the next row.
<p>
This layout is sufficiently simple that it does not use a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class GridLayout.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
GridLayout()
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>The constructor creates a new GridLayout with default values for its properties,
including setting Layout#isViewporSized to true.
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class GridLayout.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="alignment" >
<td class="name">
<div class="name">
alignment
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> or the position should be used
to arrange each part.<span class="nodetails" id="xpropalignment"><a class="morelink" onclick="hst('propalignment')">More...</a></span> <span class="details" id="propalignment">
</p>
The default value is <a href="../symbols/GridLayout.html#Location" class="linkConstant">GridLayout.Location</a> -- the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>s will
be aligned in a grid.</span>
</div>
</td>
</tr>
<tr id="arrangement" >
<td class="name">
<div class="name">
arrangement
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how to arrange the parts.<span class="nodetails" id="xproparrangement"><a class="morelink" onclick="hst('proparrangement')">More...</a></span> <span class="details" id="proparrangement">
Must be <a href="../symbols/GridLayout.html#LeftToRight" class="linkConstant">GridLayout.LeftToRight</a> or <a href="../symbols/GridLayout.html#RightToLeft" class="linkConstant">GridLayout.RightToLeft</a>.
</p>
The default value is <a href="../symbols/GridLayout.html#LeftToRight" class="linkConstant">GridLayout.LeftToRight</a>.</span>
</div>
</td>
</tr>
<tr id="cellSize" >
<td class="name">
<div class="name">
cellSize
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the minimum part size by which each part is positioned in the grid.<span class="nodetails" id="xpropcellSize"><a class="morelink" onclick="hst('propcellSize')">More...</a></span> <span class="details" id="propcellSize">
</span><div class="details" id="dpropcellSize"><p>
The default value is NaN x NaN.
The units are in document coordinates.
<p>
When the cell size is smaller than a part, the part will occupy more than one cell.
This allows parts to be positioned closer to each other, but then variations in part
sizes may cause them not to be aligned in perfect rows or columns.</div>
</div>
</td>
</tr>
<tr id="comparer" >
<td class="name">
<div class="name">
comparer
</div>
<div class="attributes">
<span class="light">{function(Part, Part):number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the comparison function used to sort the parts.<span class="nodetails" id="xpropcomparer"><a class="morelink" onclick="hst('propcomparer')">More...</a></span> <span class="details" id="propcomparer">
</p>
The default value is a case-insensitive alphabetic comparison
using the <a href="../symbols/Part.html#text" class="linkProperty">Part.text</a> property of each part.
<pre>
$(go.GridLayout,
{
sorting: go.GridLayout.Ascending,
comparer: function(pa, pb) {
var da = pa.data;
var db = pb.data;
if (da.someProperty < db.someProperty) return -1;
if (da.someProperty > db.someProperty) return 1;
return 0;
}
}
)
</pre></span>
</div>
</td>
</tr>
<tr id="isViewportSized" >
<td class="name">
<div class="name">
isViewportSized
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>
</div>
</td>
</tr>
<tr id="sorting" >
<td class="name">
<div class="name">
sorting
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets what order to place the parts.<span class="nodetails" id="xpropsorting"><a class="morelink" onclick="hst('propsorting')">More...</a></span> <span class="details" id="propsorting">
Must be <a href="../symbols/GridLayout.html#Forward" class="linkConstant">GridLayout.Forward</a>, <a href="../symbols/GridLayout.html#Reverse" class="linkConstant">GridLayout.Reverse</a>,
<a href="../symbols/GridLayout.html#Ascending" class="linkConstant">GridLayout.Ascending</a>, or <a href="../symbols/GridLayout.html#Descending" class="linkConstant">GridLayout.Descending</a>.
</span><div class="details" id="dpropsorting"><p>
The default value is <a href="../symbols/GridLayout.html#Ascending" class="linkConstant">GridLayout.Ascending</a>.</div>
</div>
</td>
</tr>
<tr id="spacing" >
<td class="name">
<div class="name">
spacing
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the minimum horizontal and vertical space between parts.<span class="nodetails" id="xpropspacing"><a class="morelink" onclick="hst('propspacing')">More...</a></span> <span class="details" id="propspacing">
</p>
The default value is 10 x 10.
The units are in document coordinates.</span>
</div>
</td>
</tr>
<tr id="wrappingColumn" >
<td class="name">
<div class="name">
wrappingColumn
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the maximum number of columns.<span class="nodetails" id="xpropwrappingColumn"><a class="morelink" onclick="hst('propwrappingColumn')">More...</a></span> <span class="details" id="propwrappingColumn">
</span><div class="details" id="dpropwrappingColumn"><p>
The default is NaN, meaning not to limit the number of columns.
1 is a common value to produce a single column of parts.</div>
</div>
</td>
</tr>
<tr id="wrappingWidth" >
<td class="name">
<div class="name">
wrappingWidth
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the wrapping width.<span class="nodetails" id="xpropwrappingWidth"><a class="morelink" onclick="hst('propwrappingWidth')">More...</a></span> <span class="details" id="propwrappingWidth">
</span><div class="details" id="dpropwrappingWidth"><p>
The default is NaN, meaning to use the width of the diagram's panel's viewport.
Must be a value greater than 0.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<dl class="inheritsList">
<dt>Properties borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">arrangementOrigin</a>, <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Layout.html#group" class="linkProperty">group</a>, <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a>, <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a>, <a href="../symbols/Layout.html#isRealtime" class="linkProperty">isRealtime</a>, <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a>, <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a>, <a href="../symbols/Layout.html#network" class="linkProperty">network</a></dd>
</dl>
<!-- ============================== methods summary ======================== -->
<h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class GridLayout.">
<thead>
<tr>
<th scope="col" class="name">Name, Return Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="doLayout">
<td class="name">
<div class="name">
doLayout(coll)
</div>
<div class="attributes">
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Assign the positions of the parts, ignoring any links.<span class="nodetails" id="xmethdoLayout"><a class="morelink" onclick="hst('methdoLayout')">More...</a></span> <span class="details" id="methdoLayout"></span>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
</dt>
<dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<dl class="inheritsList">
<dt>Methods borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#cloneProtected" class="linkMethod">cloneProtected</a>, <a href="../symbols/Layout.html#collectParts" class="linkMethod">collectParts</a>, <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a>, <a href="../symbols/Layout.html#copy" class="linkMethod">copy</a>, <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a>, <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>, <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a>, <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a></dd>
</dl>
<!-- ============================== events summary ======================== -->
<!-- ============================== fields summary ===================== -->
<h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class GridLayout.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="Ascending">
<td class="name">
<div class="name">
Ascending
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Lay out each child according to the sort order given by <a href="../symbols/GridLayout.html#comparer" class="linkProperty">GridLayout.comparer</a>;
This value is used for <a href="../symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>.
</div>
</td>
</tr>
<tr id="Descending">
<td class="name">
<div class="name">
Descending
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Lay out each child in reverse sort order given by <a href="../symbols/GridLayout.html#comparer" class="linkProperty">GridLayout.comparer</a>;
This value is used for <a href="../symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>.
</div>
</td>
</tr>
<tr id="Forward">
<td class="name">
<div class="name">
Forward
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Lay out each child in the order in which they were found;
This value is used for <a href="../symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>.
</div>
</td>
</tr>
<tr id="LeftToRight">
<td class="name">
<div class="name">
LeftToRight
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Fill each row from left to right;
This value is used for <a href="../symbols/GridLayout.html#arrangement" class="linkProperty">GridLayout.arrangement</a>.
</div>
</td>
</tr>
<tr id="Location">
<td class="name">
<div class="name">
Location
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Position the part's <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> at a grid point;
This value is used for <a href="../symbols/GridLayout.html#alignment" class="linkProperty">GridLayout.alignment</a>.
</div>
</td>
</tr>
<tr id="Position">
<td class="name">
<div class="name">
Position
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Position the top-left corner of each part at a grid point;
This value is used for <a href="../symbols/GridLayout.html#alignment" class="linkProperty">GridLayout.alignment</a>.
</div>
</td>
</tr>
<tr id="Reverse">
<td class="name">
<div class="name">
Reverse
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Lay out each child in reverse order from which they were found;
This value is used for <a href="../symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>.
</div>
</td>
</tr>
<tr id="RightToLeft">
<td class="name">
<div class="name">
RightToLeft
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">