GoJS 2.1
New Animation Capabilities
GoJS 2.1 contains a number of new features to animate different components of your Diagram.
See the Intro page on Animation and the Custom Animation extension for more details and examples.
- New default GoJS animation “fades up”, instead of animating Node locations. Added AnimationManager.initialAnimationStyle to control this behavior. Here is an example of:
- (top) The new initial animation, the Diagram position animating upwards and Diagram opacity animating from 0 to 1.
- (middle) A custom “zoom in” animation, animating Diagram scale, which is demonstrated in the new State Chart sample,
- (bottom) AnimationManager.initialAnimationStyle set to AnimationManager.AnimateLocations to perform the GoJS 2.0 and previous style of animation. The Data Visualization sample uses this option.
- Added
"InitialAnimationStarting"DiagramEvent to more easily customize initial animations. See AnimationManager.initialAnimationStyle for details. - New class: AnimationTrigger. These describe how to automatically animate a property on a GraphObject when it changes value.
- New class: Animation. This class lets you declaratively setup custom animations, with options for indefinite animations.
- New AnimationManager options, including the ability to define custom animation effects to animate with AnimationManager.defineAnimationEffect
- New Animation samples and samples modified to use new Animation features:
- Custom Animation - New Extension: Demonstrating a number of Node creation/deletion animations, linking animations, and more.
- Tree Load Animation - New Sample: recursive animation upon model load.
- Flowchart - In the Palette only, initial animation is disabled in favor of a custom fade-in animation.
- State Chart - Initial animation is disabled in favor of a custom zoom fade-in animation.
- Data Visualization - Nodes now move using an AnimationTrigger.
- Kitten Monitor - Kittens now move using an AnimationTrigger.
- Process Flow - An indefinite Animation of the Links’ strokeDashArray.
- Shop Floor Monitor - Link color changes now use an AnimationTrigger.
Improved Support For Data Synchronization
GoJS 2.1 contains some new methods to ease integration of GoJS diagrams in applications that maintain their own data, particularly React apps.
See the Intro page on using GoJS with React and the gojs-react example project for details and examples. Also see gojs-react, a package containing React Components for GoJS Diagrams, Palettes, and Overviews.
- New method: Model.toIncrementalData. This method outputs an IncrementalData object containing changes that occurred within a Transaction, similar to the existing method, Model.toIncrementalJson. It can be used to keep outside data synchronized with the GoJS model.
- New methods: Model.mergeNodeDataArray and GraphLinksModel.mergeLinkDataArray. These methods are used to merge outside data changes into the GoJS model.
- New method: Model.cloneDeep. This method can be used to make a deep copy of an object, which may be useful to ensure GoJS doesn’t share references with outside state. It is also used within Model.toIncrementalData to ensure IncrementalData’s list of modified objects won’t contain references to the model’s data objects.
Other Changes for 2.1.0:
- Added DoubleTreeLayout to the extensions and extensionsTS directories. This is now used by both the Double Tree and Double Tree JSON samples.
- Updated the sequencing of “ChangingSelection” and “ChangedSelection” DiagramEvents to be outside of transactions for commands and tools. Exceptions include “ChangingSelection” being called during “Drag” and “Linking” operations when drag-copying or inserting a link. With “ChangedSelection” occuring after a transaction completes, any changes will be complete and can be used in the listener.
- CommandHandler.zoomToFit now animates by default.
- Improved the ContextMenuTool.defaultTouchContextMenu’s “Paste” command to use the ContextMenuTool.mouseDownPoint rather than the Diagram.lastInput’s InputEvent.documentPoint.
- Added new property, Diagram.opacity. This may be useful for fade-in/out animations, or visual indication of a disabled Diagram.
- Added new method, Diagram.findLinkForKey, which will look for a link corresponding to a model’s link data object’s unique key. This will only return a link when using a GraphLinksModel with GraphLinksModel.linkKeyProperty set to a non-empty string.
- Model.applyIncrementalJson now throws an error if model properties (eg. nodeKeyProperty) included in the JSON don’t match the existing model. This check only includes properties included in the output from Model.toIncrementalJson.
- Added new methods, Picture.reload, which reloads a Picture source in case the file on the server has changed, and Picture.redraw which redraws the picture, and can be useful to update the Picture if the source is backed by an HTML Canvas or HTML Video Element.
- Added new samples:
- SVG Data URL - Export SVG with Base64 hrefs instead of the Picture.source URL
For previous releases, see: GoJS version 2.0.18 - #2