UNPKG

gojs/intro/viewport.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 Coordinate Systems-- 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<h1>Coordinate Systems</h1>
134<p>
135A <a>Diagram</a> uses two major coordinate systems when drawing <a>Part</a>s: document coordinates and view coordinates.
136Furthermore each <a>Panel</a> within a <a>Part</a> has its own coordinate system that its elements use.
137</p>
138<p>
139All coordinate systems in <b>GoJS</b> have <a>Point</a>s with increasing values of X going rightwards and
140increasing values of Y going downwards.
141</p>
142
143<h2 id="DocumentAndViewCoordinates">Document and View coordinates</h2>
144<p>
145The <a>Part.location</a> and <a>GraphObject.actualBounds</a> and <a>GraphObject.position</a> of Parts are in document coordinates.
146Thus the <a>Point</a> that may be saved for a Node's location in the model's node data object are normally in document coordinates:
147</p>
148<pre class="lang-js"><code>
diagram.model.nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "100 50" }
];
153</code></pre>
154<p>
155The union of all of the Nodes and Links in a Diagram form the <a>Diagram.documentBounds</a>.
156This <a>Rect</a> has values that are in document coordinates.
157Depending on where the Nodes and Links are, the document bounds may cover a very large area.
158The range of the document bounds might be entirely positive x and y values, or that might be entirely negative,
159or more likely they may cover both negative and positive values.
160</p>
161<p>
162But a Part with a <a>Part.location</a> of (0, 0) in document coordinates is not always drawn at the top-left corner of
163the HTML Div element that the user sees in the page.
164When the user scrolls the diagram the part will need to be drawn elsewhere on the canvas.
165And if the user zooms in to make the parts appear larger, the parts will be drawn at different points in the canvas.
166Yet the <a>Part.location</a> does not change value as the user scrolls or zooms the diagram.
167</p>
168<p>
169The <i>viewport</i> is the area of the document that is visible in the canvas.
170That area is available as the <a>Diagram.viewportBounds</a>.
171Note that the viewport bounds is in document coordinates, not in view coordinates!
172The top-left corner of the viewport is (0,0) in view coordinates but is at <a>Diagram.position</a> in document coordinates.
173The bottom-right corner of the viewport is at the canvas's (width,height) in view coordinates.
174The bottom-right corner of the viewport in document coordinates depends on the <a>Diagram.scale</a>.
175</p>
176<p>
177Points in the canvas are in view coordinates, which are independent of document coordinates.
178View coordinates are distances from the top-left corner of the canvas in device-independent pixels.
179The differences between document coordinates and view coordinates are primarily controlled by two <a>Diagram</a> properties:
180<a>Diagram.position</a> and <a>Diagram.scale</a>.
181Scrolling and panning change the Diagram.position.
182Zooming in or out changes the Diagram.scale.
183You can also convert between coordinate systems by calling <a>Diagram.transformDocToView</a> and <a>Diagram.transformViewToDoc</a>.
184However very few properties or method arguments or return values are in view coordinates -- almost everything is in document
185coordinates or in panel coordinates.
186</p>
187<p>
188As an example of showing the viewport in the context of the whole document, an <a>Overview</a> does exactly that.
189Take a look at the overview that is in the <a href="../samples/orgChartStatic.html">Org Chart sample</a>.
190The overview shows the whole document of the main diagram.
191The magenta box shows the main diagram's viewport within the whole document.
192As you scroll or pan the main diagram, the viewport moves.
193As you zoom out, the viewport gets larger.
194</p>
195<p>
196To better understand the difference between document and viewport coordinates, look at this diagram:
197</p>
198<pre class="lang-js" id="diffCoordSystems" style="display:none"><code>
diagram.nodeTemplate =
$(go.Node, "Auto",
  { scale : 1.3},
  new go.Binding("location", "loc", gridPointParse),
  new go.Binding("scale", "scale"),
  { locationSpot: go.Spot.Center, portId: "NODE" },
  $(go.Shape, "RoundedRectangle",
    { fill: "white", portId: "SHAPE" },
    new go.Binding("fill", "color"),
    new go.Binding("strokeWidth", "strokeW")),
  $(go.TextBlock,
    { margin: 4, portId: "TEXTBLOCK" },
    new go.Binding("text", "text"),
    new go.Binding("stroke", "textColor"))
);
214
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { stroke: "darkgray", strokeWidth: 2 }),
    $(go.Shape, { toArrow: "Standard", stroke: "darkgray", fill: "darkgray" })
);
220
// colors
var docGridStroke = "rgba(70, 130, 180, 0.5)";
var viewGridStroke = "rgba(255, 128, 128, 1)";
var commentStroke = "brown";
225
var cellSide = 20; // side length of one grid cell
var cellSize = new go.Size(cellSide * 5, cellSide * 5);
var pointSize = 7;
229
function gridSizeParse(size) {
  if (!(size instanceof go.Size)) {
    size = go.Size.parse(size);
  }
  size.setTo(size.width * cellSide, size.height * cellSide);
  return size;
}
function gridPointParse(point) {
  if (!(point instanceof go.Point)) {
    point = go.Point.parse(point);
  }
  point.setTo(point.x * cellSide, point.y * cellSide);
  return point;
}
244
function LabelledPoint(x, y, label) {
  return {
    x: x,
    y: y,
    label: label
  }
}
252
diagram.nodeTemplateMap.add("Description", // Template for comment node
  $(go.Node, "Auto",
    new go.Binding("location", "loc", gridPointParse),
    new go.Binding("scale", "scale"),
    { locationSpot: go.Spot.Center, portId: "NODE" },
    $(go.Shape, "RoundedRectangle",
      { fill: "white", portId: "SHAPE" },
      new go.Binding("fill", "color"),
      new go.Binding("strokeWidth", "strokeW")),
    $(go.Panel, "Vertical",
     $(go.TextBlock,
       {font: "bold 11pt sans-serif", margin: new go.Margin(3, 0, 0, 0)},
       new go.Binding("text", "header"),
       new go.Binding("stroke", "textColor")),
      $(go.TextBlock,
        { margin: 3, portId: "TEXTBLOCK" },
        new go.Binding("text", "text"),
        new go.Binding("stroke", "textColor"))
    )
));
273
diagram.nodeTemplateMap.add("DeltaDescription", // Template for comment node
  $(go.Node, "Auto",
    new go.Binding("location", "loc", gridPointParse),
    new go.Binding("scale", "scale"),
    { locationSpot: go.Spot.Center, portId: "NODE" },
    $(go.Shape, "RoundedRectangle",
      { fill: "white", portId: "SHAPE" },
      new go.Binding("fill", "color"),
      new go.Binding("strokeWidth", "strokeW")),
    $(go.Panel, "Vertical",
     $(go.TextBlock,
       {font: "bold 11pt sans-serif", margin: new go.Margin(3, 0, 0, 0)},
       new go.Binding("text", "header"),
       new go.Binding("stroke", "textColor")),
      $(go.TextBlock,
        { margin: 3, portId: "TEXTBLOCK", alignment: go.Spot.Left },
        new go.Binding("text", "text"),
        new go.Binding("stroke", "textColor")),
      $(go.TextBlock,
        { margin: 3, portId: "TEXTBLOCK", font: "italic 10pt sans-serif" },
        new go.Binding("text", "desc"),
        new go.Binding("stroke", "textColor"))
    )
));
298
diagram.nodeTemplateMap.add("Point", // template for denoting points on the grid
  $(go.Node, "Vertical",
    { movable: false },
    new go.Binding("location", "point", function gridPointLocation(point) {
        label = point.label;
        // measure the longest line's width
        textLines = label.split("\n");
        width = 0
        textLines.forEach(function(text) {
          var textBlock = $(go.TextBlock, { text: text, font: "bold 10pt sans-serif"});
          if (textBlock.naturalBounds.right > width) {
            width = textBlock.naturalBounds.right;
          }
        });
313
        // text block with entire string to measure height
        var textBlock = $(go.TextBlock, { text: label, font: "bold 10pt sans-serif" });
        point = new go.Point(point.x, point.y);
317
        // convert from grid coordinates to diagram coordinates
        gridPointParse(point);
320
        // offset
        point.setTo(point.x - width / 2, point.y - pointSize / 2 - textBlock.naturalBounds.bottom); // align to center of circle to intersection instead of top left corner
        return point;
      }),
325
    $(go.TextBlock,
      {position: new go.Point(0, -pointSize - 7), textAlign: "center", font : "bold 10pt sans-serif"},
      new go.Binding("text", "point", function getLabel(point) {
        return point.label;
      }), new go.Binding("margin", "margin")),
    $(go.Shape,
      "Circle",
      {width: pointSize, height: pointSize, alignment: go.Spot.Center})
));
335
diagram.linkTemplateMap.add("Comment", // Template for links from comments
  $(go.Link,
    { curve: go.Link.Bezier },
    new go.Binding("curviness"),
    new go.Binding("fromSpot", "fromSpot"),
    new go.Binding("toSpot", "toSpot"),
    $(go.Shape, { stroke: commentStroke },
      new go.Binding("stroke", "stroke")),
    $(go.Shape, { toArrow: "OpenTriangle", stroke: commentStroke },
      new go.Binding("stroke", "stroke"))
));
347
diagram.groupTemplateMap.add("Grid",
  $(go.Group, "Position",
    { movable: false },
    $(go.Shape, "Rectangle", { fill: "transparent", strokeWidth: 2},
      new go.Binding("fill", "fill"),
      new go.Binding("stroke", "border"),
      new go.Binding("desiredSize", "size", gridSizeParse).makeTwoWay(go.Size.stringify)),
    $(go.Panel, "Grid",
      { name: "DOCGRID", desiredSize: cellSize, gridCellSize: new go.Size(cellSide, cellSide) },
      new go.Binding("desiredSize", "size", gridSizeParse).makeTwoWay(go.Size.stringify),
      new go.Binding("gridCellSize", "cell", go.Size.parse).makeTwoWay(go.Size.stringify),
      $(go.Shape, "LineV",
        new go.Binding("stroke")),
      $(go.Shape, "LineH",
        new go.Binding("stroke"))
    ),
    new go.Binding("location", "loc", gridPointParse)
));
366
diagram.initialContentAlignment = go.Spot.Center;
368
var model = new go.GraphLinksModel();
model.linkFromPortIdProperty = "fPID";
model.linkToPortIdProperty = "tPID"
372
model.nodeDataArray = [
  { key: "docGrid", isGroup: true, category: "Grid", stroke: docGridStroke, fill: "transparent", size: "24 20", border: docGridStroke },
  { key: "viewGrid", isGroup: true, group: "docGrid", category: "Grid", fill: "rgb(248,248,248)",stroke: viewGridStroke, size: "13.7 9.95", loc: "5.8 5.2", cell: "25 25", border: viewGridStroke},
  { key: "alpha", group: "docGrid", text: "Alpha", loc: "1.95 6.95"},
  { key: "beta", group: "docGrid", text: "Beta", loc: "12.4 1.25"},
  { key: "gamma", group: "docGrid", text: "Gamma", loc: "10 7.95"},
  { key: "delta", group: "docGrid", text: "Delta", loc: "14.5 11.95"},
  { key: "epsilon", group: "docGrid", text: "Epsilon", loc: "7.9 17.95"},
  { key: "zeta", group: "docGrid", text: "Zeta", loc: "12.35 18.7"},
  { key: "eta", group: "docGrid", text: "Eta", loc: "22.5 11.95"},
  { key: "point1", group: "docGrid", category: "Point", point: LabelledPoint(5.8, 5.2, "(300, 250) Document Coordinates\n(0, 0) Viewport Coordinates")},
  { key: "point2", group: "docGrid", category: "Point", point: LabelledPoint(19.3, 14.9, "(850, 650) Document Coordinates\n(550, 400) Viewport Coordinates"), margin: new go.Margin(0, 0, 4, 0)},
  { key: "point1", group: "docGrid", category: "Point", point: LabelledPoint(0, 0, "(0, 0) Document Coordinates")},
  { key: "point1", group: "docGrid", category: "Point", point: LabelledPoint(24, 20, "(1200, 1000) Document Coordinates")},
  { key: "viewportDesc", category: "Description", header: "Viewport", text: "position: (300, 250)\nviewportBounds: (550, 400)\nscale: 1.25", textColor: "brown", loc: "0 17"},
  { key: "documentDesc", category: "Description", header: "Document", text: "documentBounds: (1200, 1000)\npadding: (5, 5, 5, 5)", textColor: "rgb(50, 120, 160)", loc: "22 -3"},
  { key: "deltaDesc", category: "DeltaDescription", header: "Delta", text: "location: (650, 550)", desc: "Location is in document\ncoordinates, and does not\nchange with viewport\nmovement or scaling.", textColor: "black", loc: "26 6"}
];
model.linkDataArray = [
  { to: "viewGrid", from: "viewportDesc", category: "Comment", stroke: "brown"},
  { to: "docGrid", from: "documentDesc", category: "Comment", stroke: "rgb(50, 120, 160)"},
  { to: "delta", from: "deltaDesc", category: "Comment", stroke: "black", curviness: -10},
  { to: "gamma", from: "alpha"},
  { to: "gamma", from: "beta"},
  { to: "delta", from: "gamma"},
  { to: "epsilon", from: "delta"},
  { to: "zeta", from: "delta"},
  { to: "eta", from: "delta"}
];
402
diagram.model = model;
404
405
// Formatting
function headerStyle() {
  return {
    margin: 3,
    font: "bold 12pt sans-serif",
    minSize: new go.Size(140, 16),
    maxSize: new go.Size(120, NaN),
    textAlign: "center"
  };
}
function textStyle() {
  return {
    margin: 3,
    font: "italic 10pt sans-serif",
    minSize: new go.Size(16, 16),
    maxSize: new go.Size(160, NaN),
    textAlign: "left"
  };
}
425</code></pre>
426<script>goCode("diffCoordSystems", 750, 650)</script>
427
428<h2 id="CoordinateSystemsExample">Coordinate systems example</h2>
429<p>
430This example shows three Parts at three different locations in document coordinates.
431Pass the mouse over each of the parts to see where those locations are in view coordinates.
432Initially you will see that the only difference between document and view coordinates are a constant offset.
433That offset is due to the <a>Diagram.padding</a> that puts a little space between the edge of the canvas and
434the edge of where the diagram's objects are.
435It is also due to <a>Part.locationSpot</a> having the location be at the center of the "+" Shape,
436not at the top-left corner of the whole Part.
437</p>
438<pre class="lang-js" id="coordsystems"><code>
// read-only to avoid accidentally moving any Part in document coordinates
diagram.isReadOnly = true;
441
diagram.nodeTemplate =
  $(go.Part,  // no links or grouping, so use the simpler Part class instead of Node
    {
      locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
      layerName: "Background",
      mouseOver: function (e, obj) { showPoint(obj.part.location); },
      click: function (e, obj) { showPoint(obj.part.location); }
    },
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "PlusLine",
      { name: "SHAPE", width: 8, height: 8 }),
    $(go.TextBlock,
      { position: new go.Point(6, 6), font: "8pt sans-serif" },
      new go.Binding("text", "loc"))
  );
