GComparments not extending the width of parent container with hGrab

[rileydanejohnston]

Hello,

I'm having trouble getting compartments to match the width of a parent node using hGrab. I want the title to hAlign left, and the button to hAlign right. I’ve added hGrab=true to the parent node and the header compartment, but it doesn’t seem to be working. Are there any changes I can make to achieve this?

I'm using a node server with the vscode client. Here is my code and here is what it creates:

        const headerBox = GCompartment.builder()
            .add(GLabel.builder().text('title').build())
            .add(GButton.builder().addCssClass('button-expand').enabled(true).type('button:expand').build())
            .addLayoutOption('hGrab', true)
            .type('comp')
            .layout('hbox')
            .build();

        const leftBox = GCompartment.builder()
            .add(GLabel.builder().text('left value 1').build())
            .add(GLabel.builder().text('left value 2').build())
            .add(GLabel.builder().text('left value 3').build())
            .type('comp')
            .layout('vbox')
            .build();

        const rightBox = GCompartment.builder()
            .add(GLabel.builder().text('right value 1').build())
            .add(GLabel.builder().text('right value 2').build())
            .type('comp')
            .layout('vbox')
            .build();

        const valuesBox = GCompartment.builder()
            .type('comp')
            .layout('hbox')
            .addLayoutOption('hGap', 50)
            .add(leftBox)
            .add(rightBox)
            .build();

        const parentNode = GNode.builder()
            .addCssClass('parent-node')
            .layout('vbox')
            .addLayoutOption('hGrab', true)
            .add(headerBox)
            .add(valuesBox)
            .build();

[CamilleLetavernier]

Hi,

If both the title and the button are placed in the same parent, hGrab won't affect them (Their parent will grow bigger, but they're still centered in their parent, so it doesn't actually change anything for them. They'll be "properly centered" rather than "left-aligned" in the parent node, but they'll still be stuck together).

What you want is 2 compartments (One left, one right), and to set the hGrab=true value on the left compartment (so it takes extra horizontal space, and pushes the right one further to the right). It might be possible to also apply hGrab on your left-side element (the title label) directly, although I haven't really tested this.

More verbose option that should work, with intermediate compartments:

- Header compartment (hGrab=true): takes the entire width of the node
  - Left Header compartment (hGrab=true, align=left): pushes the siblings to the right, aligns its own content to the left
    - Title Label
  - Right Header compartment (No specific option; it is already pushed to the right by its left-sibling taking all the extra space)
    - arrow button
- ...Other node contents...

More compact option, that may or may not work, without intermediate compartments:

- Header compartment (hGrab=true): takes the entire width of the node
  - Title Label (hGrab=true, align=left)
  - Arrow button
- ...Other node contents...

[rileydanejohnston]

Hi Camille,
Unfortunately, I cannot get either of these methods to work but maybe I'm missing something. I adjusted my header to the following, with all other elements staying the same:

const headerBoxComp = GCompartment.builder()
      .add(
          GCompartment.builder()
              .add(GLabel.builder().text('title').build())
              .addLayoutOption('hGrab', true)
              .addLayoutOption('vAlign', 'left')
              .build()
      )
      .add(
          GCompartment.builder()
              .add(GButton.builder().addCssClass('button-expand').enabled(true).type('button:expand').build())
              .build()
      )
      .addLayoutOption('hGrab', true)
      .type('comp')
      .layout('hbox')
      .build();

The resulting headerBoxComp & title compartment do not take extra horizontal space:

[CamilleLetavernier]

Hey,

I quickly checked with a handcrafted model, based on the Workflow example. I think this layout is similar to what you're trying to get:

I used the compact approach (1 header compartment with 2 labels, the left one using hGrab=true)

Here's the relevant part for the parent node and header (Everything below the header is truncated):

