Setting values directly in the UI.

[k0m0ri]

I'm using a project-templates node-json-vscode.
I want to directly change the value of a parameter (such as duration or type) in the UI.
However, I understand that if the server is a node, the UI cannot be manipulated directly as the Context Menu is not implemented.

Are there any alternatives like using PopupModelFactory or similar instead of Context Menu to directly change the parameters in the UI?
I would like to use node.js as much as possible.

[tortmayr]

Hi @k0m0ri

I want to directly change the value of a parameter (such as duration or type) in the UI.
However, I understand that if the server is a node, the UI cannot be manipulated directly as the Context Menu is not implemented.

The missing context menu support is not related to the node server, it rather is a limitation of the glsp-vscode integration. Currently the vscode extension API does not support context menus in webviews or custom editors. However, a PR that adds support for this has been merged recently (microsoft/vscode#54285 (comment)) so we might be able to implement context menu support for the vscode integration in the future.

Are there any alternatives like using PopupModelFactory or similar instead of Context Menu to directly change the parameters in the UI?

The popup API can certainly be customized to use it in the same way as a context menu. As far as I know, sprotty also uses a similiar approach. If you are fine with a keyboard based approach you could also use the command palette for this (Ctrl+ space).

[k0m0ri]

Thanks for the reply @tortmayr
I added a GCompoartment to the children of the GNode and added a GLabel to the GCompoartment.
I can directly edit the Node's parameters.
I would like to ask another question.
I would like to add a GLabel and a ForeignObject to the GCompoartment and display them vertically, but they are covered and cannot be seen.
Also, the ForeignObject text box cannot be displayed and the characters are unreadable.
Is it possible to adapt the layout to the ForeignObject so that the label and the ForeignObject are displayed side by side?

[tortmayr]

As far as I know this should be possible. @CamilleLetavernier Do you know if there are any limitations regarding layouting and foreign objects?

[CamilleLetavernier]

This looks similar to #749

It seems that Vertical Layout doesn't handle nodes properly at the moment (only Compartments, which was our test case in the Workflow example). I'll need to find some time to investigate this issue.

In the meantime, it seems that a possible workaround is to wrap each child Node in a Compartment. That's really not convenient, but could help a bit for now.

[CamilleLetavernier]

I was able to test the vertical layout with nodes (instead of Compartments). The issue seems similar to #749 indeed, however I'm not able to reproduce it. I've tested a VBox compartment with a list of children, and everything is rendered properly:

Looking at the screenshot above, it seems that the layout adds vertical spacing between the foreign objects (as expected). However, the gap is too small for some reason. Maybe the ForeignObject size is not properly computed, and the layout doesn't know how much space it really needs?

Can you try adding a larger vGap property to your vbox layout options?

"layoutOptions": {
     "vGrab": true,
     "hGrab": true,
     "vGap": 25
},
"layout": "vbox"

It's not a good solution, but it could help understanding the issue.

[k0m0ri]

Sorry for the late reply and thanks for the reply @tortmayr @CamilleLetavernier .
At the time of my screenshot, the node configuration was as follows.

• Node(vbox)
  • Compartment with label(hbox, "obj")
  • Compartment(vbox)
    • Label Node
    • Label Node
    • Node(ForeignObject)

ForeignObject

GNode.builder() //
    .type('comment-node-parent')
    .addCssClass('comment-node-parent')
    .size(500, 100)
    .addChildren(GNode.builder().type('comment-node').addArg('text', multiLineComment).build())
    .build();

Thanks for giving me the solution(#749).
After referring to #749 and correcting it as follows, the placement went well.

• Node(vbox)
  • Compartment with label(hbox, "obj")
  • Compartment(vbox)
    • Label Node
    • Label Node
    • Label Node
    • Compartment(vbox)
      • Node(ForeignObject)

However, the layout of ForeignObject remains broken.
Is there a solution to prevent the layout of ForeignObject from breaking ?