Toolbar

You can add buttons to Toolbar on the right side of the diagram area. In StarUML 7 or earlier, extensions added buttons by inserting DOM elements to #toolbar .buttons with jQuery and CSS. StarUML 8 has no DOM and CSS, so use app.toolbar.addButton() instead.

Adding a button

Call app.toolbar.addButton() in init() of main.js.

main.js

function init () {
  app.commands.register('helloworld:show-message', handleShowMessage, 'Show Message')
  app.toolbar.addButton({
    id: 'toolbar-helloworld',
    title: 'Hello World',
    icon: __dirname + '/icon.svg',
    command: 'helloworld:show-message'
  })
}

exports.init = init

• id : Unique identifier of the button. Calling addButton again with the same id replaces the button.
• title : Tooltip of the button.
• icon : The absolute path of the icon file (SVG or PNG). Use __dirname to make the path of a file in your extension.
• command : A command id to be executed when the button pressed.

Icon

The icon file can have one of the following two formats.

• 24×24 icon : The same shape is used in the normal state and the selected state.
• 48×24 sprite : The left half is used in the normal state and the right half is used in the selected state. The toolbar icons (stylesheets/*.svg) of the extensions for StarUML 7 or earlier can be used as they are.

Only the shape (alpha channel) of the icon is used. The normal state is drawn in the toolbar icon color of the theme, and the selected state of a 24×24 icon is drawn in the accent color of the theme, so the icon is visible in both light and dark themes. Only the selected state of a sprite (the right half) is drawn in its own colors.

Selected state

To show a toggled state (e.g. a button opening a panel), call app.toolbar.setSelected().

app.toolbar.setSelected('toolbar-helloworld', true)  // selected
app.toolbar.setSelected('toolbar-helloworld', false) // not selected

You can also show and hide Toolbar by app.toolbar.show(), app.toolbar.hide() and app.toolbar.toggle().