How to remove duplicate menu options for the diagram menu option

[Abhay0294]

Hi,

I have an issue where I am getting duplicate menu options for the diagram menu. Below is the screenshot of the issue:

I was just going through the code where these options are created and the file is glsp-layout-commands.ts. There everything seems to be fine. Also I have not overridden this class or added added options by myself.

Requesting for the suggestions what could be the possibilities which is causing this.

[planger]

Hi, do you have multiple diagrams in one Theia application?
If yes, this may be caused by #804. You can workaround that by customizing the command contribution and only show them if an editor is active. I believe @ndoschek knows more about this, am I right?

[Abhay0294]

@planger , yes you're right I have 5 diagrams in one application.

[Abhay0294]

@ndoschek , if possible can you help by providing the suggestion on how I can handle this scenario ?

[ndoschek]

Hi @Abhay0294,

As Philip already mentioned we are planning to resolve this issue in a more generic way with the linked issue.
In the meantime, the suggested workaround could look like this:

Create a customized GLSPCommandHandler for each of your diagram types:

export function isMyCustomDiagramType(diagramType: string): boolean {
    return diagramType === MyCustomLanguage.diagramType;
}

export class MyCustomGLSPCommandHandler extends GLSPCommandHandler {
    override isEnabled(): boolean {
        return (
            this.diagramWidget !== undefined &&
            isMyCustomDiagramType(this.diagramWidget.diagramType) &&
            super.isEnabled()
        );
    }

    override isVisible(): boolean {
        return (
            this.diagramWidget !== undefined &&
            isMyCustomDiagramType(this.diagramWidget.diagramType) &&
            super.isVisible()
        );
    }

    override isToggled(): boolean {
        return (
            this.diagramWidget !== undefined &&
            isMyCustomDiagramType(this.diagramWidget.diagramType) &&
            super.isToggled()
        );
    }
}

And make use of it in a customized GLSPLayoutCommandContribution:

@injectable()
export class MyCustomGLSPLayoutCommandContribution extends GLSPLayoutCommandContribution {
   override registerResize(...): void {
        registry.registerCommand(
            { ... },
            new MyCustomGLSPCommandHandler(this.shell, {{ ... })
        );
    } 
   override registerAlign(...): void {
        registry.registerCommand(
            { ... },
            new MyCustomGLSPCommandHandler(this.shell, { ... })
        );
    }
}

And finally bind your customized command contribution in the register function that you use in your diagram container module:

export function registerMyCustomDiagramLayoutCommands(bind: interfaces.Bind): void {
    bindAsService(bind, CommandContribution, MyCustomGLSPLayoutCommandContribution);
    bindAsService(bind, MenuContribution, GLSPLayoutMenuContribution);
    bindAsService(bind, KeybindingContribution, GLSPLayoutKeybindingContribution);
}

This ensures that the commands bound in this diagram container are only enabled/visible/toggleable for diagrams of the same diagramType.

HTH and best regards,
Nina

[Abhay0294]

Thanks @ndoschek for the fix.