Add custom menu

Custom menu is a context menu that contains your custom command or actions. Custom menu can be added to a shape.

Developer mode is used to show or hide the custom menu in Properties dialog.

Custom menu properties
Custom menu properties

Viewing custom menu

To view the Custom Menu dialog:

  • First, click on menu View | Show properties

  • Second, click on menu View | Show developer mode

To hide the Custom Menu dialog:

  • Click on menu View | Hide developer mode

Selecting a shape will display custom menus assigned to the selected shape

Understanding custom menu

Add a custom menu, and you will find 4 inputs:

  • Title - Defines the name of a menu item that appears in the context menu. Add underscore to the front of your title to have a separator after your menu.
  • Disable - Indicates whether a menu item is disabled in the context menu.
  • Action - The command to be executed when clicked on the menu.
  • Select - Indicates whether a menu item is selected in the context menu.

You can have string or formula in the inputs.

Selecting a custom menu

To select menu(s):

  • Click on the menu icon on Custom Menu.
Select custom menu
Select custom menu

Rearrange custom menu

Menu can be rearranged in any order. To rearrange, drag and position any menu as desired.

Rearrange custom menu
Rearrange custom menu

Example of custom menu

Let's say you would like a custom menu to change the color of the shape.

  • Select a shape, add a menu item on Custom Menu dialog
  • Give the menu a title; put at the Title input, for example Toggle Shape Color.
  • Add the formula below to the Action input.
this.fill() === '#f44336' ? this.fill('#8bc34a') : this.fill('#f44336')

Now, try to right-click on your shape and see the magic!

vecta.io Early Access