GoJS 3.1

GoJS 3.1 brings a number of new features, including the ability to manipulate any diagram using only the keyboard, and support for screen readers.

New Features and Changes for GoJS 3.1

Keyboard Controlled Focus Navigation and Virtual Pointer

The CommandHandler 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 Ctrl-Alt-Enter command.

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 AriaCommandHandler extension is now deprecated.

Read a summary at Focus and Keyboard Control. Read more details at Accessibility.

Using CSS variables for theming

The ThemeManager 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 ThemeManager.readsCssVariables property, which defaults to true. Read more at Using CSS variables for theming.

Link routing improvements

Link routing is improved for links connecting member Nodes with their containing Groups, and for ...Side Spot links that do not cross adjacent links.

Link routing for AvoidsNodes has also been improved when links are fully within Groups.

Licensing improvements

3.1 comes with a new licensing mechanism for unlimited domains. If you have trouble upgrading, please contact support.

The LassoSelectingTool extension

The LassoSelectingTool is an optional replacement for the standard DragSelectingTool that allows the user to freehand draw a line around the Parts that they want to select. Try it in the Lasso Selecting sample.

Other New Features

• "Toggle" switches are a new kind of predefined button which is commonly requested for the more complex node templates. See the Toggle switches sample.
• 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.
• The GuidedDraggingTool extension has been improved to support centering a Part to have equal space on both sides. Try the tool in the Guided Dragging sample.
• The CommandHandler.zoomToFit command now takes an optional argument so that you can easily perform an animated zoom to a particular Rect in document coordinates.
• The new CommandHandler.storageLocation property may be set to "localStorage" or "sessionStorage" in order to save the clipboard state in a Storage object. For compatibility the value defaults to "memory". This subsumes the implementation in the LocalStorageCommandHandler extension, which remains for compatibility in versions of GoJS older than 3.1, but is now deprecated.
• The new CommandHandler.downloadSvg command makes it easy for your app to download an image of your diagram as SVG. For example, see the Genogram sample.
• The DrawCommandHandler extension has been extended with the DrawCommandHandler.saveLocalFile and DrawCommandHandler.loadLocalFile methods. This supports downloading a JSON-formatted text file produced by Model.toJson, and loading such a file via either a DrawCommandHandler.localFileInput <input> element or a DrawCommandHandler.localFileDropElement drop-handling element. Try it in the Local Files sample.
• SvgRendererOptions now has the "svgFinished" option to allow modifying the whole <svg> element after it has been rendered by Diagram.makeSvg. This is useful if you need to modify the SVG each time it is produced.
• TextBlock.letterSpacing and TextBlock.wordSpacing are new properties that affect the measurement and rendering of text. Caution: these properties are not supported on all platforms.
• New Node methods Node.findSuccessorParts and Node.findPredecessorParts walk the graph starting at a Node, collecting all of the Links and Nodes it sees, but not including the original Node itself. Basically Node.findSuccessorParts returns a Set of all Nodes and Links that are "downstream" from this Node or are "descendants" of this Node. Node.findPredecessorParts does the same, but walking backwards "upstream" or to "ancestors" of the Node.
• Link.corner is now supported for non-orthogonal link segments, so link path turns can look softer without using Bezier Link.curve. For example, see the Double Tree sample, to which we added the setting corner: 10.
• The LayeredDigraphLayout.centered and LayeredDigraphVertex.centered 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.
• The Router.isRoutable method is an overridable predicate to help decide if a particular Link needs to be routed.
• One can now pass arguments to be passed to GraphObject.apply functions, to parameterize a call to an initialization function applied to GraphObjects. For examples, search the samples for calls to GraphObject.apply that have two (or more) arguments. Note how those applied functions also take two (or more) arguments.
• The Rect.nearestSideDirection and Rect.nearestSideDirectionPoint decide which side of a Rect is closest to the given point.
• The Geometry constructor now takes an optional second argument that is used as an initialization object.
• The "ToolTip" Adornment now detects GraphObject.mouseOver events and automatically extends how long the tooltip will stay visible by ToolManager.toolTipDuration milliseconds.
• If the ToolManager.currentToolTip is visible, the Escape key will hide it. Hit Escape again to clear the Diagram.selection and stop any ongoing tool.
• The ContextMenuTool now handles mouse wheel events in the standard fashion when that tool is running, including zooming the diagram scale.
• The ResizingTool can now resize the labels of Links, and the RotatingTool can now rotate the labels of Links, although they continue not to be able to resize or rotate whole Links or their Link paths.
• Animation performance has improved when starting and stopping multiple animations.
• An example Playwright test file is now in the Introduction page about Testing.
• We have added a Venn Diagram sample.
• Minor API incompatibility: ThemeBinding.themeSource no longer accepts null as a value -- use the empty string instead.

Bug fix changes in 3.1 since 3.0

• Bindings with Item Templates that use a named data source will not update unless explicitly updated via Model.set or equivalent. Binding updates on the containing Part will no longer indiscriminately update Item Template bindings.
• 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.
• 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.
• Replacing the Diagram.model will first clear the Diagram.selection and the Diagram.highlighteds collections, allowing for any side effects to be performed to clean up from the old diagram.
• 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.
• Fixed Placeholders incorrectly computing size during some animations.
• Fixed LayeredDigraphLayout routing of Bezier curve Links when the link spots are Spot.Center or offset from there.