UNPKG

28.8 kBHTMLView Raw
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 Introduction -- 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 &amp; 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>Introduction to GoJS Diagramming Components</h1>
137
138 <p>
139 <b>GoJS</b> is a JavaScript library that lets you easily create interactive diagrams in modern web browsers.
140 <b>GoJS</b> supports graphical templates and data-binding of graphical object properties to model data.
141 You only need to save and restore the model, consisting of simple JavaScript objects holding
142 whatever properties your app needs.
143 Many predefined tools and commands implement the standard behaviors that most diagrams need.
144 Customization of appearance and behavior is mostly a matter of setting properties.
145 </p>
146
147 <h2 id="SimpleGoJSDiagram">A Simple GoJS Diagram</h2>
148 <p>
149 The following code defines a node template and model data, which produces a small diagram with a handful of nodes and links.
150 </p>
151
152 <pre class="lang-js" id="minimal"><code>
153 // For conciseness. See the "Building Parts" intro page for more
154 var $ = go.GraphObject.make;
155
156 // the node template describes how each Node should be constructed
157 diagram.nodeTemplate =
158 $(go.Node, "Auto", // the Shape automatically fits around the TextBlock
159 $(go.Shape, "RoundedRectangle", // use this kind of figure for the Shape
160 // bind Shape.fill to Node.data.color
161 new go.Binding("fill", "color")),
162 $(go.TextBlock,
163 { margin: 3 }, // some room around the text
164 // bind TextBlock.text to Node.data.key
165 new go.Binding("text", "key"))
166 );
167
168 // the Model holds only the essential information describing the diagram
169 diagram.model = new go.GraphLinksModel(
170 [ // a JavaScript Array of JavaScript objects, one per node;
171 // the "color" property is added specifically for this app
172 { key: "Alpha", color: "lightblue" },
173 { key: "Beta", color: "orange" },
174 { key: "Gamma", color: "lightgreen" },
175 { key: "Delta", color: "pink" }
176 ],
177 [ // a JavaScript Array of JavaScript objects, one per link
178 { from: "Alpha", to: "Beta" },
179 { from: "Alpha", to: "Gamma" },
180 { from: "Beta", to: "Beta" },
181 { from: "Gamma", to: "Delta" },
182 { from: "Delta", to: "Alpha" }
183 ]);
184
185 // enable Ctrl-Z to undo and Ctrl-Y to redo
186 diagram.undoManager.isEnabled = true;
187 </code></pre>
188 <p>This creates the following Diagram:</p>
189 <script>goCode("minimal", 400, 150)</script>
190 <p>
191 You can interact with this diagram in many ways:
192 </p>
193 <ul>
194 <li>You can select a part by clicking on it.
195 Selected nodes are highlighted with an <a>Adornment</a> that is a blue rectangle surrounding the node.
196 Selected links are highlighted with a blue line following the path of the link.</li>
197 <li>Multiple parts may be selected at once.
198 Hold the Shift key down when clicking to add to the selection.
199 Hold the Control key down when clicking to toggle whether that part is selected.</li>
200 <li>Another way to multi-select is to mouse-down at a point in the background (not on a part), wait a moment, and then drag a box.
201 Parts that are in the box when the mouse-up occurs are selected.
202 The Shift and Control modifiers work then as well.</li>
203 <li>Ctrl-A selects all parts in the diagram.</li>
204 <li>Move one or more nodes by selecting them and dragging.</li>
205 <li>Copying selected parts works with either copy/paste (Ctrl-C/Ctrl-V) or with Ctrl-mouse-drag.</li>
206 <li>Delete selected parts with the Delete key.</li>
207 <li>If scrollbars are visible or if the whole collection of parts is smaller than the viewable area of the diagram (the "viewport"),
208 you can pan the diagram with a mouse-down in the background (not on a part) if you drag without waiting.</li>
209 <li>Use the mouse wheel to scroll up and down and Shift-mouse-wheel to scroll left and right.
210 Ctrl-mouse-wheel zooms in and out.</li>
211 </ul>
212 <p>
213 You can also pan, pinch zoom, select, copy, move, delete, undo, and redo with your fingers on a touch device.
214 Most commands that can be invoked from a keyboard can be invoked from the default context menu that you get by pressing your finger and holding it motionless for a moment.
215 </p>
216
217 <p>
218 What is unique about all of the examples in the documentation is that they are all "live" -- there are no screenshots!
219 They are actual <a>Diagram</a>s implemented by the source code shown.
220 You can interact with them -- some even display animation.
221 </p>
222
223 <p>
224 If you'd like to see more examples of what <b>GoJS</b> can do, see the <a href="../samples/index.html" target="samples">GoJS Samples directory</a>.
225 To make it easier to search the JavaScript code and documentation or to experiment by modifying the samples,
226 you can install the <b>GoJS</b> kit in various manners:
227 <ul>
228 <li>Download a ZIP file from <a href="../download.html">Download</a>.</li>
229 <li>Download us from <a href="https://github.com/NorthwoodsSoftware/GoJS">GoJS on GitHub</a>.</li>
230 <li>Install GoJS using <code>npm install gojs</code>.</li>
231 </ul>
232 </p>
233
234 <h2 id="GoJSConcepts">GoJS Concepts</h2>
235 <p>
236 <a>Diagram</a>s consist of <a>Part</a>s: <a>Node</a>s that may be connected by <a>Link</a>s and that may be grouped together into <a>Group</a>s.
237 All of these parts are gathered together in <a>Layer</a>s and are arranged by <a>Layout</a>s.
238 </p>
239
240 <p>
241 Each diagram has a <a>Model</a> that holds and interprets your application data to determine node-to-node link relationships and
242 group-member relationships.
243 Most parts are data-bound to your application data.
244 The diagram automatically creates a <a>Node</a> or a <a>Group</a> for each data item in the model's <a>Model.nodeDataArray</a>
245 and a <a>Link</a> for each data item in the model's <a>GraphLinksModel.linkDataArray</a>.
246 You can add whatever properties you need to each data object, but there are just a few properties that each kind of model expects.
247 </p>
248
249 <p>
250 Each <a>Node</a> or <a>Link</a> is normally defined by a template that declares its appearance and behavior.
251 Each template consists of <a>Panel</a>s of <a>GraphObject</a>s such as <a>TextBlock</a>s or <a>Shape</a>s.
252 There are default templates for all parts, but almost all applications will specify custom templates
253 in order to achieve the desired appearance and behavior.
254 Data bindings of <a>GraphObject</a> properties to model data properties make each Node or Link unique for the data.
255 </p>
256
257 <p>
258 The nodes may be positioned manually (interactively or programmatically) or may be arranged automatically by the
259 <a>Diagram.layout</a> and by each <a>Group.layout</a>.
260 Nodes are positioned either by their top-left corner point (<a>GraphObject.position</a>) or by a programmer-defined
261 spot in the node (<a>Part.location</a> and <a>Part.locationSpot</a>).
262 </p>
263
264 <p>
265 <a>Tool</a>s handle mouse and keyboard events. Each diagram has a number of tools that perform interactive tasks such as
266 selecting parts or dragging them or drawing a new link between two nodes. The <a>ToolManager</a> determines
267 which tool should be running, depending on the mouse events and current circumstances.
268 </p>
269
270 <p>
271 Each diagram also has a <a>CommandHandler</a> that implements various commands, such as Delete or Copy.
272 The CommandHandler interprets keyboard events, such as control-Z, when the ToolManager is running.
273 </p>
274
275 <p>
276 The diagram provides the ability to scroll the parts of the diagram and to zoom in or out.
277 The diagram also contains all of the layers, which in turn contain all of the parts (nodes and links).
278 The parts in turn are composed of possibly nested panels of text, shapes, and images.
279 This hierarchy of JavaScript objects in memory forms the "visual tree" of everything that may be drawn by the diagram.
280 </p>
281
282 <p>
283 The <a>Overview</a> class allows the user to see the whole model and to control what part of it that the diagram displays.
284 The <a>Palette</a> class holds parts that the user may drag-and-drop into a diagram.
285 </p>
286
287 <p>
288 You can select one or more parts in the diagram. The template implementation may change the appearance
289 of the node or link when it is selected. The diagram may also add <a>Adornment</a>s to indicate selection and to
290 support tools such as resizing a node or reconnecting a link.
291 Adornments are also how tooltips and context menus are implemented.
292 </p>
293
294 <p>
295 All programmatic changes to <a>Diagram</a>, <a>GraphObject</a>, <a>Model</a> or model data state should be performed
296 within a single transaction per user action, to make sure updating happens correctly and to support undo/redo.
297 All of the predefined tools and commands perform transactions, so each user action is automatically undoable
298 if the <a>UndoManager</a> is enabled.
299 <a>DiagramEvent</a>s on Diagrams, and event handlers on Diagrams and GraphObjects,
300 are all documented whether they are raised within a transaction or whether you need to conduct a transaction in order
301 to change the model or the diagram.
302 </p>
303
304
305 <h2 id="CreatingDiagram">Creating a Diagram</h2>
306 <b>GoJS</b> does not depend on any JavaScript library or framework, so you should be able to use it in any environment.
307 However it does require that the environment support modern HTML and JavaScript.
308
309 <h3 id="LoadingGoJS">Loading GoJS</h3>
310 <p>
311 Before you can execute any JavaScript code to build a Diagram, you will need to load the <b>GoJS</b> library.
312 When you include the library, the "<code>go</code>" JavaScript object will hold all of the <b>GoJS</b> types.
313 During development we recommend that you load "go-debug.js" instead of "go.js", for additional run-time error checking and debugging ability.
314 </p>
315 <p>
316 We recommend that you declare that your web page supports modern HTML:
317 </p>
318 <pre class="lang-html"><code>
319 &lt;!DOCTYPE html&gt; &lt;!-- Declare standards mode. --&gt;
320 &lt;html&gt;
321 &lt;head&gt;
322 . . .
323 &lt;!-- Include the GoJS library. --&gt;
324 &lt;script src="go-debug.js"&gt;&lt;/script&gt;</code></pre>
325 <p>
326 If you are using <a href="http://requirejs.org" target="_blank">RequireJS</a>, <b>GoJS</b> supports UMD module definitions.
327 See the <a href="../samples/require.html" target="samples">Require sample</a> for an example.
328 Furthermore modularized versions of the extension classes are now available at <code>../extensionsTS/</code>,
329 where the extension classes have been translated into TypeScript and compiled into <code>.js</code> files
330 that can be <code>import</code>ed. or <code>require</code>d.
331 </p>
332 <p>
333 In ES6 (ECMAScript 2015) or TypeScript code, just import the <code>go.js</code> library:
334 <pre class="lang-ts"><code>import * as go from "./path/to/gojs/release/go";</code></pre>
335 or, if depending on your npm environment:
336 <pre class="lang-ts"><code>import * as go from "gojs";</code></pre>
337 </p>
338 <p>
339 If you want to use ES6 modules, use <code>go-module.js</code> in the <code>../release/</code> directory.
340 The extension classes are also available as ES6 modules in the <code>../extensionsJSM/</code> directory.
341 </p>
342 <pre class="lang-bash"><code>
343import * as go from "./path/to/gojs/release/go-module.js";
344import { DoubleTreeLayout } from "./path/to/gojs/extensionsJSM/DoubleTreeLayout.js";</code></pre>
345
346 <h3 id="HostingGoJSinaDivElement">Hosting GoJS in a Div Element</h3>
347 <p>
348 Every <a>Diagram</a> must be hosted by an HTML Div element.
349 <b>GoJS</b> will manage the contents of that Div element, but you may position and size and style the Div as you would any HTML element.
350 The diagram will add a Canvas element to that Div element that the diagram will draw in -- this is what users actually see.
351 The Canvas element is automatically sized to have the same size as the Div element.
352 </p>
353
354 <pre class="lang-html"><code>
355 &lt;body&gt;
356 . . .
357 &lt;!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
358 In this case we also add a border to help see the edges. --&gt;
359 &lt;div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"&gt;&lt;/div&gt;</code></pre>
360
361 <p>
362 Then you can create the <a>Diagram</a> in JavaScript with a reference to that Div element.
363 Build the diagram by constructing plain JavaScript objects and adding them to the diagram's model.
364 Note that all references in JavaScript code to <b>GoJS</b> types such as <a>Diagram</a> are prefixed with "<code>go.</code>".
365 </p>
366
367 <pre class="lang-html"><code>
368 &lt;!-- Create the Diagram in the DIV element using JavaScript. --&gt;
369 &lt;!-- The "go" object is the "namespace" that holds all of the GoJS types. --&gt;
370 &lt;script&gt;
371 var diagram = new go.Diagram("myDiagramDiv");
372 diagram.model = new go.GraphLinksModel(
373 [{ key: "Hello" }, // two node data, in an Array
374 { key: "World!" }],
375 [{ from: "Hello", to: "World!"}] // one link data, in an Array
376 );
377 &lt;/script&gt;</code></pre>
378
379
380 <pre id="minimal2" style="display:none;">
381 diagram.model = new go.GraphLinksModel(
382 [{ key: "Hello" }, // two node data, in an Array
383 { key: "World!" }],
384 [{ from: "Hello", to: "World!" }] // one link data, in an Array
385 );
386 </pre>
387 <script>goCode("minimal2", 400, 150)</script>
388
389 <p>
390 This completes the implementation of the "Hello World!" live diagram that you see above.
391 </p>
392
393 <h3 id="DevelopingYourDiagram">Developing your Diagram</h3>
394 <p class="box bg-danger">
395 <b>GoJS</b> outputs error or warning messages when something goes wrong.
396 When developing with <b>GoJS</b>, be sure to check your browser's developer console for information.
397 The "go-debug.js" version of the library contains extra type-checking and error-checking code, and should be used during development.
398 The "go.js" version has less error checking, but is faster as a result, and should be used in production.
399 </p>
400
401 <p>
402 Your JavaScript code should only use properties and methods that are documented in the <a href="../api/index.html" target="api">API</a>.
403 The <b>GoJS</b> libraries are "minified", so if you look at an instance of a <b>GoJS</b> class in the debugger,
404 you will see many one or two letter property names. All of those are internal names that you should not use.
405 At the current time the only one letter property names are "x" and "y" on <a>Point</a>, <a>Rect</a>, <a>Spot</a> and <a>LayoutVertex</a>.
406 The only two letter property name is <a>InputEvent.up</a>.
407 Otherwise you should not try to use any one or two letter property names on any <b>GoJS</b>-defined objects.
408 </p>
409
410 <p class="box bg-danger">
411 Do not modify the prototypes of the <b>GoJS</b> classes.<br />
412 Only use the properties and methods documented in the <a href="../api/index.html" target="api">API</a>.
413 </p>
414
415 <p>
416 You can also use <a href="https://www.typescriptlang.org/">TypeScript</a> in order to get better "compile-time" type-checking.
417 The TypeScript definition file for <b>GoJS</b> is named "go.d.ts" and is located in the same directory as the "go.js" and "go-debug.js" libraries.
418 In some editors, access to the definition file also greatly improves documentation feedback while editing TypeScript code.
419 The extension classes have also been translated into TypeScript, available at <code>../extensionsTS/</code>.
420 </p>
421
422 <p>
423 To learn about new features and bug fixes, read the <a href="https://gojs.net/latest/changelog.html" target="_blank">Change Log</a>.
424 Read about getting the latest releases at <a href="../download.html">Downloads</a>.
425 </p>
426
427 <p>
428 You can see the variety of kinds of diagrams that you can build at <a href="../samples/index.html" target="samples">GoJS Samples</a>.
429 </p>
430 <p>
431 In the next introduction page we discuss <a href="buildingObjects.html">building <b>GoJS</b> Parts and adding them into Diagrams.</a>
432 </p>
433 </div>
434 </div>
435
436 <div class="bg-nwoods-primary">
437 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
438 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
439 </section>
440 </div><footer class="bg-nwoods-primary text-white">
441 <div class="container max-w-screen-lg mx-auto px-8">
442 <div class="w-full py-6">
443
444 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
445 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
446 <li class="list-none row-span-2">
447 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
448 <ul class="list-none space-y-4 md:space-y-1 px-0">
449 <li>
450 <a href="../samples/index.html">Samples</a>
451 </li>
452 <li>
453 <a href="../learn/index.html">Learn</a>
454 </li>
455 <li>
456 <a href="../intro/index.html">Intro</a>
457 </li>
458 <li>
459 <a href="../api/index.html">API</a>
460 </li>
461 <li>
462 <a href="../changelog.html">Changelog</a>
463 </li>
464 <li>
465 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
466 </li>
467 </ul>
468 </li>
469 <li class="list-none row-span-2">
470 <h2 class="text-base font-semibold tracking-wide">Support</h2>
471 <ul class="list-none space-y-4 md:space-y-1 px-0">
472 <li>
473 <a href="https://www.nwoods.com/contact.html"
474 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
475 </li>
476 <li>
477 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
478 </li>
479 <li>
480 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
481 </li>
482 <li>
483 <a href="https://www.nwoods.com/sales/index.html"
484 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
485 </li>
486 <li>
487 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
488 </li>
489 </ul>
490 </li>
491 <li class="list-none row-span-2">
492 <h2 class="text-base font-semibold tracking-wide">Company</h2>
493 <ul class="list-none space-y-4 md:space-y-1 px-0">
494 <li>
495 <a href="https://www.nwoods.com">Northwoods</a>
496 </li>
497 <li>
498 <a href="https://www.nwoods.com/about.html">About Us</a>
499 </li>
500 <li>
501 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
502 </li>
503 <li>
504 <a href="https://twitter.com/northwoodsgo">Twitter</a>
505 </li>
506
507 </ul>
508 </li>
509 </ul>
510
511
512 <p class="text-sm text-gray-100 md:mb-6">
513 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
514 </p>
515 </div>
516 </div>
517</footer> </body>
518
519<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
520<script>
521 window.dataLayer = window.dataLayer || [];
522 function gtag(){dataLayer.push(arguments);}
523 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
524 var getOutboundLink = function(url, label) {
525 gtag('event', 'click', {
526 'event_category': 'outbound',
527 'event_label': label,
528 'transport_type': 'beacon'
529 });
530 }
531
532 // topnav
533 var topButton = document.getElementById("topnavButton");
534 var topnavList = document.getElementById("topnavList");
535 topButton.addEventListener("click", function() {
536 this.classList.toggle("active");
537 topnavList.classList.toggle("hidden");
538 document.getElementById("topnavOpen").classList.toggle("hidden");
539 document.getElementById("topnavClosed").classList.toggle("hidden");
540 });
541</script>
542 <script src="../assets/js/prism.js"></script>
543 <script src="../release/go.js"></script>
544 <script src="../assets/js/goDoc.js"></script>
545 <script>
546 document.addEventListener("DOMContentLoaded", function() {
547 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
548 if (window.goDoc) window.goDoc();
549 var d = window.diagrams;
550 for (var i = 0; i < d.length; i++) {
551 var dargs = d[i];
552 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
553 }
554 if (window.extra) window.extra();
555 });
556 </script>
557</html>