This sample demonstrates buttons that appear when the user hovers over a node with the mouse. The advantage of using an Adornment is that it keeps the Node template simpler. That means there are less resources used to create nodes -- only that one adornment can be shown.

However, using a template as the Part.selectionAdornmentTemplate would allow for more than one set of buttons to be shown simultaneously, one set for each selected node.

This technique does not work on touch devices.

If you want to show such an Adornment on mouseEnter and mouseLeave, rather than on mouseHover, the code is given in the documentation for the GraphObject.mouseEnter property.

GoJS Features in this sample


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