gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
393 lines (375 loc) • 19.7 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="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. --> <title> GoJS Deployment -- 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="my-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="typings.html">Typings</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 & 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">
<h1>Deployment and License Keys</h1>
<p>
The <b>GoJS</b> library is software that is licensed under a
<a href="../license.html">commercial license agreement</a>. It is not open-source. If you have
downloaded a copy of the <b>GoJS</b> library from <a href="https://gojs.net">gojs.net</a> or npm
or GitHub for use in your own app, you may have noticed that a watermark appears in the diagram.
</p>
<p>
After you have
<a href="https://nwoods.com/sales/index.html?p=GoJS" target="_blank">purchased a license</a> and are
ready to deploy to your web site your app that uses <b>GoJS</b>, you will need to request a
license key at:
<a href="https://nwoods.com/activate.html?sku=gojs" target="_blank"
>https://nwoods.com/activate.html?sku=gojs</a
>.
</p>
<p>
Enter your e-mail address and the e-mail address of the person who purchased a license for
<b>GoJS</b>, the order number for that purchase, and your web site's domain name or your Electron
app's <code>package.json</code> "name" attribute, or "productName" attribute if it is specified.
Please make sure that e-mail from "nwoods.com" is not caught in your corporate or personal spam
filter. If you <a href="https://www.nwoods.com/contact.html">contact us</a> for further help
either via our web site or by sending us email, please include the e-mail that our web server sent
to you.
</p>
<p>
Regarding domain names, if your app will be at:
<code>https://www.example.com/app/ProcessEditor.html</code>, enter <code>example.com</code> as the
domain name. This procedure works for internal corporate web sites as well as for public web
sites, with hostnames and with IP addresses. The protocol (such as <code>https://</code>) and port
number (such as <code>:8080</code>) do not matter, so do not include them.
</p>
<p>
The license key will also work when the HTML page is served from a subdomain of the licensed
domain, such as from
<code>editors.example.com</code>. Any valid license key will automatically also work at the
<code>localhost</code> domain, which is useful when debugging and testing.
</p>
<p>
The GoJS library never "phones home" -- it will never initiate any network traffic other than when
explicitly directed to do so, such as for downloading image files to show in
<a>Picture</a> objects.
</p>
<p>
Our server will generate a GoJS license key for you, in the form of a JavaScript statement that
you will need to include with your code. It must execute after the GoJS library file has been
loaded, but before you create your first
<a>Diagram</a>.
</p>
<pre
class="lang-js"><code>// Must execute after loading the library and before you create your first Diagram:
go.Diagram.licenseKey = "...YourKeyHere...";
</code></pre>
Before version 2.0, you needed to write:
<pre
class="lang-js"><code>// Must execute after loading the library and before you create your first Diagram:
go.licenseKey = "...YourKeyHere...";
</code></pre>
<p>
This mechanism works when using either the release library, <code>go.js</code>, or the debug
library, <code>go-debug.js</code>, or the ES module versions of the library, but only with GoJS
version 1.8 or later. Note that this assignment is of a static property of the Diagram class:
<a>Diagram,licenseKey</a>. Of course you will need to substitute your generated license key string
for <code>"...YourKeyHere..."</code> in the <code>go.Diagram.licenseKey</code> assignment
statement. License keys are long strings without any embedded whitespace or punctuation. You can
request license keys for as many domains as you have licensed.
</p>
<p>
Once your key is in place, you can continue to use the same key while updating the patch/baselevel
version of GoJS. For example, a license key for version 2.0.1 will work for all versions 2.0.*.
Remember to get a new license key when upgrading to a new major or minor version of GoJS. For
example, when upgrading from version 2.0.1 to version 2.1.0, you will need a new license key.
</p>
<p>
License keys only depend on the major/minor version number and the domain from which the HTML page
was served. License keys are valid forever, as long as the major and minor version number of the
library do not change and as long as the HTML page is served from the same domain.
</p>
<h2 id="ForElectron">For Electron</h2>
<p>
When building a desktop application using Electron, your HTML page is not being served from a web
server at a domain. You will need to activate with the <code>"name"</code> you have specified in
your project's <code>package.json</code>
to make sure your Diagram does not display a watermark.
</p>
<h2 id="ForUnlimitedDomainsCustomers">For Unlimited Domains Customers</h2>
<p>
If you are an ISV and intend to distribute your app to run on many customers' web sites, or if
your app is hosted in a WebView as part of a desktop application,
<a href="https://www.nwoods.com/contact.html">Contact sales</a> for our our Unlimited Domains
option and instructions.
</p>
<p>
When requesting a license key at
<a href="https://nwoods.com/activate.html?sku=gojs" target="_blank">Activate</a>, you do not need
to specify a domain name.
</p>
<h2 id="InternationalizationAndLocalization">Internationalization and Localization</h2>
<p>
<b>GoJS</b> apps can display text in non-Latin languages. For example, see
<a href="../samples/familyTreeJP.html" target="samples">Japanese Family Tree</a>.
</p>
<p>
The <b>GoJS</b> library does not manipulate currency values or date/time values or addresses, so
there are no localization issues with those data types and values. The library does not contain
any of its own icons (images) or cursors.
</p>
<p>
Nor does <b>GoJS</b> display any built-in text strings, so no translation is needed. There are
error and warning messages that may be output to the console, but those messages are only meant
for debugging by programmers, not for consumption by end users. Reading and writing of numeric
values is only performed internally when reading and writing JSON or geometry path strings or CSS
colors, which are all defined to use non-localized formats.
</p>
<p>
All user-visible text is completely under the control of the programmer. For localizability you
may find it convenient to use conversion functions in <a>Binding</a>s. The
<a>TextEditingTool</a> uses an HTML TextArea element to implement in-place text input and text
editing, thereby utilising the browser's support for input method editors.
</p>
<h2>Older versions of GoJS</h2>
<p>
For version 1.8 and beyond, you need to use a license key to remove this watermark from your
domain. For versions 1.7 and earlier, view the
<a href="https://gojs.net/1.7.29/intro/deployment.html">1.7 documentation</a>.
</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">
<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-6 grid grid-cols-2 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 target="_blank" href="https://www.nwoods.com">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/about.html">About Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a>
</li>
</ul>
</li>
</ul>
<p class="text-sm text-gray-100 md:mb-6">
Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
</p>
</div>
</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'
});
}
// 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");
});
</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>
</html>