Execute a command other than via context menu

[madamedefarge]

I have a command registered in the Theia CommandRegistry in my theia frontend module and an entry in the GLSP context menu. This works well. However it's not particularly visible/ obvious to users. I'd like to be able to add a menu entry to a UIExtension such as the ToolPalette.
Is it at all possible to do this? Or to execute a command programmatically as the result of a UI event?

Thanks in advance.

[tortmayr]

Hi @madamedefarge,

Yes, this is possible. You can inject the CommandRegistry into your UIExtension and then setup an event-Listener for an UI-Event e.g. onClick that then calls this.commandRegistry.executeCommand('my-command-id);

Here is a quick overview of the implementation steps for customzing e.g. the ToolPalette:

• Create a subclass that extends the ToolPalette class ( let's call it MyToolPalette)

• Inject the Theia ComandRegistry into this class:

  @injectable()
  export class MyToolPalette extends ToolPalette {
      @inject(CommandRegistry)
      protected readonly commandRegistry: CommandRegistry;
  
    //...
  }

• Create the new UI element that you want to use for sending the commands (e.g. a Button, MenuEntry etc.)

• Setup the eventListener:

  newButton.onclick = () => {
             this.commandRegistry.executeCommand('some-theia-command-id');
    };

  • Configure the new custom Toolpalette via rebinding. Since the custom Toolpalette contains Theia-specific code the rebinding should happen in your theia-integration package i.e. in your DiagramConfiguration

  @injectable()
   export class MyDiagramConfiguration extends GLSPDiagramConfiguration {
  
    //...
  
    protected override initializeContainer(container: Container): void {
        super.initializeContainer(container);
        container.rebind(ToolPalette).to(MyToolPalette).inSingletonScope();
    }
  }

[madamedefarge]

Thank you so much! This is exactly what I needed.