UNPKG

gojs/intro/legends.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 Legends and Titles -- 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>Legends and Titles</h1>
137<p>
138Sometimes in addition to the nodes and links that are the subject of a diagram,
139one also wants to display a "legend" or "key" describing the different kinds of nodes or links.
140Perhaps one also wants there to be "title" for the diagram in large letters.
141</p>
142
143<h2 id="OutsideOfDiagram">Outside of Diagram</h2>
144<p>
145First, you must consider whether titles or legends should be part of the diagram or not.
146You can create whatever you want in HTML outside of the diagram.
147</p>
148<script>
149function setupForLegend(diagram) {
var $ = go.GraphObject.make;
151
diagram.layout = $(go.TreeLayout, { angle: 90 });
153
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );
162
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 8 },
    $(go.Shape, { strokeWidth: 2 }));
167
diagram.model = new go.TreeModel([
  { key: "Alpha", color: "purple" },
  { key: "Beta", parent: "Alpha", color: "red" },
  { key: "Gamma", parent: "Alpha", color: "white" },
]);
173}
174</script>
175<pre class="lang-js" style="display:none" id="diagramPre"><code>
setupForLegend(diagram);
177</code></pre>
178<div style="width:100%">
<span id="diagramSpan" style="display: inline-block">
  <span style="font: bold 16pt sans-serif; color:green">An HTML Title for a Diagram</span>
</span>
<div style="display: inline-block; vertical-align: bottom; border: 2px solid green">
  <b>Color key:</b>
  <table>
    <tr><td><span style="color:purple; font-weight:bold">Purple</span> nodes are juicy and sweet</td></tr>
    <tr><td><span style="color:red; font-weight:bold">Red</span> nodes are very angry</td></tr>
    <tr><td><span style="color:white;background:gray;font-weight:bold">White</span> nodes sleep well at night</td></tr>
  </table>
