UNPKG

gojs/intro/connectionPoints.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 Link Connection Points on Nodes -- 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<h1>Link Connection Points on Nodes</h1>
135<p>
136There is flexibility in controlling exactly how and where a link connects to a node.
137In the previous examples the link has always ended at the edge of the node.
138But you can specify the <a>Spot</a> on a node at which a link terminates.
139</p>
140
141<h2 id="NonRectangularNodes">Non-rectangular Nodes</h2>
142<p>
143When a <a>Node</a> does not have a rectangular shape, by default links will end
144where the line toward the center of the node intersects with the edge of the node.
145</p>
146<p>
147Here is a demonstration of that -- drag one of the nodes around and watch how the link always
148connects to the nearest intersection or to the center of the node.
149This example includes arrowheads at both ends of the link, to make it clear that the link route
150really ends right at the edge of the node.
151</p>
152<pre class="lang-js" id="nonRectangular"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 90, height: 90,
      selectionAdorned: false },
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "FivePointedStar", { fill: "lightgray" }),
    $(go.TextBlock,
      new go.Binding("text", "key"))
  );
162
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape,   // the "from" end arrowhead
      { fromArrow: "Chevron" }),
    $(go.Shape,   // the "to" end arrowhead
      { toArrow: "StretchedDiamond", fill: "red" })
  );
171
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);
180</code></pre>
181<script>goCode("nonRectangular", 600, 150)</script>
182
183<h2 id="ToSpotAndFromSpot">ToSpot and FromSpot</h2>
184<p>
185You can easily require links to end at a particular point within the bounds of the node,
186rather than at the nearest edge intersection.
187Set the <a>GraphObject.toSpot</a> to a <a>Spot</a> value other than <a>Spot,None</a>
188to cause links coming into the node to end at that spot within the node, with a direction
189that is appropriate for the side that the spot is at.
190Similarly, set the <a>GraphObject.fromSpot</a> for the ends of links coming out of the node.
191</p>
192
193<p>
194The following examples all display the same graph but use different templates
195to demonstrate how links can connect to nodes.
196They all call this common function to define some nodes and links.
197</p>
198<pre class="lang-js" id="makeGraph"><code>
199function makeGraph(diagram) {
var $ = go.GraphObject.make;
201
diagram.layout =
  $(go.LayeredDigraphLayout,  // this will be discussed in a later section
    { columnSpacing: 5,
      setsPortSpots: false });
206
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
  { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
];
var linkDataArray = [
  { from: "Beta", to: "Alpha" },
  { from: "Gamma", to: "Alpha" },
  { from: "Delta", to: "Alpha" },
  { from: "Alpha", to: "Epsilon" },
  { from: "Alpha", to: "Zeta" },
  { from: "Alpha", to: "Eta" },
  { from: "Alpha", to: "Theta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
221}
222</code></pre>
223<script>eval(document.getElementById("makeGraph").textContent)</script>
224
225<p>
226Let us specify that links coming into a node connect at the middle of the left side, and that links going out
227of a node connect at the middle of the right side.  Such a convention is appropriate for diagrams that have
228a general sense of direction to them, such as the following one which goes from left to right.
229</p>
230<pre class="lang-js" id="leftright"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { fromSpot: go.Spot.Right,  // coming out from middle-right
      toSpot: go.Spot.Left },   // going into at middle-left
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
240
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
246
makeGraph(diagram);
248</code></pre>
249<script>goCode("leftright", 600, 150)</script>
250
251<p>
252You can also specify that the links go into a node not at a single spot but spread out along one side.
253Instead of <a>Spot,Right</a> use <a>Spot,RightSide</a>, and similarly for the left side.
254</p>
255<pre class="lang-js" id="leftrightSides"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { fromSpot: go.Spot.RightSide,  // coming out from right side
      toSpot: go.Spot.LeftSide },   // going into at left side
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
265
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
271
makeGraph(diagram);
273</code></pre>
274<script>goCode("leftrightSides", 600, 150)</script>
275<p>
276Of course this only looks good when the nodes are basically rectangular.
277</p>
278
279<p>
280You can use a different kind of <a>Link.routing</a>:
281</p>
282<pre class="lang-js" id="leftrightSidesOrthogonal"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { fromSpot: go.Spot.RightSide,  // coming out from right side
      toSpot: go.Spot.LeftSide },   // going into at left side
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
292
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal,  // Orthogonal routing
      corner: 10 },                 // with rounded corners
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
300
makeGraph(diagram);
302</code></pre>
303<script>goCode("leftrightSidesOrthogonal", 600, 150)</script>
304
305<p>
306Or you can use a different kind of <a>Link.curve</a>:
307</p>
308<pre class="lang-js" id="leftrightSidesBezier"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { fromSpot: go.Spot.RightSide,  // coming out from right side
      toSpot: go.Spot.LeftSide },   // going into at left side
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
318
diagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },  // Bezier curve
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
325
makeGraph(diagram);
327</code></pre>
328<script>  goCode("leftrightSidesBezier", 600, 150)</script>
329
330<p>
331But you need to be careful to specify sensible spots for how the graph is arranged.
332</p>
333<pre class="lang-js" id="leftrightSidesBad"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { fromSpot: go.Spot.TopSide,    // coming out from top side -- BAD!
      toSpot: go.Spot.RightSide },  // going into at right side -- BAD!
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
343
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
349
makeGraph(diagram);
351
diagram.add($(go.Part,  // this is just a comment
              { location: new go.Point(300, 50) },
              $(go.TextBlock, "Bad Spots",
                { font: "16pt bold", stroke: "red" })
            ));
