Trying Button-overlay showcase don´t work for me

[julen9]

Hi,

I am tryin to add this showcase (https://eclipse.dev/glsp/documentation/ui-extensions/#button-overlay-showcase) to my eclipse glsp-workflow-example (https://github.com/eclipse-glsp/glsp-examples), I think I have understood all clear, but, in the last step I have to activate the "UI Extension" but I can't find where I have to add the next code:

protected dispatchInitialActions(): void {
  ...
  setTimeout(() => {
      this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: "button-overlay", visible: true }));
  }, 50);
}

It seems it have to be added to some file that I dont have on my project, I attach screenshot of my glsp-client/workflow-theia/src/browser/diagram folder, because I think is there where I have to place the initialization code (not sure in which file):

Please could you help me? Thanks in advance

[planger]

Hi,

in general, you can send the SetUIExtensionVisibilityAction from an arbitrary place where you have an action dispatcher. This could for instance be a context menu action or a mouse listener.

If you want to enable this UI extension from the start -- as it was suggested by the documentation example -- you'll need to dispatch it as soon as the GLSPDiagramWidget is opened (e.g. in dispatchInitialActions() as proposed in the documentation). By default you don't have a custom GLSPDiagramWidget yet which would include the dispatchInitialActions() method though). This is why your example is missing it so far.

To add it, you'll first have to overwrite the diagram manager with a custom one to be able to return a custom GLSPDiagramWidget.
So first in your workflow-frontend-module.ts in class WorkflowTheiaFrontendModule you'd need to register a custom diagram manager as follows (MyGLSPDiagramManager below):

override configureDiagramManager(context: ContainerContext): void {
    registerDiagramManager(context.bind, MyGLSPDiagramManager);
}

Your new custom class MyGLSPDiagramManager should be a subclass of GLSPDiagramManager and only overwrite createWidget(). This way you can instantiate a custom subclass of GLSPDiagramWidget.

In this custom subclass of GLSPDiagramWidget you can then overwrite dispatchInitialActions() to not only do the default behavior (super.dispatchInitialActions()) but also send your SetUIExtensionVisibilityAction.

protected dispatchInitialActions(): void {
  super.dispatchInitialActions();
  setTimeout(() => {
      this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: "button-overlay", visible: true }));
  }, 50);
}

[julen9]

Hi @planger ,

thanks for your answers, unfortunately I haven't been able to get it to work, it have some error that I donw know how to resolve, I have seen the issue to simpify the way to customize that. Could you give me some workaround to have it working? Thank you so much in advance!!

Regards.

[planger]

I'm unable to help without seeing the actual errors you have. Please post them, then I can see whether I spot the issues.

[rhumbertgz]

Hi @planger I was trying to reproduce the same example and I ended here :)

I assume the problems that @julen9 found are:

Your example of the MyGLSPDiagramManager class uses the GLSPDiagramWidgetOptions namespace that is not in @eclipse-glsp/[email protected] version used by the project templates. The same happens with the onceModelInitialized method use in the MyGLSPDiagramWidget. To fix the first issue I literally copied the GLSPDiagramWidgetOptions interface and namespace from the master. For the second one, I just used your first suggestion using the timer. After those actions, there were no compilation errors, but unfortunately I got a runtime one :(

In my case I just used the node-json-theia template instead of the workflow example used by @julen9

Here is the code for the updated files of that template:

tasklist-glsp
/css/diagram.css // I just added the styles listed in the documentation

I added a new file for the definition of the UI extension /src/button_overlay.ts

import {
    AbstractUIExtension,
    Action,
    CenterAction,
    FitToScreenAction,
    IActionDispatcher,
    TYPES,
    codiconCSSClasses } from '@eclipse-glsp/client';
  import {inject, injectable } from 'inversify';

@injectable()
export class ButtonOverlay extends AbstractUIExtension {
  @inject(TYPES.IActionDispatcher)
  protected readonly actionDispatcher: IActionDispatcher;

  static readonly ID = 'button-overlay';

  id() {
    return ButtonOverlay.ID;
  }

  containerClass() {
    return ButtonOverlay.ID;
  }

  protected initializeContents(containerElement: HTMLElement): void {
    containerElement.appendChild(
      this.createButton(
        'btn_center_diagram',
        'Center',
        'screen-normal',
        CenterAction.create([])
      )
    );
    containerElement.appendChild(
      this.createButton(
        'btn_fit_diagram',
        'Fit to screen',
        'screen-full',
        FitToScreenAction.create([])
      )
    );
  }

  protected createButton(
    id: string,
    label: string,
    codiconId: string,
    action: Action
  ): HTMLElement {
    const baseDiv = document.getElementById(this.options.baseDiv);
    if (baseDiv) {
      const button = document.createElement('div');
      const insertedDiv = baseDiv.insertBefore(button, baseDiv.firstChild);
      button.id = id;
      button.classList.add('overlay-button');
      const icon = this.createIcon(codiconId);
      insertedDiv.appendChild(icon);
      insertedDiv.onclick = () => this.actionDispatcher.dispatch(action);
      insertedDiv.insertAdjacentText('beforeend', label);
      return button;
    }
    return document.createElement('div');
  }

  protected createIcon(codiconId: string): HTMLElement {
    const icon = document.createElement('i');
    icon.classList.add(...codiconCSSClasses(codiconId), 'overlay-icon');
    return icon;
  }
}

After that I updated the file src/di.config.ts

import {
    configureDefaultModelElements,
    configureModelElement,
    ConsoleLogger,
    createClientContainer,
    DefaultTypes,
    editLabelFeature,
    LogLevel,
    overrideViewerOptions,
    SLabel,
    SLabelView,
    TYPES
} from '@eclipse-glsp/client';
import 'balloon-css/balloon.min.css';
import { Container, ContainerModule } from 'inversify';
import '../css/diagram.css';
import { ButtonOverlay } from './button_overlay';

const taskListDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    // Add Button Overlay
    bind(ButtonOverlay).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(ButtonOverlay);

    rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
    rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);
    const context = { bind, unbind, isBound, rebind };
    configureDefaultModelElements(context);
    configureModelElement(context, DefaultTypes.LABEL, SLabel, SLabelView, { enable: [editLabelFeature] });
});

