GoJS for HTML5/Canvas 2.1.39

GoJS for HTML5/Canvas 2.1.39
GoJS for HTML5/Canvas 2.1.39

GoJS makes it easy to construct interactive diagrams of Nodes, Links, and Groups, with customizable templates and layouts. GoJS supports graphical templates and data-binding of object properties to model data. Only the model, consisting of simple jаvascript objects, needs to be saved and restored. GoJS makes it easy to read and write models in JSON format. We provide comprehensive API documentation and in-depth overviews of GoJS concepts, with interactive examples. With over 90 samples, you'll find numerous examples of GoJS properties and methods.

Fully Interactive Diagrams
Extensible Layouts and Tool System
Data-Binding and Models
Transactional State and Undo-Management
Mobile Support

Lightning Fast Diagramming in the Browser
GoJS takes advantage of the HTML Canvas to support high-performance diagrams. For creating static documents and printable resources, GoJS supports exporting Diagrams to images and SVG.

GoJS supports all modern browsers (IE9+), including mobile browsers.

Diagrams and Models
The Nodes and Links of a Diagram are visualizations of data that is managed by a Model. GoJS has a model-view architecture, where Models hold the data (arrays of jаvascript objects) that describe nodes and links, and Diagrams act as views to visualize this data using actual Node and Link objects. Models, not Diagrams, are what you load and then save after editing. You add whatever properties you need for your app on the data objects in the model; you do not add properties to or modify the prototype of the Diagram and GraphObject classes.

The diagram displays the three nodes that are in the model. Some interaction is already possible:

Click and drag the background in the above diagram to pan the view.
Click a node to select it, or press down on and drag a node to move it around.
To create a selection box, click and hold on the background, then start dragging.
Use CTRL-C and CTRL-V, or control-drag-and-drop, to make a copy of the selection.
Press the Delete key to delete selected nodes. (Read about more Keyboard Commands.)
Since the undo manager was enabled, CTRL-Z and CTRL-Y will undo and redo moves and copies and deletions.
Styling Nodes
Nodes are styled by creating templates consisting of GraphObjects and setting properties on those objects. To create a Node, we have several building block classes at our disposal:

Shape, to display pre-defined or custom geometry with colors
TextBlock, to display (potentially editable) text in various fonts
Picture, to display images
Panel, containers to hold a collection of other objects that can be positioned and sized in different manners according to the type of the Panel (like tables, vertical stacks, and stretching containers)
All of these building blocks are derived from the GraphObject abstract class, so we casually refer to them as GraphObjects or objects or elements. Note that a GraphObject is not an HTML DOM element, so there is not as much overhead in creating or modifying such objects.

We want the model data properties to affect our Nodes, and this is done by way of data bindings. Data bindings allow us to change the appearance and behavior of GraphObjects in Nodes by automatically setting properties on those GraphObjects to values that are taken from the model data. The model data objects are plain jаvascript objects. You can choose to use whatever property names you like on the node data in the model.

Kinds of Models
With a custom node template our diagram is becoming a pretty sight, but perhaps we want to show more. Perhaps we want an organizational chart to show that Don Meow is really the boss of a cat cartel. So we will create a complete organization chart diagram by adding some Links to show the relationship between individual nodes and a Layout to automatically position the nodes.

In order to get links into our diagram, the basic Model is not going to cut it. We are going to have to pick one of the other two models in GoJS, both of which support Links. These are GraphLinksModel and TreeModel. (Read more about models here.)

In GraphLinksModel, we have model.linkDataArray in addition to the model.nodeDataArray. It holds an array of jаvascript objects, each describing a link by specifying the "to" and "from" node keys. Here's an example where node A links to node B and where node B links to node C:

Diagram Layouts
As you can see the TreeModel automatically creates the necessary Links to associate the Nodes, but it's hard to tell whose parent is who.

Diagrams have a default layout which takes all nodes that do not have a location and gives them locations, arranging them in a grid. We could explicitly give each of our nodes a location to sort out this organizational mess, but as an easier solution in our case, we will use a layout that gives us good locations automatically.

We want to show a hierarchy, and are already using a TreeModel, so the most natural layout choice is TreeLayout. TreeLayout defaults to flowing from left to right, so to get it to flow from top to bottom (as is common in organizational diagrams), we will set the angle property to 90.

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 sample 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 Sample: 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.

Changes for 2.1.39
Reorganized GoJS kit and site. gojs package no longer contains jQuery, and samples that reference jQuery use a CDN.
Fixed a bug when animating the position of GraphObjects inside a Position Panel.

Users of Guests are not allowed to comment this publication.