gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
683 lines • 108 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Node | 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 Node</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<a href="GraphObject.html" class="tsd-signature-type">GraphObject</a>
<ul class="tsd-hierarchy">
<li>
<a href="Panel.html" class="tsd-signature-type">Panel</a>
<ul class="tsd-hierarchy">
<li>
<a href="Part.html" class="tsd-signature-type">Part</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">Node</span>
<ul class="tsd-hierarchy">
<li>
<a href="Group.html" class="tsd-signature-type">Group</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>A Node is a <a href="Part.html">Part</a> that may connect to other nodes with <a href="Link.html">Link</a>s,
or that may be a member of a <a href="Group.html">Group</a>.</p>
<p><a href="Group.html">Group</a> inherits from Node,
enabling nodes to logically contain other nodes and links.</p>
<p class="boxread">
For a more general discussion of how to define nodes, see <a href="../../intro/nodes.html">Introduction to Nodes</a>.
<p>Although you can create a Node and <a href="Diagram.html#add">Diagram.add</a> it to a Diagram, this does not update the Model.
It is more common to create a node by adding a node data object to the model
by calling <a href="Model.html#addNodeData">Model.addNodeData</a>. For example:</p>
<pre><code class="hljs js"> myDiagram.startTransaction(<span class="hljs-string">"make new node"</span>);
myDiagram.model.addNodeData({ <span class="hljs-attr">key</span>: <span class="hljs-string">"Omega"</span> });
myDiagram.commitTransaction(<span class="hljs-string">"make new node"</span>);</code></pre>
<p>This will cause a Node or simple <a href="Part.html">Part</a> to be created (copying the template found in <a href="Diagram.html#nodeTemplateMap">Diagram.nodeTemplateMap</a>),
added to the Diagram in some <a href="Layer.html">Layer</a> (based on <a href="Part.html#layerName">Part.layerName</a>), and bound to the node data
(resulting in <a href="Panel.html#data">Panel.data</a> referring to that node data object).
If you do not keep a reference to that JavaScript object, as the above code does not,
you can retrieve it later by calling <a href="Model.html#findNodeDataForKey">Model.findNodeDataForKey</a>.</p>
<p>It is very common to initialize a Diagram by setting <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> to a JavaScript Array
of JavaScript objects holding the properties that you need in your model.
Nearly all of the samples do this kind of initialization.</p>
<p>You can delete a Node by either calling <a href="Diagram.html#remove">Diagram.remove</a> or by calling <a href="Model.html#removeNodeData">Model.removeNodeData</a>.
The latter obviously will modify the Model; the former does so if the Node was created from model data.
Commands such as <a href="CommandHandler.html#deleteSelection">CommandHandler.deleteSelection</a> call these methods within a transaction.</p>
<p>You can find all of the <a href="Link.html">Link</a>s that are connected with a Node by calling <a href="Node.html#findLinksConnected">findLinksConnected</a>.
Because links normally have a direction, you can find all of the links that have their <a href="Link.html#toNode">Link.toNode</a>
be a given Node by calling <a href="Node.html#findLinksInto">findLinksInto</a>.
Similarly, you can call <a href="Node.html#findLinksOutOf">findLinksOutOf</a> to find all of the links coming out from a node;
such links have their <a href="Link.html#fromNode">Link.fromNode</a> be that node.
For tree-structured graphs, use <a href="Node.html#findTreeChildrenLinks">findTreeChildrenLinks</a> or <a href="Node.html#findTreeParentLink">findTreeParentLink</a>.</p>
<p>If you are not so interested in the links but are interested in the nodes at the other end of the links
connecting with a node, there are other methods that you can call.
<a href="Node.html#findNodesConnected">findNodesConnected</a> returns all of the nodes that are at the other end of the links that
connect with a given node.
<a href="Node.html#findNodesInto">findNodesInto</a> and <a href="Node.html#findNodesOutOf">findNodesOutOf</a> return the subsets of those nodes considering
only those links that go into or come out of the given node.
For tree-structured graphs, use <a href="Node.html#findTreeChildrenNodes">findTreeChildrenNodes</a> or <a href="Node.html#findTreeParentNode">findTreeParentNode</a>.</p>
<p>For example, to operate on the data of all of the destination nodes:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> it = somenode.findNodesOutOf();
<span class="hljs-keyword">while</span> (it.next()) {
<span class="hljs-keyword">var</span> child = it.value;
<span class="hljs-keyword">if</span> (child.data.text.indexOf(<span class="hljs-string">"special"</span>) >= <span class="hljs-number">0</span>) { ... }
}</code></pre>
<p>You can link two nodes by creating a new <a href="Link.html">Link</a>, setting its <a href="Link.html#toNode">Link.toNode</a> and <a href="Link.html#fromNode">Link.fromNode</a>
(in either order), and <a href="Diagram.html#add">Diagram.add</a>ing it to the diagram.
But it is more common to add a link data object to the <a href="Diagram.html#model">Diagram.model</a> by calling <a href="GraphLinksModel.html#addLinkData">GraphLinksModel.addLinkData</a>.
Just creating and adding a <a href="Link.html">Link</a> will not update the model.</p>
<p>Thus to add a link when using a <a href="GraphLinksModel.html">GraphLinksModel</a> you should do something like:</p>
<pre><code class="hljs js"> myDiagram.startTransaction(<span class="hljs-string">"make new link"</span>);
myDiagram.model.addLinkData({ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> });
myDiagram.commitTransaction(<span class="hljs-string">"make new link"</span>);</code></pre>
<p>Where you would substitute the keys of the actual nodes that you want to connect with a link.
If you are using a <a href="TreeModel.html">TreeModel</a>, there are no link data objects, so you just need to call
<a href="TreeModel.html#setParentKeyForNodeData">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.</p>
<p>To find a <a href="Link.html">Link</a> given a link data object in the <a href="GraphLinksModel.html">GraphLinksModel</a>,
call <a href="Diagram.html#findLinkForData">Diagram.findLinkForData</a>. When using a <a href="TreeModel.html">TreeModel</a>, call either <a href="Diagram.html#findNodeForData">Diagram.findNodeForData</a>
or <a href="Diagram.html#findNodeForKey">Diagram.findNodeForKey</a> to get a Node, and then call <a href="Node.html#findTreeParentLink">findTreeParentLink</a> to get the Link, if any exists.</p>
<p>To find a link that connects two nodes, call <a href="Node.html#findLinksTo">findLinksTo</a> or <a href="Node.html#findLinksBetween">findLinksBetween</a>.
With the former method, the direction matters; with the latter method it returns links in either direction.</p>
<p>As links connect with a node or are disconnected, you may want to update the appearance of the node.
You can set the <a href="Node.html#linkConnected">linkConnected</a> and <a href="Node.html#linkDisconnected">linkDisconnected</a> properties to be functions that are called.
These functions must not modify any link relationships -- the properties just exist to update the appearance of the node.
A typical usage would be to change the color or figure of a shape.</p>
<p>You can control whether the user may draw a new link or reconnect a link between a pair of Nodes
by affecting the result of <a href="LinkingBaseTool.html#isValidLink">LinkingBaseTool.isValidLink</a>.
You can override that predicate on <a href="LinkingTool.html">LinkingTool</a> and <a href="RelinkingTool.html">RelinkingTool</a>,
but it is easier to set the <a href="Node.html#linkValidation">linkValidation</a> or
<a href="LinkingBaseTool.html#linkValidation">LinkingBaseTool.linkValidation</a> functional property.</p>
<p class="boxread">
For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
<p>Nodes also support the ability to provide logical and physical distinctions in the connection points
that links use at a node. These connection objects are called "ports".
By default the port object will be the whole <a href="Node.html">Node</a>.
However, you can set the <a href="GraphObject.html#portId">GraphObject.portId</a> property on any <a href="GraphObject.html">GraphObject</a> in the visual tree of a node
to cause that element to be treated as a "port".
The "port id" is just a string that ought to be unique amongst all of the port elements in the node.</p>
<p>In the case of a node only having a single port, you should set the <a href="GraphObject.html#portId">GraphObject.portId</a> as an empty string.
When there is no such element declared as the default port, it uses the whole node.
You can use the <a href="Node.html#port">port</a> property to get the only port element.</p>
<p>When a node should have multiple ports,
i.e. multiple <a href="GraphObject.html">GraphObject</a>s acting as separate connection points for links,
you should set each port's <a href="GraphObject.html#portId">GraphObject.portId</a> to a string value that is unique for the node.
When there may be multiple ports on a node, you can get a collection of elements representing ports
by using the <a href="Node.html#ports">ports</a> property.
Use the <a href="Node.html#findPort">findPort</a> method to find a particular port element by name.</p>
<p>Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,
for links is a <a href="GraphLinksModel.html">GraphLinksModel</a> whose <a href="GraphLinksModel.html#linkFromPortIdProperty">GraphLinksModel.linkFromPortIdProperty</a> and
<a href="GraphLinksModel.html#linkToPortIdProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.</p>
<p class="boxread">
For a more general discussion of ports, see <a href="../../intro/ports.html">Introduction to Ports</a>.
<p>All of the "findLinks..." and "findNodes..." methods mentioned above take an optional port id argument.
When no argument is passed, these methods consider all links connecting with the node.
When a port id argument is provided, these methods only consider links that connect with that port
in the given node.
Thus when navigating through the diagram, you can easily look at all of the nodes that links coming out of
a given node go to. Or you can just look at those nodes at the ends of links coming out of a particular port.</p>
<p>You can also control the default connecting behavior of <a href="Link.html">Link</a>s at each port.
Because a port can be any <a href="GraphObject.html">GraphObject</a>, they are all properties on GraphObject.
The properties are duplicated so that you can guide the "from" ends of links differently from the "to" ends of links.
The properties include:</p>
<ul>
<li><a href="GraphObject.html#fromSpot">GraphObject.fromSpot</a>, <a href="GraphObject.html#toSpot">GraphObject.toSpot</a></li>
<li><a href="GraphObject.html#fromEndSegmentLength">GraphObject.fromEndSegmentLength</a>, <a href="GraphObject.html#toEndSegmentLength">GraphObject.toEndSegmentLength</a></li>
<li><a href="GraphObject.html#fromShortLength">GraphObject.fromShortLength</a>, <a href="GraphObject.html#toShortLength">GraphObject.toShortLength</a></li>
<li><a href="GraphObject.html#fromLinkable">GraphObject.fromLinkable</a>, <a href="GraphObject.html#toLinkable">GraphObject.toLinkable</a></li>
<li><a href="GraphObject.html#fromLinkableDuplicates">GraphObject.fromLinkableDuplicates</a>, <a href="GraphObject.html#toLinkableDuplicates">GraphObject.toLinkableDuplicates</a></li>
<li><a href="GraphObject.html#fromLinkableSelfNode">GraphObject.fromLinkableSelfNode</a>, <a href="GraphObject.html#toLinkableSelfNode">GraphObject.toLinkableSelfNode</a></li>
<li><a href="GraphObject.html#fromMaxLinks">GraphObject.fromMaxLinks</a>, <a href="GraphObject.html#toMaxLinks">GraphObject.toMaxLinks</a></li>
</ul>
<p>The "...Spot" and "...Length" and "...Direction" properties control the position and routing of links at a port.
The "...Linkable..." and "...MaxLinks" properties control whether or not users can draw a new link
or reconnect an existing link from or to a port.
(The "...Spot" and "...Length" and "...Direction" properties also exist on <a href="Link.html">Link</a>, to override for a particular
link the default values that come from a port element.)</p>
<p class="boxread">
For a more general discussion of link points, see <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
<p>When the graph is tree-structured, you can use several functions for traversing the tree:</p>
<ul>
<li><a href="Node.html#findTreeParentNode">findTreeParentNode</a></li>
<li><a href="Node.html#findTreeChildrenNodes">findTreeChildrenNodes</a></li>
<li><a href="Node.html#findTreeParentLink">findTreeParentLink</a></li>
<li><a href="Node.html#findTreeChildrenLinks">findTreeChildrenLinks</a></li>
<li><a href="Node.html#findTreeRoot">findTreeRoot</a></li>
<li><a href="Node.html#findTreeParentChain">findTreeParentChain</a></li>
<li><a href="Node.html#findTreeParts">findTreeParts</a></li>
<li><a href="Node.html#findCommonTreeParent">findCommonTreeParent</a></li>
<li><a href="Node.html#isInTreeOf">isInTreeOf</a></li>
<li><a href="Node.html#findTreeLevel">findTreeLevel</a></li>
</ul>
<p>Determining whether a tree grows from the root via links that go out to the children or vice-versa
is controlled for the whole diagram by the <a href="Diagram.html#isTreePathToChildren">Diagram.isTreePathToChildren</a> property.
However an individual link will be ignored by the above functions if <a href="Link.html#isTreeLink">Link.isTreeLink</a> is false.</p>
<p>The Node class also supports the notion of expanding and collapsing a subtree of nodes and links,
causing those nodes and links to be shown or hidden.
Principally this is a matter of setting <a href="Node.html#isTreeExpanded">Node.isTreeExpanded</a>.
Of course if the diagram's graph is not tree-structured, these concepts and properties might not apply.</p>
<p>If you want to change the appearance of the node you can do so in a function that you assign to
the <a href="Node.html#treeExpandedChanged">treeExpandedChanged</a> property.
This function must not modify any link relationships or expand or collapse any subtrees -- the property just exists
to update the appearance of the node.</p>
<p>There is an option for link routing to try to avoid crossing over nodes:
<a href="Link.html#routing">Link.routing</a> = <a href="Link.html#static-AvoidsNodes">Link.AvoidsNodes</a>.
You can control whether such links should avoid or ignore a node by setting <a href="Node.html#avoidable">avoidable</a>.
Set <a href="Node.html#avoidableMargin">avoidableMargin</a> to control the area beyond the <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>
where AvoidsNodes links should not go.</p>
<p class="boxread">
For more discussion and examples, see <a href="../../intro/nodes.html">Nodes</a>,
<a href="../../intro/ports.html">Ports</a>, and
<a href="../../intro/connectionPoints.html">Link Points</a>.
<p class="boxread">
For more about trees, see <a href="../../intro/trees.html">Trees</a>, and
<a href="../../intro/subtrees.html">SubTrees</a>.
<p class="boxread">
To customize user-resizing behavior, please read
<a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.
To customize user-rotating behavior, please read
<a href="../../intro/tools.html#RotatingTool">Introduction to the RotatingTool</a>.
<p>Only Nodes that are in Diagrams can have connections via Links.
Templates should not be connected with Links, be labels of Links, be members of Groups, or have any Adornments.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Node.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="Node.html#avoidable" class="tsd-kind-icon">avoidable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#avoidableMargin" class="tsd-kind-icon">avoidable<wbr>Margin</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Node.html#isLinkLabel" class="tsd-kind-icon">is<wbr>Link<wbr>Label</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#isTreeExpanded" class="tsd-kind-icon">is<wbr>Tree<wbr>Expanded</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#isTreeLeaf" class="tsd-kind-icon">is<wbr>Tree<wbr>Leaf</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#labeledLink" class="tsd-kind-icon">labeled<wbr>Link</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#linkConnected" class="tsd-kind-icon">link<wbr>Connected</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#linkDisconnected" class="tsd-kind-icon">link<wbr>Disconnected</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#linkValidation" class="tsd-kind-icon">link<wbr>Validation</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Node.html#linksConnected" class="tsd-kind-icon">links<wbr>Connected</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Node.html#port" class="tsd-kind-icon">port</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#portSpreading" class="tsd-kind-icon">port<wbr>Spreading</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Node.html#ports" class="tsd-kind-icon">ports</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#treeExpandedChanged" class="tsd-kind-icon">tree<wbr>Expanded<wbr>Changed</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Node.html#wasTreeExpanded" class="tsd-kind-icon">was<wbr>Tree<wbr>Expanded</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#collapseTree" class="tsd-kind-icon">collapse<wbr>Tree</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#expandTree" class="tsd-kind-icon">expand<wbr>Tree</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findCommonTreeParent" class="tsd-kind-icon">find<wbr>Common<wbr>Tree<wbr>Parent</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findLinksBetween" class="tsd-kind-icon">find<wbr>Links<wbr>Between</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findLinksConnected" class="tsd-kind-icon">find<wbr>Links<wbr>Connected</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findLinksInto" class="tsd-kind-icon">find<wbr>Links<wbr>Into</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findLinksOutOf" class="tsd-kind-icon">find<wbr>Links<wbr>Out<wbr>Of</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findLinksTo" class="tsd-kind-icon">find<wbr>Links<wbr>To</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findNodesConnected" class="tsd-kind-icon">find<wbr>Nodes<wbr>Connected</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findNodesInto" class="tsd-kind-icon">find<wbr>Nodes<wbr>Into</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findNodesOutOf" class="tsd-kind-icon">find<wbr>Nodes<wbr>Out<wbr>Of</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findPort" class="tsd-kind-icon">find<wbr>Port</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeChildrenLinks" class="tsd-kind-icon">find<wbr>Tree<wbr>Children<wbr>Links</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeChildrenNodes" class="tsd-kind-icon">find<wbr>Tree<wbr>Children<wbr>Nodes</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeLevel" class="tsd-kind-icon">find<wbr>Tree<wbr>Level</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeParentChain" class="tsd-kind-icon">find<wbr>Tree<wbr>Parent<wbr>Chain</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeParentLink" class="tsd-kind-icon">find<wbr>Tree<wbr>Parent<wbr>Link</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeParentNode" class="tsd-kind-icon">find<wbr>Tree<wbr>Parent<wbr>Node</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeParts" class="tsd-kind-icon">find<wbr>Tree<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#findTreeRoot" class="tsd-kind-icon">find<wbr>Tree<wbr>Root</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Node.html#isInTreeOf" class="tsd-kind-icon">is<wbr>InTree<wbr>Of</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constants</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Node.html#static-SpreadingEvenly" class="tsd-kind-icon">Spreading<wbr>Evenly</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Node.html#static-SpreadingNone" class="tsd-kind-icon">Spreading<wbr>None</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Node.html#static-SpreadingPacked" class="tsd-kind-icon">Spreading<wbr>Packed</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Node<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Node.html" class="tsd-signature-type">Node</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Constructs an empty Node.
The panel type must be one of the values permitted by <a href="Panel.html#type">Panel.type</a>.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> type: <a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a></h5>
<div class="tsd-comment tsd-typography">
<p>if not supplied, the default Panel type is <a href="Panel.html#static-Position">Panel.Position</a>.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Node.html" class="tsd-signature-type">Node</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="avoidable" class="tsd-anchor"></a>
<h3>
avoidable
<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>Gets or sets whether this Node is to be avoided by <a href="Link.html">Link</a>s
whose <a href="Link.html#routing">Link.routing</a> is <a href="Link.html#static-AvoidsNodes">Link.AvoidsNodes</a>.</p>
<p>The default value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="avoidableMargin" class="tsd-anchor"></a>
<h3>
avoidable<wbr>Margin
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the margin around this Node in which avoidable links will not be routed.</p>
<p>You may need to increase the <a href="GraphObject.html#fromEndSegmentLength">fromEndSegmentLength</a> and <a href="GraphObject.html#toEndSegmentLength">toEndSegmentLength</a> in
order to prevent link routes from turning within the avoidable area around the Node.</p>
<p>Value must be of type Margin.
The default margin is Margin(2,2,2,2)</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="isLinkLabel" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
is<wbr>Link<wbr>Label
<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 read-only property is true when this Node is a label node for a Link.</p>
<p>If this is true, then <code>n.labeledLink</code> will be a Link and <code>n.labeledLink.isLabeledLink</code> will be true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Node.html#labeledLink">labeledLink</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isTreeExpanded" class="tsd-anchor"></a>
<h3>
is<wbr>Tree<wbr>Expanded
<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>Gets or sets whether the subtree graph starting at this node is expanded.
Changing this property's value will call <a href="Node.html#collapseTree">collapseTree</a> or <a href="Node.html#expandTree">expandTree</a>,
and also will call the value of <a href="Node.html#treeExpandedChanged">treeExpandedChanged</a> if it is a function.</p>
<p>The initial value is true -- "tree-child" nodes, and the links to them, are shown.</p>
<p>There is an analogous property for expanded/collapsed <a href="Group.html">Group</a>s: <a href="Group.html#isSubGraphExpanded">Group.isSubGraphExpanded</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isTreeLeaf" class="tsd-anchor"></a>
<h3>
is<wbr>Tree<wbr>Leaf
<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>Gets whether this node has no tree children.</p>
<p>The initial value is true, meaning that there are no links connected with child nodes
in the direction given by <a href="Diagram.html#isTreePathToChildren">Diagram.isTreePathToChildren</a>.
This value changes automatically as link connections are added to or removed from this node.
Links for which <a href="Link.html#isTreeLink">Link.isTreeLink</a> is false are ignored.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="labeledLink" class="tsd-anchor"></a>
<h3>
labeled<wbr>Link
<span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a><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 <a href="Link.html">Link</a> for which this Node is acting as a smart label.
Most nodes do not act as link labels, so this property will be null.</p>
<p>A template should not be a label node for a link.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Node.html#isLinkLabel">isLinkLabel</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkConnected" class="tsd-anchor"></a>
<h3>
link<wbr>Connected
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisNode</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">newLink</span><span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">thisPort</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</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 function that is called after a <a href="Link.html">Link</a> has been connected with this Node.
It is typically used to modify the appearance of the node.
The first argument will be this Node.
The second argument will be a Link that is now connected with this node.
The third argument will be a GraphObject port indicating which port the link was connected with.</p>
<p>If the value is a function, that function must not modify what this Node is connected with.
The Link has already been added -- trying to remove it or another link may produce undefined behavior.
However, the other end of the link may not yet have been connected with a node (and might never be),
so you cannot depend on looking at what the link connects with.</p>
<p>The default value is null -- no function is called.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkDisconnected" class="tsd-anchor"></a>
<h3>
link<wbr>Disconnected
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisNode</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">oldLink</span><span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">thisPort</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</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 function that is called after a <a href="Link.html">Link</a> has been disconnected from this Node.
It is typically used to modify the appearance of the node.
The first argument will be this Node.
The second argument will be a Link that had been connected with this node.
The third argument will be a GraphObject port indicating which port the link had been connected with.</p>
<p>If the value is a function, that function must not modify what this Node is connected with.
The Link has already been removed -- trying to add it or another link may produce undefined behavior.
The other end of the link may not yet have been disconnected from a node (and might never be),
so you cannot depend on looking at what the link connects with.</p>
<p>The default value is null -- no function is called.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkValidation" class="tsd-anchor"></a>
<h3>
link<wbr>Validation
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">fromNode</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">fromPort</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">toNode</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">toPort</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">link</span><span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</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 a predicate that determines whether or not a Link may be connected with this node.
If this is non-null, the predicate is called in addition to the predicate that is <a href="LinkingBaseTool.html#linkValidation">LinkingBaseTool.linkValidation</a>
on the <a href="LinkingTool.html">LinkingTool</a> and <a href="RelinkingTool.html">RelinkingTool</a>.
See <a href="LinkingBaseTool.html#isValidLink">LinkingBaseTool.isValidLink</a> for more details.</p>
<p>The default predicate is null, which is equivalent to simply returning true.
The first argument will be the proposed "from" Node (may be null).
The second argument will be the proposed "from" GraphObject port (may be null).
The third argument will be the proposed "to" Node (may be null).
The fourth argument will be the proposed "to" GraphObject port (may be null).
The fifth argument may be null when asking about creating a new link,
or may be a Link when asking about reconnecting an existing link.</p>
<p>The function, if supplied, must not have any side-effects.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.3</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="linksConnected" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
links<wbr>Connected
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol"><</span><a href="Link.html" class="tsd-signature-type">Link</a><span class="tsd-signature-symbol">></span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator over all of the <a href="Link.html">Link</a>s that are connected with this node.
This includes both links that are coming out of this node as well as links that are going into this node.
Setting <a href="Link.html#fromNode">Link.fromNode</a> or <a href="Link.html#toNode">Link.toNode</a> to refer to this Node
will add that <a href="Link.html">Link</a> to this collection.</p>
<p>Use the <a href="Node.html#findLinksConnected">findLinksConnected</a>, <a href="Node.html#findLinksOutOf">findLinksOutOf</a>, or <a href="Node.html#findLinksInto">findLinksInto</a> methods
to get different subsets of the links, depending on direction or depending on connecting to a particular port.</p>
<p>A template should not have any links connected with it.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="port" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
port
<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the primary <a href="GraphObject.html">GraphObject</a> representing a port in this node.
If there is a GraphObject whose <a href="GraphObject.html#portId">GraphObject.portId</a> is the empty string, return it.
If there is no such element, just return this whole Node.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="portSpreading" class="tsd-anchor"></a>
<h3>
port<wbr>Spreading
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets how link points are computed when the port spot is a "side" spot.
The default value is <a href="Node.html#static-SpreadingEvenly">Node.SpreadingEvenly</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.5</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="ports" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
ports
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol"><</span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">></span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns an iterator over all of the <a href="GraphObject.html">GraphObject</a>s in this node that act as ports.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="treeExpandedChanged" class="tsd-anchor"></a>
<h3>
tree<wbr>Expanded<wbr>Changed
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisNode</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">void</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 function that is called when <a href="Node.html#isTreeExpanded">isTreeExpanded</a> has changed value.
The argument to that function will be this Node.</p>
<p>If the value is a function, that function must not expand or collapse any trees of nodes and links.
The Node has already been expanded or collapsed -- trying to change it again may produce undefined behavior.</p>
<p>The default value is null -- no function is called.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="wasTreeExpanded" class="tsd-anchor"></a>
<h3>
was<wbr>Tree<wbr>Expanded
<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>Gets or sets whether the subtree graph starting at this node
had been collapsed by a call to <a href="Node.html#expandTree">expandTree</a> on the parent node.
The initial value is false.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Node.html#isTreeExpanded">isTreeExpanded</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
<a name="collapseTree" class="tsd-anchor"></a>
<h3>
collapse<wbr>Tree
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">collapse<wbr>Tree<span class="tsd-signature-symbol">(</span>level<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</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=