UNPKG

gojs/intro/grids.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 Grid Patterns -- 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>Grid Patterns</h1>
134<p>
135It is common to want to display a grid of lines drawn at regular intervals.
136You may also want to force dragged parts to be aligned on grid points, and to resize parts to be multiples of the grid cell size.
137</p>
138<p>
139Grids are implemented using a type of <a>Panel</a>, <a>Panel,Grid</a>.
140Grid Panels, like most other types of Panels, can be used within <a>Node</a>s or any other kind of <a>Part</a>.
141However when they are used as the <a>Diagram.grid</a>, they are effectively infinite in extent.
142</p>
143<p>
144Unlike in other kinds of <a>Panel</a>s, Grid Panel elements must be <a>Shape</a>s that are only used to control how the grid lines or grid bars are drawn.
145</p>
146<p>
147See samples that make use of grids in the <a href="../samples/index.html#grid">samples index</a>.
148</p>
149
150<h2 id="DefaultGrid">Default Grid</h2>
151<p>
152To display a grid pattern in the background of the diagram, you can just make the <a>Diagram.grid</a> visible:
153</p>
154<pre class="lang-js" id="defaultGrid"><code>
diagram.grid.visible = true;
156
diagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
167</code></pre>
168<script>goCode("defaultGrid", 600, 150)</script>
169
170<h2 id="GridSnapping">Grid Snapping</h2>
171<p>
172The <a>DraggingTool</a> and <a>ResizingTool</a> can change their behavior based on the background grid pattern,
173if you set the <a>DraggingTool.isGridSnapEnabled</a> and/or <a>ResizingTool.isGridSnapEnabled</a> properties to true.
174</p>
175<p>
Setting <a>DraggingTool.isGridSnapEnabled</a> to true will not affect disconnected Links,
but these can snap if you define a custom <a>Part.dragComputation</a> to do so on the Link template.
178</p>
179<pre class="lang-js" id="gridSnapping"><code>
diagram.grid.visible = true;
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
diagram.toolManager.resizingTool.isGridSnapEnabled = true;
183
184
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
196</code></pre>
197<script>goCode("gridSnapping", 600, 150)</script>
198
199<h2 id="SimpleGridCustomization">Simple Grid Customization</h2>
200<p>
201You can change the size of the grid cell by setting <a>Panel.gridCellSize</a>:
202</p>
203<pre class="lang-js" id="biggerGrid"><code>
diagram.grid.visible = true;
diagram.grid.gridCellSize = new go.Size(30, 20);
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
diagram.toolManager.resizingTool.isGridSnapEnabled = true;
208
209
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
221</code></pre>
222<script>goCode("biggerGrid", 600, 150)</script>
223
224<p>
225The cell size used when snapping the locations of Parts during a drag need not be exactly
226the same as the background grid's cell size.
227The value of <a>DraggingTool.gridSnapCellSize</a> takes precedence over the <a>Panel.gridCellSize</a>.
228Note that if <a>DraggingTool.gridSnapCellSize</a> is set but <a>ResizingTool.cellSize</a> is not,
229Parts will use the DraggingTool.gridSnapCellSize value when resizing.
230</p>
231<pre class="lang-js" id="gridSnapping2"><code>
diagram.grid.visible = true;
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
diagram.toolManager.resizingTool.isGridSnapEnabled = true;
235
// snap to every other point both vertically and horizontally
// (the default background grid has a cell size of 10x10)
diagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(20, 20);
239
240
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
252</code></pre>
253<script>goCode("gridSnapping2", 600, 150)</script>
254
255<h2 id="CustomGrids">Custom Grids</h2>
256<p>
257Grid patterns are implemented by the <a>Panel</a> class when its <a>Panel.type</a> is <a>Panel,Grid</a>.
258The elements of a Grid Panel must be <a>Shape</a>s whose <a>Shape.figure</a> is one of a small set of known kinds of figures.
259The only figures it can accept are: "LineH", "LineV", "BarH", and "BarV".
260The two "Line" figures result in stroked lines separating the grid cells;
261the two "Bar" figures result in filled rectangles in the grid cells.
262</p>
263<p>
264Here is a simple grid consisting of blue horizontal lines and green vertical lines:
265</p>
266<pre class="lang-js" id="customBackground"><code>
diagram.grid =
  $(go.Panel, go.Panel.Grid,  // or "Grid"
    { gridCellSize: new go.Size(25, 25) },
    $(go.Shape, "LineH", { stroke: "blue" }),
    $(go.Shape, "LineV", { stroke: "green" })
  );
273</code></pre>
274<script>goCode("customBackground", 600, 150)</script>
275
276<p>
277The <a>Shape.interval</a> property is also used by a Grid Panel to determine how frequently a line should be drawn.
278The value should be a positive integer specifying how many cells there are between drawings of this particular line.
279So if you wanted darker blue and darker green lines every five cells:
280</p>
281<pre class="lang-js" id="customBackground2"><code>
diagram.grid =
  $(go.Panel, "Grid",
    { gridCellSize: new go.Size(10, 10) },
    $(go.Shape, "LineH", { stroke: "lightblue" }),
    $(go.Shape, "LineV", { stroke: "lightgreen" }),
    $(go.Shape, "LineH", { stroke: "blue", interval: 5 }),
    $(go.Shape, "LineV", { stroke: "green", interval: 5 })
    );
