UNPKG

gojs/intro/links.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Links -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Links</h1>
137<p>
Use the <a>Link</a> class to implement a visual relationship between nodes.
139</p>
140<p>
See samples that make use of customized Links in the <a href="../samples/index.html#links">samples index</a>.
142</p>
143
144<h2 id="CreatingLinks">Creating Links</h2>
145<p>
Links are normally created by the presence of link data objects in the <a>GraphLinksModel.linkDataArray</a>
or by a parent key reference as the value of the <a>TreeModel.nodeParentKeyProperty</a> of a node data object
in a <a>TreeModel</a>.
Users can draw new links by using the <a>LinkingTool</a>: Introduction to the <a href="tools.html#LinkingToolAndRelinkingTool">Linking Tools</a>.
150</p>
151<p>
You can create new links programmatically by modifying the model.
It is most common to operate directly on the model by either calling <a>GraphLinksModel.addLinkData</a>
or by calling <a>TreeModel.setParentKeyForNodeData</a>.
Such changes are observed by all diagrams that are displaying the model so that they can automatically
create the corresponding <a>Link</a>s.
You can find examples of calls to <a>GraphLinksModel.addLinkData</a> in the samples.
158</p>
159<p>
It is also possible to create new links without detailed knowledge of the diagram's model by calling
<a>LinkingTool.insertLink</a>.  That is how the user's actions to draw a new link actually create it.
That method knows how to modify the <a>GraphLinksModel</a> or the <a>TreeModel</a> appropriately,
while respecting the additional functionality offered by the <a>LinkingTool.archetypeLinkData</a>
and other properties of the <a>LinkingTool</a>.
You can find examples of calls to <a>LinkingTool.insertLink</a> in the samples.
166</p>
167
168<h2 id="NondirectionalLinks">Non-directional Links</h2>
169<p>
The simplest links are those without arrowheads to indicate a visual direction.
Either the relationship really is non-directional, or the direction is implicit in the organization of the diagram.
172</p>
173<p>
The template contains a <a>Shape</a> as the main element, as the line that is drawn between nodes.
After the link's route is computed the main Shape will get a <a>Geometry</a> based on the points in the route.
176</p>
177<pre class="lang-js" id="noArrowheads"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
185
diagram.linkTemplate =
  $(go.Link,       // the whole link panel
    $(go.Shape)  // the link shape, default black stroke
  );
190
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
199</code></pre>
200<script>goCode("noArrowheads", 600, 100)</script>
201<p>
By default the way that the model and diagram know about the node data references of a link data is
by looking at its from and to properties.
If you want to use a different properties on the link data, set <a>GraphLinksModel.linkFromKeyProperty</a> to be the name
of the property that results in the node data's key, and similarly for the <a>GraphLinksModel.linkToKeyProperty</a>.
206</p>
207
208<h2 id="Arrowheads">Arrowheads</h2>
209<p>
Many links do want to indicate directionality by using arrowheads.
<b>GoJS</b> makes it easy to create common arrowheads: just add a Shape and set its <a>Shape.toArrow</a> property.
Setting that property will automatically assign a <a>Geometry</a> to the <a>Shape.geometry</a>
and will set other properties so that the arrowhead is positioned at the head of the link and is pointing in the correct direction.
Of course you can set the other Shape properties such as <a>Shape.fill</a> in order to customize the appearance of the arrowhead.
215</p>
216<pre class="lang-js" id="arrowheads"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
224
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),  // the link shape
    $(go.Shape,   // the arrowhead
      { toArrow: "OpenTriangle", fill: null })
  );
