GoJS for HTML5/Canvas 1.8.21
GoJS for HTML5/Canvas 1.8.21
Fully Interactive Diagrams
Extensible Layouts and Tool System
Data-Binding and Models
Transactional State and Undo-Management
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 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.
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.
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.)
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.