Custom UIExtension is not shown in VS-Code

[rsoika]

I have strange effect when running my GLSP Diagram in VS-Code.

I implemented a custom UIExtension showing an additional panel to edit properties of selected elements.
In Eclipse Theia everything works fine, the panel shows up correctly.

But within my VS-Code Extension the panel is not shown, even if the rest of the diagram editor works perfect (e.g. also the tool palette is shown which was my scaffolder for my own implementation).

I did a lot of debugging within VSCode. The problem is, that the methods initialize and initializeContents of my Extension are never called within VSCode. So as a effect my UIExtension HTML elements are not constructed at all.

But my UIExtension is created. For example my postConstruct method is called during loading a new diagram. And also my SelectionListener is working correctly and my panel reacts on selection change events.

What could be the reason that in VSCode my Module is only treated as a SelectionListener but not as a UIExtension ?

This is how I bound my UIExtension to my DiagramContainer in my main GLSP Module

export default function createBPMNDiagramContainer(widgetId: string): Container {
	// Note: the widgetId is generated by the GLSP core and is something like 'bpmn-diagram_0'
    const container = createDiagramContainer(bpmnDiagramModule, bpmnPropertyModule);
    overrideViewerOptions(container, {
        baseDiv: widgetId,
        hiddenDiv: widgetId + '_hidden'
    });
    return container;
}

And this is how my DiagramContainer is constructed in the webview of my vscode-integration:

class BPMNGLSPStarter extends GLSPStarter {
    createContainer(diagramIdentifier: SprottyDiagramIdentifier): Container {
        return createBPMNDiagramContainer(diagramIdentifier.clientId);
    }
}

export function launch(): void {
    new BPMNGLSPStarter();
}

Do I miss something regarding registering my UIExtension which is done by Theia out of the box?

[tortmayr]

HI @rsoika,
at first glance it looks like your extension is never set to visible.
I had a look at the properties panel implementation and you are using an editMode listener to active the extension.
This works for the theia-integration because it dispatches a SetEditModeAction during the startup. For the vscode-integration this is not the case (not sure why, probably an oversight).
To work around this you could override the GLSPVscodeDiagramWidget.initializeSprotty method and dispatch the SetEditModeAction yourself.

[rsoika]

Yes, the extension is never set to visible and editModeChanged is never called.
I wonder why the ToolPalette is working? This UI Extension is also using the editMode listener. And when I debug the code within vscode the methods are called for the ToolPalette but not for my own extension.

hm... I will try if I can solve this issue by overwriting the initalizeSprotty.......

[tortmayr]

I wonder why the ToolPalette is working? This UI Extension is also using the editMode listener.

That's because of the EnableToolPaletteAction that is dispatched on startup. The handler for this actions also sets the tool palette visible after the items have been retrieved from the server. (see https://github.com/eclipse-glsp/glsp-client/blob/4fe94e1ddd1e5880832f1948865c8b5cf032ced9/packages/client/src/features/tool-palette/tool-palette.ts#L327)

[rsoika]

I solved the problem successful.

As my property panel is required only if a toolPalette exists, I simply configured a EnableToolPaletteAction together with the bindings of my UIExtension

const bpmnPropertyModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
    bind(BPMNPropertyPanel).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(BPMNPropertyPanel);
    configureActionHandler({ bind, isBound }, EnableToolPaletteAction.KIND, BPMNPropertyPanel);
});

And within my UIExtension I handle the EnableToolPaletteAction.KIND to call SetUIExtensionVisibilityAction.create, simmilar like the ToolPalette does:

    handle(action: Action): ICommand | Action | void {
        if (this.bodyDiv) {
           return;
        }
        if (action.kind === EnableToolPaletteAction.KIND) {
            const requestAction = RequestContextActions.create({
                // contextId: ToolPalette.ID,
                contextId: BPMNPropertyPanel.ID,
                editorContext: {
                    selectedElementIds: []
                }
            });
            this.actionDispatcher.requestUntil(requestAction).then(response => {
                if (SetContextActions.is(response)) {
                    console.log('...dispatching action...phase-2.');
                    this.actionDispatcher.dispatch(
                        SetUIExtensionVisibilityAction.create({ extensionId: BPMNPropertyPanel.ID, visible: !this.editorContext.isReadonly })
                    );
                }
            });
        }
    }

This works still for Theia and now also in VS-Code.

Thanks for your help!

[rsoika]