gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
410 lines (409 loc) • 23.3 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DoubleTreeLayout | 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 DoubleTreeLayout</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-extension">
<p>
This is an extension and not part of the main GoJS library.
Note that the API for this class may change at any time.
If you intend to use an extension in production, you should copy the code to your own source directory.
Extensions can be found in the GoJS kit under the <code>extensions</code> or <code>extensionsTS</code> folders.
See the <a href="../../intro/extensions.html">Extensions intro page</a> for more information.
</p>
</section>
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<a href="Layout.html" class="tsd-signature-type">Layout</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">DoubleTreeLayout</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>Perform two TreeLayouts, one going rightwards and one going leftwards.
The choice of direction is determined by the mandatory predicate <a href="DoubleTreeLayout.html#directionFunction">directionFunction</a>,
which is called on each child Node of the root Node.</p>
<p>You can also set <a href="DoubleTreeLayout.html#vertical">vertical</a> to true if you want the DoubleTreeLayout to
perform TreeLayouts both downwards and upwards.</p>
<p>Normally there should be a single root node. Hoewver if there are multiple root nodes
found in the nodes and links that this layout is responsible for, this will pretend that
there is a real root node and make all of the apparent root nodes children of that pretend root.</p>
<p>If there is no root node, all nodes are involved in cycles, so the first given node is chosen.</p>
<p>If you want to experiment with this extension, try the <a href="../../samples/doubleTree.html">Double Tree</a> sample.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DoubleTreeLayout.html#bottomRightOptions" class="tsd-kind-icon">bottom<wbr>Right<wbr>Options</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DoubleTreeLayout.html#directionFunction" class="tsd-kind-icon">direction<wbr>Function</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DoubleTreeLayout.html#topLeftOptions" class="tsd-kind-icon">top<wbr>Left<wbr>Options</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="DoubleTreeLayout.html#vertical" class="tsd-kind-icon">vertical</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="DoubleTreeLayout.html#createTreeLayout" class="tsd-kind-icon">create<wbr>Tree<wbr>Layout</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="DoubleTreeLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="DoubleTreeLayout.html#isPositiveDirection" class="tsd-kind-icon">is<wbr>Positive<wbr>Direction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="DoubleTreeLayout.html#separatePartsForLayout" class="tsd-kind-icon">separate<wbr>Parts<wbr>For<wbr>Layout</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="bottomRightOptions" class="tsd-anchor"></a>
<h3>
bottom<wbr>Right<wbr>Options
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TreeLayout.html" class="tsd-signature-type">TreeLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the options to be applied to a <a href="TreeLayout.html">TreeLayout</a>.
By default this is null -- no properties are set on the TreeLayout
other than the <a href="TreeLayout.html#angle">TreeLayout.angle</a>, depending on <a href="DoubleTreeLayout.html#vertical">vertical</a> and
the result of calling <a href="DoubleTreeLayout.html#directionFunction">directionFunction</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="directionFunction" class="tsd-anchor"></a>
<h3>
direction<wbr>Function
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">node</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This function is called on each child node of the root node
in order to determine whether the subtree starting from that child node
will grow towards larger coordinates or towards smaller ones.
The value must be a function and must not be null.
It must return true if <a href="DoubleTreeLayout.html#isPositiveDirection">isPositiveDirection</a> should return true; otherwise it should return false.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="topLeftOptions" class="tsd-anchor"></a>
<h3>
top<wbr>Left<wbr>Options
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="TreeLayout.html" class="tsd-signature-type">TreeLayout</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the options to be applied to a <a href="TreeLayout.html">TreeLayout</a>.
By default this is null -- no properties are set on the TreeLayout
other than the <a href="TreeLayout.html#angle">TreeLayout.angle</a>, depending on <a href="DoubleTreeLayout.html#vertical">vertical</a> and
the result of calling <a href="DoubleTreeLayout.html#directionFunction">directionFunction</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="vertical" class="tsd-anchor"></a>
<h3>
vertical
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>When false, the layout should grow towards the left and towards the right;
when true, the layout show grow upwards and downwards.
The default value is false.</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 name="createTreeLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagProtected">Protected</span>
create<wbr>Tree<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">create<wbr>Tree<wbr>Layout<span class="tsd-signature-symbol">(</span>positive<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="TreeLayout.html" class="tsd-signature-type">TreeLayout</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This just returns an instance of <a href="TreeLayout.html">TreeLayout</a>.
The caller will set the <a href="TreeLayout.html#angle">TreeLayout.angle</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>positive: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>true for growth downward or rightward</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="TreeLayout.html" class="tsd-signature-type">TreeLayout</a></h4>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="doLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagOverride">Override</span>
do<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">do<wbr>Layout<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><a href="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><a href="Group.html" class="tsd-signature-type">Group</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>Perform two <a href="TreeLayout.html">TreeLayout</a>s by splitting the collection of Parts
into two separate subsets but sharing only a single root Node.</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="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><a href="Group.html" class="tsd-signature-type">Group</a></h5>
<div class="tsd-comment tsd-typography">
</div>
</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 name="isPositiveDirection" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagProtected">Protected</span>
is<wbr>Positive<wbr>Direction
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">is<wbr>Positive<wbr>Direction<span class="tsd-signature-symbol">(</span>child<span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This predicate is called on each child node of the root node,
and only on immediate children of the root.
It should return true if this child node is the root of a subtree that should grow
rightwards or downwards, or false otherwise.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>child: <a href="Node.html" class="tsd-signature-type">Node</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
<p>true if grows towards right or towards bottom; false otherwise</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a name="separatePartsForLayout" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagProtected">Protected</span>
separate<wbr>Parts<wbr>For<wbr>Layout
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<li class="tsd-signature tsd-kind-icon">separate<wbr>Parts<wbr>For<wbr>Layout<span class="tsd-signature-symbol">(</span>coll<span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></span>, leftParts<span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></span>, rightParts<span class="tsd-signature-symbol">: </span><a href="Set.html" class="tsd-signature-type">Set</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>This is called by <a href="DoubleTreeLayout.html#doLayout">doLayout</a> to split the collection of Nodes and Links into two Sets,
one for the subtrees growing towards the left or upwards, and one for the subtrees
growing towards the right or downwards.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>coll: <a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></span></h5>
</li>
<li>
<h5>leftParts: <a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></span></h5>
</li>
<li>
<h5>rightParts: <a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">></span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class tsd-is-extension">
<a href="DoubleTreeLayout.html" class="tsd-kind-icon">Double<wbr>Tree<wbr>Layout</a>
<ul>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="DoubleTreeLayout.html#bottomRightOptions" class="tsd-kind-icon">bottom<wbr>Right<wbr>Options</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="DoubleTreeLayout.html#directionFunction" class="tsd-kind-icon">direction<wbr>Function</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="DoubleTreeLayout.html#topLeftOptions" class="tsd-kind-icon">top<wbr>Left<wbr>Options</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="DoubleTreeLayout.html#vertical" class="tsd-kind-icon">vertical</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="DoubleTreeLayout.html#createTreeLayout" class="tsd-kind-icon">create<wbr>Tree<wbr>Layout</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class">
<a href="DoubleTreeLayout.html#doLayout" class="tsd-kind-icon">do<wbr>Layout</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="DoubleTreeLayout.html#isPositiveDirection" class="tsd-kind-icon">is<wbr>Positive<wbr>Direction</a>
</li>
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
<a href="DoubleTreeLayout.html#separatePartsForLayout" class="tsd-kind-icon">separate<wbr>Parts<wbr>For<wbr>Layout</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>