457
diagram.model.nodeDataArray = [
  { loc: "0 0" },
  { loc: "100 0" },
  { loc: "100 50" }
];
463
function showPoint(loc) {
  var docloc = diagram.transformDocToView(loc);
  var elt = document.getElementById("Message1");
  elt.textContent = "Selected node location,\ndocument coordinates: " + loc.x.toFixed(2) + " " + loc.y.toFixed(2) +
                    "\nview coordinates: " + docloc.x.toFixed(2) + " " + docloc.y.toFixed(2);
}
// make accessible to the HTML buttons:
myDiagram = diagram;
472</code></pre>
473<script>goCode("coordsystems", 300, 150)</script>
474<textarea id="Message1" style="width: 300px; height: 70px">(move mouse over node to see points in document and in view coordinates)</textarea>
475<input id="ZoomOut" type="button" onclick="myDiagram.commandHandler.decreaseZoom()" value="Zoom Out" />
476<input id="ZoomIn" type="button" onclick="myDiagram.commandHandler.increaseZoom()" value="Zoom In" />
477<p>
478Then try scrolling or zooming in and looking at the locations of those parts in view coordinates.
479Zooming in increases the <a>Diagram.scale</a> by a small factor.
480That changes the locations in view coordinates, even though the locations in document coordinates did not change.
481</p>
482<p class="box bg-info">
To "move" a node one must change its <a>GraphObject.position</a> or <a>Part.location</a> in document coordinates.
To "scroll" a diagram one must change the <a>Diagram.position</a>.
Either way will cause a node to appear at a different point in the viewport.
486</p>
487
488<h2 id="DocumentBounds">Document bounds</h2>
489<p>
490All of the <a>Part</a>s of a diagram have positions and sizes (i.e. their <a>GraphObject.actualBounds</a>) in document coordinates.
491The union of all of those parts' actualBounds constitutes the <a>Diagram.documentBounds</a>.
492If all of the parts are close together, the document bounds might be small.
493If some or all of the parts are far apart from each other, the document bounds might be large, even if there are only two parts
494or if there is just one really large part.
495The <a>Diagram.documentBounds</a> value is independent of the <a>Diagram.viewportBounds</a>.
496The former only depends on the bounds of the parts; the latter only depends on the size of the canvas and the diagram's
497position and scale.
498</p>
499<p>
500<a>Diagram.computeBounds</a>, which is responsible for the bounds computation,
501also adds the <a>Diagram.padding</a> Margin so that no Parts appear directly up against the edge of the diagram when scrolled to that side.
502You may want to keep some parts, particularly background decorations, from being included in the document bounds computation.
503Just set <a>Part.isInDocumentBounds</a> to false for such parts.
504</p>
505<p>
506The diagram does not compute a new value for <a>Diagram.documentBounds</a> immediately upon any change to any part
507or the addition or removal of a part.
508Thus the <a>Diagram.documentBounds</a> property value may not be up-to-date until after a transaction completes.
509</p>
510<p>
511The relative sizes of the <a>Diagram.documentBounds</a> and <a>Diagram.viewportBounds</a> control whether or not
512scrollbars are needed.
513You can set <a>Diagram.hasHorizontalScrollbar</a> and/or <a>Diagram.hasVerticalScrollbar</a> to false to
514make sure no scrollbar appears even when needed.
515</p>
516<p>
517If you do not want the <a>Diagram.documentBounds</a> to always reflect the sizes and locations of all of the nodes and links,
518you can set the <a>Diagram.fixedBounds</a> property.
519However if there are any nodes that are located beyond the fixedBounds, the user may be unable to scroll the diagram to see them.
520</p>
521<p>
522If you want to be notified whenever the document bounds changes, you can register a "DocumentBoundsChanged" <a>DiagramEvent</a> listener.
523</p>
524
525<h2 id="ViewportBounds">Viewport bounds</h2>
526<p>
527The <a>Diagram.viewportBounds</a> always has x and y values that are given by the <a>Diagram.position</a>.
528It always has width and height values that are computed from the canvas size and the <a>Diagram.scale</a>.
529</p>
530<p>
531Users can scroll the document contents using keyboard commands, scrollbars or panning.
532Programmatically, you can scroll using several means:
533</p>
534<ul>
<li>setting <a>Diagram.position</a></li>
<li>calling <a>Diagram.scrollToRect</a> or <a>Diagram.centerRect</a> or <a>Diagram.scroll</a></li>
<li>calling <a>Diagram.alignDocument</a></li>
<li>setting <a>Diagram.contentAlignment</a></li>
<li>calling <a>CommandHandler.scrollToPart</a></li>
540</ul>
541<p>
542Furthermore, scrolling may happen automatically as nodes or links are added to or removed from or change visibility in the diagram.
543Also, zooming will typically result in scrolling as well.
544</p>
545<p>
546When scrolling, the <a>Diagram.position</a> normally will be limited to the range specified by the <a>Diagram.documentBounds</a>.
547The short or "line" scrolling distance is controlled by <a>Diagram.scrollHorizontalLineChange</a> and <a>Diagram.scrollVerticalLineChange</a>.
548The long or "page" scrolling distance is controlled by the size of the viewport.
549If you want to control the precise values that the <a>Diagram.position</a> may have,
550you can specify a <a>Diagram.positionComputation</a> function. See the example below.
551</p>
552<p>
553User can zoom in or out using keyboard commands, mouse wheel, or pinching.
554Programmatically, you can zoom using several means:
555</p>
556<ul>
<li>setting <a>Diagram.scale</a></li>
<li>calling <a>Diagram.zoomToFit</a> or <a>Diagram.zoomToRect</a></li>
<li>setting <a>Diagram.autoScale</a></li>
<li>calling <a>CommandHandler.decreaseZoom</a>, <a>CommandHandler.increaseZoom</a>, <a>CommandHandler.resetZoom</a>, or
    <a>CommandHandler.zoomToFit</a></li>
