How to add an UIExtension?

[rsoika]

Hi,
I am currently working on a new feature to show up a property-panel within the diagram pane simmilar to the ToolPalette.

For that I created a new AbstractUIExtension following the Implementation of the ToolPalette and the direct-task-editor from the minimal example:

@injectable()
export class PropertyPanel extends AbstractUIExtension implements IActionHandler, EditModeListener {
    static readonly ID = 'bpmn-property-panel';
    .....
    @postConstruct()
    postConstruct(): void {
        this.editorContext.register(this);
    }
    protected initializeContents(_containerElement: HTMLElement): void {
        this.createHeader();
        this.createBody();
        this.lastActivebutton = this.defaultToolsButton;
    }
    ....
}

In addition I defined a di.config - which I think is not necessary ???

import { ContainerModule } from 'inversify';
import { 
	configureActionHandler,
	// EnableDefaultToolsAction,
	TYPES } from 'sprotty';
import '../../css/property-panel.css';
import { PropertyPanel,EnablePropertyPanelAction } from './property-panel';

export const propertyViewModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
    bind(PropertyPanel).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(PropertyPanel);
    configureActionHandler({ bind, isBound }, EnablePropertyPanelAction.KIND, PropertyPanel);
    // configureActionHandler({ bind, isBound }, EnableDefaultToolsAction.KIND, PropertyPanel);
});

And than finally I tried to add my new Extension in the method call 'createClientContainer' as seen in the next example:

....
import { propertyViewModule } from './property-panel/di.config';
const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    ....
    configureDefaultModelElements(context);
    ....
});

export default function createContainer(widgetId: string): Container {
    // ADD MY UIExtension as a module.............................................         ▾
    const container = createClientContainer(bpmnDiagramModule, directTaskEditor, propertyViewModule);
    overrideViewerOptions(container, {
        baseDiv: widgetId,
        hiddenDiv: widgetId + '_hidden'
    });
    return container;
}

So this was all very similar to the directTaskEditor example. I recognized that my module was triggered somehow and the initializeContents method was called. But my property panel never was shown in the diagram pane and it was never added to div of the diagram like the ToolPalette.

Than I changed the way to add my property panel by binding it in the new constructor of the ContainerModule like this:

....
import {PropertyPanel} from './property-panel/property-panel';

const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
	console.log('.......ich bin hier ind er haupt di.config');
    rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
    rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);
    bind(TYPES.ISnapper).to(GridSnapper);
    // ADD MY UIExtension
    bind(TYPES.IUIExtension).to(PropertyPanel);
   ....
}

And now it works! My property panel is shown in the diagram pane and was added aligned to the ToolPalette.

This was at the end great but also surprising.

My question is: what is the correct way to add such an UIExtension? Why is the directTaskEditor UIExtension from the minimal example added as a module and why did this not work for my PropertyPanel? I just want to understand this a little bit better to avoid running from now on in the wrong direction.

Thanks for help

===
Ralph

[tortmayr]

Hi @rsoika,

In addition I defined a di.config - which I think is not necessary ???

You are right a separate module in a di.config is not strictly necessary. You could always define your additional bindings as part of the main diagram module (i.e. the main di.config) which in your case seems to be the bpmnDiagramModule. In general it's up to the adopter whether he wants to provide new features in a separate feature module or as part of the main diagram module.
For the GLSP base framework using feature modules makes a lot of sense because it enables adopters to easily disable features that they don't need or replace them with custom modules that are tailored to their needs.

My question is: what is the correct way to add such an UIExtension? Why is the directTaskEditor UIExtension from the minimal example added as a module and why did this not work for my PropertyPanel? I just want to understand this a little bit better to avoid running from now on in the wrong direction.

To be honest I don't know why your first approach (using a separate module) didn't work. The code looks correct to me and IMO it should
work and you should be able to render your PropertyPanel. As mentioned above there is no "correct" way and both approaches are perfectly valid. I

[rsoika]

It also works now with the separate module and the di.config.
It seems that my problem was that in the di.confg I also call configureActionHandler

  configureActionHandler({ bind, isBound }, EnablePropertyPanelAction.KIND, PropertyPanel);

This was a code fragment I simply copied from the toolPalette code base. After I removed this my property panel is initialized and shown.