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:

- create new nodes: double-click in the background of the diagram
- edit text: select the node and then click on the text, or select the node and press F2
- draw new links: drag from the inner edge of the node's or the group's shape
- reconnect existing links: select the link and then drag the diamond-shaped handle at either end of the link
- group nodes and links: select some nodes and links and then type Ctrl-G (or invoke via context menu)
- ungroup an existing group: select a group and then type Ctrl-Shift-G (or invoke via context menu)

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.

### GoJS Features in this sample

#### 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 Intro.

Related samples

#### ToolTips

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.

Related samples

#### Context Menus

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.

Related samples

#### 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.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.

Related samples