562</ul>
563<p>
564When zooming in or out, the <a>Diagram.scale</a> normally will be limited to the range given by <a>Diagram.minScale</a> and <a>Diagram.maxScale</a>.
565If you want to control the precise values that the <a>Diagram.scale</a> may have,
566you can specify a <a>Diagram.scaleComputation</a> function. See the example below.
567</p>
568<p>
569If you want to be notified whenever the viewport bounds changes, you can register a "ViewportBoundsChanged" <a>DiagramEvent</a> listener.
570</p>
571
572<h2 id="ScrollMargin">Scroll margin</h2>
573<p>
<a>Diagram.scrollMargin</a> allows the user to scroll into empty space at the edges of the viewport,
when the document bounds (including its <a>Diagram.padding</a> margin) is greater than the viewport bounds.
This can be useful when users need extra space at the edges of a Diagram,
for instance to have an area to create new nodes with the <a>ClickCreatingTool</a>.
578</p>
579<p>
<a>Diagram.padding</a> is added as if part of the document bounds,
whereas <code>scrollMargin</code> makes sure you can scroll to empty space beyond the document bounds.
Because of this, <code>scrollMargin</code> does not create additional scrollable empty space if none
is needed to scroll the margin distance beyond, such as when the document bounds are very small in the viewport.
584</p>
585<p>
Below is a Diagram with <code>scrollMargin</code> set to <code>100</code>.
As you drag to the boundary, you will find the additional space created by the margin.
588</p>
589
590<pre class="lang-js" id="scrollmargin" style="display: none;"><code>
diagram.grid = $(go.Panel, "Grid",
        $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5 }),
        $(go.Shape, "LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }),
        $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5 }),
        $(go.Shape, "LineV", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 })
      );