357</code></pre>
358<script>goCode("leftrightSidesBad", 600, 150)</script>
359
360<h3 id="UndirectedSpots">Undirected Spots</h3>
361<p>
When no spot is specified for the <a>GraphObject.fromSpot</a> or <a>GraphObject.toSpot</a>,
the route computation will compute the furthest point on the route of the link from the center of the port to the other port
that is an intersection of an edge of the port.
This was demonstrated above in <a href="#NonRectangularNodes">Non-rectangular Nodes</a> and is again demonstrated here.
366</p>
367<pre class="lang-js" id="noSpotFocus0"><code>
diagram.nodeTemplate =
  $(go.Node, "Vertical",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "YinYang",
      {
        fill: "white", portId: ""
      },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );
380
diagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
    { key: 2, text: "Beta", color: "orange", loc: "150 0" },
    { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
  ],
  [
    { from: 1, to: 2 },
    { from: 2, to: 3 }
  ]);
391</code></pre>
392<script>goCode("noSpotFocus0", 600, 250)</script>
393
394<p>
However it is possible to specify a focus point that is different from the center of the port.
Use a <a>Spot</a> value that has <a>Spot.x</a> and <a>Spot.y</a> equal to 0.5 but with <a>Spot.offsetX</a> and <a>Spot.offsetY</a>
values that specify where you want links to focus towards, relative to the center of the port.
398</p>
399<pre class="lang-js" id="noSpotFocus1"><code>
diagram.nodeTemplate =
  $(go.Node, "Vertical",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "YinYang",
      {
        fill: "white", portId: "",
        fromSpot: new go.Spot(0.5, 0.5, 0, -25), toSpot: new go.Spot(0.5, 0.5, 0, 25)
      },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );
413
diagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
    { key: 2, text: "Beta", color: "orange", loc: "150 0" },
    { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
  ],
  [
    { from: 1, to: 2 },
    { from: 2, to: 3 }
  ]);
