create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
520 lines (475 loc) • 20.9 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"/>
<meta name="description" content="GoJS Change Log" />
<meta itemprop="description" content="GoJS Change Log" />
<meta property="og:description" content="GoJS Change Log" />
<meta name="twitter:description" content="GoJS Change Log" />
<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="Change Log" />
<meta property="og:title" content="Change Log" />
<meta name="twitter:title" content="Change Log" />
<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/changelog.html" />
<meta property="twitter:url" content="https://gojs.net/latest/changelog.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Change Log | GoJS
</title>
<link rel="stylesheet" href="./assets/css/prism.css"/>
</head>
<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="w-full max-w-screen-xl mx-auto">
<div class="px-4 pb-16 w-full overflow-hidden prose">
<h1>GoJS Change Log</h1>
<p id="ver"></p>
<p>
We maintain a
<a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener"
>GitHub Repository</a
>
that you can star to follow version updates.
</p>
<h2>GoJS 3.1</h2>
<p>
GoJS 3.1 brings a number of new features, including the ability to manipulate any
diagram using
<a href="intro/accessibility.html" target="_blank" rel="noopener">only the keyboard</a>,
and support for screen readers.
</p>
<!--
<p>The complete list of new features is <a href="#3.1">detailed below</a>.</p>
<h3 id="3.1.1">Changes for 3.1.1</h3>
<ul>
</ul>
-->
<h2 id="3.1">New Features and Changes for GoJS 3.1</h2>
<h3>Keyboard Controlled Focus Navigation and Virtual Pointer</h3>
<p>
The <a>CommandHandler</a> now supports keyboard-controlled focus navigation and a
virtual pointer, so that the user need not use a mouse. Enable it in any Diagram with
the <code>Ctrl-Alt-Enter</code> command.
</p>
<p>
This new functionality includes built-in minimal support for screen readers. However,
each application will need to customize what is read in each situation. The
<a>AriaCommandHandler</a> extension is now deprecated.
</p>
<p>
Read a summary at
<a
href="learn/interactivity.html#FocusKeyboardControlTools"
target="_blank"
rel="noopener"
>Focus and Keyboard Control</a
>. Read more details at
<a href="intro/accessibility.html" target="_blank" rel="noopener">Accessibility</a>.
</p>
<h3>Using CSS variables for theming</h3>
<p>
The <a>ThemeManager</a> can now read CSS variables such that your GoJS templates can
reuse variables from other parts of your UI. This functionality is controlled by the new
<a>ThemeManager.readsCssVariables</a> property, which defaults to true. Read more at
<a href="intro/theming.html#ThemeCSS" target="_blank" rel="noopener"
>Using CSS variables for theming</a
>.
</p>
<h3>Link routing improvements</h3>
<p>
Link routing is improved for links connecting member Nodes with their containing Groups,
and for <code>...Side</code> Spot links that do not cross adjacent links.
</p>
<p>
Link routing for AvoidsNodes has also been improved when links are fully within Groups.
</p>
<h3>Licensing improvements</h3>
<p>
3.1 comes with a new licensing mechanism for unlimited domains. If you have trouble
upgrading, please contact support.
</p>
<h3>The <b>LassoSelectingTool</b> extension</h3>
<p>
The <a>LassoSelectingTool</a> is an optional replacement for the standard
<a>DragSelectingTool</a> that allows the user to freehand draw a line around the Parts
that they want to select. Try it in the
<a href="samples/LassoSelecting.html" target="_blank" rel="noopener">Lasso Selecting</a>
sample.
</p>
<h3 id="OtherNewFeatures">Other New Features</h3>
<ul>
<li>
"Toggle" switches are a new kind of predefined button which is commonly requested for
the more complex node templates. See the
<a href="samples/Toggles.html" target="_blank" rel="noopener">Toggle switches</a>
sample.
</li>
<li>
The "AutoRepeatButton" has been moved from the "ScrollingTable" extension to be a
built-in builder, as another type of predefined button. This makes it easier for you
to use auto-repeating buttons in your diagrams.
</li>
<li>
The <a>GuidedDraggingTool</a> extension has been improved to support centering a Part
to have equal space on both sides. Try the tool in the
<a href="samples/GuidedDragging.html" target="_blank" rel="noopener"
>Guided Dragging</a
>
sample.
</li>
<li>
The <a>CommandHandler.zoomToFit</a> command now takes an optional argument so that you
can easily perform an animated zoom to a particular Rect in document coordinates.
</li>
<li>
The new <a>CommandHandler.storageLocation</a> property may be set to "localStorage" or
"sessionStorage" in order to save the clipboard state in a <b>Storage</b> object. For
compatibility the value defaults to "memory". This subsumes the implementation in the
<a>LocalStorageCommandHandler</a> extension, which remains for compatibility in
versions of GoJS older than 3.1, but is now deprecated.
</li>
<li>
The new <a>CommandHandler.downloadSvg</a> command makes it easy for your app to
download an image of your diagram as SVG. For example, see the
<a href="samples/genogram.html" target="_blank" rel="noopener">Genogram</a> sample.
</li>
<li>
The <a>DrawCommandHandler</a> extension has been extended with the
<a>DrawCommandHandler.saveLocalFile</a> and
<a>DrawCommandHandler.loadLocalFile</a> methods. This supports downloading a
JSON-formatted text file produced by <a>Model.toJson</a>, and loading such a file via
either a <a>DrawCommandHandler.localFileInput</a> <input> element or a
<a>DrawCommandHandler.localFileDropElement</a> drop-handling element. Try it in the
<a href="samples/saveAndLoadLocalFiles.html" target="_blank" rel="noopener"
>Local Files</a
>
sample.
</li>
<li>
<a>SvgRendererOptions</a> now has the "svgFinished" option to allow modifying the
whole <svg> element after it has been rendered by <a>Diagram.makeSvg</a>. This
is useful if you need to modify the SVG each time it is produced.
</li>
<li>
<a>TextBlock.letterSpacing</a> and <a>TextBlock.wordSpacing</a> are new properties
that affect the measurement and rendering of text. Caution: these properties are not
supported on all platforms.
</li>
<li>
New Node methods <a>Node.findSuccessorParts</a> and
<a>Node.findPredecessorParts</a> walk the graph starting at a Node, collecting all of
the Links and Nodes it sees, but not including the original Node itself. Basically
<a>Node.findSuccessorParts</a> returns a <a>Set</a> of all Nodes and Links that are
"downstream" from this Node or are "descendants" of this Node.
<a>Node.findPredecessorParts</a> does the same, but walking backwards "upstream" or to
"ancestors" of the Node.
</li>
<li>
<a>Link.corner</a> is now supported for non-orthogonal link segments, so link path
turns can look softer without using Bezier <a>Link.curve</a>. For example, see the
<a href="samples/doubleTree.html" target="_blank" rel="noopener">Double Tree</a>
sample, to which we added the setting <code>corner: 10</code>.
</li>
<li>
The <a>LayeredDigraphLayout.centered</a> and
<a>LayeredDigraphVertex.centered</a> properties control whether the nodes in each
layer are aligned to the center (the default) or to the closer side (typically top or
left side) of the layer.
</li>
<li>
The <a>Router.isRoutable</a> method is an overridable predicate to help decide if a
particular <a>Link</a> needs to be routed.
</li>
<li>
One can now pass arguments to be passed to <a>GraphObject.apply</a> functions, to
parameterize a call to an initialization function applied to GraphObjects. For
examples, search the samples for calls to <a>GraphObject.apply</a> that have two (or
more) arguments. Note how those applied functions also take two (or more) arguments.
</li>
<li>
The <a>Rect.nearestSideDirection</a> and <a>Rect.nearestSideDirectionPoint</a>
decide which side of a Rect is closest to the given point.
</li>
<li>
The <a>Geometry</a> constructor now takes an optional second argument that is used as
an initialization object.
</li>
<li>
The "ToolTip" Adornment now detects <a>GraphObject.mouseOver</a> events and
automatically extends how long the tooltip will stay visible by
<a>ToolManager.toolTipDuration</a> milliseconds.
</li>
<li>
If the <a>ToolManager.currentToolTip</a> is visible, the Escape key will hide it. Hit
Escape again to clear the <a>Diagram.selection</a> and stop any ongoing tool.
</li>
<li>
The <a>ContextMenuTool</a> now handles mouse wheel events in the standard fashion when
that tool is running, including zooming the diagram scale.
</li>
<li>
The <a>ResizingTool</a> can now resize the labels of Links, and the
<a>RotatingTool</a> can now rotate the labels of Links, although they continue not to
be able to resize or rotate whole Links or their Link paths.
</li>
<li>
Animation performance has improved when starting and stopping multiple animations.
</li>
<li>
An example Playwright test file is now in the Introduction page about
<a href="intro/testing.html" target="_blank" rel="noopener">Testing</a>.
</li>
<li>
We have added a
<a href="samples/venn.html" target="_blank" rel="noopener">Venn Diagram</a> sample.
</li>
<li>
Minor API incompatibility: <a>ThemeBinding.themeSource</a> no longer accepts null as a
value -- use the empty string instead.
</li>
</ul>
<h3 id="Fixes">Bug fix changes in 3.1 since 3.0</h3>
<ul>
<li>
Bindings with
<a href="intro/itemArrays.html" target="_blank" rel="noopener">Item Templates</a> that
use a named data source will not update unless explicitly updated via
<a>Model.set</a> or equivalent. Binding updates on the containing Part will no longer
indiscriminately update Item Template bindings.
</li>
<li>
Links between a Group and members of that Group are now routed more consistently to
stay within the group if the group's port completely contains the member node's port.
Routes tend to be shorter than they used to be.
</li>
<li>
Elements of Table Panels that stretch and also span multiple rows or columns no longer
consider empty rows/columns to have infinite available space, and will not expand into
them. Instead, those empty rows/columns will be considered of minimum size for
measuring spanning elements, normally zero. This may make some Table elements smaller
than they have been in previous versions, which will fix some designs where they were
measured bigger than one would expect, causing other rows/columns to be clipped
unnecessarily.
</li>
<li>
Replacing the <a>Diagram.model</a> will first clear the <a>Diagram.selection</a> and
the <a>Diagram.highlighteds</a> collections, allowing for any side effects to be
performed to clean up from the old diagram.
</li>
<li>
Fixed SVG rendering of panels with a background where one or more elements are
invisible within the panel. It was possible this would draw the background in front of
the remaining elements.
</li>
<li>Fixed <a>Placeholder</a>s incorrectly computing size during some animations.</li>
<li>
Fixed <a>LayeredDigraphLayout</a> routing of Bezier curve Links when the link spots
are <code>Spot.Center</code> or offset from there.
</li>
</ul>
<hr />
<h3 id="OldChangeLogs">Old Change Logs</h3>
<h4><a href="../3.0.27/changelog.html">Change log for 3.0</a></h4>
<h4><a href="../2.3.17/changelog.html">Change log for 2.3</a></h4>
<h4><a href="../2.2.23/changelog.html">Change log for 2.2</a> (unsupported)</h4>
<h4><a href="../2.1.56/changelog.html">Change log for 2.1</a> (unsupported)</h4>
<h4><a href="../2.0.21/changelog.html">Change log for 2.0</a> (unsupported)</h4>
<h4><a href="../1.8.38/changelog.html">Change log for 1.*</a> (unsupported)</h4>
</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="./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();
}
);
</script>
</html>