diagram.scrollMargin = 100;
598
599diagram.nodeTemplate =
$(go.Node, "Auto",
  $(go.Shape, "RoundedRectangle",
    new go.Binding("fill", "color")),
  $(go.TextBlock,
    { margin: 3 },
    new go.Binding("text", "key"))
);
607
608var nodes = [];
609for (var i = 0; i < 99; i++) {
nodes.push({ key: "Alpha", color: "lightblue" });
611}
612diagram.model = new go.GraphLinksModel(nodes,[]);
613
614</code></pre>
615<script>goCode("scrollmargin", 400, 400)</script>
616
617
618<h2 id="ScrollingModes">Scrolling modes</h2>
619<p>
<a>Diagram.scrollMode</a> allows the user to either scroll to document bound borders with <a>Diagram,DocumentScroll</a> (the default),
or scroll endlessly with <a>Diagram,InfiniteScroll</a>.
622</p>
623<p>
<a>Diagram.positionComputation</a> and <a>Diagram.scaleComputation</a> allow you to determine what positions
and scales are acceptable to be scrolled to.
For instance, you could allow only integer position values, or only allow scaling to the values of 0.5, 1, or 2.
627</p>
628<p>
The <a href="../samples/scrollModes.html">Scroll Modes sample</a> displays all the code for the example below,
which lets you toggle these three properties.
631</p>
632
633<pre class="lang-js" id="scrollmodes" style="display: none;"><code>
  diagram.minScale = 0.25;
  diagram.grid = $(go.Panel, "Grid",
          $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5 }),
          $(go.Shape, "LineH", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 }),
          $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5 }),
          $(go.Shape, "LineV", { stroke: "darkslategray", strokeWidth: 1.5, interval: 10 })
        );
  diagram.toolManager.draggingTool.isGridSnapEnabled = true;
  diagram.undoManager.isEnabled = true;
