How to create a custom GLSPDiagramWidget in 2.0

[wss29]

hi,
I have asked a question on #999, the answer for that problem is to create a custom glsp diagram widget, now I updated to 2.0, because 2.0 changed a lot, I am not sure of the correct steps for creating a new custom in 2.0, could anyone give a guide?

[tortmayr]

HI @wss29,
we overhauled the diagram widget API because in previous versions it was kind of hard to customize the diagram widget,
It requires customization of the GLSPDiagramManager on top of the diagram widget. In addition, it was not possible to use injected services directly.

This has changed with 2.0.0. Diagram widgets are now fully injectable and it is no longer necessary to customize the diagram manager.
So if you are using a custom diagram manager just for the purpose of customizing the diagram widget you can now remove this customization and use the default implementation instead.

Next create your custom diagram widget (using the example provided in #999):

import { GLSPDiagramWidget } from '@eclipse-glsp/theia-integration';
import { Message } from '@phosphor/messaging/lib';
import { MessageService } from '@theia/core/lib/common/message-service';
import { inject, injectable } from '@theia/core/shared/inversify';

@injectable()
export class MyDiagramWidget extends GLSPDiagramWidget {
    @inject(MessageService)
    protected messageService: MessageService;

    protected override onAfterDetach(msg: Message): void {
        this.messageService.info('Diagram detached');
    }
}

Finally all you have to do is adapting your GLSPTheiaFrontendModule.
If you are only using one GLSP diagram language in our Theia application you can simply rebind the GLSPDiagramWidget

    override configure(context: ContainerContext): void {
        context.rebind(GLSPDiagramWidget).to(MyDiagramWidget);
    }

If you are using multiple diagram langauges that should use different custom widgets you have to override the configureDiagramWidgetFactory method of each GLSPTheiaFrontendModule to something like this:

   override bindDiagramWidgetFactory(context: ContainerContext): void {
        context.bind(MyDiagramWidget).toSelf();
        context
            .bind<DiagramWidgetFactory>(DiagramWidgetFactory)
            .toDynamicValue(ctx => ({
                diagramType: this.diagramLanguage.diagramType,
                create: (options, diagramDiContainer) => {
                    const diagramWidget = ctx.container.get(MyDiagramWidget);
                    diagramWidget.configure(options, diagramDiContainer);
                    return diagramWidget;
                }
            }))
            .inSingletonScope();
    }

[tortmayr]

Note that if you just want to dispose a resource in your custom UIExtension its no longer necessary to create a custom widget at all.
With 2.0.0 the diagram container is now unloaded when the Diagram is closed. This means you can use the @preDestroy annotation of inversify to trigger your dispose method when the diagram is closed:

import {inject,preDestroy} from `inversify`;

@inject()
export class MyUIExtension extends AbstractUIExtension implements Disposable {
...

  @preDestroy()
  dipsose():void {
     // put your dispose logic here.
  }
}

[wss29]

thanks very much