231
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
240</code></pre>
241<script>goCode("arrowheads", 600, 100)</script>
242<p>
You can see all of the predefined arrowhead types in the <a href="../samples/arrowheads.html" target="samples">Arrowheads Sample</a>.
244</p>
245<p>
You can also have an arrowhead at the start of the link: set the <a>Shape.fromArrow</a> property.
Note that an arrowhead normally goes along the path of the link regardless of its position on the path,
so just as with a real arrow, setting <code>{ fromArrow: "TripleFeathers" }</code> has the "feathers" pointing forward.
If the link is meant to be bi-directional, the arrowhead name for the "from" end of a link
will probably want to start with the string "Backward...".
251</p>
252
253<h2 id="Routing">Routing</h2>
254<p>
If you want to customize the path that each <a>Link</a> takes, you need to set properties on the link.
The property that has the most general effect on the points that the link's route follows is <a>Link.routing</a>.
257</p>
258<p>
This example shows the two most common routing values: <a>Link,Normal</a> (the default) and <a>Link,Orthogonal</a>.
260</p>
261<pre class="lang-js" id="routing"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
269
diagram.linkTemplate =
  $(go.Link,
    new go.Binding("routing", "routing"),
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
276
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "50 50" },
  { key: "Gamma", loc: "100 25" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta", routing: go.Link.Normal },
  { from: "Alpha", to: "Gamma", routing: go.Link.Orthogonal }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
287</code></pre>
288<script>goCode("routing", 600, 100)</script>
289
290<p>
Note that the computed route also depends on the properties of the node, including its shape.
There are other properties, including <a>GraphObject.fromSpot</a> and <a>GraphObject.toSpot</a>, that affect the route.
For more discussion about spots, please read this Introduction page: <a href="connectionPoints.html">Link Connection Points</a>.
Furthermore some <a>Layout</a>s set properties on links to control their routing according to what the layout expects.
295</p>
296
297<p>
You can also set <a>Link.routing</a> to <a>Link,AvoidsNodes</a>:
299</p>
300<pre class="lang-js" id="avoidsNodes"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
308
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.AvoidsNodes },  // link route should avoid nodes
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
315
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "250 40" },
  { key: "Gamma", loc: "100 0" },
  { key: "Delta", loc: "75 50" },
  { key: "Epsilon", loc: "150 30" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
327</code></pre>
328<script>goCode("avoidsNodes", 600, 100)</script>
329<p>
If you move the nodes interactively, you can see how the link's route adjusts to avoid crossing over nodes.
Notice that a small gap between nodes might not be considered wide enough for links to go through.
332</p>
333<p>
If a node is very close to or overlaps with either the link's <a>Link.fromNode</a> or <a>Link.toNode</a>
and would block the link's route, it ignores that node, treating it as if it were just an extension of the connected node.
Also if no node-avoiding route exists because there is a ring of nodes around one of the connected nodes,
the routing algorithm will give up and cross over some nodes anyway.
338</p>
339<p>
You can declare that it is OK to route through a node by setting <a>Node.avoidable</a> to false.
This is commonly done for <a>Group</a>s to allow links connecting outside of the group to route nicely within the group.
342</p>
343<p>
Note the the use of AvoidsNodes routing is distinctly slower than normal Orthogonal routing, especially for large diagrams.
345</p>
346
347<h3 id="EndSegmentLengths">End Segment Lengths</h3>
348<p>
Another way to affect the precise route that Orthogonal and AvoidsNodes routing take is to set or bind
<a>GraphObject.fromEndSegmentLength</a> and <a>GraphObject.toEndSegmentLength</a>.
These properties determine the length of the very first segment or the very last segment, but only for orthogonally routed links.
Those properties can be set either on the port element of the node or on the link.
On the link the property value takes precedence over the corresponding property's value at the port.
354</p>
355<pre data-language="javascript" id="endseg">
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
363
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, fromSpot: go.Spot.Left, toSpot: go.Spot.Right },
    new go.Binding("fromEndSegmentLength"),
    new go.Binding("toEndSegmentLength"),
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
372
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" },
  { key: "Gamma", loc: "0 100" },
  { key: "Delta", loc: "100 150" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" },
  { from: "Gamma", to: "Delta", fromEndSegmentLength: 4, toEndSegmentLength: 30 },
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
384</code></pre>
385<script>goCode("endseg", 600, 200)</script>
386<p>
In this example the values of the <a>Link.fromEndSegmentLength</a> and <a>Link.toEndSegmentLength</a> are bound
to the same named properties on the link data.
In both cases the link's route is force to come out of the left side of the source node and to the right side of the destination node.
In the case from "Alpha" to "Beta", you see the default behavior.
In the case from "Gamma" to "Delta", you see the results of a shorter-than-normal <code>fromEndSegmentLength</code>
and a longer-than-normal <code>toEndSegmentLength</code>.
393</p>
394
395<h2 id="CurveCurvinessCorner">Curve, Curviness, Corner</h2>
396<p>
Once the <a>Link.routing</a> determines the route (i.e., the sequence of points) that the link takes,
other properties control the details of how the link shape gets its path geometry.
The first such property is <a>Link.curve</a>, which controls whether the link shape has basically straight segments
or is a big curve.
401</p>
402<p>
The default value for <a>Link.curve</a> is <a>Link,None</a>, which produces link shapes with straight segments
as you see above.
405</p>
406<p>
A value of <a>Link,Bezier</a> produces a naturally curved path for the link shape.
408</p>
409
410<pre class="lang-js" id="bezier"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
418
diagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },  // Bezier curve
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
425
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
434</code></pre>
435<script>goCode("bezier", 600, 100)</script>
436<p>
You can control how curved it is by setting the <a>Link.curviness</a> property.
The default produces a slight curve.
439</p>
440
441<p>
If there are multiple links, it will automatically compute reasonable values for the curviness of each link,
unless you assign <a>Link.curviness</a> explicitly.
444</p>
445<pre class="lang-js" id="beziers"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
453
diagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
460
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" },  // multiple links between the same nodes
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
472</code></pre>
473<script>goCode("beziers", 600, 100)</script>
474
475<p>
Another kind of curviness comes from rounded corners when the <a>Link.routing</a> is Orthogonal or AvoidsNodes.
477</p>
478<pre class="lang-js" id="corners"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
486
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.AvoidsNodes,
      corner: 10 },                  // rounded corners
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
494
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "250 40" },
  { key: "Gamma", loc: "100 0" },
  { key: "Delta", loc: "75 50" },
  { key: "Epsilon", loc: "150 30" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
506</code></pre>
507<script>goCode("corners", 600, 100)</script>
508
509<p>
Another kind of curviness comes from setting <a>Link.curve</a> to <a>Link,JumpOver</a>.
This causes little "hops" in the path of an orthogonal link that crosses another orthogonal link
that also has a JumpOver curve.
513</p>
514<pre class="lang-js" id="jumpOvers"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
523
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal,  // may be either Orthogonal or AvoidsNodes
      curve: go.Link.JumpOver },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