643
644
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle",
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 3 },
      new go.Binding("text", "key"))
  );
653
// create the model data that will be represented by Nodes and Links
diagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta",  color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);
668
// make accessible to the HTML buttons
myDiagram2 = diagram;
671</code></pre>
672<script>goCode("scrollmodes", 400, 400)</script>
673<p>
<label><input id="infscroll" type="checkbox" />Enable Infinite Scrolling, setting <a>Diagram.scrollMode</a></label>
675</p>
676<pre class="lang-js"><code>
myDiagram.scrollMode = checked ? go.Diagram.InfiniteScroll : go.Diagram.DocumentScroll;
678</code></pre>
679
680<p>
<label><input id="poscomp" type="checkbox" />Enable <a>Diagram.positionComputation</a> function</label>
682</p>
683<pre class="lang-js"><code>
function positionfunc(diagram, pos) {
  var size = diagram.grid.gridCellSize;
  return new go.Point(
    Math.round(pos.x / size.width) * size.width,
    Math.round(pos.y / size.height) * size.height);
}
690</code></pre>
691
692<p>
<label><input id="scalecomp" type="checkbox" />Enable <a>Diagram.scaleComputation</a> function</label>
694</p>
695<pre class="lang-js"><code>
function scalefunc(diagram, scale) {
  var oldscale = diagram.scale;
  if (scale > oldscale) {
    return oldscale + 0.25;
  } else if (scale < oldscale) {
    return oldscale - 0.25;
  }
  return oldscale;
}
705</code></pre>
706<script type="text/javascript">
function positionfunc(diagram, pos) {
  var size = diagram.grid.gridCellSize;
  return new go.Point(
    Math.round(pos.x / size.width) * size.width,
    Math.round(pos.y / size.height) * size.height);
}
713
function scalefunc(diagram, scale) {
  var oldscale = diagram.scale;
  if (scale > oldscale) {
    return oldscale + 0.25;
  } else if (scale < oldscale) {
    return oldscale - 0.25;
  }
  return oldscale;
}
723
var infscroll = document.getElementById('infscroll');
infscroll.addEventListener('change', function(e) {
  myDiagram2.commit(function(d) { d.scrollMode = infscroll.checked ? go.Diagram.InfiniteScroll : go.Diagram.DocumentScroll; });
});
728
var poscomp = document.getElementById('poscomp');
poscomp.addEventListener('change', function(e) {
  myDiagram2.commit(function(d) { d.positionComputation = poscomp.checked ? positionfunc : null; });
});
733
var scalecomp = document.getElementById('scalecomp');
scalecomp.addEventListener('change', function(e) {
  myDiagram2.commit(function(d) { d.scaleComputation = scalecomp.checked ? scalefunc : null; });
});
738</script>
739
740<h2 id="PanelCoordinates">Panel coordinates</h2>
741<p>
742A <a>GraphObject</a> that is not a <a>Part</a> but is an element of a <a>Panel</a> has measurements
743that are in panel coordinates, not in document coordinates.
744That means that <a>GraphObject.position</a>, <a>GraphObject.actualBounds</a>, <a>GraphObject.maxSize</a>,
745<a>GraphObject.minSize</a>, <a>GraphObject.measuredBounds</a>, <a>GraphObject.margin</a>, and
746<a>RowColumnDefinition</a> properties apply to all elements of a panel using the same coordinate system.
747</p>
748<p>
749Some <a>GraphObject</a> properties use units that have values before they are transformed for use by
750the containing <a>Panel</a>'s coordinate system.
751In particular, <a>GraphObject.desiredSize</a> (which means <a>GraphObject.width</a> and <a>GraphObject.height</a>),
752<a>GraphObject.naturalBounds</a>, <a>Shape.geometry</a>, and <a>Shape.strokeWidth</a> are in "local" coordinates,
753before the object is scaled and rotated by the value of <a>GraphObject.scale</a> and <a>GraphObject.angle</a>.
754</p>
755<p>
756<a>GraphObject.actualBounds</a> will tell you the position and size of an element within its panel.
757If you want to get the document position of some object that is within a Node,
758call <a>GraphObject.getDocumentPoint</a>.
759</p>
760<p>
761For examples of the sizes of elements in a panel, see <a href="sizing.html">Sizing GraphObjects</a>.
762</p>
763
764<h3 id="NestedPanelCoordinates">Nested Panel coordinates</h3>
765<pre class="lang-js" id="nestedpanelcoords" style="display: none;"><code>
// read-only to avoid accidentally moving any Part in document coordinates
diagram.isReadOnly = true;
diagram.allowSelect = false;
diagram.initialPosition = new go.Point(-5, -5);
diagram.initialScale = 0.45;
771
// data objects for data tables.
function InfoBox(key,gro,loc) {
  this.category = "info";
  this.key = key;
  this.location = go.Point.parse(loc);
  this.gro = gro;
}
779
// alignment properties for TextBlocks in data tables.
function AlignmentObject(column,columnSpan) {
  this.column = column;
  this.columnSpan = columnSpan;
  this.verticalAlignment = go.Spot.Center;
  this.textAlign = "center";
  this.alignment = go.Spot.Center;
  this.height = 24;
}
789
// creates functions which have limited precision return values.
function prec(conv) { return function (g) { return conv(g).toPrecision(3) }}
792
// generates cells in data tables
function dataBlock(conv, alo1, alo2) {
  return $(go.TextBlock, "", new go.Binding("text", "gro", prec(conv)), new AlignmentObject(alo1, alo2));
}
797
var nodeTemplates = new go.Map();
799
// Template for data tables
nodeTemplates.add("info",
  $(go.Node, "Auto",
    // Allows location to be set in data object
    new go.Binding("location"), { padding: 0, scale: 2 },
    $(go.Panel, "Table",
      {name: "table",
        defaultRowSeparatorStroke: "black", defaultColumnSeparatorStroke: "black",
        defaultAlignment: go.Spot.Center, background: "white"
      },
      // sets a different look for the defining row.
      $(go.RowColumnDefinition,
        {row: 0,
          background: "lightgray", separatorStrokeWidth: 0,
          separatorPadding: 0, coversSeparators: true,
          height: 24
        }),
      // sets a different look for the defining column.
      $(go.RowColumnDefinition,
        {column: 0,
          coversSeparators: true, separatorStrokeWidth: 0,
          separatorPadding: 0, background: "lightgray",
          width: 45
        }),
      // necessary to keep weirdness involving the columnSpan of certain elements in the table
      // from causing separators to go through elements.
      $(go.RowColumnDefinition, {column: 1, width: 28}),
      $(go.RowColumnDefinition, {column: 2, separatorStroke: "transparent", width: 28}),
      $(go.RowColumnDefinition, {column: 3, width: 28}),
      $(go.RowColumnDefinition, {column: 4, separatorStroke: "transparent", width: 28}),
      // defining row
      $(go.Panel, "TableRow", {row: 0},
        $(go.TextBlock, "Container", new AlignmentObject(1,2)),
        $(go.TextBlock, "Diagram", new AlignmentObject(3,2))),
834
      // angle row
      $(go.Panel, "TableRow", {row: 1},
        $(go.TextBlock, "angle", {column: 0}),
        // container angle
        dataBlock(function (g) { return g.angle }, 1, 2),
        // document angle
        dataBlock(function (g) { return g.getDocumentAngle() }, 3, 2)),
842
      // scale row
      $(go.Panel, "TableRow", {row: 2},
        $(go.TextBlock, "scale", {column: 0}),
        // container scale
        dataBlock(function (g) { return g.scale }, 1, 2),
        // document scale
        dataBlock(function (g) { return g.getDocumentScale() }, 3, 2)),
850
      // position row
      $(go.Panel, "TableRow", {row: 3},
853
        $(go.TextBlock, "X Y", {column: 0}),
855
        // container x and y values
        dataBlock(function (g) { return g.actualBounds.x }, 1, 1),
        dataBlock(function (g) { return g.actualBounds.y }, 2, 1),
859
        // document x and y values
        dataBlock(function (g) { return g.getDocumentBounds().x }, 3, 1),
        dataBlock(function (g) { return g.getDocumentBounds().y }, 4, 1)),
863
      // dimension row
      $(go.Panel, "TableRow", {row: 4},
        $(go.TextBlock, "size", {column: 0}),
867
        // container width and height
        dataBlock(function (g) { return g.actualBounds.width }, 1, 1),
        dataBlock(function (g) { return g.actualBounds.height }, 2, 1),
871
        // document width and height
        dataBlock(function (g) { return g.getDocumentBounds().width }, 3, 1),
        dataBlock(function (g) { return g.getDocumentBounds().width }, 4, 1)))));
