Display zoom level of GLSP editor canvas

[Abhay0294]

Hi,

I am having the requirement of displaying GLSP editor's canvas zoom level on the bottom right of the editor(as shown in the snap).

Requirement

1. As we know that when we do mouse wheel scroll on the GLSP editor the canvas get zoom-in/zoom-out.
2. My requirement is to display that zoom level on the bottom right of the GLSP editor.
3. So, when we do mouse wheel scroll up/down, we'll be able to see that zoom level on the bottom side as %.

Requesting suggestions to implement the same.

[planger]

Hi,

in general, you can get the current zoom level using the function getZoom(modelElement) which can be imported from import { getZoom } from '@eclipse-glsp/client';.

However, you will probably need to be notified on zoom level changes. So one approach could be to register an action handler for the SetViewportAction. Register it into the di module (di.config.ts):

configureActionHandler(context, SetViewportAction.KIND, YourActionHandler);

In this action handler you can obtain the current zoom level from the parameter newViewport from which you can obtain the zoom level and update it in the UI.

For the UI itself I would suggest to create a UIExtension which is plain HTML that can be statically placed on the diagram canvas. This UI extension could now either get some custom service injected to which your action handler from above publishes the zoom level info, or your UI extension could be the action handler itself.

Hope this helps!

[Abhay0294]

Thanks a lot @planger for the suggestion.
One thing I want to ask that in getZoom(modelElement), do I have to pass a node instance on the glsp graph like a node which is an instance of SModelElement ?

[planger]

Yes, any element of the SModel (whether it is the root graph or a child element) will work.
But if you go with the action handler approach, you don't really need getZoom anymore, as the zoom level will directly be specified in the newViewport of the SetViewportAction.

[Abhay0294]

Sure @planger will try to implement the same.