What is the purpose of the hidden diagram instance (sub-element of body)?

[glsp-bot]

I found that there are two hidden elements placed in the body tag (and therefore outside the 'theia-app-shell' portion) of my website showing a GLSP diagram:

• and

I imagine the second one is used for context menus and other popups.
However, what is the purpose of the first one, which has the 'sprotty-hidden' CSS class?

original thread by hoelzl-florian

[tortmayr]

Hi, this hidden div is used in the hidden rendering phase of sprotty. The size of some diagram elements can't be derived on the server side and depends on the locally used fonts and CSS classes. Therefore, sprotty/glsp has a precomputation step consing of a RequestBoundsAction and a response in the form of ComputedBoundsAction which renders the model in an invisible div to derive the actual bounds.

[tortmayr]

For more details you can have a look at the documentation:

• https://github.com/eclipse/sprotty/wiki/Client-Server-Protocol#layout-computation

• https://github.com/eclipse-glsp/glsp/blob/master/PROTOCOL.md#27-model-layout