Way to bind custom theia extension to GLSP editor

[Abhay0294]

Hi,
My requirement is as follows:

1. I have my custom theia Extension(as shown in fig.) which consists of two buttons A and B.
2. When I click on button A/ button B should be captured which will be store information about the click(for ex: 'Button A' as string).
3. This data I should be forwarding to glsp editor, where it will be used as flag condition for toggling the view on the glsp editor.

Approach I tried:
I created the event manager class in glsp editor as injectable and bind it to di.config.ts file.
I injected this event manager in my custom theia extension to emmit the selection that will be finally consumed by the glsp editor.

Conclusion:
It is not working as expected rather it's showing error in the console as:
Uncaught (in promise) Error: No matching bindings found for serviceIdentifier: RootSelectionManager _validateActiveBindingCount planner.ts:113 _getActiveBindings planner.ts:91 _createSubRequests planner.ts:163 _createSubRequests planner.ts:197 _createSubRequests planner.ts:196 _createSubRequests planner.ts:167 plan planner.ts:243 Container container.ts:367 _get container.ts:354 get container.ts:246 createSignalsViewWidget signals-view-frontend-module.ts:66 createWidget signals-view-frontend-module.ts:40 getOrCreateWidget widget-manager.ts:220 openView view-contribution.ts:100 open perspective.ts:72 open perspective.ts:67 open perspective-registery.ts:107 promise callback*open perspective-registery.ts:107 openDiagConfigurationPerspective welcome-page-widget.tsx:285 onClick welcome-page-widget.tsx:151 React 17 unstable_runWithPriority scheduler.development.js:653 React 4

Binding in di.config file
bind(RootSelectionManager).toSelf().inSingletonScope();

Requesting suggestions what is the correct way to implement this requirement.

[planger]

Hi,

It is hard to know for sure without having the entire code in front of me, but it looks like you are trying to inject a class RootSelectionManager, which you bound in your GLSP dependency injection module (di.config.ts), into a class that lives in Theia.
Please be aware that while both Theia and GLSP use inversify, their dependency injection containers are not the same. So values you bind in one are not available for injection in the other.

I think the closest example we have for your use case is this one:

• It binds a Theia command contribution in the theia integration extension: https://github.com/eclipse-glsp/glsp-theia-integration/blob/c36d4d8936866665765090b992ad6fb4a648b852/examples/workflow-theia/src/browser/workflow-frontend-module.ts#L39
• And registers a handler that will trigger a GLSP action: https://github.com/eclipse-glsp/glsp-theia-integration/blob/c36d4d8936866665765090b992ad6fb4a648b852/examples/workflow-theia/src/browser/diagram/workflow-task-editing-context-menu.ts#L34

With this mechanism you should be able to implement your use case. The button in your Theia extension would the simply trigger a Theia command, which is handled by a Theia GLSPCommandHandler and dispatches a GLSP action that can be handled within your diagram editor implementation with a normal GLSP action handler.

I hope this helps!

[Abhay0294]

Thanks @planger for the suggestion. Will try to implement the same.
One more thing out of curiosity I want to ask that is it possible to create RootSelectionManager class as Singleton and then use it in both glsp editor and theia's custom extension?

[planger]

Well, there is two approaches:

1. The connector approach that Sprotty uses, see e.g. https://github.com/eclipse-glsp/glsp-theia-integration/blob/6e2eb4309a543620066e08aa4a1458071f63f010/packages/theia-integration/src/browser/diagram/theia-glsp-connector.ts. The connector passes values from Theia into the Sprotty container. However, this is a rather inflexible approach, so we tend to not use it.
2. Have the Theia-Sprotty integration bind implementations from Theia in the Sprotty/GLSP container to a generic interface that is available to GLSP, like it is done here e.g. for the TheiaSourceModelChangedHandler, which is an object that lives in the Theia dependency injection container that also implements the GLSP interface ExternalSourceModelChangedHandler.

[Abhay0294]

Thanks @planger for the suggestion. I have successfully implemented the requirement.