export default function createContainer(widgetId: string): Container {
    const container = createClientContainer(taskListDiagramModule);

    overrideViewerOptions(container, {
        baseDiv: widgetId,
        hiddenDiv: widgetId + '_hidden',
        needsClientLayout: true
    });

    return container;
}

On the tasklist-theia project I added a new file /src/browser/my_diagram_manager.ts based on the example you gave to @julen9 but with the fixes mentioned before.

import { SetUIExtensionVisibilityAction, configureServerActions, hasStringProp } from '@eclipse-glsp/client';
import { GLSPDiagramManager, GLSPDiagramWidget } from '@eclipse-glsp/theia-integration';
import { injectable } from '@theia/core/shared/inversify';

import { NavigatableWidgetOptions } from '@theia/core/lib/browser';

// HACK UNTIL UPGRADE FROM  @eclipse-glsp/[email protected]
export interface GLSPDiagramWidgetOptions extends NavigatableWidgetOptions {
    uri: string;
    diagramType: string;
    label: string;
    iconClass: string;
    editMode: string;
}

export namespace GLSPDiagramWidgetOptions {
    export function is(object: unknown): object is GLSPDiagramWidgetOptions {
        return (
            NavigatableWidgetOptions.is(object) &&
            hasStringProp(object, 'uri') &&
            hasStringProp(object, 'diagramType') &&
            hasStringProp(object, 'label') &&
            hasStringProp(object, 'iconClass') &&
            hasStringProp(object, 'editMode')
        );
    }
}
// HACK UNTIL UPGRADE FROM  @eclipse-glsp/[email protected]

@injectable()
export abstract class MyGLSPDiagramManager extends GLSPDiagramManager {
    override async createWidget(options?: any): Promise<GLSPDiagramWidget> {
        if (GLSPDiagramWidgetOptions.is(options)) {
            const clientId = this.createClientId();
            const widgetId = this.createWidgetId(options);
            const config = this.getDiagramConfiguration(options);
            const diContainer = config.createContainer(clientId);

            // do not await the result here as it blocks the Theia layout restoration for open widgets
            // instead simply check in the widget if we are already initialized
            this.diagramConnector.initializeResult.then(initializeResult =>
                configureServerActions(initializeResult, this.diagramType, diContainer)
            );

            const widget = new MyGLSPDiagramWidget(
                options,
                widgetId,
                diContainer,
                this.editorPreferences,
                this.storage,
                this.theiaSelectionService,
                this.diagramConnector
            );
            widget.listenToFocusState(this.shell);
            return widget;
        }
        throw Error('DiagramWidgetFactory needs DiagramWidgetOptions but got ' + JSON.stringify(options));
    }
}

export class MyGLSPDiagramWidget extends GLSPDiagramWidget {
    protected override async dispatchInitialActions(): Promise<void> {
        super.dispatchInitialActions();
           setTimeout(() => {
            this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: 'button-overlay', visible: true }));
        }, 50);

        // onceModelInitialized is not available in @eclipse-glsp/[email protected]
        // this.actionDispatcher.onceModelInitialized().then(
        //     () => this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: "button-overlay", visible: true }))
        // );
    }
}

Finally I updated the file /src/browser/frontend-module.ts as follows:

import { ContainerContext, DiagramConfiguration, GLSPTheiaFrontendModule, registerDiagramManager } from '@eclipse-glsp/theia-integration';
import { TaskListLanguage } from '../common/tasklist-language';
import { TasklistDiagramConfiguration } from './tasklist-diagram-configuration';
import { MyGLSPDiagramManager } from './my_diagram_manager';

export class TaskListTheiaFrontendModule extends GLSPTheiaFrontendModule {
    readonly diagramLanguage = TaskListLanguage;

    bindDiagramConfiguration(context: ContainerContext): void {
        context.bind(DiagramConfiguration).to(TasklistDiagramConfiguration);
        registerDiagramManager(context.bind, MyGLSPDiagramManager);
    }
}

export default new TaskListTheiaFrontendModule();

Do you have any suggestion how to solve the problem and get the example running?

Thanks in advance 👍🏼

[planger]

My example was roughly based on v1.0 API and just sketched the main idea. This part has changed quite a lot after #1064 and is now much simpler. I suggest to wait a week for the v2.0 (or use current master) and try again with the new API.

The error you are posting doesn't immediately ring a bell for me. It looks a bit like there is mixed versions of Sprotty and GLSP involved, but I'm not sure without debugging into it more deeply. Sorry about that!

Once v2.0 is available, let's maybe create a fresh discussion topic with the goal of adding default initial actions. We'll then also plan to go through the docs and update to v2.0 whereever necessary.

[rhumbertgz]

Thanks @planger looking forward to v2.0