This sample is like the Mapping Fields of Records sample, but it has a collapsible tree of nodes on each side, rather than a simple list of items. The implementation of the trees comes from the Tree View sample.
Draw new links by dragging from any field (i.e. any tree node). Reconnect a selected link by dragging its diamond-shaped handle. A minor enhancement to this diagram supports operator nodes that transform data from various fields on the left to provide values for fields on the right.
This sample supports three different routing styles:
"Normal"
"ToGroup", where the links stop at the border of the group
"ToNode", where the links bend at the border of the group but go all the way to the node, as normal
There is a variation of this sample where the tree on the right is mirrored, so that the links naturally connect closer to the nodes in the tree.
The model data, automatically updated after each change or undo or redo:
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 Intro.
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 Trees page in the Introduction. More information can be found in the GoJS Intro.
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.make. 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 Intro.