Skip to main content
Version: 2.0-deprecated

Module: Toolbar

An extension can register a Toolbar Module by defining a getToolbarModule method. This module is commonly used to define:

Toolbar Extension

Example toolbar button using the Dialog Service to show CINE controls.

Example Toolbar Module​

The Toolbar Module should return an array of definitions and a defaultContext. There are currently a few different variations of definitions, each one is detailed further down.

export default {
id: 'example-toolbar-module',

/**
* @param {object} params
* @param {ServicesManager} params.servicesManager
* @param {CommandsManager} params.commandsManager
*/
getToolbarModule({ servicesManager, commandsManager }) {
return {
definitions: [
/* Array of definitions */
],
defaultContext: ['ROUTE:VIEWER'],
};
},
};

Button Definitions​

The simplest definition has the following properties:

{
id: 'StackScroll',
label: 'Stack Scroll',
icon: 'bars',
type: 'setToolActive',
commandName: 'setToolActive',
commandOptions: { toolName: 'StackScroll' },
},
propertydescriptionvalues
idUnique string identifier for the definition*
labelUser/display friendly to show in UI*
iconA string name for an icon supported by the consuming application.*
typeUsed to determine the button's component and behavior"setToolActive", "command"
commandName(optional) The command to run when the button is used.Any command registered by a CommandModule
commandOptions(optional) Options to pass the target commandName*
context(optional) Overrides module's defaultContextArray of string context names

Where a button with a type of setToolActive has an "active" styling applied when clicked; removing the active styling from all other buttons.

Nested Toolbar Menus​

You can indicate that buttons should be grouped and nested in a submenu by including buttons property in a definition:

{
id: 'More',
label: 'More',
icon: 'ellipse-circle',
buttons: [
{
id: 'cstInvert',
label: 'Invert',
icon: 'circle',
type: 'command',
commandName: 'invertViewport',
},
],
},

Toolbar Extension

Example toolbar button demonstrating nested buttons.

Custom Components​

The Toolbar Modules supports rendering custom components in place of the application's default. In place of the type, commandName, and commandOptions properties, we instead specify a CustomComponent.

{
id: 'Custom',
label: 'Custom',
icon: 'custom-icon',
CustomComponent: CustomToolbarComponent,
}

The CustomComponent components will receive the following props:

<CustomComponent
parentContext="{parentContext}"
toolbarClickCallback="{_handleToolbarButtonClick.bind(this)}"
button="{button}"
key="{button.id}"
activeButtons="{activeButtonsIds}"
isActive="{isActive}"
/>
PropertyTypeDescription
activeButtonsstring[]list of active buttons
buttonobjectits own definition object
keystringReact key prop
isActivebooleanIf current button is active
parentContext?The parent component's context?
toolbarClickCallbackfuncCallback method for clicks