Toolbox

If you want to add your tool items in Toolbox, you need to define a toolbox JSON in your extension. The toolbox JSON files should be placed in toolbox/ folder in your extension.
1
my-extension/
2
└─ toolbox/
3
   └─ toolbox.json
Copied!
Tool Group
The toolbox JSON defines an array of Tool Group definitions as below:
1
[
2
  {
3
    "label": "Tool Group 1",
4
    "id": "tool-group-1",
5
    "diagram-types": [ "UMLClassDiagram" ],
6
    "items": [
7
      {
8
        "label": "Tool Item 1",
9
        "id": "tool-item-1",
10
        "icon": "icon-UMLClass",
11
        "rubberband": "rect",
12
        "command": "my:add-element",
13
        "command-arg": {
14
          "id": "UMLClass",
15
          "stereotype": "my-stereotype"
16
        }
17
      },
18
      ...
19
    ]
20
  },
21
  ...
22
]
Copied!
label : The tool group title shown in the Toolbox.
id : Unique identifier.
diagram-types : A list of diagram types. The tool group will be shown only when one of the diagram-types is active. (e.g. "UMLClassDiagram", "UMLUseCaseDiagram", ...)
items : A list of tool item definitions.
Tool Item
A tool item represents an element that users can create on a diagram.
label : The tool item title shown in the Toolbox
id : Unique identifier of the tool item.
icon : Icon CSS class name. You can specify already defined icon names (e.g. "icon-UMLClass", "icon-UMLPackage", ...) or your own CSS class name in stylesheets of your extension.
rubberband : A type of rubberband. One of "rect"(for sizable node-type elements),  "line"(for edge-type elements), "point"(for fixed-size node-type elements).
command : A command name to be executed.
command-arg : An argument object will be passed to the command.
Command
A command used for tool item should create an element on a diagram. We strongly recommend to use app.factory.createModelAndView() function to create an element. See the section for more detail.
Toolbox will pass options object to the command. The passed options parameter contains:
diagram : The active diagram.
id : The identifier of tool item.
x1, y1, x2, y2 : The user dragged area on the diagram.
... : command-arg are combined.
main.js
1
function handleAddElement (options) {
2
  options = Object.assign(options, {
3
    'model-init': {
4
      'stereotype': options.stereotype
5
    },
6
    'view-init': {
7
      'stereotypeDisplay': 'icon',
8
      'suppressAttributes': true,
9
      'suppressOperations': true
10
    }
11
  })
12
  return app.factory.createModelAndView(options)
13
}
14
​
15
app.commands.register('my:add-element', handleAddElement)
Copied!

Developing Extensions - Previous

Keymaps

Next - Developing Extensions

Accessing Elements

Last modified 3mo ago

Copy link

Contents

Tool Group

Tool Item

Command