JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
KeyboardEvent.code
CommandHandler.doKeyDown now uses KeyboardEvent.code
instead of KeyboardEvent.key
for better cross-language shortcut support. This may lead to incompatibilities if you have code (such as testing code) that sets an InputEvent.key value. You may need to additionally set InputEvent.code. If your code does not modify 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.Symbol.iterator
.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 extensions, 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 3.0 introduces the AvoidsLinks Router, which attempts to separate parallel link segments, and can work alongside AvoidsNodes routing.
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 })
,
one can now write: new go.Panel({ stretch: go.Stretch.Fill })
.new go.RowColumnDefinition({ column: 1, sizing: go.RowColumnDefinition.None })
,
one can now write: new go.RowColumnDefinition({ column: 1, sizing: go.Sizing.None })
.new go.TreeLayout({ alignment: go.TreeLayout.AlignmentStart })
,
one can now write: 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."Borders"
figure, as yet another kind of rectangle where the Shape.parameter1 option is a bit flag mask that determines which sides are drawn. 1: top, 2: right, 4: bottom, 8: left. 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.position: absolute
applied, just like the Canvas element.package.json
to allow imports from specific release files.package.json
"exports" to support TypeScript typing.go.mjs
in Node.js environments using ES Modules.Be sure to also see the GoJS 3.0 beta: https://forum.nwoods.com/t/gojs-3-0-beta-has-been-released/16668