We maintain a GitHub Repository, which you can star to follow version updates. We also notify of changes on Twitter.
GoJS 3.0 brings a number of new features for advanced Diagram control, such as custom routing via Routers and data-bound theming with Themes. We have also rewritten some of the internals to take advantage of modern JavaScript, and rewritten the API to use clearer enumerations. These changes are largely backwards-compatible.
There are a number of other changes, detailed below.
For 3.0, the gojs npm package contains only the release libraries, and no documentation or sample
code. The documentation, sample, and extensions code can be downloaded separately, via
npm create gojs-kit.
GoJS 3.0 leverages modern JavaScript and more modern Canvas API features for increased performance. However, this also means dropping support for old browsers such as IE11, and there are a number of minor incompatibilities detailed below.
Diagram rendering is now generally faster, and Diagram heap size has been significantly reduced, especially for large graphs.
One has always been able to customize the computed paths for Links by setting properties on a Link or on its connected port elements, or by overriding methods on a custom Link subclass. There is now support for a separate routing phase where instances of Router can modify Links. See the intro page on routers for more information.
GoJS now provides functionality to define and manage themes, and GraphObjects can now be themed via theme bindings. This allows for applications to more easily provide multiple themes, especially light and dark mode. See the intro page in theming for more information.
There are two new default layers in each Diagram, "ViewportBackground" and
"ViewportForeground".
These layers have the new property Layer.isViewportAligned set to true.
Parts in viewport aligned layers will not obey the Diagram.position or Diagram.scale properties,
so as the user scrolls or pans or zooms they will remain fixed in the viewport.
Layers with Layer.isViewportAligned set to true will automatically position and scale their Parts
to be relative to the viewport, based on the Part's GraphObject.alignment and GraphObject.alignmentFocus
values,
not on its Part.location or GraphObject.position.
GoJS now uses Typescript enumerations to represent possible values for many properties. This enables autocompletion in some text editors. Some examples:
new go.Panel({ stretch: go.GraphObject.Fill }),
new go.Panel({ stretch: go.Stretch.Fill }).
new go.RowColumnDefinition({ column: 1, sizing: go.RowColumnDefinition.None },
new go.RowColumnDefinition({ column: 1, sizing: go.Sizing.None }.
new go.TreeLayout({ alignment: go.TreeLayout.AlignmentStart }),
new go.TreeLayout({ alignment: go.TreeAlignment.Start }).
The original static EnumValue properties have been deprecated in favor of these new enumerations,
but continue to exist for compatibility. So, for example:
go.GraphObject.Fill === go.Stretch.Fill.
The never-documented EnumValue class has been removed from the library.
The new enum values are numbers.
"RoundedRectangle" Shape.figure
now considers the Shape.parameter2 option to be a bit flag mask that determines which corners to round.
1: top-left, 2: top-right, 4: bottom-right, 8: bottom-left.
This makes it easier to round only the bottom or top corners, or a single corner.
For compatibility, the default flags value rounds all four corners.
"Capsule" figure, as yet another kind of rounded rectangle.
See the Shapes sample for an example.
"key",
thereby assigning unique key values to all of the link data objects, before producing the resulting text or data.
The Diagram.inherit static function has been removed from the API.
Now the only supported way to define subclasses is to use class ... extends ... { ... }.
However, this is still a JavaScript library, so it is still possible to dynamically override an
individual method on an individual object just by assigning it to a function(...) { ... }.
A number of samples continue to demonstrate this by assigning a method on a Tool
or on the CommandHandler during Diagram initialization.
The GoJS Set and Map and List collection classes,
and their iterators, now implement the JavaScript Symbol.iterator static property.
This means that they can be used with for ... of statements and spread syntax [...x].
const s = new go.Set();
s.add(1); s.add(2); s.add(3);
for (let x of s.iterator) {
console.log(x);
}
// prints:
// 1
// 2
// 3
[...s] // returns the array [1, 2, 3]
[...s.iterator] // also returns the array [1, 2, 3]
However, for compatibility, iterators are otherwise unchanged, and Set.iterator, Map.iterator, and List.iterator return GoJS iterators, not the built-in JS iterators.
GoJS Set and Map used to consider both a string and a number of the same value (e.g. "3.14159" and 3.14159) as the same key. They are now considered different keys. Be sure to always get with the same type of value that you added to the Set or set in the Map.
GoJS Set and Map no longer warn about potential collection modification while iterating over the collection.
The value of InputEvent.key now exactly reflects the browser KeyboardEvent.key value.
If your code does not use the value of InputEvent.key anywhere
(such as in a tool customization or in a CommandHandler.doKeyDown override),
you do not need to do anything.
For some keys, these strings are slightly different. The differences are:
| GoJS 2.3 | GoJS 3.0 |
|---|---|
| "Esc" | "Escape" |
| "Subtract" | "-" |
| "Add" | "+" |
| "Add" | "=" |
| "Up" | "ArrowUp" |
| "Down" | "ArrowDown" |
| "Right" | "ArrowRight" |
| "Left" | "ArrowLeft" |
| "Del" | "Delete" |
GoJS 3.0 now reports the InputEvent.key faithfully as 'a' or 'A'. In GoJS 2.3 it uppercased each letter key. Note that GoJS treats both "+" and "=" (formerly "Add") as default commands to increase zoom.
"Button" builders no longer have a "pressed" state.
"ContextMenuButton"s now have more padding.
copiesKey: true on the model.
isZoomToFitRestoreEnabled: true on the CommandHandler.
alignOption: go.LayeredDigraphAlign.None.
"Trigger" is no longer a reason for AnimationManager.canStart.
This allows bundled animations to run in parallel with default animations.
Bundled animations will no longer raise the "AnimationStarting" or
"AnimationFinished" DiagramEvents.
All extensions and samples are now in the create-gojs-kit npm package rather than in the
gojs package.
We suggest that you download them by executing npm create gojs-kit .
However you can continue to download everything from the GoJS GitHub repository
or from our web site.
There is now an AvoidsLinksRouter extension that helps reduce overlapping orthogonal link segments for links that are unrelated to each other. It is demonstrated in the AvoidsLinksRouter sample.
There is now an AriaCommandHandler extension. We have added an Accessibility extension sample to demonstrate accessibility in GoJS.
The Themes.js extension offers some suggested theming choices.
We have added the "ChamferedRectangle" figure to the Figures.js
file,
which is just like "RoundedRectangle", except the corners are cut off straight at 45 degrees
no matter the aspect ratio of the shape.
Shape.parameter1 controls the length of both sides of the cut-off triangle.
Shape.parameter2 controls which corners are cut off.
1: top-left, 2: top-right, 4: bottom-right, 8: bottom-left.
The extensions Figures.js file no longer redefines the built-in figures.
We have added a new sample: Warehouse
We have deleted the extensionsTS subdirectory.
The extensionsJSM subdirectory includes .TS TypeScript files for all of the extensions,
along with the compiled .JS JavaScript files that can be loaded as ECMAScript modules.
The JavaScript files in the extensions subdirectory are now all
generated from the compiled TypeScript files in extensionsJSM,
which reduces the potential variation in functionality between the two extensions directories.
We have deleted the RoundedRectangles.js file from the extensions and extensionsJSM directories.
The figures that had been defined there are now predefined in the GoJS library.
The sample HTML pages in both extensions and extensionsJSM
have been moved to the samples subdirectory, thereby removing duplicate samples.
A few samples have been moved from the projects subdirectory into the samples subdirectory.
The projects subdirectory has been deleted.
We have deleted the Storage extensions. If you need them, copy the code from version 2.