Menus

One common way for end users to trigger editor extension functionality is through menu items, which can be added either to the main menu or the context menu.

Menu items trigger named actions, which must be registered with EditorClient.registerAction. Named actions may also return values, and can be used as callbacks to determine when a menu item should be visible or enabled.

For example, the following code registers a processBlocksSelected action that returns true if only ProcessBlock shapes are selected, then passes that action's name as the visibleAction when creating a menu item in the Edit menu that will turn the selected shapes red. This example also adds a menu item to the context menu, re-using the same actions:

TypeScript

const client = new EditorClient();
const menu = new Menu(client);
const viewport = new Viewport(client);

client.registerAction('processBlocksSelected', () => {
    const selection = viewport.getSelectedItems();
    return (
        selection.length > 0 &&
        selection.every((item) => item instanceof BlockProxy && item.getClassName() === 'ProcessBlock')
    );
});

client.registerAction('makeSelectionRed', () => {
    for (const item of viewport.getSelectedItems()) {
        item.properties.set('FillColor', '#ff0000ff');
    }
});

menu.addContentDockMenuItem({
    label: 'Turn red',
    action: 'makeSelectionRed',
    location: MenuLocation.Edit,
    visibleAction: 'processBlocksSelected',
});

menu.addContextMenuItem({
    label: 'Turn red',
    action: 'makeSelectionRed',
    visibleAction: 'processBlocksSelected',
});

Menus items can be added to three places, each has a specialized entry point. You can also use the generic entrypoint addMenuItem.

Dropdown Menus

These are the primary dropdown menus (file, edit...) found in the top bar of Lucidchart. In Lucidspark all menus are nested under the one drop down menu in the top left. In Lucidchart a location can be specified (e.g. edit, view) and will default to the Extension menu if not defined. See addContentDockMenuItem for more information.

Context Menu

This is the right click context menu that exists in both Lucidchart and Lucidspark. In order to avoid clutter in the context menu consider defining visibleAction. See addContextMenuItem for more information.

Lucidspark Left Dock

The content dock only exists in Lucidspark. Like other icons it can be pinned and unpinned. It will default to pinned when first added. An icon link is required. See addContentDockMenuItem for more information.