Skip to main content
Version: Version 2.0

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' },},
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 registed 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="{}"  activeButtons="{activeButtonsIds}"  isActive="{isActive}"/>
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