Vertically layout nodes in a compartment?

[Ginxss]

Hi,

I have a UML diagram editor which is built similar to the example project for Java-EMF-Theia (https://github.com/eclipse-glsp/glsp-examples/tree/master/project-templates/java-emf-theia), but with a UML model as a source model.

I already have packages with compartments with the freeform layout, which works just as expected. But now I want to add attributes to a compartment inside of a class node in a structured manner.

Attributes are added to classes by adding a node (with a label) to a compartment of the class. The issue that I can't seem to fix is that the VBOX layouting inside of the compartment does not work.

When I build the GCompartment in the gmodel factory, I use .layout(GConstants.Layout.VBOX). Despite this, the behaviour is as follows:
When the attribute has a notation element in the notation model, it just uses the position from that. When there is no notation element for the attribute node, then it just uses (0,0) for the position. No "layouting" is done in either case.

In this image, there are actually two attributes on top of each other, but I would like them to be automatically arranged vertically.

Of course, I when adding a new attribute, I could just count the existing attributes of the class and set the position manually.
But I think the whole point of a container with a layout is so that you don't have to do manual positioning.
I'm quite sure that I'm just missing something to get the VBOX layout to work, so I would very much appreciate your help.
Thanks!

[CamilleLetavernier]

Hi @Ginxss,

Indeed, this is exactly what the VBox layout is supposed to do; so there might be a configuration issue. Can you show the Json Graph model you use for rendering this Class and its children?

I would expect the following structure:

• GNode: Class [layout = vbox]
  • GLabel: "Class 3"
  • GCompartment [layout = vbox, hGrab=true, vGrab=true]
    • GLabel: Property1
    • GLabel: Property2

(Properties could also be GNode with nested GLabel, I guess; it doesn't really matter in this example. The Class label may also be wrapped into its own Compartment - doesn't matter either)

[Ginxss]

This is the output when I print out the tree structure for the class (name : type : class):

So it's:

• GNode
  • GLabel
  • GCompartment
    • GNode
      • GLabel
    • GNode
      • GLabel

This is how the class GNode is built currently:

[CamilleLetavernier]

The structure seems correct to me.

On the client side, do you use the GLSP layoutModule? (From @eclipse-glsp/client)

And which version of the GLSP Client are you currently using? The latest release is 1.0.0, but Layout has changed a bit in the upcoming 1.1.0 version.

[Ginxss]

I am using the GLSP Client version 1.0.0.

I think I don't use the layoutModule, because I don't even know what it is :D
My client is very similar to the client from the Java-EMF-Theia project template.
Do I need to include a layout module to activate the functionality of a VBOX container?

[Ginxss]

As an update for @CamilleLetavernier and anyone curious, the VBOX container works as expected for labels and compartments, but it just does not work for nodes.

This is an example where the label is put in a compartment:

GNodeBuilder classBuilder = new GNodeBuilder(UmlModelTypes.CLASS)
	.id(id)
	.add(new GLabelBuilder(UmlModelTypes.EDITABLE_LABEL)
		.id(id + "_label")
		.text(cl.getName())
		.build())
	.add(new GCompartmentBuilder()
		.id(id + "_comp")
		.add(new GLabelBuilder(UmlModelTypes.EDITABLE_LABEL)
			.id(id + "_attribute_label")
			.text(cl.getName() + "_test")
			.build())
		.build())
	.layout(GConstants.Layout.VBOX)
	.layoutOptions(new GLayoutOptions()
		.hAlign(GConstants.HAlign.CENTER));

Which leads to this result:

Whereas if you put the label in a node:

GNodeBuilder classBuilder = new GNodeBuilder(UmlModelTypes.CLASS)
	.id(id)
	.add(new GLabelBuilder(UmlModelTypes.EDITABLE_LABEL)
		.id(id + "_label")
		.text(cl.getName())
		.build())
	.add(new GNodeBuilder()
		.id(id + "_attribute")
		.add(new GLabelBuilder(UmlModelTypes.EDITABLE_LABEL)
			.id(id + "_attribute_label")
			.text(cl.getName() + "_test")
			.build())
		.build())
	.layout(GConstants.Layout.VBOX)
	.layoutOptions(new GLayoutOptions()
		.hAlign(GConstants.HAlign.CENTER));

It leads to this result:

So if you want layout nodes vertically until this gets fixed, the workaround is to put every node inside of another compartment, which would look like this:

• GNode (class)
  • GCompartment
    • GNode
      • GLabel
  • GCompartment
    • GNode
      • GLabel
  • etc.

[CamilleLetavernier]

Hi @Ginxss ,

Sorry for the delay! I wanted to create a small example to see if I could reproduce the issue. I used the following structure:

• Node [vbox] ("VerticalNodes")
  • Compartment[hbox] with icon and label (Header)
  • Compartment[vbox, hGrab=true, vGrab=true] with child nodes (Vertical list of properties)
    • Property1 (Label Node)
    • Property2 (Label Node)
    • ...

The result looks like this:

You can find the example model here:

vertical-nodes.zip

(Note: it is not possible to recreate this model from the Workflow example; I manually tweaked the model to test the layout. However, it should open just fine in the Workflow Example editor)

Anyway: it seems that Compartments aren't required. Everything works as expected

[Ginxss]

This works for me as well. I don't know why it is not working as expected in my project.
I'll just be using the compartments like I pointed out in my earlier reply since that's the only thing that seems to fix my issue.
Thanks for taking the time to try to help anyway!