424</code></pre>
425<script>goCode("noSpotFocus1", 600, 250)</script>
426<p>
In this example, links always appear to be coming from the hole near the top of the "YinYang" figure
towards the dot near the bottom of the figure.
Try moving the nodes to see this behavior.
Note that the <a>Spot.x</a> and <a>Spot.y</a> values are both 0.5, with fixed offsets from the center of the port.
431</p>
432
433<p>
It is also possible to have links go directly to particular spots within a port.
Use regular <a>Spot</a> values, but set the Link's end segment length to zero,
<a>Link.fromEndSegmentLength</a> or <a>Link.toEndSegmentLength</a>.
437</p>
438<pre class="lang-js" id="noSpotFocus2"><code>
diagram.nodeTemplate =
  $(go.Node, "Vertical",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "YinYang",
      {
        fill: "white", portId: "",
        fromSpot: new go.Spot(0.5, 0.25), toSpot: new go.Spot(0.5, 0.75),
        fromEndSegmentLength: 0, toEndSegmentLength: 0
      },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );
453
diagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue", loc: "0 50" },
    { key: 2, text: "Beta", color: "orange", loc: "150 0" },
    { key: 3, text: "Gamma", color: "lightgreen", loc: "300 50" }
  ],
  [
    { from: 1, to: 2 },
    { from: 2, to: 3 }
  ]);
464</code></pre>
465<script>goCode("noSpotFocus2", 600, 250)</script>
466<p>
Again, links always appear to be coming from the hole near the top of the "YinYang" figure
towards the dot near the bottom of the figure, but now they go all the way rather than stop at the edge.
Note that the <a>Spot.x</a> and <a>Spot.y</a> values are <i>not</i> both 0.5,
and that the Link end segment lengths are zero.
471</p>
472
473<h2 id="SpotsForIndividualLinks">Spots for Individual Links</h2>
474<p>
475Setting the <a>GraphObject.fromSpot</a> and <a>GraphObject.toSpot</a> properties specifies
476the default link connection point for all links connected to the node.
477What if you want some links to go to the middle-top spot but some other links to go to the middle-left spot of the same node?
478You can achieve this by setting the <a>Link.fromSpot</a> and <a>Link.toSpot</a> properties,
479which take precedence over the correspondingly named properties of what the link connects with.
480</p>
481<pre class="lang-js" id="customSpots"><code>
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock,
      { margin: 5},
      new go.Binding("text", "key"))
  );
489
diagram.linkTemplate =
  $(go.Link,
    // get the link spots from the link data
    new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
    new go.Binding("toSpot", "toSpot", go.Spot.parse),
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" })
  );
498
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta", fromSpot: "TopRight", toSpot: "Left" },
  { from: "Alpha", to: "Gamma", fromSpot: "Left", toSpot: "Left" },
  { from: "Alpha", to: "Delta", fromSpot: "None", toSpot: "Top" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
508</code></pre>
509<script>goCode("customSpots", 600, 150)</script>
510
511<h3 id="SomeLayoutsSetLinkSpots">Some Layouts set Link Spots</h3>
512<p>
513Some of the predefined <a>Layout</a>s automatically set <a>Link.fromSpot</a> and <a>Link.toSpot</a>
514when the nature of the layout implies a natural direction.
515So, for example, a <a>TreeLayout</a> with a <a>TreeLayout.angle</a> <code>== 90</code> will set each Link's
516fromSpot to be <a>Spot,Bottom</a> and each Link's toSpot to be <a>Spot,Top</a>.
517</p>
518<p>
519You can disable the setting of Link spots for TreeLayout by setting <a>TreeLayout.setsPortSpot</a> and/or <a>TreeLayout.setsChildPortSpot</a> to false.
520For LayeredDigraphLayout, set <a>LayeredDigraphLayout.setsPortSpots</a> to false.
521For ForceDirectedLayout, set <a>ForceDirectedLayout.setsPortSpots</a> to false, although this is rarely needed.
522</p>
523
    </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">
534
      <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>
597
            </ul>
          </li>
        </ul>
601
602
    <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>
608</footer>  </body>
609
610<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
611<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'
  });
}
622
// 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");
});
632</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
635<script src="../extensions/Figures.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>
648</html>
1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Link Connection Points on Nodes -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<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">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<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>`
30	`<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>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`