gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
191 lines • 78.1 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Layout | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Layout </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Layout</span><ul class="tsd-hierarchy"><li><a href="GridLayout.html" class="tsd-signature-type" data-tsd-kind="Class">GridLayout</a></li><li><a href="CircularLayout.html" class="tsd-signature-type" data-tsd-kind="Class">CircularLayout</a></li><li><a href="ForceDirectedLayout.html" class="tsd-signature-type" data-tsd-kind="Class">ForceDirectedLayout</a></li><li><a href="LayeredDigraphLayout.html" class="tsd-signature-type" data-tsd-kind="Class">LayeredDigraphLayout</a></li><li><a href="TreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeLayout</a></li><li><a href="ArrangingLayout.html" class="tsd-signature-type" data-tsd-kind="Class">ArrangingLayout</a></li><li><a href="DoubleTreeLayout.html" class="tsd-signature-type" data-tsd-kind="Class">DoubleTreeLayout</a></li><li><a href="PackedLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PackedLayout</a></li><li><a href="RadialLayout.html" class="tsd-signature-type" data-tsd-kind="Class">RadialLayout</a></li><li><a href="SerpentineLayout.html" class="tsd-signature-type" data-tsd-kind="Class">SerpentineLayout</a></li><li><a href="SpiralLayout.html" class="tsd-signature-type" data-tsd-kind="Class">SpiralLayout</a></li><li><a href="TableLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TableLayout</a></li><li><a href="TreeMapLayout.html" class="tsd-signature-type" data-tsd-kind="Class">TreeMapLayout</a></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>This is the base class for all of the predefined diagram layout implementations.
They only arrange <a href="Part.html">Part</a>s (primarily <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s) in a <a href="Diagram.html">Diagram</a>,
not to <a href="GraphObject.html">GraphObject</a>s in <a href="Panel.html">Panel</a>s (i.e. panel layout).</p>
<div><p>The layout classes include <a href="TreeLayout.html">TreeLayout</a>, <a href="ForceDirectedLayout.html">ForceDirectedLayout</a>,
<a href="LayeredDigraphLayout.html">LayeredDigraphLayout</a>, <a href="CircularLayout.html">CircularLayout</a>, and <a href="GridLayout.html">GridLayout</a>.
This base class is not abstract -- in fact an instance of this base class is the default
value for <a href="Diagram.html#layout">Diagram.layout</a> and for <a href="Group.html#layout">Group.layout</a>.</p>
<p>An instance of a Layout class will be the value of <a href="Diagram.html#layout">Diagram.layout</a>.
That layout positions the graph of top-level nodes and links.
Nodes and links that belong to a <a href="Group.html">Group</a> are laid out by that group's <a href="Group.html#layout">Group.layout</a>.
The Diagram will automatically perform all nested group layouts before laying out the whole diagram.</p>
<p>If you have position information for all of the nodes when you load a model,
you will typically have data bound the <a href="Part.html#location">Part.location</a> to some property on your node data.
In order to avoid an initial layout causing those saved node positions to be discarded,
you can either not set the <a href="Diagram.html#layout">Diagram.layout</a> to a predefined layout or you can
set <a href="Layout.html#isInitial">isInitial</a> to false.</p>
<p>Because performing layouts can be expensive in space and time, automatic layouts
are performed only on "invalid" layouts, and only well after a layout has been invalidated.
This state is held by the <a href="Layout.html#isValidLayout">isValidLayout</a> property.
Many standard operations, such as adding or removing nodes or links, will cause
the layout that is responsible for positioning those nodes or routing those links
to be invalidated.
Such invalidation is performed by calling <a href="Layout.html#invalidateLayout">invalidateLayout</a>,
which not only clears the <a href="Layout.html#isValidLayout">isValidLayout</a> state but also requests that the diagram
do an automatic layout soon.
You can avoid such invalidations by setting <a href="Layout.html#isOngoing">isOngoing</a> to false.</p>
<p>Layouts will ignore parts that have <a href="Part.html#isLayoutPositioned">Part.isLayoutPositioned</a> set to false
or parts that are not <a href="GraphObject.html#visible">GraphObject.visible</a>.
Layouts will also ignore parts that are in layers that are <a href="Layer.html#isTemporary">Layer.isTemporary</a>.</p>
<p>Various operations on <a href="Part.html">Part</a>s will cause the responsible Layout to be invalidated.
This includes adding or removing parts, changing their visibility, and changing their size.
You can disable such automatic layout invalidations by setting <a href="Part.html#layoutConditions">Part.layoutConditions</a>
to the combination of Part flags named "Layout..." that you want.</p>
<p>But operations on parts are not the only way in which layouts become invalidated.
Setting most properties on the layouts, thereby changing their behavior, will invalidate that layout.
Replacing the <a href="Diagram.html#layout">Diagram.layout</a> or <a href="Group.html#layout">Group.layout</a> will automatically invalidate the new layout.
If <a href="Layout.html#isViewportSized">isViewportSized</a> is true, when a diagram's <a href="Diagram.html#viewportBounds">Diagram.viewportBounds</a> changes size,
the <a href="Diagram.html#layout">Diagram.layout</a> is invalidated.
(This is normally only true for <a href="GridLayout.html">GridLayout</a>s when its <a href="GridLayout.html#wrappingWidth">GridLayout.wrappingWidth</a> is <code>NaN</code>.
Most layouts do not care about the size of the viewport.)</p>
<p>You can also explicitly call <a href="Diagram.html#layoutDiagram">Diagram.layoutDiagram</a>, which can invalidate all layouts and
then perform them all.
But we recommend that you avoid doing so, to allow the normal updating process perform layouts as needed.</p>
<p>If an automatic layout is the first time that a layout has been performed for the model,
the diagram first raises the <a href="DiagramEvent.html">DiagramEvent</a> named "InitialLayoutCompleted".
Whenever a Diagram finishes an automatic layout, it raises the DiagramEvent named "LayoutCompleted".</p>
<p>It is also possible to call <a href="Layout.html#doLayout">doLayout</a> explicitly, but this is uncommon and only used with
instances of Layout that are not the <a href="Diagram.html#layout">Diagram.layout</a> or <a href="Group.html#layout">Group.layout</a>.
It should only be needed when you want to layout a collection of nodes and links that is not
the normal graph of top-level parts of a Diagram or a subgraph of a Group.</p>
<p>More complicated layouts make use of a separate <a href="LayoutNetwork.html">LayoutNetwork</a>, consisting of <a href="LayoutVertex.html">LayoutVertex</a>es and <a href="LayoutEdge.html">LayoutEdge</a>s,
that normally holds a graph that is isomorphic to the graph consisting of <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s in the <a href="Diagram.html">Diagram</a> or <a href="Group.html">Group</a>.
The implementation of <a href="Layout.html#doLayout">doLayout</a> will call <a href="Layout.html#makeNetwork">makeNetwork</a> and remember the result as the <a href="Layout.html#network">network</a>.
<a href="Layout.html#makeNetwork">makeNetwork</a> will call <a href="Layout.html#createNetwork">createNetwork</a> and initialize it by adding new instances of LayoutVertexes and LayoutEdges
corresponding to the given collection of Nodes and Links.</p>
<p>When <a href="Layout.html#doLayout">doLayout</a> is finished with its work it will call <a href="Layout.html#updateParts">updateParts</a>, which will call <a href="Layout.html#commitLayout">commitLayout</a>
to set new node locations and route links. It then normally discards the <a href="Layout.html#network">network</a>.</p>
<p>The LayoutVertex and LayoutEdge instances allow the layout to work with more information about each Node and Link without
actually modifying those Nodes and Links until <a href="Layout.html#commitLayout">commitLayout</a> is called to actually set the Node locations and route the Links.
The use of a LayoutNetwork also allows the Layout to work with a graph that is not isomorphic to the given collection of Nodes and Links.
This is useful when needing to use dummy vertexes and/or edges to achieve certain layout behaviors,
or when one wants to ignore certain vertexes or edges, without actually modifying or adding or removing the diagram's nodes or links.</p>
<p>An instance of this base class provides a rudimentary default layout that will position
all of the parts that have no position (i.e. the <a href="Part.html#location">Part.location</a> is (NaN,NaN).
Parts that already have a position are ignored.
This primitive layout class does not make use of a <a href="LayoutNetwork.html">LayoutNetwork</a> because
it ignores all links.</p>
<p>To implement your own custom layouts, you can inherit from either this class or
from one of the other predefined layout classes.
If you inherit from this base class, you will want to override the <a href="Layout.html#doLayout">doLayout</a> method.
You can call the <a href="Part.html#move">Part.move</a> method to re-position a part, including whole groups.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Layout.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="Layout.html#arrangementOrigin" class="tsd-kind-icon">arrangement<wbr/>Origin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#boundsComputation" class="tsd-kind-icon">bounds<wbr/>Computation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#diagram" class="tsd-kind-icon">diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#group" class="tsd-kind-icon">group</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isInitial" class="tsd-kind-icon">is<wbr/>Initial</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isOngoing" class="tsd-kind-icon">is<wbr/>Ongoing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRealtime" class="tsd-kind-icon">is<wbr/>Realtime</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isRouting" class="tsd-kind-icon">is<wbr/>Routing</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isValidLayout" class="tsd-kind-icon">is<wbr/>Valid<wbr/>Layout</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#isViewportSized" class="tsd-kind-icon">is<wbr/>Viewport<wbr/>Sized</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layout.html#network" class="tsd-kind-icon">network</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#cloneProtected" class="tsd-kind-icon">clone<wbr/>Protected</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#collectParts" class="tsd-kind-icon">collect<wbr/>Parts</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#commitLayout" class="tsd-kind-icon">commit<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#copy" class="tsd-kind-icon">copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#createNetwork" class="tsd-kind-icon">create<wbr/>Network</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#doLayout" class="tsd-kind-icon">do<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#getLayoutBounds" class="tsd-kind-icon">get<wbr/>Layout<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Layout.html#initialOrigin" class="tsd-kind-icon">initial<wbr/>Origin</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#invalidateLayout" class="tsd-kind-icon">invalidate<wbr/>Layout</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#makeNetwork" class="tsd-kind-icon">make<wbr/>Network</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Layout.html#updateParts" class="tsd-kind-icon">update<wbr/>Parts</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 id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Layout<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Create a minimal layout that only positions <a href="Node.html">Node</a>s that do not have a location.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional initialization properties.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</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 id="arrangementOrigin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> arrangement<wbr/>Origin<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type" data-tsd-kind="Class">Point</a><a href="#arrangementOrigin" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the top-left point for where the graph should be positioned when laid out.
The default value for this property is the Point(0, 0).
Setting this property to a new value invalidates this layout.
This property is likely to be set by many Layouts that belong to a Group when the layout is performed.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="boundsComputation" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> bounds<wbr/>Computation<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>part<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a>, lay<span class="tsd-signature-symbol">: </span><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a>, rect<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><a href="#boundsComputation" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets a function that determines the initial size and position in document coordinates of a LayoutVertex corresponding to a Node.
This function is called by <a href="Layout.html#getLayoutBounds">getLayoutBounds</a>.
The default value for this property is null, in which case the <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a> of the Node is used.
Setting this property to a new value invalidates this layout.</p>
<div><p>The non-null value must be a function that takes 3 arguments.
The first argument will be the Part whose bounds the Layout should use.
The second argument will be this Layout.
The third argument will be a Rect that must be modified and returned
The return value must be in document coordinates. You may find it convenient to call <a href="GraphObject.html#getDocumentBounds">GraphObject.getDocumentBounds</a>
to get the bounds in document coordinates of an object within the node.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="diagram" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> diagram<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><a href="#diagram" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets the <a href="Diagram.html">Diagram</a> that owns this layout, if it is the value of <a href="Diagram.html#layout">Diagram.layout</a>.</p>
<div><p>If this property and <a href="Layout.html#group">group</a> are non-null, the Group should be in this Diagram.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Layout.html#group">group</a></p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="group" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> group<span class="tsd-signature-symbol">: </span><a href="Group.html" class="tsd-signature-type" data-tsd-kind="Class">Group</a><a href="#group" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets the <a href="Group.html">Group</a> that uses this layout, if it is the value of a group's <a href="Group.html#layout">Group.layout</a>.</p>
<div><p>If this property is set to a Group, the <a href="Layout.html#diagram">diagram</a> is automatically set to be the Group's Diagram.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Layout.html#diagram">diagram</a></p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isInitial" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Initial<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isInitial" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout is performed on an initial layout.
The default value is true.
Setting this property to false causes <a href="Layout.html#isValidLayout">isValidLayout</a> to be set to true
so that the diagram does not perform this layout.</p>
<div><p>If you set both <a href="Layout.html#isInitial">isInitial</a> and <a href="Layout.html#isOngoing">isOngoing</a> to false,
there will be no automatic layout invalidation, because <a href="Layout.html#invalidateLayout">invalidateLayout</a>
will not set <a href="Layout.html#isValidLayout">isValidLayout</a> to false.
To get your nodes to appear, you will need to explicitly set or data-bind their <a href="Part.html#location">Part.location</a>
or <a href="GraphObject.html#position">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.</p>
<p>Another way of controlling when layouts are invalidated is by setting
<a href="Part.html#isLayoutPositioned">Part.isLayoutPositioned</a> or <a href="Part.html#layoutConditions">Part.layoutConditions</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isOngoing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Ongoing<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isOngoing" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout can be invalidated by <a href="Layout.html#invalidateLayout">invalidateLayout</a>.
Set this to false to prevent actions such as adding or removing Parts from invalidating this layout.
The default value is true.
Setting this property does not invalidate this layout.</p>
<div><p>If you set both <a href="Layout.html#isInitial">isInitial</a> and <a href="Layout.html#isOngoing">isOngoing</a> to false,
there will be no automatic layout invalidation, because <a href="Layout.html#invalidateLayout">invalidateLayout</a>
will not set <a href="Layout.html#isValidLayout">isValidLayout</a> to false.
To get your nodes to appear, you will need to explicitly set or data-bind their <a href="Part.html#location">Part.location</a>
or <a href="GraphObject.html#position">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.</p>
<p>Another way of controlling when layouts are invalidated is by setting
<a href="Part.html#isLayoutPositioned">Part.isLayoutPositioned</a> or <a href="Part.html#layoutConditions">Part.layoutConditions</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isRealtime" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Realtime<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isRealtime" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout be performed in real-time, before the end of a transaction.
All layouts that are invalidated will be performed at the end of a transaction.
The default value is null.
A null value is treated as true for a <a href="Diagram.html#layout">Diagram.layout</a> but false for a <a href="Group.html#layout">Group.layout</a>.
Setting this property does not invalidate this layout.</p>
<dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.2</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isRouting" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Routing<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isRouting" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout routes <a href="Link.html">Link</a>s.
The default value is true.
When false, this layout will not explicitly set the <a href="Link.html#points">Link.points</a>,
and the default routing of each individual Link will take place after the Nodes are moved by <a href="Layout.html#commitLayout">commitLayout</a>.
Setting this property does not invalidate this layout.</p>
<div><p>Some layouts ignore links, in which case this property is ignored.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.1</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isValidLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Valid<wbr/>Layout<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isValidLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout needs to be performed again (if false).
Instead of setting this property directly, it is normal to set it to false by calling <a href="Layout.html#invalidateLayout">invalidateLayout</a>,
since that also requests performing a layout in the near future.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isViewportSized" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Viewport<wbr/>Sized<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isViewportSized" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets whether this layout depends on the <a href="Diagram.html#viewportBounds">Diagram.viewportBounds</a>'s size.
If set to true, the layout will invalidate when the Diagram's viewport changes size.
This only applies to diagram layouts, not to group layouts,
and only when <a href="Diagram.html#autoScale">Diagram.autoScale</a> is set to <a href="Diagram.html#static-None">Diagram.None</a>.</p>
<div><p>The default value is false.
Setting this property to true will invalidate this layout.</p>
<p>It is possible that a viewport-sized layout will trigger the Diagram to require scrollbars,
which modifies the <a href="Diagram.html#viewportBounds">Diagram.viewportBounds</a>, which will in turn trigger another layout.
This is uncommon, but possible with <a href="GridLayout.html">GridLayout</a> if the results require a vertical scrollbar,
and that vertical scrollbar shrinks the viewport width enough that a grid column can no longer fit.
When designing custom layouts, one should be careful that this behavior does not result in an infinite loop.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="network" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> network<span class="tsd-signature-symbol">: </span><a href="LayoutNetwork.html" class="tsd-signature-type" data-tsd-kind="Class">LayoutNetwork</a><a href="#network" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="LayoutNetwork.html">LayoutNetwork</a> used by this Layout, if any.
The default value is null.
Setting this property does not invalidate this layout.
Not all kinds of layout make use of a <a href="LayoutNetwork.html">LayoutNetwork</a>.
Call <a href="Layout.html#createNetwork">createNetwork</a> or <a href="Layout.html#makeNetwork">makeNetwork</a> to create a network.</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 tsd-is-protected"><a id="cloneProtected" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagVirtual">Virtual</span> clone<wbr/>Protected<a href="#cloneProtected" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected"><li class="tsd-signature tsd-kind-icon">clone<wbr/>Protected<span class="tsd-signature-symbol">(</span>copy<span class="tsd-signature-symbol">: </span><a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Copies properties from this object to the given object, which is of the same class.
This is called by <a href="Layout.html#copy">copy</a> and should be overridden for each class that adds properties.
There are examples of such overrides in the samples.
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
<dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.6</p>
</dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>copy: <a href="Layout.html" class="tsd-signature-type" data-tsd-kind="Class">Layout</a></h5></li></ul><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a id="collectParts" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagProtected">Protected</span> collect<wbr/>Parts<a href="#collectParts" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected"><li class="tsd-signature tsd-kind-icon">collect<wbr/>Parts<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type" data-tsd-kind="Class">Group</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type" data-tsd-kind="Class">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">></span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>A convenient way of converting the Diagram|Group|Iterable argument to doLayout to an actual collection of eligible Parts.
The resulting Set will not include any Nodes or Links for which <a href="Part.html#canLayout">Part.canLayout</a> is false.
If the argument includes a Group for which <a href="Group.html#layout">Group.layout</a> is null, the resulting Set
will include the member parts of that group rather than that group itself.
You will not need to call collectParts if you call <a href="Layout.html#makeNetwork">makeNetwork</a>,
because that method does effectively the same thing when building the <a href="LayoutNetwork.html">LayoutNetwork</a>.</p>
<div><p>Typical usage:</p>
<pre><code class="language-js"><span class="hl-4">public</span><span class="hl-2"> </span><span class="hl-5">doLayout</span><span class="hl-2">(</span><span class="hl-4">coll</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-0">// COLL might be a Diagram or a Group or some Iterable<Part></span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">it</span><span class="hl-2"> = </span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-5">collectParts</span><span class="hl-2">(</span><span class="hl-4">coll</span><span class="hl-2">).</span><span class="hl-4">iterator</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">while</span><span class="hl-2"> (</span><span class="hl-4">it</span><span class="hl-2">.</span><span class="hl-5">next</span><span class="hl-2">()) {</span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">node</span><span class="hl-2"> = </span><span class="hl-4">it</span><span class="hl-2">.</span><span class="hl-4">value</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-4">node</span><span class="hl-2"> </span><span class="hl-1">instanceof</span><span class="hl-2"> </span><span class="hl-11">go</span><span class="hl-2">.</span><span class="hl-11">Node</span><span class="hl-2">) {</span><br/><span class="hl-2"> . . . </span><span class="hl-4">position</span><span class="hl-2"> </span><span class="hl-4">the</span><span class="hl-2"> </span><span class="hl-4">node</span><span class="hl-2"> . . .</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span>
</code></pre>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.7</p>
</dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>coll: <a href="Diagram.html" class="tsd-signature-type" data-tsd-kind="Class">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="Iterable.html" class="tsd-signature-type" data-tsd-kind="Interface">Iterable</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Group.html" class="tsd-signature-type" data-tsd-kind="Class">Group</a></h5></li></ul><h4 class="tsd-returns-title">Returns <a href="Set.html" class="tsd-signature-type" data-tsd-kind="Class">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type" data-tsd-kind="Class">Part</a><span class="tsd-signature-symbol">></span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a id="commitLayout" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagProtected">Protected</span> <span class="tsd-flag ts-flagVirtual">Virtual</span> commit<wbr/>Layout<a href="#commitLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected"><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>When using a <a href="LayoutNetwork.html">LayoutNetwork</a>, commit changes to the diagram
by setting <a href="Node.html">Node</a> positions and by routing the <a href="Link.html">Link</a>s.
This is called by <a href="Layout.html#updateParts">updateParts</a> within a transaction.</p>
<div><p>You should not call this method -- it is a "protected virtual" method.
This may be overridden by subclasses of Layout.
By default this method is implemented as follows:</p>
<pre><code class="language-js"><span class="hl-4">protected</span><span class="hl-2"> </span><span class="hl-5">commitLayout</span><span class="hl-2">() {</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-4">network</span><span class="hl-2"> === </span><span class="hl-1">null</span><span class="hl-2">) </span><span class="hl-8">return</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">vit</span><span class="hl-2"> = </span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-4">network</span><span class="hl-2">.</span><span class="hl-4">vertexes</span><span class="hl-2">.</span><span class="hl-4">iterator</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">while</span><span class="hl-2"> (</span><span class="hl-4">vit</span><span class="hl-2">.</span><span class="hl-5">next</span><span class="hl-2">()) {</span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">vert</span><span class="hl-2"> = </span><span class="hl-4">vit</span><span class="hl-2">.</span><span class="hl-4">value</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">vert</span><span class="hl-2">.</span><span class="hl-5">commit</span><span class="hl-2">();</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> </span><span class="hl-8">if</span><span class="hl-2"> (</span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-4">isRouting</span><span class="hl-2">) {</span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">eit</span><span class="hl-2"> = </span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-4">network</span><span class="hl-2">.</span><span class="hl-4">edges</span><span class="hl-2">.</span><span class="hl-4">iterator</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-8">while</span><span class="hl-2"> (</span><span class="hl-4">eit</span><span class="hl-2">.</span><span class="hl-5">next</span><span class="hl-2">()) {</span><br/><span class="hl-2"> </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">edge</span><span class="hl-2"> = </span><span class="hl-4">eit</span><span class="hl-2">.</span><span class="hl-4">value</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">edge</span><span class="hl-2">.</span><span class="hl-5">commit</span><span class="hl-2">();</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span>
</code></pre>
<p>Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</p>
</div></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-pare