gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
559 lines (558 loc) • 30.3 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GridLayout | 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>® Diagramming Components<br/>version <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class GridLayout</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-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">GridLayout</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
and wrapping as needed. It ignores any Links connecting the Nodes being laid out.
There are many samples that use GridLayout.
Every <a href="Palette.html">Palette</a> uses a GridLayout by default.</p>
<p class="box">
If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
<p>By default this layout will sort all of the Parts alphabetically
(comparing <a href="Part.html#text">Part.text</a> values, respecting case)
and position them left-to-right, separated by <a href="GridLayout.html#spacing">spacing</a><code>.width</code>,
until they do not fit in the current row.
At that time it starts a new row, separated from the previous row by <a href="GridLayout.html#spacing">spacing</a><code>.height</code>.
There is a uniform cell size equal to the maximum Part width (plus spacing width)
and the maximum part height (plus spacing height).
At least one part is placed in each row, even if the part by itself is wider than the wrapping width.</p>
<p>You can specify values for the <a href="GridLayout.html#cellSize">cellSize</a> <code>width</code> and <code>height</code>.
If a part is wider than the cell size, it spans more than one cell in the row.
You can also specify a value for the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a>,
which will be used instead of the diagram's viewport width, to control when each row is considered "full".
The value of <a href="Layout.html#isViewportSized">Layout.isViewportSized</a> will be true when
the value of <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> is <code>NaN</code>.
This causes the layout to be performed again automatically as the viewport changes size.</p>
<p>You can also set <a href="GridLayout.html#wrappingColumn">wrappingColumn</a> to limit the number of items in each row.
Both the <a href="GridLayout.html#wrappingWidth">wrappingWidth</a> and the <a href="GridLayout.html#wrappingColumn">wrappingColumn</a> are respected when deciding when to wrap to the next row.</p>
<p>This layout is sufficiently simple that it does not use a <a href="LayoutNetwork.html">LayoutNetwork</a>.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr>Column</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr>Width</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constants</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr>ToRight</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr>ToLeft</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Grid<wbr>Layout<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GridLayout.html" class="tsd-signature-type">GridLayout</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<h4 class="tsd-returns-title">Returns <a href="GridLayout.html" class="tsd-signature-type">GridLayout</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="alignment" class="tsd-anchor"></a>
<h3>
alignment
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the <a href="Part.html#location">Part.location</a> or the position should be used
to arrange each part.</p>
<p>The default value is <a href="GridLayout.html#static-Location">GridLayout.Location</a> -- the <a href="Part.html#location">Part.location</a>s will
be aligned in a grid.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="arrangement" class="tsd-anchor"></a>
<h3>
arrangement
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets how to arrange the parts.
Must be <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a> or <a href="GridLayout.html#static-RightToLeft">GridLayout.RightToLeft</a>.</p>
<p>The default value is <a href="GridLayout.html#static-LeftToRight">GridLayout.LeftToRight</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="cellSize" class="tsd-anchor"></a>
<h3>
cell<wbr>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 minimum part size by which each part is positioned in the grid.</p>
<p>The default value is NaN x NaN.
The units are in document coordinates.</p>
<p>When the cell size is smaller than a part, the part will occupy more than one cell.
This allows parts to be positioned closer to each other, but then variations in part
sizes may cause them not to be aligned in perfect rows or columns.</p>
</div>
</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="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">)</span><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 comparison function used to sort the parts.</p>
<p>The default value is a case-insensitive alphabetic comparison
using the <a href="Part.html#text">Part.text</a> property of each part.</p>
<pre><code class="hljs js"> $(go.GridLayout,
{
<span class="hljs-attr">sorting</span>: go.GridLayout.Ascending,
<span class="hljs-attr">comparer</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">pa, pb</span>) </span>{
<span class="hljs-keyword">var</span> da = pa.data;
<span class="hljs-keyword">var</span> db = pb.data;
<span class="hljs-keyword">if</span> (da.someProperty < db.someProperty) <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
<span class="hljs-keyword">if</span> (da.someProperty > 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-accessor tsd-parent-kind-class">
<a name="sorting" class="tsd-anchor"></a>
<h3>
sorting
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets what order to place the parts.
Must be <a href="GridLayout.html#static-Forward">GridLayout.Forward</a>, <a href="GridLayout.html#static-Reverse">GridLayout.Reverse</a>,
<a href="GridLayout.html#static-Ascending">GridLayout.Ascending</a>, or <a href="GridLayout.html#static-Descending">GridLayout.Descending</a>.</p>
<p>The default value is <a href="GridLayout.html#static-Ascending">GridLayout.Ascending</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><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 minimum horizontal and vertical space between parts.</p>
<p>The default value is 10 x 10.
The units are in document coordinates.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="wrappingColumn" class="tsd-anchor"></a>
<h3>
wrapping<wbr>Column
<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 maximum number of columns.</p>
<p>The default is NaN, meaning not to limit the number of columns.
1 is a common value to produce a single column of parts.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="wrappingWidth" class="tsd-anchor"></a>
<h3>
wrapping<wbr>Width
<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 wrapping width.</p>
<p>The default is NaN, meaning to use the width of the diagram's panel's viewport.
Must be a value greater than 0.</p>
</div>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<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"><</span><a href="Part.html" class="tsd-signature-type">Part</a><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>Assign the positions of the parts, ignoring any links.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Diagram.html" class="tsd-signature-type">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"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></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-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">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Lay out each child according to the sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a 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">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Lay out each child in reverse sort order given by <a href="GridLayout.html#comparer">GridLayout.comparer</a>
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Forward" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Forward
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Lay out each child in the order in which they were found;
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-LeftToRight" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Left<wbr>ToRight
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Fill each row from left to right;
This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Location" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Location
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Position the part's <a href="Part.html#location">Part.location</a> at a grid point;
This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Position" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Position
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Position the top-left corner of each part at a grid point;
This value is used for <a href="GridLayout.html#alignment">GridLayout.alignment</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-Reverse" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Reverse
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Lay out each child in reverse order from which they were found;
This value is used for <a href="GridLayout.html#sorting">GridLayout.sorting</a>.</p>
</div>
</section>
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a name="static-RightToLeft" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagStatic">Static</span>
Right<wbr>ToLeft
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<div class="tsd-comment tsd-typography">
<p>Fill each row from right to left;
This value is used for <a href="GridLayout.html#arrangement">GridLayout.arrangement</a>.</p>
</div>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="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">
<a href="GridLayout.html" class="tsd-kind-icon">Grid<wbr>Layout</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class">
<a href="GridLayout.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#alignment" class="tsd-kind-icon">alignment</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#arrangement" class="tsd-kind-icon">arrangement</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#cellSize" class="tsd-kind-icon">cell<wbr>Size</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#comparer" class="tsd-kind-icon">comparer</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#sorting" class="tsd-kind-icon">sorting</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#spacing" class="tsd-kind-icon">spacing</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#wrappingColumn" class="tsd-kind-icon">wrapping<wbr>Column</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="GridLayout.html#wrappingWidth" class="tsd-kind-icon">wrapping<wbr>Width</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="GridLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Ascending" class="tsd-kind-icon">Ascending</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Descending" class="tsd-kind-icon">Descending</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Forward" class="tsd-kind-icon">Forward</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-LeftToRight" class="tsd-kind-icon">Left<wbr>ToRight</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Location" class="tsd-kind-icon">Location</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Position" class="tsd-kind-icon">Position</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-Reverse" class="tsd-kind-icon">Reverse</a>
</li>
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
<a href="GridLayout.html#static-RightToLeft" class="tsd-kind-icon">Right<wbr>ToLeft</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<div class="container-fluid bottom-copyright plr15">
Copyright © 1998-2020 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>