Get GLSP diagram selected elements from another widget

[volodgo]

In theia I am creating a widget in the bottom bar in which I will edit (using a form) the selected elements in the diagram

I'm creating a DpWidget class that extends ReactWidget.
When creating a widget, I search for a glsp diagram widget and start tracking the selected items. But when closing the bottom widget, I did not find how to unsubscribe from the events of the selected elements

`@injectable()
export class DpWidget extends ReactWidget {
static readonly ID = 'dp:widget';
static readonly LABEL = 'Dp Widget';

@inject(ApplicationShell) protected readonly shell: ApplicationShell;
@inject(WidgetManager) protected readonly widgetManager: WidgetManager;

protected diagramWidget: GLSPDiagramWidget | null;

selectedElement: TaskNode | null;

@postConstruct()
protected init(): void {
    this.doInit();

    let factoryId = deriveDiagramManagerId(WorkflowLanguage.diagramType);
    this.widgetManager.onDidCreateWidget(e => {
        if (e.factoryId == factoryId) {
            this.diagramWidget = e.widget as GLSPDiagramWidget;
            this.diagramWidget.theiaSelectionService.onSelectionChanged(this.updateSelectedElement.bind(this));
        }
    });
}

override dispose(): void {
    // TODO unsubscribe
    // no method unsubscribe in this.diagramWidget.theiaSelectionService
}

updateSelectedElement(change?: { selectedElementsIDs: string[] }) {
    if (this.diagramWidget) {
        let selectedElements = this.diagramWidget.editorContext.selectedElements;
        let selectedElement = selectedElements.length && isTaskNode(selectedElements[0]) ? selectedElements[0] : null;
        if (this.selectedElement != selectedElement) {
            this.selectedElement = selectedElement;
            this.update();
        }
    }
}

render(): React.ReactElement {
    let submitHandler = async (id: string, name: string) => {
        let actions = [ApplyLabelEditAction.create(id, name), CommitModelAction.create()];
        if (this.diagramWidget) {
            await this.diagramWidget.actionDispatcher.dispatchAll(actions);
        }
    };
    return <DpBlock selectedElement={this.selectedElement} submitHandler={submitHandler} />;
}

...
}`

Maybe I'm going the wrong way, what's the best way to track selected elements on a glsp diagram in another widget?

[JonasHelming]

@planger

[planger]

Hi @volodgo,

Thank you for your interest in GLSP and Theia!

The Theia integration of GLSP actually forwards the diagram selection to the Theia Selection service, so you can just get Theia's SelectionService injected and listen for updates without the need to reach into the diagram widget directly.

//
// get the selection service injected:
@inject(SelectionService) protected readonly selectionService: SelectionService;
// to start listening for selection events:
const disposable = this.selectionService.onSelectionChanged(e => ...);
// to stop listening for selection, dispose the returned disposable of `onSelectionChanged`:
disposable.dispose();

The selection of GLSP editors will be a GlspSelection.

Of course your approach should work too, but has a stronger dependency to the GLSP diagram widget. In order to stop listening to events, you also just need to invoke dispose() on the Event returned by the onSelectionChanged invocation. It returns a Disposable. The typical pattern is that you have a disposable collection property in your object and add everything that needs to be disposed with when your object is disposed.

[volodgo]

Thanks for the answer!
Yes, I found that I can call disposable.dispose();
If I do not stronger dependency to the GLSP diagram, then how can I access the model (to get the properties of the selected element in the diagram). SelectionService provides only the element IDs. Now I get it through editorContext.modelRoot from GLSPDiagramWidget

protected override onAfterAttach(msg: Message): void {
        let factoryId = deriveDiagramManagerId(WorkflowLanguage.diagramType);
        let widgets = this.widgetManager.getWidgets(factoryId);
        if (widgets.length) {
            this.diagramWidget = widgets[0] as GLSPDiagramWidget;
            console.log('modelRoot', this.diagramWidget.editorContext.modelRoot);
        }

        const disposable = this.selectionService.onSelectionChanged(async (change: GlspSelection) => {
            console.log('change', change.selectedElementsIDs, change.widgetId, change.sourceUri);
        });
        super.onAfterAttach(msg);
    }

[planger]

If I do not stronger dependency to the GLSP diagram, then how can I access the model (to get the properties of the selected element in the diagram). SelectionService provides only the element IDs.

Right, it depends a little bit on the use case. If the GLSP server is essentially the only component that manages the entire model, you probably won't get away from taking to the GLSP widget to query more information about the model.
Often, however, the GLSP diagram is just one way of interacting with the model and the model is managed in yet another component. If that's the case, your DpWidget could also talk to that other component directly based on the ID of the selected element and won't have any dependency to the GLSP diagram widget at all.