configureActionHandler breaks AbstractUIExtension

[rsoika]

Hi,

I have written a simple UIExtension in a separate module extending my diagram ContainerModule to display an additional property panel.

The Implementation looks like this:

import { inject, injectable, postConstruct } from 'inversify';
import {
    AbstractUIExtension,
    Action,
    EnableDefaultToolsAction,
    EnableToolsAction,
    SetUIExtensionVisibilityAction,
    SModelRoot,
    SelectAction,
    TYPES
} from 'sprotty';
import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
import {
	GLSPActionDispatcher,
	EditModeListener,
	EditorContextService
} from '@eclipse-glsp/client';

@injectable()
export class EnableBPMNPropertyPanelAction implements Action {
    static readonly KIND = 'enableBPMNPropertyPanel';
    readonly kind = EnableBPMNPropertyPanelAction.KIND;
}

@injectable()
export class PropertyPanel extends AbstractUIExtension implements EditModeListener {
    static readonly ID = 'bpmn-property-panel';

    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
    @inject(EditorContextService) protected readonly editorContext: EditorContextService;

    protected bodyDiv?: HTMLElement;
    modelRootId: string;

    id(): string {
        return PropertyPanel.ID;
    }
    containerClass(): string {
        return PropertyPanel.ID;
    }

    @postConstruct()
    postConstruct(): void {
        this.editorContext.register(this);
    }

    initialize(): boolean {
        return super.initialize();
    }

    protected initializeContents(_containerElement: HTMLElement): void {
        this.createHeader();
        this.createBody();
    }

    protected onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
        this.modelRootId = root.id;
    }

    protected createHeader(): void {
        const headerCompartment = document.createElement('div');
        headerCompartment.classList.add('bpmn-property-header');
        headerCompartment.append(this.createHeaderTitle());
        headerCompartment.appendChild(this.createHeaderTools());
        this.containerElement.appendChild(headerCompartment);
    }

    protected createBody(): void {
        const bodyDiv = document.createElement('div');
        bodyDiv.classList.add('properties-body');
        this.containerElement.appendChild(bodyDiv);
        this.bodyDiv = bodyDiv;
    }

    protected createHeaderTitle(): HTMLElement {
        const header = document.createElement('div');
        header.classList.add('header-icon');
        header.appendChild(createIcon('layers'));
        header.insertAdjacentText('beforeend', 'BPMN Properties');
        return header;
    }

    private createHeaderTools(): HTMLElement {
        const headerTools = document.createElement('div');
        ..........      
        return headerTools;
    }

    protected onClickResizePanel(button: HTMLElement, toolId?: string) {
        return (_ev: MouseEvent) => {
        ............
        };
    }

    editModeChanged(_oldValue: string, _newValue: string): void {
		console.log('...bin in editModeChanged: '+_newValue);
        this.actionDispatcher.dispatch(new SetUIExtensionVisibilityAction(PropertyPanel.ID, !this.editorContext.isReadonly));
    }

    handle(action: SelectAction): void | Action {
		console.log('.....selection action :-)');
    }
}

export function createIcon(codiconId: string): HTMLElement {
    const icon = document.createElement('i');
    icon.classList.add(...codiconCSSClasses(codiconId));
    return icon;
}

I register my UI Extension with a di.config:

import { ContainerModule } from 'inversify';
import {
	TYPES
 } from 'sprotty';

import {
	PropertyPanel
 } from './property-panel';
export const propertyViewModule = new ContainerModule((bind, _unbind, isBound) => {
    bind(PropertyPanel).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(PropertyPanel);
});

So far everything works:

My PropertyPanel also implements a handle method as I want to react on element selections

    handle(action: SelectAction): void | Action {
		console.log('.....selection action :-)');
    }

Of course the handle method is not triggered as I have not registered the actionHandler. If I do extend my di.confg with calling configureActionHandler like in the following example, my UIExtension is no longer shown up

import { ContainerModule } from 'inversify';
import {
	TYPES,
	configureActionHandler
 } from 'sprotty';
import {
    SelectAction
} from '@eclipse-glsp/client';

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

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

I got no compilation errors or runtime errors. Also Selection Events are transfered successfull into my UIExtension.

The only problem is, that my UIExtension is no longer shown:

Why is this happen? Have I to do more stuff in my handle method? In the GLSP ToolPalette there is much more additional code. But I do not understand what this code is doing. I guess something in my code is now missing.

Thanks for any help

===
Ralph

[tortmayr]

Hi @rsoika,
seems like you discovered a bug here. Your code looks fine to me and theoretically should work.
However, I have implemented a small test extension that does more or less the same as your UIExtension and can reproduce the behavior.
This is definitively not intended and configuring the UIExtension as additional action handler should not break the extension itself. We have to further look into this to identify the problem.