{
      "name": "Test Node",
      "id": "cb8de617-853f-4d5f-aa80-c500941b4554",
      "cssClasses": [
        "category"
      ],
      "children": [
        {
          "id": "cb8de617-853f-4d5f-aa80-c500941b4554_header",
          "children": [
            {
              "id": "cb8de617-853f-4d5f-aa80-c500941b4554_classname_left",
              "type": "label:heading",
              "text": "Left Label",
              "layoutOptions": {
                  "hGrab": true
              }
            },
            {
              "id": "cb8de617-853f-4d5f-aa80-c500941b4554_classname_right",
              "type": "label:heading",
              "text": "Right Label"
            }
          ],
          "type": "comp:header",
          "layout": "hbox",
          "layoutOptions": {
              "hGrab": true
          }
        },
        {
          "id": "cb8de617-853f-4d5f-aa80-c500941b4554_struct",
          ...

I also attached the complete model I used for testing (It contains a *.wf model, that can be used with the Workflow Example editor):

header-layout.zip

[rileydanejohnston]

Hi Camille,
Thank you for the example but it is still not working for me. I tried copying all the relevant settings from the parent category node, the header compartment and the two labels. It seems like it should work but the header compartment/left label are not grabbing the extra space. I can't tell if I'm missing something simple or if there is a deeper issue. Here is my code and the result it creates:

const headerBox = GCompartment.builder()
            .add(GLabel.builder().addLayoutOption('hGrab', 'true').text('Left').type('label:heading').build())
            .add(GLabel.builder().text('Right').type('label:heading').build())
            .addLayoutOption('hGrab', true)
            .type('comp:header')
            .layout('hbox')
            .build();
const parentNode = GNode.builder()
            .addCssClass('parent-node')
            .layout('vbox')
            .addLayoutOption('hGrab', false)
            .addLayoutOption('vGrab', false)
            .addLayoutOption('hAlign', 'center')
            .add(headerBox)
            .add(valuesBox)
            .type('category')
            .build();

[rileydanejohnston]

Hi @CamilleLetavernier, I can get the headerBox to grab the extra horizontal space by changing the element from a GCompartment to a GNode. HGrab works at the header level but not at the label level, which makes no sense to me since I set both containers to be GNodes and have HGrab=true. If the labelBox would grab the extra space like the headerBox does, I think I could achieve the desired layout. Do you see any issues in these elements that could be causing the issue?

Here's what it looks like:

Here's what the code looks like:

        const leftLabelBox = GNode.builder()
            .add(GLabel.builder().text('Left').type('label:heading').build())
            .addCssClass('left-label-box')
            .layout('hbox')
            .type('node:container')
            .build();

        const rightLabelBox = GNode.builder()
            .add(GLabel.builder().addLayoutOption('hGrab', true).text('Right').type('label:heading').build())
            .addLayoutOption('hAlign', 'right')
            .addLayoutOption('hGrab', true)
            .addCssClass('label-level')
            .layout('vbox')
            .type('node:container')
            .build();

        const headerBox = GNode.builder()
            .add(leftLabelBox)
            .add(rightLabelBox)
            .addCssClass('header-level')
            .addLayoutOption('hGrab', true)
            .type('node:container')
            .layout('hbox')
            .build();

this is what my di.config looks like:

    configureModelElement(context, 'node:container', SNode, RectangularNodeView, { enable: [layoutableChildFeature, layoutContainerFeature], disable: [moveFeature]});
    configureModelElement(context, 'label:heading', SLabel, SLabelView, { enable: [editLabelFeature, layoutableChildFeature] });

[CamilleLetavernier]

Hi,

Compartments and Nodes may behave slightly differently, because their view may (or may not) actually support the "size" attributes (Width/Height), and modify the way they render it. But this isn't necessarily the case for Labels (The size of a label is defined by the size of the text, unless your label view does something more, e.g. to support alignment or some kind of label decoration).

In your last example above, you set hGrab=true on the right label: this means that anything that comes after it will be pushed further to the right; but nothing comes after it. So, this won't have any effect (Again: unless you apply this to a node that actually supports size attributes). This would work if your Right-label view supported the width attribute, and using a right-aligned text. But since the default Label View doesn't support width attribute, you need to apply hGrab to the left label (which will be left-aligned by default).

The layout is driven by the parent (In your case: root node and top header). hGrab distributes the remaining horizontal space between the nodes that request hGrab, and does two things:

• Set the size attribute on these nodes (increased width)
• (Re)position the elements (x position) to account for the increased size of the elements that used hGrab

Since the default Label View ignores the Width attribute, only the position will be affected (Unless you're using a custom Label View).

For the layout to work properly, you need to ensure the following:

• All heading labels are left-aligned (If the left label uses extra space, but is right-aligned, it may be pushed somewhere around the center/right of the header)
• Left heading label uses hGrab=true (to push the right label to the right) or right heading uses hGrab=true and is right-aligned, and its label view supports the width attribute (The default SLabelView ignores the width attribute; so I don't recommend this approach)
• Views (Node, Compartment or Label) properly support the layout attributes defined by the layout (Especially if you're using custom views)
• All intermediate nodes/compartments support the hGrab=true attribute (if any of them doesn't, it will restrict the space available for its children) and properly enforce the width attribute. In my example, I only had one compartment between the top-level node and the labels, and it was using hGrab=true

In the workflow example, the views for the header are mapped as follows:

configureModelElement(context, 'label:heading', SLabel, SLabelView, { enable: [editLabelFeature] });
configureModelElement(context, 'comp:header', SCompartment, SCompartmentView);

(These are the default SLabelView and SCompartmentView)

[rileydanejohnston]

Hi @CamilleLetavernier,

My understanding is that if I'm using the default views in this situation (RectangularNodeView, SLabelView, etc), I need to:

1. apply hGrab=true to the leftLabelBox instead of the rightLabelBox
2. make sure the leftLabelBox is an element that enforces the width attribute

My headerBox uses the RectangularNodeView. It appears to enforce the width attribute because it grabs the extra space when I add hGrab=true to it. My leftLabelBox also uses the RectangularNodeView and has hGrab=true applied to it but it does not grab the extra space. I still don't understand why each node uses the same view and has the hGrab=true attribute yet the leftLabelBox does not grab the extra space like its parent does. Am I missing something? Are you saying I have to use a custom label view that enforces the width attribute for this to work and if so, does such a label view already exist?

[rileydanejohnston]

Hello @CamilleLetavernier, I just wanted to follow up on this issue to see if I'm missing anything. I still don't understand why hGrab would work at the headerBox level but not at the leftLabelBox level when they both use the same views, S elements and have hGrab=true applied.