290
291
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
303</code></pre>
304<script>goCode("customBackground2", 600, 150)</script>
305<p>
306Note that the Shapes are drawn in the order in which they appear in the Panel,
307so you can see that the dark blue horizontal lines are drawn in front of the light green vertical lines,
308and that the dark green vertical line crosses in front of the dark blue horizontal lines.
309</p>
310<p>
311Here is the definition of the predefined <a>Diagram.grid</a>:
312</p>
<pre class="lang-js" id="standardGrid"><code>
diagram.grid =
  $(go.Panel, "Grid",
    {
      name: "GRID",
      visible: false,
      gridCellSize: new go.Size(10, 10),
      gridOrigin: new go.Point(0, 0)
    },
    $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5, interval: 1 }),
    $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 5 }),
    $(go.Shape, "LineH", { stroke: "gray", strokeWidth: 1.0, interval: 10 }),
    $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5, interval: 1 }),
    $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 5 }),
    $(go.Shape, "LineV", { stroke: "gray", strokeWidth: 1.0, interval: 10 })
  );
329
diagram.grid.visible = true;  // so that this example shows the standard grid
diagram.div.style.background = "white";
332</code></pre>
333<script>goCode("standardGrid", 600, 150)</script>
334<p>
335You can get a green-bar pattern by using the "BarH" figure.  Note the use of <a>Shape.fill</a>
336instead of <a>Shape.stroke</a> and explicitly setting the <a>GraphObject.height</a>:
337</p>
338<pre class="lang-js" id="customBackground3"><code>
diagram.grid =
  $(go.Panel, "Grid",
    { gridCellSize: new go.Size(50, 50) },
    $(go.Shape, "BarH", { fill: "lightgreen", interval: 2, height: 50 })
    );
344
345
diagram.nodeTemplate =
  $(go.Node, "Auto",
    {
      dragComputation: function(node, pt, gridpt) {
        pt.y = Math.round(pt.y/100)*100;
        return pt;
      }
    },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
362</code></pre>
363<script>goCode("customBackground3", 600, 350)</script>
364<p>
365This example also demonstrates how one can use the <a>Part.dragComputation</a> property to customize where
366the user can drag the node.  In this case the <a>Part.location</a>.y is limited to be multiples of 100,
367corresponding to the rows of cells filled by the green bars.
368</p>
369<p>
370To get a tablecloth effect, one can use both vertical and horizontal bars with a translucent color:
371</p>
372<pre class="lang-js" id="customBackground4"><code>
diagram.grid =
  $(go.Panel, "Grid",
    { gridCellSize: new go.Size(100, 100) },
    $(go.Shape, "BarV", { fill: "rgba(255,0,0,0.1)", width: 50 }),
    $(go.Shape, "BarH", { fill: "rgba(255,0,0,0.1)", height: 50 })
    );
379
diagram.toolManager.draggingTool.isGridSnapEnabled = true;
381
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 50, height: 50 },
    $(go.Shape, "Rectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5},
      new go.Binding("text", "key"))
  );
var nodeDataArray = [
  { key: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray);
393</code></pre>
394<script>goCode("customBackground4", 600, 350)</script>
395<p>
396This example limits dragging of all nodes by setting <a>DraggingTool.isGridSnapEnabled</a> to true.
397</p>
398<p>
399Here is an example of using a "Grid" <a>Panel</a> as a regular data bound element in a <a>Node</a>:
400</p>
401<pre class="lang-js" id="nodeGrid"><code>
402
diagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true, resizeObjectName: "GRID" },
    $(go.Shape, "Rectangle", { fill: "transparent" }),
    $(go.Panel, "Grid",
      { name: "GRID", desiredSize: new go.Size(100, 100), gridCellSize: new go.Size(20, 20) },
      new go.Binding("desiredSize", "size", go.Size.parse).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"))
    ));
416
diagram.model = new go.GraphLinksModel([
  { key: "Alpha", cell: "25 25", stroke: "lightgreen" },
  { key: "Beta", size: "150 75", cell: "15 30" }
]);
421</code></pre>
422<script>goCode("nodeGrid", 600, 350)</script>
423
424<h2 id="OtherConsiderations">Other Considerations</h2>
425<p>
A Grid Panel should have a non-null <code>background</code> if it needs to be pickable.
One cannot set or bind the <a>Panel.itemArray</a> of a Grid Panel.
428</p>
429<p>
Events on the Shapes will be ignored.
Shapes in a Grid Panel must not be scaled or rotated.
432</p>
433
    </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">
444
      <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>
507
            </ul>
          </li>
        </ul>
511
512
    <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>
518</footer>  </body>
519
520<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
521<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'
  });
}
532
// 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");
});
542</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>
558</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 Grid Patterns -- 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>`