Flex Box Margin Problem

[zicklag]

I've got a simple layout where the margins in a flex box seem to be working incorrectly:

use raui::prelude::*;
use raui_quick_start::RauiQuickStartBuilder;

fn main() {
    RauiQuickStartBuilder::default()
        .window_title("RAUI Guide".into())
        .widget_tree(widget! {
            (app)
        })
        .build()
        .expect("Error building quick start")
        .run()
        .expect("Error running RAUI app");
}

pub fn app(_ctx: WidgetContext) -> WidgetNode {
    let text_box_props = Props::new(TextBoxProps {
        text: "Hello World!".into(),
        color: Color {
            r: 0.0,
            g: 0.0,
            b: 0.0,
            a: 1.0,
        },
        font: TextBoxFont {
            name: "resources/verdana.ttf".to_owned(),
            size: 60.0,
        },
        ..Default::default()
    })
    .with(FlexBoxItemLayout {
        margin: Rect {
            top: 50., // Set a margin above our text
            ..Default::default()
        },
        ..Default::default()
    });

    let image_box_props = Props::new(ImageBoxProps {
        material: ImageBoxMaterial::Image(ImageBoxImage {
            id: "resources/cats.jpg".to_owned(),
            ..Default::default()
        }),
        ..Default::default()
    });

    widget! {
        (vertical_box [
            (text_box: {text_box_props})
            (image_box: {image_box_props})
        ])
    }
}

While the margin above the text is applying extra space, the cat picture seems to also get extra space added to the bottom for some reason.

If I take out the margin on the text it, the space at the bottom of the image disappears:

The same thing happens if I add a margin to the bottom of the text: an extra myserious space is added to the bottom of the cat picture.

[zicklag]

I'm also finding that shrink and grow dont' seem to effecting anything as far as I can tell.

I curious whether or not it would make sense to build a layout engine based on stretch. Obviously the point of RAUI's design is that anybody could bring their own layout engine, which is great, but I wonder if that would be useful in the default layout engine to make it actually flex-box compliant.

It would add an extra 2.1k lines of code dependency ( I did a quick line count, not counting comments ), but that isn't too bad. And stretch is optimized for small code size and performance on mobile so it seems like it could be a good fit.

Not sure if there are any other problems with that approach, though, and I'm not sure if these are easy fixes anyway.

[PsichiX]

gonna investigate the problem this evening. i have concerns when it comes to using stretch, iirc bevy was using it and there were performance issues? have to research this to be sure.

[PsichiX]

ok, i'v reviewed PR that is linked to this issue, i'll start investigation of this problem soon, fix the bugs and produce an explanation of how layouting works and clarify where and how RAUI flex box is different from CSS flex box.

quick question: can we easily add to the book a whole separate section where i could put explanation of how default layout engine does its layouting?

[PsichiX]

also in the future we could try to prototype a separate layout plugin that uses stretch, that would let ppl use it if they prefer to follow mores CSS-ish flex box layouting 🤔 that's something to consider, gonna add a separate issue for that later and mark it as help wanted so someone could pick that up if they want.

[zicklag]

i'll start investigation of this problem soon, fix the bugs and produce an explanation of how layouting works and clarify where and how RAUI flex box is different from CSS flex box.

:heart: :+1:

quick question: can we easily add to the book a whole separate section where i could put explanation of how default layout engine does its layouting?

Absolutely. That's really easy.

I could create a PR with the stub section so that you could add the actual content to if that helps.

also in the future we could try to prototype a separate layout plugin that uses stretch, that would let ppl use it if they prefer to follow mores CSS-ish flex box layouting thinking that's something to consider, gonna add a separate issue for that later and mark it as help wanted so someone could pick that up if they want.

I like that idea.

[PsichiX]

i have been debugging the margin problem - accounting for margin in flex box layouting is definitely and completely broken:

i have idea where the source of the problem is, i'm implementing and testing the solution.

btw. i've also tested grow/shrink/fill and data shows to me that they work as expected, i believe because i haven't explained default layouting yet, there might have been problems with combining values that wasn't producing expected results - i'll make sure that i'll explain them extensively in the layouting explanatory page in the book!

[PsichiX]

@zicklag

FIXED!

The problem was that after layouting child item, i was progressing new_main axis with only that child available space size and i wasn't accounting its margins so relative offset of next items was made without previous item margins 🤦 that was an easy couple lines of code fix (tho debugging took longer because i had to print every value i calculated to get as much data to analyze as possible xD).

[PsichiX]

changes are pushed to next, tomorrow i'll add an explanation of default layout engine. i'm closing this issue now, feel free to test it :D

[zicklag]

Works!