create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
715 lines (629 loc) • 27.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="HTML Interaction" />
<meta property="og:title" content="HTML Interaction" />
<meta name="twitter:title" content="HTML Interaction" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta property="og:url" content="https://gojs.net/latest/intro/HTMLInteraction.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/HTMLInteraction.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
HTML Interaction | GoJS
</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 h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="sticky top-0 left-0 z-10 px-2 w-full bg-white border-b border-b-gray-200 md:hidden">
<button id="sidenavButton" class="flex p-2 text-gray-900 bg-inherit shadow-none items-center text-sm font-semibold hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block mr-2" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Menu</span>
</button>
</div>
<script>
window.addEventListener("DOMContentLoaded", function () {
// sidenav
var sideButton = document.getElementById("sidenavButton");
var sidenav = document.getElementById("sidenav");
if (sideButton && sidenav) {
sideButton.addEventListener("click", function (e) {
sidenav
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!sidenav.classList.contains("hidden") && !e.target.closest("#sidenavList")) {
sideButton.click();
}
});
}
});
</script>
<div class="flex flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<aside id="sidenav"
class="hidden fixed top-0 left-0 z-10 w-full bg-black/10 min-h-screen max-h-screen overflow-x-hidden overflow-y-auto shrink-0
md:block md:sticky md:w-52 md:min-h-0 md:bg-inherit md:border-r md:border-r-gray-200 md:overscroll-auto">
<nav id="sidenavList" class="flex flex-col bg-white w-52 min-h-screen pl-2 pt-4 pb-24 md:w-full md:min-h-0">
<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="svelte.html">GoJS with Svelte</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="typings.html">Typings</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="routers.html">Routers</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="theming.html">Theming</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="accessibility.html">Accessibility</a>
<a href="buttons.html">Buttons</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="animation.html">Animation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers & Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="replacingDeleting.html">Replacing and Deleting</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="SVGContext.html">Rendering to SVG</a>
<a href="makingSVG.html">Snapshot to SVG</a>
<a href="makingImages.html">Diagram Images</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="performance.html">Performance</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
</nav>
</aside>
<script>
var navList = document.getElementById('sidenavList');
if (navList !== null) {
var url = window.location.href;
var lindex = url.lastIndexOf('/');
url = url
.slice(lindex + 1)
.toLowerCase();
var aTags = navList.getElementsByTagName('a');
var currentindex = -1;
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.indexOf('/' + url) !== -1) {
currentindex = i;
aTags[i]
.classList
.add('active');
break;
}
}
}
</script>
<div class="px-4 pb-16 w-full overflow-hidden prose">
<h1>HTML Interaction</h1>
<p>
This intro page explains how to use GoJS Diagrams alongside other HTML elements in a webapp.
</p>
<p>
For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the <a>HTMLInfo</a> class.
<code>HTMLInfo</code> is described in the second section of this page.
</p>
<h2 id="UsingHTMLAlongsideGoJS">Using HTML Alongside GoJS</h2>
<h3 id="EditingPartsWithHTMLDataInspector">Editing Parts with the HTML Data Inspector</h3>
<p>
Generally, GoJS can interact with the rest of the page via JavaScript that programmatically moves and modifies GoJS objects and the Diagram. If you have not
read about programmatically interacting with Parts and the Model, there is a
<a href="../learn/graphobject.html">GraphObject Manipulation tutorial</a> for this purpose.
</p>
<p>
To help programmers get started with HTML controls we have implemented a simple <a href="../samples/DataInspector.html">Data Inspector Extension</a>, an
HTML-based property editor that displays and allows editing of data for the selected Part.
</p>
<p>
The Data Inspector chiefly works via a <code>"ChangedSelection"</code> <a href="events.html">Diagram Listener</a>. When triggered, it populates HTML Fields.
Editing those fields and clicking away then update the selected Part by calling <code>diagram.model.setDataProperty</code> to update the model.
</p>
<h3 id="JQueryAndGoJS">jQuery and GoJS</h3>
<p>
GoJS does not depend on jQuery, but the two can be used together. The <a href="../samples/htmlInteraction.html">HTML Interaction Sample</a> places a GoJS
Palette inside of a jQuery movable window, and a data inspector that modifies the current selected node inside another.
</p>
<p>
jQuery normally sets the <code>$</code> variable.
Our samples no longer make use of <a>GraphObject.make</a>,
which was frequently abbreviated by using the <code>$</code> const,
so the chances of conflict are reduced.
</p>
<h3 id="HTMLFocusOnDiagrams">HTML Focus on Diagrams</h3>
<p>
When a browser element gets focus, some browsers scroll that element into view as much as possible. Because this behavior may be unwelcome in some web apps,
the <a>Diagram.scrollsPageOnFocus</a> property defaults to false. However you may want to set this property to true in order to get the standard behavior.
</p>
<p>
You can remove the outline while the Diagram is in focus. This is a CSS effect, not a GoJS effect, and can be removed by removing the CSS outline from all
HTML elements inside the Diagram div:
</p>
<pre class="lang-css"><code>/* affect all elements inside myDiagramDiv */
#myDiagramDiv * {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
</code></pre>
<h2 id="HTMLInfoClass">The HTMLInfo Class</h2>
<p>
Use the <a>HTMLInfo</a> class to display custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.
</p>
<p>
Properties that can be set to an instance of <code>HTMLInfo</code> include:
</p>
<ul>
<li><a>TextEditingTool.defaultTextEditor</a></li>
<li><a>TextBlock.textEditor</a></li>
<li><a>GraphObject.contextMenu</a></li>
<li><a>Diagram.contextMenu</a></li>
<li><a>GraphObject.toolTip</a></li>
<li><a>Diagram.toolTip</a></li>
</ul>
<h3 id="Usage">Usage</h3>
<p>
When replacing GoJS functionality with custom functionality, the main concern is when to show and hide the custom content. <code>HTMLInfo</code> does this
with two settable functions defined by the programmer and called by GoJS:
</p>
<ul>
<li>
<a>HTMLInfo.show</a>, called by GoJS when custom information should be displayed, for example when activating a ToolTip, ContextMenuTool, or
TextEditingTool.
</li>
<li><a>HTMLInfo.hide</a>, called by GoJS when custom information is finished, and should no longer be displayed, for example when ending these tools.</li>
</ul>
<p>
In lieu of setting <a>HTMLInfo.hide</a>, you can set the <a>HTMLInfo.mainElement</a> property to the primary HTML Element that you are showing/hiding, and
HTMLInfo will automatically hide the provided element by calling:
</p>
<pre class="lang-js"><code>mainElement.style.display = "none";</code></pre>
<h3 id="HTMLInfoSamples">HTMLInfo samples</h3>
<ul>
<li>
Text Editors: <a href="../samples/customTextEditingTool.html">Custom Text Editors sample</a> and
<a href="../samples/TextEditor.html">Re-implementation of the default Text Editor</a>
</li>
<li>
Context Menus: <a href="../samples/customContextMenu.html">Custom Context Menu</a> and
<a href="../samples/htmlLightBoxContextMenu.html">HTML Lightbox Context Menu</a> (a re-implementation of the default touch context menu)
</li>
<li>Tooltips: <a href="../samples/dataVisualization.html">Data Visualization Tooltip</a></li>
</ul>
<h3 id="Tooltips">Tooltips</h3>
<p>
For tooltips, if a <a>GraphObject.toolTip</a> or <a>Diagram.toolTip</a> is set to an instance of <code>HTMLInfo</code>, GoJS calls
<code>HTMLInfo.show</code> in <a>ToolManager.showToolTip</a>. After the tooltip delay, GoJS will call <code>HTMLInfo.hide</code> in
<a>ToolManager.hideToolTip</a>.
</p>
<p>
What follows is an example using <code>HTMLInfo.show</code> and <code>HTMLInfo.hide</code>, but the <code>HTMLInfo.hide</code> is simple enough that setting
the <code>HTMLInfo.mainElement</code> to the tooltip div instead would be sufficient.
</p>
<div id="diagramParent" style="position: relative">
<div id="toolTipDIV" style="position: absolute; background: white; z-index: 1000; display: none">
<p id="toolTipParagraph">Tooltip</p>
</div>
</div>
<pre class="lang-js" id="toolTipExample"><code>
function showToolTip(obj, diagram, tool) {
const toolTipDIV = document.getElementById('toolTipDIV');
const pt = diagram.lastInput.viewPoint;
toolTipDIV.style.left = (pt.x + 10) + "px";
toolTipDIV.style.top = (pt.y + 10) + "px";
document.getElementById('toolTipParagraph').textContent = "Tooltip for: " + obj.data.text;
toolTipDIV.style.display = "block";
}
function hideToolTip(diagram, tool) {
const toolTipDIV = document.getElementById('toolTipDIV');
toolTipDIV.style.display = "none";
}
const myToolTip = new go.HTMLInfo({
show: showToolTip,
hide: hideToolTip
/*
since hideToolTip is very simple,
we could have set mainElement instead of setting hide:
mainElement: document.getElementById('toolTipDIV')
*/
});
diagram.nodeTemplate =
new go.Node("Auto", { toolTip: myToolTip })
.add(
new go.Shape("RoundedRectangle", { strokeWidth: 0})
.bind("fill", "color"),
new go.TextBlock({ margin: 8 })
.bind("text")
);
diagram.model = new go.GraphLinksModel(
[
{ text: "Alpha", color: "lightblue" },
{ text: "Beta", color: "orange" },
{ text: "Gamma", color: "lightgreen" },
{ text: "Delta", color: "pink" }
]);
</code></pre>
<pre class="lang-html"><code>
<!-- this must be added as a sibling of the Diagram -->
<div id="toolTipDIV" style="position: absolute; background: white; z-index: 1000; display: none;">
<p id="toolTipParagraph">Tooltip</p>
</div>
</code></pre>
<script>
goCode('toolTipExample', 600, 160, 'diagramParent');
</script>
<h3 id="ContextMenus">Context Menus</h3>
<p>
For context menus, <a>ContextMenuTool.showContextMenu</a> will call <code>HTMLInfo.show</code>. <a>ContextMenuTool.hideContextMenu</a> will call
<code>HTMLInfo.hide</code>.
</p>
<pre class="lang-js"><code>// Assign an HTMLInfo to the Diagram:
myDiagram.contextMenu = new go.HTMLInfo({
show: showContextMenu,
hide: hideContextMenu
});
function showContextMenu(obj, diagram, tool) {
// Show the context menu HTML element:
SomeDOMElement.style.display = "block";
// Also show relevant buttons given the current state
// and the GraphObject obj; if null, the context menu is for the whole Diagram
}
function hideContextMenu() {
SomeDOMElement.style.display = "none";
}
function buttonClick() {
// do some action when a context menu button is clicked
// then:
myDiagram.currentTool.stopTool();
}
</code></pre>
<h3 id="TextEditors">Text Editors</h3>
<p>
For custom text editors, <a>TextEditingTool.doActivate</a> will call <code>HTMLInfo.show</code>. <a>TextEditingTool.doDeactivate</a> will call
<code>HTMLInfo.hide</code>.
</p>
<p>
HTMLInfos used as text editors must also define a <a>HTMLInfo.valueFunction</a>. When <a>TextEditingTool.acceptText</a> is called, GoJS will call
<code>HTMLInfo.valueFunction</code> and use the return value as the value for the TextEditingTool completion.
</p>
<p>
The example below constructs an HTMLInfo that uses <code>HTMLInfo.show</code> and <code>HTMLInfo.hide</code> to dynamically add, populate, and remove HTML
elements from the page.
</p>
<div id="diagramParent2" style="position: relative"></div>
<pre class="lang-js" id="textEditorExample"><code>
// Diagram setup. The HTMLInfo is set at the end of this code block.
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("RoundedRectangle", { strokeWidth: 0})
.bind("fill", "color"),
new go.TextBlock({
editable: true,
margin: 8,
choices: ['Alpha', 'Beta', 'Gamma', 'Delta']
})
.bind("text")
);
diagram.model = new go.GraphLinksModel(
[
{ text: "Alpha", color: "lightblue" },
{ text: "Beta", color: "orange" },
{ text: "Gamma", color: "lightgreen" },
{ text: "Delta", color: "pink" }
]);
// Create an HTMLInfo and dynamically create some HTML to show/hide
const customEditor = new go.HTMLInfo();
const customSelectBox = document.createElement("select");
customEditor.show = (textBlock, diagram, tool) => {
if (!(textBlock instanceof go.TextBlock)) return;
customSelectBox.style.background = 'white';
// Populate the select box:
customSelectBox.innerHTML = "";
// this sample assumes textBlock.choices is not null
const list = textBlock.choices;
for (let i = 0; i < list.length; i++) {
const op = document.createElement("option");
op.text = list[i];
op.value = list[i];
customSelectBox.add(op, null);
}
// After the list is populated, set the value:
customSelectBox.value = textBlock.text;
// Do a few different things when a user presses a key
customSelectBox.addEventListener("keydown", e => {
if (e.isComposing) return;
const key = e.key;
if (key === "Enter") { // Accept on Enter
tool.acceptText(go.TextEditingAccept.Enter);
return;
} else if (key === "Tab") { // Accept on Tab
tool.acceptText(go.TextEditingAccept.Tab);
e.preventDefault();
return false;
} else if (key === "Escape") { // Cancel on Esc
tool.doCancel();
if (tool.diagram) tool.diagram.focus();
}
}, false);
const loc = textBlock.getDocumentPoint(go.Spot.TopLeft);
const pos = diagram.transformDocToView(loc);
customSelectBox.style.left = pos.x + "px";
customSelectBox.style.top = pos.y + "px";
customSelectBox.style.position = 'absolute';
customSelectBox.style.zIndex = 100; // place it in front of the Diagram
diagram.div.appendChild(customSelectBox);
customSelectBox.focus();
}
customEditor.hide = (diagram, tool) => {
diagram.div.removeChild(customSelectBox);
}
// This is necessary for HTMLInfo instances that are used as text editors
customEditor.valueFunction = () => customSelectBox.value;
// Set the HTMLInfo:
diagram.toolManager.textEditingTool.defaultTextEditor = customEditor;
</code></pre>
<script>
goCode('textEditorExample', 600, 160, 'diagramParent2');
</script>
</div>
</div>
<footer class="bg-white text-gray-900 border-t border-t-gray-200">
<div class="w-full max-w-screen-lg mx-auto px-4 py-6">
<p id="version" class="text-xs text-gray-900 m-0"></p>
<div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<div>
<h2 class="text-base font-semibold text-nwoods-primary">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" target="_blank" rel="noopener">GitHub</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
</li>
<li>
<a href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://nwoods.com/register.html" target="_blank" rel="noopener">Register</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
</li>
</ul>
</div>
</div>
<p class="text-sm text-gray-900 md:mb-6">
Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
</p>
</div>
</footer>
</body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function (url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
const params = new URL(document.location).searchParams
let a = params.get('a');
if (a) localStorage.setItem('a', a);
a = localStorage.getItem('a');
if (a) {
const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
for (const l of links) {
const url = new URL(l.href);
url.searchParams.set('a', a);
l.href = url;
}
}
</script>
<script src="../assets/js/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></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>
</html>