Menus

Menus are defined in one or more JSON files. A menu file can define or extend application menu and context menus. All menu files are loaded in alphabetical order.
1
{
2
  "menu": [],
3
  "context-menu": []
4
}
Copied!
The menu JSON files should be placed in menus/ folder of the extension.
1
my-extension/
2
└─ menus/
3
   └─ menu.json
Copied!
Application Menu
Now we're going to explain how to add menu items in application menu that is placed in the top of the screen except in Windows which placing on the top of the StarUML window.
Adding a top-level menu items
We will add a top-level menu item Menu1 and three sub menu items Sub Menu1, Sub Menu2 and Sub Menu3. There will be a separator between Sub Menu2 and Sub Menu3.
We assumes that the commands corresponds to menu items were already defined. To add commands, please refer Adding Commands.
1
{
2
  "menu": [
3
    {
4
      "id": "menu1",
5
      "label": "Menu1",
6
      "submenu": [
7
        {
8
          "label": "Sub Menu1",
9
          "id": "menu1.submenu1",
10
          "command": "example:function1"
11
        },
12
        {
13
          "label": "Sub Menu2",
14
          "id": "menu1.submenu2",
15
          "command": "example:function2"
16
        },
17
        { "type": "separator" },
18
        {
19
          "label": "Sub Menu3",
20
          "id": "menu1.submenu3",
21
          "command": "example:function3"
22
        }
23
      ]
24
    }
25
  ]
26
}
Copied!
Each menu item may have following properties:
id : Unique id of the menu item. If id is omitted, command id will be used for the id.
label : Label for the menu item.
command : A command id to be executed when the menu item selected.
submenu : Submenu items of this menu item.
type : Type of the menu item. One of the values separator | checkbox.
position : Position of the menu item to be added. One of the values first | last (default) | before | after.
relative-id : Relative menu item id for position before and after.
If you want to add a separator:
1
{ "type": "separator" }
Copied!
Adding menu items in existing menu items
You can add menu items to an existing menu such as File, Edit, Tools, etc.
We're going to add two sub menu items under the existing Tools menu item. All menu items have unique ID. If id matches an existing id of menu item, submenu items will be added under the existing menu item.
1
{
2
  "menu": [
3
    {
4
      "id": "tools",
5
      "submenu": [
6
        {
7
          "label": "Tool Sub Menu1",
8
          "id": "tools.submenu1",
9
          "command": "example:function1"
10
        },
11
        {
12
          "label": "Tool Sub Menu2",
13
          "id": "tools.submenu2",
14
          "command": "example:function2"
15
        }
16
      ]
17
    }
18
  ]
19
}
Copied!
Changing states of menu items
Each menu item has three states checked, enabled, and visible. Here we're going to show how to change the states of existing menu items. You will be able to see the changed state in the both application menu and context menus.
Checked state can be changed only for the menu item defined with type is checkbox. To change checked states of menu items as follow.
1
// Change checked states
2
var checkedStates = {
3
  'format.show-shadow': true,  //checked
4
  'format.auto-resize': false  // unchecked
5
}
6
app.menu.updateStates(null, null, checkedState)
Copied!
You can also change the visible and enabled states of the menu item Edit > Select All as follow:
1
// Change visible state
2
app.menu.updateStates({ 'edit.select-all': false }, null, null)  // hide
3
app.menu.updateStates({ 'edit.select-all': true }, null, null)   // show
4
​
5
// Change enabled state
6
app.menu.updateStates(null, { 'edit.select-all': false }, null)  // disabled
7
app.menu.updateStates(null, { 'edit.select-all': true }, null)   // enabled
Copied!
Context Menu
Adding menu items to context menus is basically same with application menu. One difference is that there is only one application menu, but there may be multiple context menus. So the context menus are defined in the menu JSON files as follow:
1
{
2
  "context-menu": {
3
    "<dom-selector-for-context-menu1>": [],
4
    "<dom-selector-for-context-menu2>": [],
5
    ...
6
  }
7
}
Copied!
​DOM selector is used to specify a context menu. This means the context menu will be popup when user click mouse right button on the DOM element specified by the DOM selector.
There are three predefined context menus with DOM selectors.
#diagram-canvas : Diagram Area​
#model-explorer-holder .treeview : Model Explorer​
#working-diagrams ul.listview : Working Diagrams.
Adding menu items in a predefined context menu
We're going to add a menu item to a predefined context menu of Diagram Area.
1
{
2
  "context-menu": {
3
    "#diagram-canvas": [
4
      {
5
        "label": "Submenu1 for Diagram Area",
6
        "id": "example.submenu1",
7
        "command": "example:function1"
8
      }
9
    ]
10
  }
11
}
Copied!
Click mouse right button on diagram area, you will see the added menu item in the context menu.
Adding a new context menu
StarUML even allows adding a new Context Menu for a specific DOM element. In here, instead of adding new DOM element we will use an existing DOM element, Statusbar, which doesn't have any context menu.
Statusbar is defined as a DIV element like as <div id="statusbar" ...></div>. You can find in Elements tab of DevTools (Debug > Show DevTools). We can add a new Context Menu having only one menu item for Statusbar as follow:
1
{
2
  "context-menu": {
3
    "#statusbar": [
4
      {
5
        "label": "Submenu1 for StatusBar",
6
        "id": "example.submenu1",
7
        "command": "example:function1"
8
      }
9
    ]
10
  }
11
}
Copied!
Click mouse right button on Statusbar, you will see the new context menu.

Developing Extensions - Previous

Commands

Next - Developing Extensions

Keymaps

Last modified 4yr ago

Copy link

Contents

Application Menu

Adding a top-level menu items

Adding menu items in existing menu items

Changing states of menu items

Context Menu

Adding menu items in a predefined context menu

Adding a new context menu