markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,365 lines (400 loc) • 153 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® Node Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/fuse.min.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- 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">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="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<div class="searchsumm">
<div class="table-wrap">
<div class="table-cell" id="apisearch" data-base="../">
<div class="title">Search API</div>
<div class="field">
<label for="search-field" class="search-icon"></label>
<input id="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>
</div>
<div class="table-cell" id="apisumm">
<input type="checkbox" id="showsumms" />
<label class="apisumms" for="showsumms">Show Summaries</label>
</div>
</div>
</div>
<!-- ============================== header ================================= -->
<div id="header" class="fineprint">
<b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class Node
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/Part.html" class="linkConstructor">Part</a>.</span>
A Node is a <a href="../symbols/Part.html" class="linkConstructor">Part</a> that may connect to other nodes with <a href="../symbols/Link.html" class="linkConstructor">Link</a>s,
or that may be a member of a <a href="../symbols/Group.html" class="linkConstructor">Group</a>.
<p>
<a href="../symbols/Group.html" class="linkConstructor">Group</a> inherits from Node,
enabling nodes to logically contain other nodes and links.
<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="../symbols/Diagram.html#add" class="linkMethod">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="../symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>. For example:
<pre>
myDiagram.startTransaction("make new node");
myDiagram.model.addNodeData({ key: "Omega" });
myDiagram.commitTransaction("make new node");
</pre>
<p>
This will cause a Node or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a> to be created (copying the template found in <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>),
added to the Diagram in some <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="../symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the node data
(resulting in <a href="../symbols/Panel.html#data" class="linkProperty">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="../symbols/Model.html#findNodeDataForKey" class="linkMethod">Model.findNodeDataForKey</a>.
<p>
It is very common to initialize a Diagram by setting <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">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>
You can delete a Node by either calling <a href="../symbols/Diagram.html#remove" class="linkMethod">Diagram.remove</a> or by calling <a href="../symbols/Model.html#removeNodeData" class="linkMethod">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="../symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> call these methods within a transaction.
<p>
You can find all of the <a href="../symbols/Link.html" class="linkConstructor">Link</a>s that are connected with a Node by calling <a href="../symbols/Node.html#findLinksConnected" class="linkMethod">findLinksConnected</a>.
Because links normally have a direction, you can find all of the links that have their <a href="../symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>
be a given Node by calling <a href="../symbols/Node.html#findLinksInto" class="linkMethod">findLinksInto</a>.
Similarly, you can call <a href="../symbols/Node.html#findLinksOutOf" class="linkMethod">findLinksOutOf</a> to find all of the links coming out from a node;
such links have their <a href="../symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> be that node.
For tree-structured graphs, use <a href="../symbols/Node.html#findTreeChildrenLinks" class="linkMethod">findTreeChildrenLinks</a> or <a href="../symbols/Node.html#findTreeParentLink" class="linkMethod">findTreeParentLink</a>.
<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="../symbols/Node.html#findNodesConnected" class="linkMethod">findNodesConnected</a> returns all of the nodes that are at the other end of the links that
connect with a given node.
<a href="../symbols/Node.html#findNodesInto" class="linkMethod">findNodesInto</a> and <a href="../symbols/Node.html#findNodesOutOf" class="linkMethod">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="../symbols/Node.html#findTreeChildrenNodes" class="linkMethod">findTreeChildrenNodes</a> or <a href="../symbols/Node.html#findTreeParentNode" class="linkMethod">findTreeParentNode</a>.
<p>
For example, to operate on the data of all of the destination nodes:
<pre>
var it = somenode.findNodesOutOf();
while (it.next()) {
var child = it.value;
if (child.data.text.indexOf("special") >= 0) { ... }
}
</pre>
<p>
You can link two nodes by creating a new <a href="../symbols/Link.html" class="linkConstructor">Link</a>, setting its <a href="../symbols/Link.html#toNode" class="linkProperty">Link.toNode</a> and <a href="../symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a>
(in either order), and <a href="../symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>ing it to the diagram.
But it is more common to add a link data object to the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> by calling <a href="../symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>.
Just creating and adding a <a href="../symbols/Link.html" class="linkConstructor">Link</a> will not update the model.
<p>
Thus to add a link when using a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> you should do something like:
<pre>
myDiagram.startTransaction("make new link");
myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
myDiagram.commitTransaction("make new link");
</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="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, there are no link data objects, so you just need to call
<a href="../symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.
<p>
To find a <a href="../symbols/Link.html" class="linkConstructor">Link</a> given a link data object in the <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>,
call <a href="../symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>. When using a <a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, call either <a href="../symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>
or <a href="../symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> to get a Node, and then call <a href="../symbols/Node.html#findTreeParentLink" class="linkMethod">findTreeParentLink</a> to get the Link, if any exists.
<p>
To find a link that connects two nodes, call <a href="../symbols/Node.html#findLinksTo" class="linkMethod">findLinksTo</a> or <a href="../symbols/Node.html#findLinksBetween" class="linkMethod">findLinksBetween</a>.
With the former method, the direction matters; with the latter method it returns links in either direction.
<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="../symbols/Node.html#linkConnected" class="linkProperty">linkConnected</a> and <a href="../symbols/Node.html#linkDisconnected" class="linkProperty">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>
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="../symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
You can override that predicate on <a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a> and <a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>,
but it is easier to set the <a href="../symbols/Node.html#linkValidation" class="linkProperty">linkValidation</a> or
<a href="../symbols/LinkingBaseTool.html#linkValidation" class="linkProperty">LinkingBaseTool.linkValidation</a> functional property.
<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="../symbols/Node.html" class="linkConstructor">Node</a>.
However, you can set the <a href="../symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> property on any <a href="../symbols/GraphObject.html" class="linkConstructor">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>
In the case of a node only having a single port, you should set the <a href="../symbols/GraphObject.html#portId" class="linkProperty">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="../symbols/Node.html#port" class="linkProperty">port</a> property to get the only port element.
<p>
When a node should have multiple ports,
i.e. multiple <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s acting as separate connection points for links,
you should set each port's <a href="../symbols/GraphObject.html#portId" class="linkProperty">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="../symbols/Node.html#ports" class="linkProperty">ports</a> property.
Use the <a href="../symbols/Node.html#findPort" class="linkMethod">findPort</a> method to find a particular port element by name.
<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="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="../symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and
<a href="../symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.
<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>
You can also control the default connecting behavior of <a href="../symbols/Link.html" class="linkConstructor">Link</a>s at each port.
Because a port can be any <a href="../symbols/GraphObject.html" class="linkConstructor">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:
<ul>
<li><a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a>, <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a></li>
<li><a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">GraphObject.fromEndSegmentLength</a>, <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">GraphObject.toEndSegmentLength</a></li>
<li><a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">GraphObject.fromShortLength</a>, <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">GraphObject.toShortLength</a></li>
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">GraphObject.fromLinkable</a>, <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">GraphObject.toLinkable</a></li>
<li><a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">GraphObject.fromLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">GraphObject.toLinkableDuplicates</a></li>
<li><a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">GraphObject.fromLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">GraphObject.toLinkableSelfNode</a></li>
<li><a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">GraphObject.fromMaxLinks</a>, <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">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="../symbols/Link.html" class="linkConstructor">Link</a>, to override for a particular
link the default values that come from a port element.)
<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:
<ul>
<li><a href="../symbols/Node.html#findTreeParentNode" class="linkMethod">findTreeParentNode</a></li>
<li><a href="../symbols/Node.html#findTreeChildrenNodes" class="linkMethod">findTreeChildrenNodes</a></li>
<li><a href="../symbols/Node.html#findTreeParentLink" class="linkMethod">findTreeParentLink</a></li>
<li><a href="../symbols/Node.html#findTreeChildrenLinks" class="linkMethod">findTreeChildrenLinks</a></li>
<li><a href="../symbols/Node.html#findTreeRoot" class="linkMethod">findTreeRoot</a></li>
<li><a href="../symbols/Node.html#findTreeParentChain" class="linkMethod">findTreeParentChain</a></li>
<li><a href="../symbols/Node.html#findTreeParts" class="linkMethod">findTreeParts</a></li>
<li><a href="../symbols/Node.html#findCommonTreeParent" class="linkMethod">findCommonTreeParent</a></li>
<li><a href="../symbols/Node.html#isInTreeOf" class="linkMethod">isInTreeOf</a></li>
<li><a href="../symbols/Node.html#findTreeLevel" class="linkMethod">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="../symbols/Diagram.html#isTreePathToChildren" class="linkProperty">Diagram.isTreePathToChildren</a> property.
However an individual link will be ignored by the above functions if <a href="../symbols/Link.html#isTreeLink" class="linkProperty">Link.isTreeLink</a> is false.
<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="../symbols/Node.html#isTreeExpanded" class="linkProperty">Node.isTreeExpanded</a>.
Of course if the diagram's graph is not tree-structured, these concepts and properties might not apply.
<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="../symbols/Node.html#treeExpandedChanged" class="linkProperty">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>
There is an option for link routing to try to avoid crossing over nodes:
<a href="../symbols/Link.html#routing" class="linkProperty">Link.routing</a> = <a href="../symbols/Link.html#AvoidsNodes" class="linkConstant">Link.AvoidsNodes</a>.
You can control whether such links should avoid or ignore a node by setting <a href="../symbols/Node.html#avoidable" class="linkProperty">avoidable</a>.
Set <a href="../symbols/Node.html#avoidableMargin" class="linkProperty">avoidableMargin</a> to control the area beyond the <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>
where AvoidsNodes links should not go.
<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>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Node.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
Node(type)
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Constructs an empty Node.<span class="nodetails" id="xconNode"><a class="morelink" onclick="hst('conNode')">More...</a></span> <span class="details" id="conNode">
The panel type must be one of the values permitted by <a href="../symbols/Panel.html#type" class="linkProperty">Panel.type</a>.</span>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{EnumValue=}</span> <b>type</b>
</dt>
<dd>if not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Node.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="avoidable" >
<td class="name">
<div class="name">
avoidable
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether this Node is to be avoided by <a href="../symbols/Link.html" class="linkConstructor">Link</a>s
whose <a href="../symbols/Link.html#routing" class="linkProperty">Link.routing</a> is <a href="../symbols/Link.html#AvoidsNodes" class="linkConstant">Link.AvoidsNodes</a>.<span class="nodetails" id="xpropavoidable"><a class="morelink" onclick="hst('propavoidable')">More...</a></span> <span class="details" id="propavoidable">
</span><div class="details" id="dpropavoidable"><p>
The default value is true.</div>
</div>
</td>
</tr>
<tr id="avoidableMargin" >
<td class="name">
<div class="name">
avoidableMargin
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Margin.html" class="linkConstructor">Margin</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the margin around this Node in which avoidable links will not be routed.<span class="nodetails" id="xpropavoidableMargin"><a class="morelink" onclick="hst('propavoidableMargin')">More...</a></span> <span class="details" id="propavoidableMargin">
</span><div class="details" id="dpropavoidableMargin"><p>
You may need to increase the <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a> and <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a> in
order to prevent link routes from turning within the avoidable area around the Node.
<p>
Value must be of type Margin.
The default margin is Margin(2,2,2,2)</div>
</div>
</td>
</tr>
<tr id="isLinkLabel" >
<td class="name">
<div class="name">
isLinkLabel
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property is true when this Node is a label node for a Link.<span class="nodetails" id="xpropisLinkLabel"><a class="morelink" onclick="hst('propisLinkLabel')">More...</a></span> <span class="details" id="propisLinkLabel">
</span><div class="details" id="dpropisLinkLabel"><p>
If this is true, then <code>n.labeledLink</code> will be a Link and <code>n.labeledLink.isLabeledLink</code> will be true.</div>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/Node.html#labeledLink" class="linkProperty">labeledLink</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="isTreeExpanded" >
<td class="name">
<div class="name">
isTreeExpanded
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the subtree graph starting at this node is expanded.<span class="nodetails" id="xpropisTreeExpanded"><a class="morelink" onclick="hst('propisTreeExpanded')">More...</a></span> <span class="details" id="propisTreeExpanded">
Changing this property's value will call <a href="../symbols/Node.html#collapseTree" class="linkMethod">collapseTree</a> or <a href="../symbols/Node.html#expandTree" class="linkMethod">expandTree</a>,
and also will call the value of <a href="../symbols/Node.html#treeExpandedChanged" class="linkProperty">treeExpandedChanged</a> if it is a function.
</span><div class="details" id="dpropisTreeExpanded"><p>
The initial value is true -- "tree-child" nodes, and the links to them, are shown.
<p>
There is an analogous property for expanded/collapsed <a href="../symbols/Group.html" class="linkConstructor">Group</a>s: <a href="../symbols/Group.html#isSubGraphExpanded" class="linkProperty">Group.isSubGraphExpanded</a>.</div>
</div>
</td>
</tr>
<tr id="isTreeLeaf" >
<td class="name">
<div class="name">
isTreeLeaf
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets whether this node has no tree children.<span class="nodetails" id="xpropisTreeLeaf"><a class="morelink" onclick="hs