</div>
190</div>
191<script>goCode("diagramPre", 300, 200, "diagramSpan");</script>
192<p>
193Note that anything in HTML will not automatically scroll and zoom along with the diagram's contents shown in the viewport.
194But HTML elements could be positioned in front of or behind the diagram's DIV element.
195</p>
196
197<h2 id="UnmodeledParts">Unmodeled Parts</h2>
198<p>
199Second, you should consider whether the title or legend should be held in your data model.
200Do you need to save and load that data in your database?
201</p>
202<p>
203If you do not want to these objects to be included in your application's data model,
204you can just create them as simple <a>Part</a>s and <a>Diagram.add</a> them to your diagram
205at explicitly defined <a>Part.location</a>s.
206</p>
207<pre class="lang-js" id="unmodeled"><code>
setupForLegend(diagram);  // this creates a diagram just like the first example
209
diagram.add(
  $(go.Part, { location: new go.Point(0, -40) },
    $(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));
213</code></pre>
214<script>goCode("unmodeled", 300, 200);</script>
215<p>
216If you do not assign a location or position for your Parts,
217and if your <a>Diagram.layout</a> (if any) does not assign any <a>Part.location</a>,
218then there might not be a real location for those parts and they might not appear anywhere in the diagram.
219</p>
220<p class="box bg-info">
221All of the predefined <a>Layout</a>s that make use of <a>LayoutNetwork</a>s, including <a>TreeLayout</a>,
222do not operate on simple <a>Part</a>s but only on <a>Node</a>s and <a>Link</a>s.
223If you had added a <a>Node</a> to the diagram it would have been positioned as part of this diagram's normal tree layout,
224even though you explicitly set its location.
225Alternatively it could still be a Node if you set its <a>Part.isLayoutPositioned</a> property to false.
226</p>
227<p>
228You will notice that the title is selectable and movable and copyable and deletable in the diagram above.
229You may want to set properties such as <a>Part.selectable</a> to false.
230</p>
231<p>
232For an example showing a legend, see the <a href="../samples/familyTree.html" target="samples">Family Tree</a> sample.
233</p>
234
235<h3 id="ModeledParts">Modeled Parts</h3>
236<p>
237If on the other hand you do want to store your titles or legends in your model, you can do so using the normal mechanisms.
238Typically you will use <a href="templateMaps.html">node categories and template maps</a>.
239</p>
240<p>
241If you do not want your users to manipulate those objects, you will want to set <a>Part.selectable</a> to false.
242You may want to set <a>Part.layerName</a> to "Grid", so that it is always in the background behind everything else.
243(All Parts in the "Grid" Layer are automatically not selectable, because <a>Layer.allowSelect</a> is false for that <a>Layer</a>.)
244</p>
245
246<h2 id="StaticParts">Static Parts</h2>
247<p>
248Third, consider whether you want the title or legend to move or scale as the user scrolls or zooms the diagram.
249If you want to keep such a decoration at the same position in the viewport, it might be easiest to do so by implementing
250it as an HTML element that is superimposed with the diagram's DIV element.
251</p>
252<p>
253However if you really want to implement it using a <b>GoJS</b> <a>Part</a>, you can do so by implementing a
254"ViewportBoundsChanged" <a>DiagramEvent</a> listener that continually resets the position and scale to values that
255make them appear not to move as the user scrolls or zooms.
256</p>
257<pre class="lang-js" id="static"><code>
setupForLegend(diagram);  // this creates a diagram just like the first example
259
diagram.add(
  $(go.Part,
    {
      layerName: "Grid",  // this Layer is behind everything and is not interactive
      _viewPosition: new go.Point(0,0)  // some position in the viewport,
                                        // not in document coordinates
    },
    $(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));
268
// Whenever the Diagram.position or Diagram.scale change,
// update the position of all simple Parts that have a _viewPosition property.
diagram.addDiagramListener("ViewportBoundsChanged", function(e) {
  e.diagram.commit(function(dia) {
    // only iterates through simple Parts in the diagram, not Nodes or Links
    dia.parts.each(function(part) {
      // and only on those that have the "_viewPosition" property set to a Point
      if (part._viewPosition) {
        part.position = dia.transformViewToDoc(part._viewPosition);
        part.scale = 1/dia.scale;  // counteract any zooming
      }
    })
  }, null);  // set skipsUndoManager to true, to avoid recording these changes
});
283</code></pre>
284<script>goCode("static", 300, 200);</script>
285<p>
286Note that as the user pans or scrolls or zooms the diagram, the title remains at the same viewport position
287at apparently the same effective size.
288This example makes use of the "Grid" <a>Layer</a> (see <a href="layers.html">Intro to Layers</a>), which
289is convenient for making sure the title (or legend) stays in the background and does not participate in
290selection or mouse events or the <a>UndoManager</a>.
291</p>
292
    </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">
303
      <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>
366
            </ul>
          </li>
        </ul>
370
371
    <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>
377</footer>  </body>
378
379<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
380<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'
  });
}
391
// 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");
});
401</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>
417</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 Legends and Titles -- 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>`
41	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
42	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
43	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
44	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
45	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
46	`</ul>`
47	`</div>`
48	`</div>`
49	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
50	`</nav>`
51
52	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
53
54	`<div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">`
55	`<div class="flex-shrink-0 px-8 py-4">`
56	`<button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">`
57	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
58	`<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>`
59	`<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>`
60	`</svg>`
61	`</button>`
62	`</div>`
63	`<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">`
64	`<a href="index.html">Basics</a>`
65	`<a href="buildingObjects.html">Building Parts</a>`
66	`<a href="usingModels.html">Using Models</a>`
67	`<a href="dataBinding.html">Data Binding</a>`
68	`<a href="react.html">GoJS with React</a>`
69	`<a href="angular.html">GoJS with Angular</a>`
70	`<a href="textBlocks.html">TextBlocks</a>`
71	`<a href="shapes.html">Shapes</a>`
72	`<a href="pictures.html">Pictures</a>`
73	`<a href="panels.html">Panels</a>`
74	`<a href="tablePanels.html">Table Panels</a>`
75	`<a href="brush.html">Brushes</a>`
76	`<a href="sizing.html">Sizing Objects</a>`
77	`<a href="itemArrays.html">Item Arrays</a>`
78	`<a href="changedEvents.html">Changed Events</a>`
79	`<a href="transactions.html">Transactions</a>`
80	`<a href="viewport.html">Coordinates</a>`
81	`<a href="initialView.html">Initial View</a>`
82	`<a href="collections.html">Collections</a>`
83	`<a href="links.html">Links</a>`
84	`<a href="linkLabels.html">Link Labels</a>`
85	`<a href="connectionPoints.html">Link Points</a>`
86	`<a href="ports.html">Ports</a>`
87	`<a href="nodes.html">Nodes</a>`
88	`<a href="debugging.html">Debugging</a>`
89	`<a href="layouts.html">Layouts</a>`
90	`<a href="trees.html">Trees</a>`
91	`<a href="subtrees.html">SubTrees</a>`
92	`<a href="groups.html">Groups</a>`
93	`<a href="subgraphs.html">SubGraphs</a>`
94	`<a href="sizedGroups.html">Sized Groups</a>`
95	`<a href="selection.html">Selection</a>`
96	`<a href="highlighting.html">Highlighting</a>`
97	`<a href="animation.html">Animation</a>`
98	`<a href="toolTips.html">ToolTips</a>`
99	`<a href="contextmenus.html">Context Menus</a>`
100	`<a href="events.html">Diagram Events</a>`
101	`<a href="tools.html">Tools</a>`
102	`<a href="commands.html">Commands</a>`
103	`<a href="permissions.html">Permissions</a>`
104	`<a href="validation.html">Validation</a>`
105	`<a href="HTMLInteraction.html">HTML Interaction</a>`
106	`<a href="layers.html">Layers & Z-ordering</a>`
107	`<a href="palette.html">Palette</a>`
108	`<a href="overview.html">Overview</a>`
109	`<a href="resizing.html">Resizing Diagrams</a>`
110	`<a href="replacingDeleting.html">Replacing and Deleting</a>`
111	`<a href="buttons.html">Buttons</a>`
112	`<a href="templateMaps.html">Template Maps</a>`
113	`<a href="legends.html">Legends and Titles</a>`
114	`<a href="extensions.html">Extensions</a>`
115	`<a href="geometry.html">Geometry Strings</a>`
116	`<a href="grids.html">Grid Patterns</a>`
117	`<a href="graduatedPanels.html">Graduated Panels</a>`
118	`<a href="makingImages.html">Diagram Images</a>`
119	`<a href="makingSVG.html">Diagram SVG</a>`
120	`<a href="printing.html">Printing</a>`
121	`<a href="serverSideImages.html">Server-side Images</a>`
122	`<a href="nodeScript.html">GoJS in Node.js</a>`
123	`<a href="testing.html">Testing</a>`
124	`<a href="storage.html">Storage</a>`
125	`<a href="performance.html">Performance</a>`
126	`<a href="source.html">Building from Source</a>`
127	`<a href="platforms.html">Platforms</a>`
128	`<a href="deployment.html">Deployment</a>`
129	`</nav>`
130	`</div>`
131	`<div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">`
132
133
134
135
136	`<h1>Legends and Titles</h1>`
137	`<p>`
138	`Sometimes in addition to the nodes and links that are the subject of a diagram,`
139	`one also wants to display a "legend" or "key" describing the different kinds of nodes or links.`
140	`Perhaps one also wants there to be "title" for the diagram in large letters.`
141	`</p>`
142
143	`<h2 id="OutsideOfDiagram">Outside of Diagram</h2>`
144	`<p>`
145	`First, you must consider whether titles or legends should be part of the diagram or not.`
146	`You can create whatever you want in HTML outside of the diagram.`
147	`</p>`
148	`<script>`
149	`function setupForLegend(diagram) {`
150	`var $ = go.GraphObject.make;`
151
152	`diagram.layout = $(go.TreeLayout, { angle: 90 });`
153
154	`diagram.nodeTemplate =`
155	`$(go.Node, "Auto",`
156	`$(go.Shape, "RoundedRectangle",`
157	`{ fill: "white" },`
158	`new go.Binding("fill", "color")),`
159	`$(go.TextBlock, { margin: 5 },`
160	`new go.Binding("text", "key"))`
161	`);`
162
163	`diagram.linkTemplate =`
164	`$(go.Link,`
165	`{ routing: go.Link.Orthogonal, corner: 8 },`
166	`$(go.Shape, { strokeWidth: 2 }));`
167
168	`diagram.model = new go.TreeModel([`
169	`{ key: "Alpha", color: "purple" },`
170	`{ key: "Beta", parent: "Alpha", color: "red" },`
171	`{ key: "Gamma", parent: "Alpha", color: "white" },`
172	`]);`
173	`}`
174	`</script>`
175	`<pre class="lang-js" style="display:none" id="diagramPre"><code>`
176	`setupForLegend(diagram);`
177	`</code></pre>`
178	`<div style="width:100%">`
179	`<span id="diagramSpan" style="display: inline-block">`
180	`<span style="font: bold 16pt sans-serif; color:green">An HTML Title for a Diagram</span>`
181	`</span>`
182	`<div style="display: inline-block; vertical-align: bottom; border: 2px solid green">`
183	`<b>Color key:</b>`
184	`<table>`
185	`<tr><td><span style="color:purple; font-weight:bold">Purple</span> nodes are juicy and sweet</td></tr>`
186	`<tr><td><span style="color:red; font-weight:bold">Red</span> nodes are very angry</td></tr>`
187	`<tr><td><span style="color:white;background:gray;font-weight:bold">White</span> nodes sleep well at night</td></tr>`
188	`</table>`
189	`</div>`
190	`</div>`
191	`<script>goCode("diagramPre", 300, 200, "diagramSpan");</script>`
192	`<p>`
193	`Note that anything in HTML will not automatically scroll and zoom along with the diagram's contents shown in the viewport.`
194	`But HTML elements could be positioned in front of or behind the diagram's DIV element.`
195	`</p>`
196
197	`<h2 id="UnmodeledParts">Unmodeled Parts</h2>`
198	`<p>`
199	`Second, you should consider whether the title or legend should be held in your data model.`
200	`Do you need to save and load that data in your database?`
201	`</p>`
202	`<p>`
203	`If you do not want to these objects to be included in your application's data model,`
204	`you can just create them as simple <a>Part</a>s and <a>Diagram.add</a> them to your diagram`
205	`at explicitly defined <a>Part.location</a>s.`
206	`</p>`
207	`<pre class="lang-js" id="unmodeled"><code>`
208	`setupForLegend(diagram); // this creates a diagram just like the first example`
209
210	`diagram.add(`
211	`$(go.Part, { location: new go.Point(0, -40) },`
212	`$(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));`
213	`</code></pre>`
214	`<script>goCode("unmodeled", 300, 200);</script>`
215	`<p>`
216	`If you do not assign a location or position for your Parts,`
217	`and if your <a>Diagram.layout</a> (if any) does not assign any <a>Part.location</a>,`
218	`then there might not be a real location for those parts and they might not appear anywhere in the diagram.`
219	`</p>`
220	`<p class="box bg-info">`
221	`All of the predefined <a>Layout</a>s that make use of <a>LayoutNetwork</a>s, including <a>TreeLayout</a>,`
222	`do not operate on simple <a>Part</a>s but only on <a>Node</a>s and <a>Link</a>s.`
223	`If you had added a <a>Node</a> to the diagram it would have been positioned as part of this diagram's normal tree layout,`
224	`even though you explicitly set its location.`
225	`Alternatively it could still be a Node if you set its <a>Part.isLayoutPositioned</a> property to false.`
226	`</p>`
227	`<p>`
228	`You will notice that the title is selectable and movable and copyable and deletable in the diagram above.`
229	`You may want to set properties such as <a>Part.selectable</a> to false.`
230	`</p>`
231	`<p>`
232	`For an example showing a legend, see the <a href="../samples/familyTree.html" target="samples">Family Tree</a> sample.`
233	`</p>`
234
235	`<h3 id="ModeledParts">Modeled Parts</h3>`
236	`<p>`
237	`If on the other hand you do want to store your titles or legends in your model, you can do so using the normal mechanisms.`
238	`Typically you will use <a href="templateMaps.html">node categories and template maps</a>.`
239	`</p>`
240	`<p>`
241	`If you do not want your users to manipulate those objects, you will want to set <a>Part.selectable</a> to false.`
242	`You may want to set <a>Part.layerName</a> to "Grid", so that it is always in the background behind everything else.`
243	`(All Parts in the "Grid" Layer are automatically not selectable, because <a>Layer.allowSelect</a> is false for that <a>Layer</a>.)`
244	`</p>`
245
246	`<h2 id="StaticParts">Static Parts</h2>`
247	`<p>`
248	`Third, consider whether you want the title or legend to move or scale as the user scrolls or zooms the diagram.`
249	`If you want to keep such a decoration at the same position in the viewport, it might be easiest to do so by implementing`
250	`it as an HTML element that is superimposed with the diagram's DIV element.`
251	`</p>`
252	`<p>`
253	`However if you really want to implement it using a <b>GoJS</b> <a>Part</a>, you can do so by implementing a`
254	`"ViewportBoundsChanged" <a>DiagramEvent</a> listener that continually resets the position and scale to values that`
255	`make them appear not to move as the user scrolls or zooms.`
256	`</p>`
257	`<pre class="lang-js" id="static"><code>`
258	`setupForLegend(diagram); // this creates a diagram just like the first example`
259
260	`diagram.add(`
261	`$(go.Part,`
262	`{`
263	`layerName: "Grid", // this Layer is behind everything and is not interactive`
264	`_viewPosition: new go.Point(0,0) // some position in the viewport,`
265	`// not in document coordinates`
266	`},`
267	`$(go.TextBlock, "A Title", { font: "bold 24pt sans-serif", stroke: "green" })));`
268
269	`// Whenever the Diagram.position or Diagram.scale change,`
270	`// update the position of all simple Parts that have a _viewPosition property.`
271	`diagram.addDiagramListener("ViewportBoundsChanged", function(e) {`
272	`e.diagram.commit(function(dia) {`
273	`// only iterates through simple Parts in the diagram, not Nodes or Links`
274	`dia.parts.each(function(part) {`
275	`// and only on those that have the "_viewPosition" property set to a Point`
276	`if (part._viewPosition) {`
277	`part.position = dia.transformViewToDoc(part._viewPosition);`
278	`part.scale = 1/dia.scale; // counteract any zooming`
279	`}`
280	`})`
281	`}, null); // set skipsUndoManager to true, to avoid recording these changes`
282	`});`
283	`</code></pre>`
284	`<script>goCode("static", 300, 200);</script>`
285	`<p>`
286	`Note that as the user pans or scrolls or zooms the diagram, the title remains at the same viewport position`
287	`at apparently the same effective size.`
288	`This example makes use of the "Grid" <a>Layer</a> (see <a href="layers.html">Intro to Layers</a>), which`
289	`is convenient for making sure the title (or legend) stays in the background and does not participate in`
290	`selection or mouse events or the <a>UndoManager</a>.`
291	`</p>`
292
293	`</div>`
294	`</div>`
295
296	`<div class="bg-nwoods-primary">`
297	`<section class="max-w-screen-lg text-white container mx-auto py-2 px-12">`
298	`<p id="version" class="leading-none mb-2 my-4">GoJS</p>`
299	`</section>`
300	`</div><footer class="bg-nwoods-primary text-white">`
301	`<div class="container max-w-screen-lg mx-auto px-8">`
302	`<div class="w-full py-6">`
303
304	`<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">`
305	`<ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">`
306	`<li class="list-none row-span-2">`
307	`<h2 class="text-base font-semibold tracking-wide">GoJS</h2>`
308	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
309	`<li>`
310	`<a href="../samples/index.html">Samples</a>`
311	`</li>`
312	`<li>`
313	`<a href="../learn/index.html">Learn</a>`
314	`</li>`
315	`<li>`
316	`<a href="../intro/index.html">Intro</a>`
317	`</li>`
318	`<li>`
319	`<a href="../api/index.html">API</a>`
320	`</li>`
321	`<li>`
322	`<a href="../changelog.html">Changelog</a>`
323	`</li>`
324	`<li>`
325	`<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>`
326	`</li>`
327	`</ul>`
328	`</li>`
329	`<li class="list-none row-span-2">`
330	`<h2 class="text-base font-semibold tracking-wide">Support</h2>`
331	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
332	`<li>`
333	`<a href="https://www.nwoods.com/contact.html"`
334	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>`
335	`</li>`
336	`<li>`
337	`<a href="https://forum.nwoods.com/c/gojs">Forum</a>`
338	`</li>`
339	`<li>`
340	`<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>`
341	`</li>`
342	`<li>`
343	`<a href="https://www.nwoods.com/sales/index.html"`
344	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>`
345	`</li>`
346	`<li>`
347	`<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>`
348	`</li>`
349	`</ul>`
350	`</li>`
351	`<li class="list-none row-span-2">`
352	`<h2 class="text-base font-semibold tracking-wide">Company</h2>`
353	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
354	`<li>`
355	`<a href="https://www.nwoods.com">Northwoods</a>`
356	`</li>`
357	`<li>`
358	`<a href="https://www.nwoods.com/about.html">About Us</a>`
359	`</li>`
360	`<li>`
361	`<a href="https://www.nwoods.com/contact.html">Contact Us</a>`
362	`</li>`
363	`<li>`
364	`<a href="https://twitter.com/northwoodsgo">Twitter</a>`
365	`</li>`
366
367	`</ul>`
368	`</li>`
369	`</ul>`
370
371
372	`<p class="text-sm text-gray-100 md:mb-6">`
373	`Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>`
374	`</p>`
375	`</div>`
376	`</div>`
377	`</footer> </body>`
378
379	`<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>`
380	`<script>`
381	`window.dataLayer = window.dataLayer \|\| [];`
382	`function gtag(){dataLayer.push(arguments);}`
383	`gtag('js', new Date()); gtag('config', 'UA-1506307-5');`
384	`var getOutboundLink = function(url, label) {`
385	`gtag('event', 'click', {`
386	`'event_category': 'outbound',`
387	`'event_label': label,`
388	`'transport_type': 'beacon'`
389	`});`
390	`}`
391
392	`// topnav`
393	`var topButton = document.getElementById("topnavButton");`
394	`var topnavList = document.getElementById("topnavList");`
395	`topButton.addEventListener("click", function() {`
396	`this.classList.toggle("active");`
397	`topnavList.classList.toggle("hidden");`
398	`document.getElementById("topnavOpen").classList.toggle("hidden");`
399	`document.getElementById("topnavClosed").classList.toggle("hidden");`
400	`});`
401	`</script>`
402	`<script src="../assets/js/prism.js"></script>`
403	`<script src="../release/go.js"></script>`
404	`<script src="../assets/js/goDoc.js"></script>`
405	`<script>`
406	`document.addEventListener("DOMContentLoaded", function() {`
407	`if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;`
408	`if (window.goDoc) window.goDoc();`
409	`var d = window.diagrams;`
410	`for (var i = 0; i < d.length; i++) {`
411	`var dargs = d[i];`
412	`goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);`
413	`}`
414	`if (window.extra) window.extra();`
415	`});`
416	`</script>`
417	`</html>`