How to create an element similar to an HTML input

[rileydanejohnston]

Hello, I’m trying to understanding of how to create an element similar to an HTML input. I notice the SLabel (when selected) is similar to what I’m going for. I want the new element to look like an and send the new text value to the server.

Basically I’m wondering what the recommended approach to creating this element is. Should I extend/modify the SLabel to be selected so it reveals the input element, or should create a completely new element (a form in a foreignObject maybe?). Thank you!

[martin-fleck-at]

@rileydanejohnston In GLSP we use a custom UI extension to provide the label edit functionality. In short, they install a double click listener and a key listener for F2 for labels using the label edit tool which is active by default. As soon as one listener is triggered, it sends a EditLabelAction which will activate the UI extension on the given label. The UI extension allows us to display any HTML element on top of the diagram (e.g., the default tool palette is also implemented that way).

However, there is also support for foreign objects within the SVG graph, specifically you have the PreRenderedElement where you can provide HTML code directly or the ForeignObjectElement where you can provide your foreign content. There is a Sprotty example for SVG rendering here which has been extended for label editing and multi-line support with this PR: eclipse-sprotty/sprotty#171.

I believe depending on your use case, either approach should be fine. One is more of an overlay and the other is actually part of the graph.