I have created #585 to track this issue.

[rsoika]

Sounds good - I invested now hours to find a workaround, but without any luck. I also would have cautiously suspected that it could be a bug...

I played around a lot and changed the way I registered my UIExtension and registered the Action Handler in various ways. Always with the same result. As soon as the Action handler worked, the UIExtension was not longer rendered.
But the ToolPalette seems to do the same thing without that effect.

[tortmayr]

Here is an alternative solution that worked for me:
Since retrieving the current selection and listening to selection changes are common use cases we have created a dedicated SelectionService that can be used for that. You could register your UIExtension as a SelectionListener in the SelectionService to receive change notifications.
Another benefit of using SelectionListeners over a SelectAction handler is that these listeners can also be dynamically deregistered during runtime.

I tested this with a small example extension at it seems to work fine:

@injectable()
export class MyUIExtension extends AbstractUIExtension implements EditModeListener, SelectionListener {
    static readonly ID = 'test-extension';

    @inject(TYPES.IActionDispatcher)
    protected actionDispatcher: ActionDispatcher;

    @inject(EditorContextService)
    protected editorContext: EditorContextService;

    @inject(SelectionService)
    protected selectionService: SelectionService;

    @postConstruct()
    postConstruct(): void {
        this.editorContext.register(this);
        this.selectionService.register(this);
    }

    id(): string {
        return MyUIExtension.ID;
    }

    containerClass(): string {
        return 'test-extension';
    }

    protected initializeContents(containerElement: HTMLElement): void {
        const div = document.createElement('div');
        div.innerHTML = 'hello world';
        containerElement.appendChild(div);
    }

    selectionChanged(root: Readonly<SModelRoot>, selectedElements: string[]): void {
        console.log('selection change  received:', root, selectedElements);
    }

    editModeChanged(_oldValue: string, _newValue: string): void {
        this.actionDispatcher.dispatch(new SetUIExtensionVisibilityAction(MyUIExtension.ID, !this.editorContext.isReadonly));
    }
}

//di.config
import { TYPES } from '@eclipse-glsp/client';
import { ContainerModule } from 'inversify';
import { MyUIExtension } from './test-ui-extension';
const extensionModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    bind(MyUIExtension).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(MyUIExtension);
});

export default extensionModule;

[tortmayr]

Theia has a similar named class but in this case you need to import the selection service from @eclipse-glsp/client.

import { SelectionListener, SelectionService } from '@eclipse-glsp/client/lib/features/select/selection-service';

[rsoika]

Thanks, for the import example.

But still I can't get it working.
I receive now only one event during the initialization

$ theia start --GLSP_PORT=5007 --root-dir=../workspace
root INFO Theia app listening on http://localhost:3000.
root INFO Configuration directory URI: 'file:///home/rsoika/.theia'
root WARN Frontend CommonFrontendContribution.configure is slow, took: 138.1 ms
root INFO Detected keyboard layout from browser API: German (PC)
root WARN Frontend EditorNavigationContribution.onStart is slow, took: 156.1 ms
root INFO Changed application state from 'init' to 'started_contributions'.
root INFO Changed application state from 'started_contributions' to 'attached_shell'.
root INFO >>> Restoring the layout state...
root INFO Factory for model element 'comp:header' will be overwritten.
root INFO Factory for model element 'port' will be overwritten.
root INFO <<< The layout has been successfully restored.
root INFO View instance for type 'comp:header' will be overwritten.
root INFO View instance for type 'port' will be overwritten.
root INFO Changed application state from 'attached_shell' to 'initialized_layout'.
root INFO selection change  received: {
  children: [],
  canvasBounds: { x: 281, y: 86, width: 852, height: 730 },
  type: 'NONE',
  id: 'EMPTY'
} []
root INFO Finished loading frontend application after 3.203 seconds
root INFO ...bin in editModeChanged: editable
root INFO Changed application state from 'initialized_layout' to 'ready'.

I have deleted all my code and do exactly the same as in your example. The 'hello world' div is shown, but selection events did not reach my panel after initializing.

I have now put my code into a separate branch so maybe you can take a look on it:

https://github.com/imixs/open-bpmn/tree/issue-15/open-bpmn.glsp-client/open-bpmn-glsp/src

The only reason why my extension is not working like yours seems to be my general BPMNDiagramModule code.

[tortmayr]

@rsoika I checked out your branch and for me the extension is working as expected. I received selection change events when I select different nodes in the diagram:

[rsoika]

Thanks for your help. Than it must be something with my nodejs setup. I will check this...

[rsoika]

Ok, problem solved, I was not aware that the browser debug console shows different output than the yarn console. Sorry for confusing you and thanks again for your help!