875
876
// data object for labels on data tables
function WordBubble(key,width,loc,desc,color) {
  this.key = key; this.category = "words"; this.width = width;
  this.desc = desc; this.location = go.Point.parse(loc); this.color = color;
}
882
// template for wordbubble objects
nodeTemplates.add("words",
  $(go.Node, "Auto",
    new go.Binding("location"),
    $(go.TextBlock, "",
      new go.Binding("text", "desc"),
      new go.Binding("stroke","color"),
      new go.Binding("width"),
      { textAlign: "left", font: "24pt sans-serif" })));
892
// creating the main node's template, adding the nested Panels to it, and adding it to the node template map.
let vertPanel = posPanel = spotPanel = vertLabel = topLabel = {};
var BigNode =
$(go.Node, "Auto",
  {
    location: new go.Point(300,0),
  },
  vertPanel =
  $(go.Panel, "Vertical",
    {portId: "vertPanel",
      angle: 165, scale: 1.5,
      background: "lightblue",
      padding: 20
    },
    vertLabel =
    $(go.TextBlock, "Vertical Panel", {font: "bold 12pt sans-serif"}),
    posPanel =
    $(go.Panel, "Position",
      {portId: "posPanel",
        angle: 120, scale: 0.8, padding: 50,
        background: go.Brush.mix("brown", "lightyellow", 0.4)},
      $(go.Panel, "Auto", { position: new go.Point(25,0), desiredSize: new go.Size(60,90)},
        $(go.Shape, "Triangle", { fill: "transparent" }),
        $(go.TextBlock, "This Side Up")),
      $(go.TextBlock, "Position Panel", { position: new go.Point(0,100), font: "bold 12pt sans-serif" }),
     ),
    spotPanel =
    $(go.Panel, "Spot",
      {portId: "spotPanel",
        angle: 30, scale: 1.5,
        background: "lightgreen" },
      $(go.Shape, "RoundedRectangle", {strokeWidth: 0, desiredSize: new go.Size(50,100), fill: "transparent"}),
      $(go.TextBlock, "Spot Panel",
        {
          font: "bold 12pt sans-serif",
          alignment: go.Spot.Center,
        }
       ),
      $(go.TextBlock, "Top",
        {
          margin: 5,
          font: "bold 12pt sans-serif",
          alignment: go.Spot.Top,
        }
       ),
      bottomLabel =
      $(go.TextBlock, "Bottom",
        {portId: "bottomLabel",
          font: "bold 12pt sans-serif",
          alignment: go.Spot.Bottom
        }))));
