Wrapper component breaks layout

[jmEvoqua]

Hi,

I noticed that a wrapper component which does not derive from anything breaks the layout. Is a non derived component not fully supported or is there something else I am not able to see?

With Wrapper:

component Base inherits Rectangle {
    background: gray;
    VerticalLayout {
        Rectangle {
            width: 480px;
            height: 240px;
            background: green;
        }

        @children
    }
}

component Wrapper {
    Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

export component Main inherits Window {
    background: black;

    Wrapper { }
}

Without Wrapper:

export component Main inherits Window {
    background: black;

    Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

Another interesting case when the base inside the wrapper has no children:

component Wrapper {
    Base {
        
    }
}

Or when the element inside the wrapper is conditional:

component Wrapper {
    if true: Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

I would have expected that the wrapper does not change the layout in any way.

[tronical]

We discussed this a bit offline. So the use of Wrapper as component that doesn't inherit Rectangle is bound to give a difference in behaviour. So for example:

component RedRectangle inherits Rectangle {
    background: red;
}

component Wrapper {
    RedRectangle {}
}

export component Test inherits Window {
    //RedRectangle {}
    Wrapper {} 
}

The use of RedRectangle {} directly inside Test or via Wrapper has one major difference: Wrapper, as component that doesn't inherit from any other element, won't fill its parent by default, so no implicit width: 100%; height: 100%;

However, what's odd and looks like a bug is this:

component RedRectangle inherits Rectangle {
    background: red;
    width: 300px;
    height: 300px;
}

component Wrapper inherits Rectangle {
    RedRectangle {}
}

export component Test inherits Window {
    HorizontalLayout {
      RedRectangle {}
      //Wrapper {} 
    }
}

This example is fixed in size, it can't be resized. That makes sense in terms of constraints being propagated. However, using Wrapper directly instead of RedRectangle breaks this, the window is freely resizable.

I think that it's either a bug that this happens, or we're lacking a bit in the documentation that explains when these constraints are not propagated anymore.

[ogoffart]

@tronical: in the last example, the Wrapper itself don't have strong constraints. It has a preferred size based on contents, but it doesn't have maximum or minimum size based on contents.

From https://docs.slint.dev/latest/docs/slint/src/language/concepts/layouting#preferred-size

When not explicitly set, the preferred size depends on the children, and is the preferred size of the child that has the bigger preferred size, whose x and y property are not set. The preferred size is therefore computed from the child to the parent, just like other constraints (maximum and minimum size), unless explicitly overwritten.

That docs mention it is the same as maximum is minimum size, but that doesn't seems to be the case unless there are layouts

[tronical]

@tronical: in the last example, the Wrapper itself don't have strong constraints. It has a preferred size based on contents, but it doesn't have maximum or minimum size based on contents.

From https://docs.slint.dev/latest/docs/slint/src/language/concepts/layouting#preferred-size

When not explicitly set, the preferred size depends on the children, and is the preferred size of the child that has the bigger preferred size, whose x and y property are not set. The preferred size is therefore computed from the child to the parent, just like other constraints (maximum and minimum size), unless explicitly overwritten.

That docs mention it is the same as maximum is minimum size, but that doesn't seems to be the case unless there are layouts

I would also have expected the same behaviour of minimum and maximum size, i.e. that Wrapper implies

component Wrapper inherits Rectangle {
    // I thought this is implicit:
    min-width: r.min-width; // plus any children, if there were any
    max-width: r.max-width;
    min-height: r.min-height;
    max-height: r.max-height;

    inner := RedRectangle {}
}    

However that's not the case. Is this a bug?

It seems that's only the case when Wrapper is instead written using a layout:

component Wrapper inherits Rectangle {
    min-width: r.min-width;
    max-width: r.max-width;
    min-height: r.min-height;
    max-height: r.max-height;

    r := VerticalLayout { RedRectangle {} }
}

That docs mention it is the same as maximum is minimum size

Is this the part of documentation you mean: "just like other constraints (maximum and minimum size)" ?

It seems to me that in any case the docs should be extended to explain propagation of constraints, i.e. when they are propagated.