Menu Contribution

[JValGLZ]

Hello, I was wondering how I could go about adding a new menu selection. I have designed the following simple menu contribution.

@injectable()
export class USEOCLMenuContribution implements MenuContribution {
    registerMenus(registry: MenuModelRegistry): void {
        const menuPath = [...MAIN_MENU_BAR, '7_OCLmenu'];
        registry.registerSubmenu(menuPath, 'OCL');`

        registry.registerMenuAction(menuPath, {
            commandId: USEOCLCommands.EVALUATE,
            label: 'Evaluate Expression
        });
    }
}

I have binded it in the tasklist diagram module as:
bindAsService(context, MenuContribution, USEOCLMenuContribution);

When I build the client, it is successful, but I am not sure how to get it to appear as one of the menu selections. Please let me know what step I am missing or how I can change it.

Thank you!

[planger]

Hi,

in general your code looks valid, however, I'm not sure what the value of MAIN_MENU_BAR is. The first argument is supposed to take the menu path indicating to which menu your item shall be added.

For adding a context menu to GLSP diagram elements, you need to use the GLSPContextMenu.MENU_PATH as a base, because this is the menu path, GLSP takes when creating the context menu. There are a few examples in the Theia Workflow editor:
https://github.com/eclipse-glsp/glsp-theia-integration/blob/master/examples/workflow-theia/src/browser/diagram/workflow-navigation-context-menu.ts#L94

See also https://theia-ide.org/docs/commands_keybindings#contributing-menu-items

Hope this helps!

[JValGLZ]

Hello! Thank you for the reply!

I used MAIN_MENU_BAR because when I scrolled over MenuContribution, there was an example and it mentioned to use MAIN_MENU_BAR.

I have tried using the GLSPContextMenu.MENU_PATH as the following:
@injectable() export class USEOCLMenuContribution implements MenuContribution { static readonly NAVIGATION = GLSPContextMenu.MENU_PATH.concat('OCL'); registerMenus(registry: MenuModelRegistry): void { registry.registerSubmenu(USEOCLMenuContribution.NAVIGATION.concat('o'), 'OCL'); registry.registerMenuAction(USEOCLMenu.OCL, { commandId: USEOCLCommands.EVALUATE, label: 'Evaluate Expression' }); } }
and attempted to bind it in both ways:
bindAsService(context, MenuContribution, USEOCLMenuContribution);
context.bind(MenuContribution).to(USEOCLMenuContribution);

but I am not getting it to appear as one of the menu options at the top. I assume I am getting the path incorrectly. I am trying to make it so that it appears as its own tab. Thank you

[tortmayr]

@JValGLZ
Your first approach was correct, if you want to add a menu to the menu options at the top you should use MAIN_MENU_BAR.
The GLSPContextMenu.MENU_PATH is the path for the context menu inside of the diagram editor.

I have binded it in the tasklist diagram module as:
bindAsService(context, MenuContribution, USEOCLMenuContribution);

I think that`s the problem here. The diagram module is loaded into the diagram-specific DI container (which is created on runtime when oping a new diagram widget). That is the wrong place.

Menu contributions need to be loaded into the main Theia DI container.
You can either add the bindings in your GLSPTheiaFrontendModule:

export class MyTheiaFrontendModule extends GLSPTheiaFrontendModule {
    override configure(context: ContainerContext): void {
        context.bind(MenuContribution).to(USEOCLMenuContribution);
    }

Or use the default Theiaa approach and create an entire new theia frontend module for your customizations :

// my-frontend-module.ts
import { ContainerModule } from '@theia/core/shared/inversify';

export default myFrontendModule = new ContainerModule(bind => {
    bind(GLSPClientContribution).to(WorkflowGLSPClientContribution);
});

and add it to the package.json:

{
...
"theiaExtensions": [
    {
      "frontend": "lib/browser/theia-integration-frontend-module",
      "backend": "lib/node/theia-integration-backend-module"
    },
    {
      "frontend": "lib/browser/my-frontend-module"
    }
  ]
}

Please also make sure that you have a command handler registered for USEOCLCommands.EVALUATE otherwise the menu entry will also not be visible.

[JValGLZ]

Hello, I believe my issue is that I am not sure where I am placing the code. I made the following menu contribution and command contribution.

@injectable()
export class USEOCLMenuContribution implements MenuContribution {
    static readonly NAVIGATION = MAIN_MENU_BAR.concat('OCL');

    registerMenus(registry: MenuModelRegistry): void {
        registry.registerSubmenu(USEOCLMenuContribution.NAVIGATION, 'OCL');

        registry.registerMenuAction(USEOCLMenu.OCL, {
            commandId: USEOCLCommands.EVALUATE,
            label: 'Evaluate Expression'
        });
    }
}

@injectable()
export class USEOCLCommandContribution implements CommandContribution {
    @inject(MessageService)
    protected readonly messageService: MessageService;
    @inject(ApplicationShell) protected readonly shell: ApplicationShell;

    registerCommands(registry: CommandRegistry): void {
        registry.registerCommand({
            id: USEOCLCommands.EVALUATE,
            label: 'Center'
        });
        registry.registerHandler(
            USEOCLCommands.EVALUATE,
            new GLSPCommandHandler(this.shell, {
                actions: () => SetUIExtensionVisibilityAction.create({ extensionId: 'dialog_box', visible: true }),
                alwaysVisible: true
            })
        );
    }
}

Then I created my frontend module that extends GLSPTheiaFrontendModule which was the following.

export class USETheiaFrontendModule extends GLSPTheiaFrontendModule {
    protected override diagramLanguage: GLSPDiagramLanguage;
    override bindDiagramConfiguration(context: ContainerContext): void {}

    override configure(context: ContainerContext): void {
        context.bind(CommandContribution).to(USEOCLCommandContribution);
        context.bind(MenuContribution).to(USEOCLMenuContribution);
    }
}

export default new USETheiaFrontendModule();

When I build and startup the client, I see no change in the menu bar for the new menu item.
I have all of this code changes under the Tasklist GLSP java-emf-theia version.
I placed the code in the Tasklist-glsp, src folder temporarily.
Please let me know if it is an issue in placement or code.

[tortmayr]

At first glance your code and the placement looks correct to me and should work.
I will try to reproduce your example with the java-emf-theia template to figure out what is wrong.