nodeTemplates.add("", BigNode);
945
diagram.nodeTemplateMap = nodeTemplates;
947
diagram.linkTemplate =
  $(go.Link,
    new go.Binding("fromNode", "from", diagram.findNodeForKey),
    new go.Binding("to"), new go.Binding("toPortId"),
    $(go.Shape, {strokeWidth: 5}),
    $(go.Shape, {scale: 3,toArrow: "Standard"}));
954
diagram.model = new go.GraphLinksModel(
[
  {key: "bn"},
  // creating infoboxes
  new InfoBox(0,vertPanel,"-20 30"),
  new InfoBox(1,posPanel,"20 470"),
  new InfoBox(2,spotPanel,"900 500"),
  new InfoBox(3,bottomLabel,"900 180"),
963
  // creating wordbubbles
  new WordBubble(4,250,"60 0","Vertical Panel","blue"),
  new WordBubble(5,250,"60 440","Position Panel","red"),
  new WordBubble(6,250,"980 470","Spot Panel","green"),
  new WordBubble(7,275,"960 105","TextBlock aligned at Spot.Bottom","black")
],
[
  // linking each infobox to an item on the main node.
  {from: 0, to: "bn", toPortId: "vertPanel"},
  {from: 1, to: "bn", toPortId: "posPanel"},
  {from: 2, to: "bn", toPortId: "spotPanel"},
  {from: 3, to: "bn", toPortId: "bottomLabel"}
]);
977</code></pre>
978<p>
The transformations of each element in a <a>Panel</a> are compounded by that panel's transformations.
980</p>
981<script>goCode("nestedpanelcoords", 600, 400)</script>
982<p>
The <a>TextBlock</a> that is "Bottom" has the default <a>GraphObject.angle</a> of zero, so that the text is drawn upright.
But that TextBlock is an element in the green "Spot" <a>Panel</a> whose <a>GraphObject.angle</a> to 30,
so it and its text should appear somewhat tilted.
However the blue "Vertical" Panel itself has an <a>GraphObject.angle</a> of 165.
Because each Panel has its own coordinate system and because transformations on nested elements are compounded,
the effective angle for the green Panel is 195 degrees, the sum of those individual angles (30 + 165), which is nearly upside down.
989</p>
990<p>
The <a>GraphObject.scale</a> property also affects how an object is sized in its container Panel.
The brown "Position" <a>Panel</a> has a scale of 0.8 relative to its container.
But because the "Vertical" Panel has a scale of 1.5, its effective scale is 1.2 overall,
the product of those individual scales (0.8 x 1.5).
995</p>
    </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">
1006
      <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>
1069
            </ul>
          </li>
        </ul>
1073
1074
    <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>
1080</footer>  </body>
1081
1082<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
1083<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'
  });
}
1094
// 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");
});
1104</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>
1120</html>