create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
143 lines (141 loc) • 40.1 kB
HTML
<html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>SwimLaneLayout | 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/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"><a class="!text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"><svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:!bg-inherit"><a href="../../learn/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></div></div></div></div></nav><script>window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></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"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="SwimLaneLayout.html">SwimLaneLayout</a></li></ul><h1 class="flex items-center">Class SwimLaneLayout</h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-extension"><p>This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the <a href="../../intro/extensions.html">Extensions intro page</a> for more information.</p></section><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#SwimLaneLayout">view full</a>)</h4><ul class="tsd-hierarchy"><li><a href="LayeredDigraphLayout.html" class="tsd-signature-type tsd-kind-class">LayeredDigraphLayout</a><ul class="tsd-hierarchy"><li><span class="target">SwimLaneLayout</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>A custom LayeredDigraphLayout that knows about "lanes"
and that positions each node in its respective lane.</p>
<p>This assumes that each Node.data.lane property is a string that names the lane the node should be in.
You can set the <a href="SwimLaneLayout.html#laneProperty" class="tsd-kind-accessor">laneProperty</a> property to use a different data property name.
It is commonplace to set this property to be the same as the <a href="GraphLinksModel.html#nodeGroupKeyProperty" class="tsd-kind-accessor">go.GraphLinksModel.nodeGroupKeyProperty</a>,
so that the one property indicates that a particular node data is a member of a particular group
and thus that that group represents a lane.</p>
<p>The lanes can be sorted by specifying the <a href="SwimLaneLayout.html#laneComparer" class="tsd-kind-accessor">laneComparer</a> function.</p>
<p>You can add extra space between the lanes by increasing <a href="SwimLaneLayout.html#laneSpacing" class="tsd-kind-accessor">laneSpacing</a> from its default of zero.
That number's unit is columns, <a href="LayeredDigraphLayout.html#columnSpacing" class="tsd-kind-accessor">go.LayeredDigraphLayout.columnSpacing</a>, not in document coordinates.</p>
<p>If you want to experiment with this extension, try the <a href="../../samples/SwimLaneLayout.html">SwimLaneLayout</a> sample.</p>
</div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="SwimLaneLayout.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="SwimLaneLayout.html#laneBreadths" class="tsd-index-link tsd-is-protected"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF4D4D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Breadths</span></a>
<a href="SwimLaneLayout.html#laneComparer" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Comparer</span></a>
<a href="SwimLaneLayout.html#laneNames" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Names</span></a>
<a href="SwimLaneLayout.html#lanePositions" class="tsd-index-link tsd-is-protected"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Positions</span></a>
<a href="SwimLaneLayout.html#laneProperty" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Property</span></a>
<a href="SwimLaneLayout.html#laneSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Spacing</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="SwimLaneLayout.html#computeMinLaneWidth" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>compute<wbr/>Min<wbr/>Lane<wbr/>Width</span></a>
<a href="SwimLaneLayout.html#findLane" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>find<wbr/>Lane</span></a>
<a href="SwimLaneLayout.html#getLane" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Lane</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion"><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Inherited Index</h5></summary><div class="tsd-accordion-details"><div class="tsd-index-content"><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="LayeredDigraphLayout.html#aggressiveOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.aggressive<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#alignOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.align<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#centered" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.centered</span></a>
<a href="LayeredDigraphLayout.html#columnSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.column<wbr/>Spacing</span></a>
<a href="LayeredDigraphLayout.html#cycleRemoveOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.cycle<wbr/>Remove<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#direction" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.direction</span></a>
<a href="LayeredDigraphLayout.html#initializeOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.initialize<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#iterations" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.iterations</span></a>
<a href="LayeredDigraphLayout.html#layerSpacing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.layer<wbr/>Spacing</span></a>
<a href="LayeredDigraphLayout.html#layeringOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.layering<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#maxColumn" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.max<wbr/>Column</span></a>
<a href="LayeredDigraphLayout.html#maxIndex" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.max<wbr/>Index</span></a>
<a href="LayeredDigraphLayout.html#maxIndexLayer" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.max<wbr/>Index<wbr/>Layer</span></a>
<a href="LayeredDigraphLayout.html#maxLayer" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.max<wbr/>Layer</span></a>
<a href="LayeredDigraphLayout.html#minIndexLayer" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.min<wbr/>Index<wbr/>Layer</span></a>
<a href="LayeredDigraphLayout.html#packOption" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.pack<wbr/>Option</span></a>
<a href="LayeredDigraphLayout.html#setsPortSpots" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.sets<wbr/>Port<wbr/>Spots</span></a>
<a href="Layout.html#arrangementOrigin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.arrangement<wbr/>Origin</span></a>
<a href="Layout.html#boundsComputation" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.bounds<wbr/>Computation</span></a>
<a href="Layout.html#diagram" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.diagram</span></a>
<a href="Layout.html#group" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.group</span></a>
<a href="Layout.html#isInitial" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Initial</span></a>
<a href="Layout.html#isOngoing" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Ongoing</span></a>
<a href="Layout.html#isRealtime" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Realtime</span></a>
<a href="Layout.html#isRouting" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Routing</span></a>
<a href="Layout.html#isValidLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Valid<wbr/>Layout</span></a>
<a href="Layout.html#isViewportSized" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.is<wbr/>Viewport<wbr/>Sized</span></a>
<a href="Layout.html#network" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Layout.network</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="LayeredDigraphLayout.html#assignLayers" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.assign<wbr/>Layers</span></a>
<a href="LayeredDigraphLayout.html#commitLayers" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.commit<wbr/>Layers</span></a>
<a href="LayeredDigraphLayout.html#commitLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.commit<wbr/>Layout</span></a>
<a href="LayeredDigraphLayout.html#commitLinks" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.commit<wbr/>Links</span></a>
<a href="LayeredDigraphLayout.html#commitNodes" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.commit<wbr/>Nodes</span></a>
<a href="LayeredDigraphLayout.html#createNetwork" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layered<wbr/>Digraph<wbr/>Layout.create<wbr/>Network</span></a>
<a href="Layout.html#cloneProtected" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.clone<wbr/>Protected</span></a>
<a href="Layout.html#collectParts" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.collect<wbr/>Parts</span></a>
<a href="Layout.html#copy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.copy</span></a>
<a href="Layout.html#getLayoutBounds" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.get<wbr/>Layout<wbr/>Bounds</span></a>
<a href="Layout.html#initialOrigin" class="tsd-index-link tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.initial<wbr/>Origin</span></a>
<a href="Layout.html#invalidateLayout" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.invalidate<wbr/>Layout</span></a>
<a href="Layout.html#makeNetwork" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.make<wbr/>Network</span></a>
<a href="Layout.html#updateParts" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Layout.update<wbr/>Parts</span></a>
</div></section></div></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_SwimLaneLayout" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Swim<wbr/>Lane<wbr/>Layout</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">init</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SwimLaneLayout.html" class="tsd-signature-type tsd-kind-class">SwimLaneLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="SwimLaneLayout.html" class="tsd-signature-type tsd-kind-class">SwimLaneLayout</a><a href="#constructor.new_SwimLaneLayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">init</span>: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="SwimLaneLayout.html" class="tsd-signature-type tsd-kind-class">SwimLaneLayout</a><span class="tsd-signature-symbol">></span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <a href="SwimLaneLayout.html" class="tsd-signature-type tsd-kind-class">SwimLaneLayout</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member tsd-is-protected"><a id="laneBreadths" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <code class="tsd-tag ts-flagReadOnly">Readonly</code><span>lane<wbr/>Breadths</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span></div><a href="#laneBreadths" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>The computed breadths (widths or heights depending on the direction) of each lane,
in the form of a <a href="Map.html" class="tsd-kind-class">Map</a> mapping lane names (strings) to numbers.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="laneComparer" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>lane<wbr/>Comparer</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, <span class="tsd-kind-parameter">b</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span></div><a href="#laneComparer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets a function by which to compare lane names, for ordering the lanes within the <a href="SwimLaneLayout.html#laneNames" class="tsd-kind-accessor">laneNames</a> Array.
By default the function is null -- the lanes are not sorted.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="laneNames" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>lane<wbr/>Names</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div><a href="#laneNames" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets an Array of lane names.
If you set this before a layout happens, it will use those lanes in that order.
Any additional lane names that it discovers will be added to the end of this Array.</p>
<p>This property is reset to an empty Array at the end of each layout.
The default value is an empty Array.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="lanePositions" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <code class="tsd-tag ts-flagReadOnly">Readonly</code><span>lane<wbr/>Positions</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">></span></div><a href="#lanePositions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>The computed positions of each lane,
in the form of a <a href="Map.html" class="tsd-kind-class">Map</a> mapping lane names (strings) to numbers.</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="laneProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>lane<wbr/>Property</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">d</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span></div><a href="#laneProperty" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the name of the data property that holds the string which is the name of the lane that the node should be in.
The default value is "lane".</p>
</div></li></ul></section><section class="tsd-panel tsd-member"><a id="laneSpacing" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>lane<wbr/>Spacing</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></div><a href="#laneSpacing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the amount of additional space it allocates between the lanes.
This number specifies the number of columns, with the same meaning as <a href="LayeredDigraphLayout.html#columnSpacing" class="tsd-kind-accessor">go.LayeredDigraphLayout.columnSpacing</a>.
The number unit is not in document coordinate or pixels.
The default value is zero columns.</p>
</div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="computeMinLaneWidth" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>compute<wbr/>Min<wbr/>Lane<wbr/>Width</span><a href="#computeMinLaneWidth" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="computeMinLaneWidth.computeMinLaneWidth-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">compute<wbr/>Min<wbr/>Lane<wbr/>Width</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">lane</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#computeMinLaneWidth.computeMinLaneWidth-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Return the minimum lane width, in columns</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">lane</span>: <span class="tsd-signature-type">string</span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="findLane" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <span>find<wbr/>Lane</span><a href="#findLane" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="findLane.findLane-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">find<wbr/>Lane</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="LayeredDigraphVertex.html" class="tsd-signature-type tsd-kind-class">LayeredDigraphVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#findLane.findLane-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>This is just like <a href="SwimLaneLayout.html#getLane" class="tsd-kind-method">getLane</a> but handles dummy vertexes
for which the <a href="SwimLaneLayout.html#getLane" class="tsd-kind-method">getLane</a> returns null by returning the
lane of the edge's source or destination vertex.
This can only be called after the lanes have been set up internally.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="LayeredDigraphVertex.html" class="tsd-signature-type tsd-kind-class">LayeredDigraphVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-is-protected"><a id="getLane" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <span>get<wbr/>Lane</span><a href="#getLane" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-protected"><li class="tsd-signature tsd-anchor-link"><a id="getLane.getLane-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">get<wbr/>Lane</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">v</span><span class="tsd-signature-symbol">: </span><a href="LayeredDigraphVertex.html" class="tsd-signature-type tsd-kind-class">LayeredDigraphVertex</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#getLane.getLane-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Given a vertex, get the lane (name) that its node belongs in.
If the lane appears to be undefined, this returns the empty string.
For dummy vertexes (with no node) this will return null.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">v</span>: <a href="LayeredDigraphVertex.html" class="tsd-signature-type tsd-kind-class">LayeredDigraphVertex</a></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4></li></ul></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#laneBreadths" class="tsd-is-protected"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Breadths</span></a></li><li><a href="#laneComparer"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Comparer</span></a></li><li><a href="#laneNames"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Names</span></a></li><li><a href="#lanePositions" class="tsd-is-protected"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Positions</span></a></li><li><a href="#laneProperty"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Property</span></a></li><li><a href="#laneSpacing"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>lane<wbr/>Spacing</span></a></li><li><a href="#computeMinLaneWidth"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>compute<wbr/>Min<wbr/>Lane<wbr/>Width</span></a></li><li><a href="#findLane" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>find<wbr/>Lane</span></a></li><li><a href="#getLane" class="tsd-is-protected"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Lane</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>