fix: edit label UI does not resize on graph zoom

[ndoschek]

What it does

Fixes eclipse-glsp/glsp/issues/1601

• ensure that the edit label UI is properly resizing if the graph is zoomed in or out

Contributed on behalf of STMicroelectronics

How to test

1. Start the standalone example
2. Optional: open the accessibility help menu via Alt+h
3. Double click an element to edit its label
4. While the edit label UI is open zoom the graph via the mouse wheel
5. Verify the edit label UI input field resizes and repositions according to the zoom level. Also the font should be updated.

Follow-ups

Changelog

• This PR should be mentioned in the changelog
• This PR introduces a breaking change (if yes, provide more details below for the changelog and the migration guide)

[tortmayr]

In theory the change looks good to me.
However, only listening/handling the SetViewportAction is unreliable, since it does not capture all ViewportChanges (e.g. if they are triggerd by a FitToScreen or CenterAction)

We have recently introduced the onViewportChanged event in the EditorContextService as a central hook to listen for viewport changes:

glsp-client/packages/client/src/base/editor-context-service.ts

Line 150 in 2fe0c5e

get onViewportChanged(): Event<ViewportChange> {

Please hook to this event instead of using an action handler.
In addition, the event is only fired after the corresponding viewport-changing command is executed. This ensures that the UI is already updated when listeners receive the event call.

[ndoschek]

Thanks for the feedback @tortmayr, I didn't know about this event yet, TIL! I updated my change and make use of it now!

[tortmayr]

Thanks for the update Nina.
Unfortunately the change does not work for me:

no-working.mp4

I think we apply the adjustments to early. I checked and the event is fired properly after the command is executed. But it look like the browser is not done with repainting at this point so we compute an incorrect position.

Wrapping the logic in an animation frame request seems to help:

 this.editorContextService.onViewportChanged(() => {
            window.requestAnimationFrame(() => {
                if (this.isActive && this.containerElement) {
                    this.setPosition(this.containerElement);
                    this.applyFontStyling();
                }
            });
        });
        

In addition, there is an issue with this logic if edited element becomes invisilbe (i.e. moves out of the visible canvas) when zooming:

kinda-fixed.mp4

I think we need an additional check to only apply the repositioning logic if the element is still visible in the dom.