531
var nodeDataArray = [
  { key: "Alpha", loc: "0 50" },
  { key: "Beta", loc: "100 50" },
  { key: "Alpha2", loc: "50 0" },
  { key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" },  // these two links will cross
  { from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
543</code></pre>
544<script>goCode("jumpOvers", 600, 150)</script>
545
546<p>
Note that the use of link jumping is distinctly slower than normal links because all of the crossing
points must be computed and the geometry of the link shape will be more complex.
549</p>
550
551<p>
Another kind of curviness (or actually lack of it) comes from setting <a>Link.curve</a> to <a>Link,JumpGap</a>.
This causes little "gaps" in the path of an orthogonal link that crosses another orthogonal link
that also has a JumpGap curve.
555</p>
556<pre class="lang-js" id="jumpGaps"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
565
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal,  // may be either Orthogonal or AvoidsNodes
      curve: go.Link.JumpGap },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
573
var nodeDataArray = [
  { key: "Alpha", loc: "0 50" },
  { key: "Beta", loc: "100 50" },
  { key: "Alpha2", loc: "50 0" },
  { key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" },  // these two links will cross
  { from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
585</code></pre>
586<script>goCode("jumpGaps", 600, 150)</script>
587
588<h2 id="EasierClickingOnLinks">Easier Clicking on Links</h2>
589<p>
A problem that users may notice, especially when using fingers but also with the mouse,
is that it can be difficult to click on links that have a thin <a>Link.path</a>.
One could set the <a>Shape.strokeWidth</a> to a larger value, such as 8, but you may not want that appearance.
593</p>
594<pre class="lang-js" id="thickPath"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
602
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { strokeWidth: 8 }),  // thick path
    $(go.Shape, { toArrow: "Standard" })
  );
608
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
617</code></pre>
618<script>goCode("thickPath", 600, 100)</script>
619
620<p>
The solution is to add a thick path Shape but not have it draw anything.
This is easily done by setting <code>{ stroke: "transparent", strokeWidth: 8 }</code>.
However if you want to keep the original path Shape, <em>both</em> Shapes need to be declared as the "main" element
for the Link by setting <a>GraphObject.isPanelMain</a> to true.
The Link panel knows that all such Shapes should get the same computed Geometry for the link path.
626</p>
627<pre class="lang-js" id="doublePath"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
635
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }),  // thick undrawn path
    $(go.Shape, { isPanelMain: true }),  // default stroke === "black", strokeWidth === 1
    $(go.Shape, { toArrow: "Standard" })
  );
