Context Toolbar

Context toolbars are an alternative to traditional context menus. It can be enabled by setting enableContextToolbar to truein the canvas config.

A context toolbar is a small toolbar that appears above nodes, links and comments as the mouse cursor is hovered over them. A context toolbar for the canvas background can also be displayed by right-clicking on the canvas background.

The context toolbar displays a set of icons that represent the most likely actions the user would want to perform on the object under the mouse cursor. If necessary, the toolbar can also show an overflow (vertical ellipsis) icon that, when clicked, reveals additional actions that can be performed on the object.

For a “vertical” style node the context toolbar looks like this:

For a “horizontal” style node it looks like this:

when the user clicks the overflow icon it looks like this:

Note: Since the mouse cursor can be hovered over a node, comment or link that is NOT currently selected, the actions shown in the context toolbar will apply to just that object, even if there is one or more currently selected objects.

If the mouse cursor is hovered over a selected object when there are other selected objects, the actions in the context toolbar will be applicable to all the selected objects. This is the same as how a traditional content menu shows actions that are applicable to the set of selected objects.

Populating the context toolbars

By default, Common Canvas will display appropriate context toolbars for all flow editor canvas objects. The application can override or replace the default toolbars by implementing the contextMenuHandler callback.