Layout of Parallel Flows from Split Node to Merge Node
This sample demonstrates a custom TreeLayout, ParallelLayout, which assumes that there is a single "Split" node that is the root of a tree, other than links that connect with a single "Merge" node. The layout is defined in its own file, as ParallelLayout.js.
Both the Diagram.layout and the Group.layout are instances of ParallelLayout, allowing for nested layouts that appear in parallel.
GoJS Features in this sample
Tree Layout
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the learn Trees page. More information can be found in the GoJS learn pages.
Custom Layouts
GoJS allows for the creation of custom layouts to meet specific needs.
There are also many layouts that are extensions -- not predefined in the
go.js or go-debug.js library, but available as source code in
one of the three extension directories, with some documentation and corresponding
samples. More information can be found in the
GoJS learn pages.
Groups
The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.
A subgraph is not another Diagram, so there is no separate HTML div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.
More information can be found in the GoJS learn pages.
Buttons
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.build. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS learn pages.
GoJS Extensions
GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.
In addition to our samples, GoJS provides an
extensions gallery, showcasing the creation of custom tools and layouts. Those classes and samples are
written in TypeScript, available at ../extensionsJSM/, as
ECMAScript/JavaScript modules -- these use the
../release/go-module.js library. We recommend that you copy the files that
you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging
procedures.
More information can be found in the GoJS learn pages.