gojs

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Link | 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>  <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> </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 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class Link</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">Link</span> <ul class="tsd-hierarchy"> <li> <a href="BalloonLink.html" class="tsd-signature-type">BalloonLink</a> </li> <li> <a href="DimensioningLink.html" class="tsd-signature-type">DimensioningLink</a> </li> <li> <a href="FishboneLink.html" class="tsd-signature-type">FishboneLink</a> </li> <li> <a href="ParallelRouteLink.html" class="tsd-signature-type">ParallelRouteLink</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 Link is a <a href="Part.html">Part</a> that connects <a href="Node.html">Node</a>s. The link relationship is directional, going from <a href="Link.html#fromNode">Link.fromNode</a> to <a href="Link.html#toNode">Link.toNode</a>. A link can connect to a specific port element in a node, as named by the <a href="Link.html#fromPortId">Link.fromPortId</a> and <a href="Link.html#toPortId">Link.toPortId</a> properties.</p> <p class="boxread"> For more discussion, see <a href="../../intro/links.html">Introduction to Links</a>. <p>To add a Link to a Diagram 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. This will cause a Link to be created (copying the template found in <a href="Diagram.html#linkTemplateMap">Diagram.linkTemplateMap</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 link data (resulting in <a href="Panel.html#data">Panel.data</a> referring to that link data object). Note that link data objects, unlike <a href="Node.html">Node</a> data, do not have their own unique keys or identifiers, because other Parts do not refer to them.</p> <p>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">Node.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">Node.findLinksTo</a> or <a href="Node.html#findLinksBetween">Node.findLinksBetween</a>. With the former method, the direction matters; with the latter method it returns links in either direction.</p> <p>A link's position and size are determined by the two nodes that it connects. Normally there should be a <a href="Shape.html">Shape</a> as the main element in this Link. This shape is what users will see as the "line" or "wire" -- you can set its <a href="Shape.html#stroke">Shape.stroke</a> and other "stroke..." properties to control its appearance.</p> <p>The link will compute a route (a sequence of points) going from the <a href="Link.html#fromNode">fromNode</a>'s port element to the <a href="Link.html#toNode">toNode</a>'s port element. That route is used to generate the path of the main shape. Properties that affect the nature of the route and the geometry of the path include:</p> <ul> <li><a href="Link.html#curve">curve</a></li> <li><a href="Link.html#curviness">curviness</a></li> <li><a href="Link.html#corner">corner</a></li> <li><a href="Link.html#routing">routing</a></li> <li><a href="Link.html#smoothness">smoothness</a></li> <li><a href="Link.html#adjusting">adjusting</a></li> </ul> <p class="boxread"> For more discussion and examples, see <a href="../../intro/links.html">Links</a>. <p>There are additional properties that affect how the end of the link connects to a port element of a node. There are duplicate properties, ones for the "to" end and ones for the "from" end:</p> <ul> <li><a href="Link.html#fromSpot">fromSpot</a>, <a href="Link.html#toSpot">toSpot</a></li> <li><a href="Link.html#fromEndSegmentLength">fromEndSegmentLength</a>, <a href="Link.html#toEndSegmentLength">toEndSegmentLength</a></li> <li><a href="Link.html#fromShortLength">fromShortLength</a>, <a href="Link.html#toShortLength">toShortLength</a></li> </ul> <p>These properties normally have "default" values, causing the link's routing and path-geometry generating to get the corresponding values from the connected port element. This scheme permits an individual link to have its own specific connection to a port, taking precedence over how the port normally expects links to connect to it. For example, several of the <a href="Layout.html">Layout</a> classes sets these properties on each Link as part of their route computation for links.</p> <p class="boxread"> For more discussion and examples, see <a href="../../intro/connectionPoints.html">Link Points</a>. <p>Elements other than the main <a href="Shape.html">Shape</a> in the Link may act as decorations on the link, including arrowheads and labels. You can control where they are located along the link route and how they are oriented. Because these decorations may be any <a href="GraphObject.html">GraphObject</a>, they are all properties of that class. The properties include:</p> <ul> <li><a href="GraphObject.html#segmentIndex">GraphObject.segmentIndex</a></li> <li><a href="GraphObject.html#segmentFraction">GraphObject.segmentFraction</a></li> <li><a href="GraphObject.html#segmentOffset">GraphObject.segmentOffset</a></li> <li><a href="GraphObject.html#segmentOrientation">GraphObject.segmentOrientation</a></li> </ul> <p>If you do not set the <a href="GraphObject.html#segmentIndex">GraphObject.segmentIndex</a> property, the object is positioned to be at the middle of the link.</p> <p class="boxread"> For more discussion and examples, see <a href="../../intro/linkLabels.html">Link Labels</a>. <p><strong>GoJS</strong> makes it easy to add arrowheads to your link template. Just add a <a href="Shape.html">Shape</a> with the appearance properties that you want, and also set the <a href="Shape.html#toArrow">Shape.toArrow</a> or <a href="Shape.html#fromArrow">Shape.fromArrow</a> property to the name of the kind of arrowhead that you want. Doing so automatically sets the "segment..." properties that are appropriate for the chosen arrowhead.</p> <p>More than one shape may automatically get the route geometry. This is useful when you want to have multiple link shapes with different thicknesses to create a gradient effect across the path of the link or to produce parallel lines along the path. Just set <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> to true on each such <a href="Shape.html">Shape</a>.</p> <p>If you want the user to be able to reconnect a link, using the <a href="RelinkingTool.html">RelinkingTool</a>, you need to set one or both of <a href="Link.html#relinkableFrom">relinkableFrom</a> and <a href="Link.html#relinkableTo">relinkableTo</a> to true. The <a href="RelinkingTool.html">RelinkingTool</a> shows a <a href="RelinkingTool.html#fromHandleArchetype">RelinkingTool.fromHandleArchetype</a> and/or a <a href="RelinkingTool.html#toHandleArchetype">RelinkingTool.toHandleArchetype</a> when the link is selected. Such a relink handle can be dragged by the user to start a relinking operation.</p> <p>If you want the user to be able to change the path of the link, using the <a href="LinkReshapingTool.html">LinkReshapingTool</a>, set <a href="Part.html#reshapable">Part.reshapable</a> to true. The <a href="LinkReshapingTool.html">LinkReshapingTool</a> shows reshape handles that the user can drag to shift the position of a point in the link's route. The <a href="LinkReshapingTool.html#handleArchetype">LinkReshapingTool.handleArchetype</a> is copied for each reshape handle.</p> <p>Often if a Link is reshapable, you will want to save the route in the model so that it can be restored upon load. To save the route automatically, add a TwoWay Binding on the <a href="Link.html#points">points</a> property: <code>new go.Binding("points").makeTwoWay()</code>. <a href="Model.html#toJson">Model.toJson</a> will automatically convert the <a href="List.html">List</a> of <a href="Point.html">Point</a>s into an Array of numbers in the JSON representation, if the property is named "points".</p> <p>If a Link is <a href="Part.html#reshapable">Part.reshapable</a>, it is also possible to allow the user to add and remove segments from the link's route by setting <a href="Link.html#resegmentable">resegmentable</a> to true. This causes the <a href="LinkReshapingTool.html">LinkReshapingTool</a> to add resegmenting handles at the midpoints of each segment. The <a href="LinkReshapingTool.html#midHandleArchetype">LinkReshapingTool.midHandleArchetype</a> is copied for each resegment handle. When the user drags such a resegmenting handle, a new segment is inserted into the route. Also, when the user drags a reshape handle such that two adjacent segments end up in a straight line, a segment is removed from the route.</p> <p class="boxread"> For more discussion and examples, see <a href="../../intro/links.html">Links</a>, <a href="../../intro/linkLabels.html">Link Labels</a>, and <a href="../../intro/connectionPoints.html">Link Points</a>. <p class="boxread"> To control what links a user may draw or reconnect, please read about <a href="../../intro/validation.html">Validation</a>. <p class="boxread"> To customize linking and relinking behavior, please read <a href="../../intro/tools.html#LinkingToolAndRelinkingTool">Introduction to the Linking Tools</a> and <a href="../../intro/tools.html#RelinkingTool">Introduction to the RelinkingTool</a>. For customizing the reshaping of Links, see <a href="../../intro/tools.html#LinkReshapingTool">Introduction to the LinkReshapingTool</a>. <p>Only Links that are in Diagrams can have connections with Nodes. Templates should not be connected with Nodes, 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="Link.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="Link.html#adjusting" class="tsd-kind-icon">adjusting</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#corner" class="tsd-kind-icon">corner</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#curve" class="tsd-kind-icon">curve</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#curviness" class="tsd-kind-icon">curviness</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromEndSegmentLength" class="tsd-kind-icon">from<wbr>End<wbr>Segment<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromNode" class="tsd-kind-icon">from<wbr>Node</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#fromPort" class="tsd-kind-icon">from<wbr>Port</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromPortChanged" class="tsd-kind-icon">from<wbr>Port<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromPortId" class="tsd-kind-icon">from<wbr>Port<wbr>Id</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromShortLength" class="tsd-kind-icon">from<wbr>Short<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#fromSpot" class="tsd-kind-icon">from<wbr>Spot</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#geometry" class="tsd-kind-icon">geometry</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#isLabeledLink" class="tsd-kind-icon">is<wbr>Labeled<wbr>Link</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#isOrthogonal" class="tsd-kind-icon">is<wbr>Orthogonal</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#isTreeLink" class="tsd-kind-icon">is<wbr>Tree<wbr>Link</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#key" class="tsd-kind-icon">key</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#labelNodes" class="tsd-kind-icon">label<wbr>Nodes</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#midAngle" class="tsd-kind-icon">mid<wbr>Angle</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#midPoint" class="tsd-kind-icon">mid<wbr>Point</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#path" class="tsd-kind-icon">path</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#points" class="tsd-kind-icon">points</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#pointsCount" class="tsd-kind-icon">points<wbr>Count</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#relinkableFrom" class="tsd-kind-icon">relinkable<wbr>From</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#relinkableTo" class="tsd-kind-icon">relinkable<wbr>To</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#resegmentable" class="tsd-kind-icon">resegmentable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#routing" class="tsd-kind-icon">routing</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#smoothness" class="tsd-kind-icon">smoothness</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toEndSegmentLength" class="tsd-kind-icon">to<wbr>End<wbr>Segment<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toNode" class="tsd-kind-icon">to<wbr>Node</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Link.html#toPort" class="tsd-kind-icon">to<wbr>Port</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toPortChanged" class="tsd-kind-icon">to<wbr>Port<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toPortId" class="tsd-kind-icon">to<wbr>Port<wbr>Id</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toShortLength" class="tsd-kind-icon">to<wbr>Short<wbr>Length</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Link.html#toSpot" class="tsd-kind-icon">to<wbr>Spot</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="Link.html#addPoint" class="tsd-kind-icon">add<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#canRelinkFrom" class="tsd-kind-icon">can<wbr>Relink<wbr>From</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#canRelinkTo" class="tsd-kind-icon">can<wbr>Relink<wbr>To</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#clearPoints" class="tsd-kind-icon">clear<wbr>Points</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeAdjusting" class="tsd-kind-icon">compute<wbr>Adjusting</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeCurve" class="tsd-kind-icon">compute<wbr>Curve</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeCurviness" class="tsd-kind-icon">compute<wbr>Curviness</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeEndSegmentLength" class="tsd-kind-icon">compute<wbr>End<wbr>Segment<wbr>Length</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeOtherPoint" class="tsd-kind-icon">compute<wbr>Other<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computePoints" class="tsd-kind-icon">compute<wbr>Points</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeSpacing" class="tsd-kind-icon">compute<wbr>Spacing</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeSpot" class="tsd-kind-icon">compute<wbr>Spot</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#computeThickness" class="tsd-kind-icon">compute<wbr>Thickness</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#findClosestSegment" class="tsd-kind-icon">find<wbr>Closest<wbr>Segment</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getLinkDirection" class="tsd-kind-icon">get<wbr>Link<wbr>Direction</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getLinkPoint" class="tsd-kind-icon">get<wbr>Link<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getLinkPointFromPoint" class="tsd-kind-icon">get<wbr>Link<wbr>Point<wbr>From<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getOtherNode" class="tsd-kind-icon">get<wbr>Other<wbr>Node</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getOtherPort" class="tsd-kind-icon">get<wbr>Other<wbr>Port</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#getPoint" class="tsd-kind-icon">get<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#hasCurviness" class="tsd-kind-icon">has<wbr>Curviness</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#insertPoint" class="tsd-kind-icon">insert<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#invalidateRoute" class="tsd-kind-icon">invalidate<wbr>Route</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#makeGeometry" class="tsd-kind-icon">make<wbr>Geometry</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#move" class="tsd-kind-icon">move</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#removePoint" class="tsd-kind-icon">remove<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#setPoint" class="tsd-kind-icon">set<wbr>Point</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Link.html#updateRoute" class="tsd-kind-icon">update<wbr>Route</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="Link.html#static-AvoidsNodes" class="tsd-kind-icon">Avoids<wbr>Nodes</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-Bezier" class="tsd-kind-icon">Bezier</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-End" class="tsd-kind-icon">End</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-JumpGap" class="tsd-kind-icon">Jump<wbr>Gap</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-JumpOver" class="tsd-kind-icon">Jump<wbr>Over</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-None" class="tsd-kind-icon">None</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-Normal" class="tsd-kind-icon">Normal</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientAlong" class="tsd-kind-icon">Orient<wbr>Along</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientMinus90" class="tsd-kind-icon">Orient<wbr>Minus90</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientMinus90Upright" class="tsd-kind-icon">Orient<wbr>Minus90<wbr>Upright</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientOpposite" class="tsd-kind-icon">Orient<wbr>Opposite</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientPlus90" class="tsd-kind-icon">Orient<wbr>Plus90</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientPlus90Upright" class="tsd-kind-icon">Orient<wbr>Plus90<wbr>Upright</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientUpright" class="tsd-kind-icon">Orient<wbr>Upright</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-OrientUpright45" class="tsd-kind-icon">Orient<wbr>Upright45</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-Orthogonal" class="tsd-kind-icon">Orthogonal</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-Scale" class="tsd-kind-icon">Scale</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Link.html#static-Stretch" class="tsd-kind-icon">Stretch</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>Link<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Link.html" class="tsd-signature-type">Link</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Constructs an empty link that does not connect any nodes. If you want the link to be seen, you must provide a <a href="Shape.html">Shape</a> as an element to be used as the visual path for the link.</p> </div> <h4 class="tsd-returns-title">Returns <a href="Link.html" class="tsd-signature-type">Link</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="adjusting" class="tsd-anchor"></a> <h3> adjusting <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 the route is computed, including whether it uses the points of its old route to determine the new route. The value must be one of <a href="Link.html#static-None">None</a>, <a href="Link.html#static-End">End</a>, <a href="Link.html#static-Scale">Scale</a>, or <a href="Link.html#static-Stretch">Stretch</a>.</p> <p>The default value is <a href="Link.html#static-None">None</a> -- the route is completely recalculated each time.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#computeAdjusting">computeAdjusting</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="corner" class="tsd-anchor"></a> <h3> corner <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets how rounded the corners are for adjacent line segments when the <a href="Link.html#curve">curve</a> is <a href="Link.html#static-None">None</a>, <a href="Link.html#static-JumpGap">JumpGap</a>, or <a href="Link.html#static-JumpOver">JumpOver</a> and the two line segments are orthogonal to each other.</p> <p>The default value is zero -- there is no curve at a corner.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="curve" class="tsd-anchor"></a> <h3> curve <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 the way the path is generated from the route's points. The value must be one of <a href="Link.html#static-None">None</a>, <a href="Link.html#static-Bezier">Bezier</a>, <a href="Link.html#static-JumpGap">JumpGap</a>, or <a href="Link.html#static-JumpOver">JumpOver</a>.</p> <p>Setting this property to <a href="Link.html#static-JumpOver">JumpOver</a> or <a href="Link.html#static-JumpGap">JumpGap</a> requires the Diagram to do considerable computation when calculating Link routes. Consider not using a Jump... value with Diagrams that contain large numbers of Links if you are targeting slow devices.</p> <p>The default value is <a href="Link.html#static-None">None</a> -- each link segment is a straight line.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#computeCurve">computeCurve</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="curviness" class="tsd-anchor"></a> <h3> curviness <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets how far the control points are offset when the <a href="Link.html#curve">curve</a> is <a href="Link.html#static-Bezier">Bezier</a> or when there are multiple links between the same two ports.</p> <p>The default value is NaN -- the actual curviness is computed based on how many links connect the same pair of ports.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#computeCurviness">computeCurviness</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="fromEndSegmentLength" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> from<wbr>End<wbr>Segment<wbr>Length <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the length of the first segment, when the computed "from spot" at the <a href="Link.html#fromPort">fromPort</a> is not <a href="Spot.html#static-None">Spot.None</a>. The default value is NaN, meaning that the value actually comes from the <a href="GraphObject.html#fromEndSegmentLength">GraphObject.fromEndSegmentLength</a> property of the <a href="Link.html#fromPort">fromPort</a>. This value also limits how short the <a href="Link.html#fromShortLength">fromShortLength</a> may be drawn.</p> <p>For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#toEndSegmentLength">toEndSegmentLength</a>, <a href="Link.html#computeEndSegmentLength">computeEndSegmentLength</a>, <a href="GraphObject.html#fromEndSegmentLength">GraphObject.fromEndSegmentLength</a>, <a href="Link.html#fromShortLength">fromShortLength</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="fromNode" class="tsd-anchor"></a> <h3> from<wbr>Node <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-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="Node.html">Node</a> that this link comes from. The <a href="Link.html#fromPortId">fromPortId</a> specifies which port the link comes from. The default value is null -- this link is not coming from any node.</p> <p>A template should not be connected with any node.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="fromPort" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> from<wbr>Port <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-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns a <a href="GraphObject.html">GraphObject</a> that is the "from" port that this link is connected from. The <a href="Link.html#fromNode">fromNode</a> provides the node that the link is coming from. The <a href="Link.html#fromPortId">fromPortId</a> provides the identifier for which port this link is coming from; you can set that property in order to change the value of this property. This method may return null.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="fromPortChanged" class="tsd-anchor"></a> <h3> from<wbr>Port<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">thisLink</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">oldPort</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">newPort</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 this Link changes which Node or port it connects from. The first argument will be this Link. The second argument will be the old GraphObject port. The third argument will be the new GraphObject port.</p> <p>If the value is a function, that function must not modify which nodes or links this link connects with. The "from" node and/or port has already been changed -- 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="fromPortId" class="tsd-anchor"></a> <h3> from<wbr>Port<wbr>Id <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the identifier of the port that this link comes from. The default value is the empty string.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="fromShortLength" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> from<wbr>Short<wbr>Length <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets how far the end segment stops short of the actual port. Positive values are limited by the <a href="Link.html#fromEndSegmentLength">fromEndSegmentLength</a> or <a href="GraphObject.html#fromEndSegmentLength">GraphObject.fromEndSegmentLength</a>. Negative values cause the link to extend into the port. The default value is NaN -- the value actually comes from the <a href="GraphObject.html#fromShortLength">GraphObject.fromShortLength</a> property of the <a href="Link.html#fromPort">fromPort</a>.</p> <p>For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>. If you want to move an arrowhead away from the start of the link route, set the arrowhead Shape's <a href="GraphObject.html#segmentOffset">GraphObject.segmentOffset</a>.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#toShortLength">toShortLength</a>, <a href="GraphObject.html#fromShortLength">GraphObject.fromShortLength</a>, <a href="Link.html#fromEndSegmentLength">fromEndSegmentLength</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="fromSpot" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> from<wbr>Spot <span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets where this link should connect at the <a href="Link.html#fromPort">fromPort</a>. The default value is <a href="Spot.html#static-Default">Spot.Default</a>, meaning that the value actually comes from the <a href="GraphObject.html#fromSpot">GraphObject.fromSpot</a> property of the <a href="Link.html#fromPort">fromPort</a>.</p> <p>This property is set by some layouts, if <a href="ForceDirectedLayout.html#setsPortSpots">ForceDirectedLayout.setsPortSpots</a> or <a href="LayeredDigraphLayout.html#setsPortSpots">LayeredDigraphLayout.setsPortSpots</a> or <a href="TreeLayout.html#setsPortSpot">TreeLayout.setsPortSpot</a> or <a href="TreeLayout.html#setsChildPortSpot">TreeLayout.setsChildPortSpot</a> is true.</p> <p>For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#toSpot">toSpot</a>, <a href="GraphObject.html#fromSpot">GraphObject.fromSpot</a>, <a href="Link.html#computeSpot">computeSpot</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="geometry" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> geometry <span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type">Geometry</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns the <a href="Geometry.html">Geometry</a> that is used by the <a href="Link.html#path">path</a>, the link <a href="Shape.html">Shape</a> based on the route points.</p> <p>This geometry is automatically generated using the route points and other properties such as the <a href="Link.html#curve">curve</a>. The points of the Geometry are in local coordinates, whereas the <a href="Link.html#points">points</a> of the link route are in document coordinates.</p> <p>More than one <a href="Shape.html">Shape</a> may share this geometry as its <a href="Shape.html#geometry">Shape.geometry</a>, if there is more than one shape element in the Link with <a href="GraphObject.html#isPanelMain">GraphObject.isPanelMain</a> set to true.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="isLabeledLink" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> is<wbr>Labeled<wbr>Link <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 Link has any label Nodes, <a href="Node.html">Node</a>s that are owned by this Link and are arranged along its path in the same manner as elements of the Link Panel.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Link.html#labelNodes">labelNodes</a></p> </dd> <dt>since</dt> <dd><p>1.1</p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="isOrthogonal" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> is<wbr>Orthogonal <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 if <a href="Link.html#routing">routing</a> is a value that implies that the points of the route should be orthogonal, such that each point shares a common X or a common Y value with the immediately previous and next points. This property is completely dependent on the <a href="Link.html#routing">routing</a> property. Values of <a href="Link.html#static-Orthogonal">Link.Orthogonal</a> and <a href="Link.html#static-AvoidsNodes">Link.AvoidsNodes</a> causes this property to be true.</p> <p>The points in the route might not actually form an orthogonal route, but when the route is computed the intent is to maintain orthogonality.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.2</p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="isTreeLink" class="tsd-anchor"></a> <h3> is<wbr>Tree<wbr>Link <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 Link is part of the tree for tree operations such as <a href="Node.html#findTreeChildrenNodes">Node.findTreeChildrenNodes</a> or <a href="Node.html#collapseTree">Node.collapseTree</a>.</p> <p>The initial value is true.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.2</p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="key" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> key <span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns the Links's Model data key if it is in a Diagram and is backed by Model data. Otherwise this returns undefined.</p> <p>If the link data is in a GraphLinksModel, the <a href="GraphLinksModel.html#linkKeyProperty">GraphLinksModel.linkKeyProperty</a> must not be an empty string.</p> <dl class="tsd-comment-tags"> <dt>since</dt> <dd><p>1.8</p> </dd> <dt>see</dt> <dd><p><a href="GraphLinksModel.html#getKeyForLinkData">GraphLinksModel.getKeyForLinkData</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="labelNodes" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> label<wbr>Nodes <span class="tsd-signature-sym