markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® Link 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" >  <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/highlight.css" type="text/css" media="all" /> </head> <body>  <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> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <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>   </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>  <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>  <h2 class="classTitle"> Class Link </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/Part.html" class="linkConstructor">Part</a>.</span> A Link is a <a href="../symbols/Part.html" class="linkConstructor">Part</a> that connects <a href="../symbols/Node.html" class="linkConstructor">Node</a>s. The link relationship is directional, going from <a href="../symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> to <a href="../symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>. A link can connect to a specific port element in a node, as named by the <a href="../symbols/Link.html#fromPortId" class="linkProperty">Link.fromPortId</a> and <a href="../symbols/Link.html#toPortId" class="linkProperty">Link.toPortId</a> properties. <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="../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. This will cause a Link to be created (copying the template found in <a href="../symbols/Diagram.html#linkTemplateMap" class="linkProperty">Diagram.linkTemplateMap</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 link data (resulting in <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that link data object). Note that link data objects, unlike <a href="../symbols/Node.html" class="linkConstructor">Node</a> data, do not have their own unique keys or identifiers, because other Parts do not refer to them. <p> 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">Node.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">Node.findLinksTo</a> or <a href="../symbols/Node.html#findLinksBetween" class="linkMethod">Node.findLinksBetween</a>. With the former method, the direction matters; with the latter method it returns links in either direction. <p> A link's position and size are determined by the two nodes that it connects. Normally there should be a <a href="../symbols/Shape.html" class="linkConstructor">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="../symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a> and other "stroke..." properties to control its appearance. <p> The link will compute a route (a sequence of points) going from the <a href="../symbols/Link.html#fromNode" class="linkProperty">fromNode</a>'s port element to the <a href="../symbols/Link.html#toNode" class="linkProperty">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: <ul> <li><a href="../symbols/Link.html#curve" class="linkProperty">curve</a></li> <li><a href="../symbols/Link.html#curviness" class="linkProperty">curviness</a></li> <li><a href="../symbols/Link.html#corner" class="linkProperty">corner</a></li> <li><a href="../symbols/Link.html#routing" class="linkProperty">routing</a></li> <li><a href="../symbols/Link.html#smoothness" class="linkProperty">smoothness</a></li> <li><a href="../symbols/Link.html#adjusting" class="linkProperty">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: <ul> <li><a href="../symbols/Link.html#fromSpot" class="linkProperty">fromSpot</a>, <a href="../symbols/Link.html#toSpot" class="linkProperty">toSpot</a></li> <li><a href="../symbols/Link.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a>, <a href="../symbols/Link.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a></li> <li><a href="../symbols/Link.html#fromShortLength" class="linkProperty">fromShortLength</a>, <a href="../symbols/Link.html#toShortLength" class="linkProperty">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="../symbols/Layout.html" class="linkConstructor">Layout</a> classes sets these properties on each Link as part of their route computation for links. <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="../symbols/Shape.html" class="linkConstructor">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="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, they are all properties of that class. The properties include: <ul> <li><a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a></li> <li><a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">GraphObject.segmentFraction</a></li> <li><a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">GraphObject.segmentOffset</a></li> <li><a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">GraphObject.segmentOrientation</a></li> </ul> If you do not set the <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a> property, the object is positioned to be at the middle of the link. <p class="boxread"> For more discussion and examples, see <a href="../../intro/linkLabels.html">Link Labels</a>. <p> <b>GoJS</b> makes it easy to add arrowheads to your link template. Just add a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> with the appearance properties that you want, and also set the <a href="../symbols/Shape.html#toArrow" class="linkProperty">Shape.toArrow</a> or <a href="../symbols/Shape.html#fromArrow" class="linkProperty">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> 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="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> to true on each such <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>. <p> If you want the user to be able to reconnect a link, using the <a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>, you need to set one or both of <a href="../symbols/Link.html#relinkableFrom" class="linkProperty">relinkableFrom</a> and <a href="../symbols/Link.html#relinkableTo" class="linkProperty">relinkableTo</a> to true. The <a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> shows a <a href="../symbols/RelinkingTool.html#fromHandleArchetype" class="linkProperty">RelinkingTool.fromHandleArchetype</a> and/or a <a href="../symbols/RelinkingTool.html#toHandleArchetype" class="linkProperty">RelinkingTool.toHandleArchetype</a> when the link is selected. Such a relink handle can be dragged by the user to start a relinking operation. <p> If you want the user to be able to change the path of the link, using the <a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a>, set <a href="../symbols/Part.html#reshapable" class="linkProperty">Part.reshapable</a> to true. The <a href="../symbols/LinkReshapingTool.html" class="linkConstructor">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="../symbols/LinkReshapingTool.html#handleArchetype" class="linkProperty">LinkReshapingTool.handleArchetype</a> is copied for each reshape handle. <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="../symbols/Link.html#points" class="linkProperty">points</a> property: <code>new go.Binding("points").makeTwoWay()</code>. <a href="../symbols/Model.html#toJson" class="linkMethod">Model.toJson</a> will automatically convert the <a href="../symbols/List.html" class="linkConstructor">List</a> of <a href="../symbols/Point.html" class="linkConstructor">Point</a>s into an Array of numbers in the JSON representation, if the property is named "points". <p> If a Link is <a href="../symbols/Part.html#reshapable" class="linkProperty">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="../symbols/Link.html#resegmentable" class="linkProperty">resegmentable</a> to true. This causes the <a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a> to add resegmenting handles at the midpoints of each segment. The <a href="../symbols/LinkReshapingTool.html#midHandleArchetype" class="linkProperty">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 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>  <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 Link."> <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"> Link() </div> </td> <td class="description"> <div class="description"> <p><p>Constructs an empty link that does not connect any nodes.<span class="nodetails" id="xconLink"><a class="morelink" onclick="hst('conLink')">More...</a></span> <span class="details" id="conLink"> If you want the link to be seen, you must provide a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> as an element to be used as the visual path for the link.</span> </div> </td> </tr> </tbody> </table> </div>  <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 Link."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="adjusting" > <td class="name"> <div class="name"> adjusting </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how the route is computed, including whether it uses the points of its old route to determine the new route.<span class="nodetails" id="xpropadjusting"><a class="morelink" onclick="hst('propadjusting')">More...</a></span> <span class="details" id="propadjusting"> The value must be one of <a href="../symbols/Link.html#None" class="linkConstant">None</a>, <a href="../symbols/Link.html#End" class="linkConstant">End</a>, <a href="../symbols/Link.html#Scale" class="linkConstant">Scale</a>, or <a href="../symbols/Link.html#Stretch" class="linkConstant">Stretch</a>. </span><div class="details" id="dpropadjusting"><p> The default value is <a href="../symbols/Link.html#None" class="linkConstant">None</a> -- the route is completely recalculated each time.</div> </div> </td> </tr> <tr id="corner" > <td class="name"> <div class="name"> corner </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how rounded the corners are for adjacent line segments when the <a href="../symbols/Link.html#curve" class="linkProperty">curve</a> is <a href="../symbols/Link.html#None" class="linkConstant">None</a>, <a href="../symbols/Link.html#JumpGap" class="linkConstant">JumpGap</a>, or <a href="../symbols/Link.html#JumpOver" class="linkConstant">JumpOver</a> and the two line segments are orthogonal to each other.<span class="nodetails" id="xpropcorner"><a class="morelink" onclick="hst('propcorner')">More...</a></span> <span class="details" id="propcorner"> </span><div class="details" id="dpropcorner"><p> The default value is zero -- there is no curve at a corner.</div> </div> </td> </tr> <tr id="curve" > <td class="name"> <div class="name"> curve </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the way the path is generated from the route's points.<span class="nodetails" id="xpropcurve"><a class="morelink" onclick="hst('propcurve')">More...</a></span> <span class="details" id="propcurve"> The value must be one of <a href="../symbols/Link.html#None" class="linkConstant">None</a>, <a href="../symbols/Link.html#Bezier" class="linkConstant">Bezier</a>, <a href="../symbols/Link.html#JumpGap" class="linkConstant">JumpGap</a>, or <a href="../symbols/Link.html#JumpOver" class="linkConstant">JumpOver</a>. </span><div class="details" id="dpropcurve"><p> Setting this property to <a href="../symbols/Link.html#JumpOver" class="linkConstant">JumpOver</a> or <a href="../symbols/Link.html#JumpGap" class="linkConstant">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> The default value is <a href="../symbols/Link.html#None" class="linkConstant">None</a> -- each link segment is a straight line.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Link.html#computeCurve" class="linkMethod">computeCurve</a></li> </ul> </div> </div> </td> </tr> <tr id="curviness" > <td class="name"> <div class="name"> curviness </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how far the control points are offset when the <a href="../symbols/Link.html#curve" class="linkProperty">curve</a> is <a href="../symbols/Link.html#Bezier" class="linkConstant">Bezier</a> or when there are multiple links between the same two ports.<span class="nodetails" id="xpropcurviness"><a class="morelink" onclick="hst('propcurviness')">More...</a></span> <span class="details" id="propcurviness"> </span><div class="details" id="dpropcurviness"><p> The default value is NaN -- the actual curviness is computed based on how many links connect the same pair of ports.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Link.html#computeCurviness" class="linkMethod">computeCurviness</a></li> </ul> </div> </div> </td> </tr> <tr id="fromEndSegmentLength" > <td class="name"> <div class="name"> fromEndSegmentLength </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the length of the first segment, when the computed "from spot" at the <a href="../symbols/Link.html#fromPort" class="linkProperty">fromPort</a> is not <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>.<span class="nodetails" id="xpropfromEndSegmentLength"><a class="morelink" onclick="hst('propfromEndSegmentLength')">More...</a></span> <span class="details" id="propfromEndSegmentLength"> The default value is NaN, meaning that the value actually comes from the <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">GraphObject.fromEndSegmentLength</a> property of the <a href="../symbols/Link.html#fromPort" class="linkProperty">fromPort</a>. This value also limits how short the <a href="../symbols/Link.html#fromShortLength" class="linkProperty">fromShortLength</a> may be drawn. </span><div class="details" id="dpropfromEndSegmentLength"><p> For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Link.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a></li> <li><a href="../symbols/Link.html#computeEndSegmentLength" class="linkMethod">computeEndSegmentLength</a></li> <li><a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">GraphObject.fromEndSegmentLength</a></li> <li><a href="../symbols/Link.html#fromShortLength" class="linkProperty">fromShortLength</a></li> </ul> </div> </div> </td> </tr> <tr id="fromNode" > <td class="name"> <div class="name"> fromNode </div> <div class="attributes"> <span class="light">{<a href="../symbols/Node.html" class="linkConstructor">Node</a>}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the <a href="../symbols/Node.html" class="linkConstructor">Node</a> that this link comes from.<span class="nodetails" id="xpropfromNode"><a class="morelink" onclick="hst('propfromNode')">More...</a></span> <span class="details" id="propfromNode"> The <a href="../symbols/Link.html#fromPortId" class="linkProperty">fromPortId</a> specifies which port the link comes from. The default value is null -- this link is not coming from any node. </span><div class="details" id="dpropfromNode"><p> A template should not be connected with any node.</div> </div> </td> </tr> <tr id="fromPort" > <td class="name"> <div class="name"> fromPort </div> <div class="attributes"> <span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property returns a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that is the "from" port that this link is connected from.<span class="nodetails" id="xpropfromPort"><a class="morelink" onclick="hst('propfromPort')">More...</a></span> <span class="details" id="propfromPort"> The <a href="../symbols/Link.html#fromNode" class="linkProperty">fromNode</a> provides the node that the link is coming from. The <a href="../symbols/Link.html#fromPortId" class="linkProperty">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.</span> </div> </td> </tr> <tr id="fromPortChanged" > <td class="name"> <div class="name"> fromPortChanged </div> <div class="attributes"> <span class="light">{function(Link, GraphObject, GraphObject) | null}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the function that is called after this Link changes which Node or port it connects from.<span class="nodetails" id="xpropfromPortChanged"><a class="morelink" onclick="hst('propfromPortChanged')">More...</a></span> <span class="details" id="propfromPortChanged"> 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. </span><div class="details" id="dpropfromPortChanged"><p> If the value is a function, that function must not modify which nodes or links this link connects with. The "f