642
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
651</code></pre>
652<script>goCode("doublePath", 600, 100)</script>
653<p>
In this example you will find it easier to select the link than without the second transparent link path shape.
655</p>
656<p>
The transparent shape can also be used for highlighting purposes.
For example, to implement the effect of highlighting the link when the mouse passes over it,
add <a>GraphObject.mouseEnter</a> and <a>GraphObject.mouseLeave</a> event handlers:
660</p>
661<pre class="lang-js" id="doublePathHighlight"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
669
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { isPanelMain: true, stroke: "transparent", strokeWidth: 8 }),  // thick undrawn path
    $(go.Shape, { isPanelMain: true }),  // default stroke === "black", strokeWidth === 1
    $(go.Shape, { toArrow: "Standard" }),
    {
      // a mouse-over highlights the link by changing the first main path shape's stroke:
      mouseEnter: function(e, link) { link.elt(0).stroke = "rgba(0,90,156,0.3)"; },
      mouseLeave: function(e, link) { link.elt(0).stroke = "transparent"; }
    }
  );
681
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
690</code></pre>
691<script>goCode("doublePathHighlight", 600, 100)</script>
692<p>
Pass the mouse over the link to see the effect.
Such feedback also helps the user click or context click on the link.
695</p>
696
697<h2 id="ShortLengths">Short Lengths</h2>
698<p>
Note in the example above with the thick black path shape,
that the arrowhead seems to have disappeared due to the thickness of the link path.
One can avoid the problem by increasing the <a>GraphObject.scale</a> of the arrowhead, perhaps to 2.
702</p>
703<pre class="lang-js" id="thickPath2"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
711
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { strokeWidth: 8 }),  // thick path
    $(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
  );
717
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
726</code></pre>
727<script>goCode("thickPath2", 600, 100)</script>
728
729<p>
Now the arrowhead is clearly visible.
But that in turn shows that the arrowhead is still obscured at the very end of the link path,
where it is too wide to show the point of the arrowhead.
That problem can be avoided by setting <a>Link.toShortLength</a> to a value such as 8,
depending on the kind of arrowhead used.
The path geometry will be shortened by that distance so that the link path does not interfere with the arrowhead.
736</p>
737<pre class="lang-js" id="shortLength"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
745
diagram.linkTemplate =
  $(go.Link,
    { toShortLength: 8 },  // shortens path to avoid interfering with arrowhead
    $(go.Shape, { strokeWidth: 8 }),  // thick path
    $(go.Shape, { toArrow: "Standard", scale: 2 }) // bigger arrowhead
  );
752
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
761</code></pre>
762<script>goCode("shortLength", 600, 100)</script>
763
764<p>
There is also a <a>Link.fromShortLength</a> property, to control how far the "from" end of the link path is drawn.
If there is an end segment, the distance that it can be shortened is limited to the corresponding
<a>Link.toEndSegmentLength</a> or <a>Link.fromEndSegmentLength</a>.
Note also that the short length may be negative, which would cause the link path to be drawn longer --
into the port at which the link is connected.
770</p>
771
772<h2 id="DisconnectedLinks">Disconnected Links</h2>
773<p>
The normal expectation is that one cannot have a link relationship unless it connects two nodes.
However <b>GoJS</b> does support the creation and manipulation of links that have either or both of
the <a>Link.fromNode</a> and <a>Link.toNode</a> properties with null values.
This is demonstrated by the <a href="../samples/draggableLink.html">Draggable Link</a> sample.
778</p>
779<p>
Both ends of the link must be connected to nodes in order for the standard link routing to operate.
If a link does not know where to start or where to end, it cannot compute a route or a position for the link.
However, you can provide a route by setting or binding <a>Link.points</a> to a list of two or more Points.
That will automatically give the link a position so that it can be seen in the diagram.
784</p>
785<p>
The linking tools, <a>LinkingTool</a> and <a>RelinkingTool</a>, normally do not permit the creation
or reconnection of links that connect with "nothing".
However, you can set <a>LinkingBaseTool.isUnconnectedLinkValid</a> to true to allow the user to do so,
as the Draggable Link sample demonstrates.
790</p>
791<p>
Links cannot normally be dragged unless they are part of a collection that includes the connected nodes.
However, you can set <a>DraggingTool.dragsLink</a> to true to allow the user to drag a solitary <a>Link</a>.
This mode allows the user to disconnect a link by dragging it away from the node(s)/port(s) to which it was attached.
It also allows the user to reconnect one or both ends of the link by dropping it so that the end(s) are at valid port(s).
This too is demonstrated by the Draggable Link sample.
797</p>
798
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
809
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
872
            </ul>
          </li>
        </ul>
876
877
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
883</footer>  </body>
884
885<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
886<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
897
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
907</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
923</html>