This sample demonstrates tooltips and context menus for all parts and for the diagram background, as well as several other powerful diagram editing abilities.
Unlike the Minimal sample, this sample has templates for Links and for Groups, plus tooltips and context menus for Nodes, for Links, for Groups, and for the Diagram.
This sample has all of the functionality of the Minimal sample, but additionally allows the user to:
GoJS contains many other possible commands, which can be invoked by either mouse/keyboard/touch or programmatically. See an overview of possible commands here. On a Mac, use CMD instead of Ctrl.
On touch devices, hold your finger stationary to bring up a context menu. The default context menu supports most of the standard commands that are enabled at that time for that object.
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.
A tooltip is an Adornment that is shown when the mouse hovers over an object that has its GraphObject.toolTip set. The tooltip part is bound to the same data as the part itself.
It is typical to implement a tooltip as a "ToolTip" Panel holding a TextBlock or a Panel of TextBlocks and other objects. Each "ToolTip" is just an "Auto" Panel Adornment that is shadowed, and where the border is a rectangular Shape with a light gray fill. However you can implement the tooltip as any arbitrarily complicated Adornment.
More information can be found in the GoJS Intro.
A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.
It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s,
as you can see in the code below in the assignment of the Node's GraphObject.contextMenu and Diagram.contextMenu properties.
Each "ContextMenu" is just a "Vertical" Panel Adornment that is shadowed.
Each "ContextMenuButton" is a Panel on which you can set the GraphObject.click event handler.
In the event handler obj.part will be the whole context menu Adornment.
obj.part.adornedPart will be the adorned Node or Link.
The bound data is obj.part.data, which will be the same as obj.part.adornedPart.data.
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.