Layout Margin Problem

[zicklag]

I've got a simple example that shows a ContentBoxItemLayout::margin applied to a vertical_paper causes a margin to be applied to both the outside and the inside of the paper, instead of just the outside of the paper.

Example Code

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 parent_image = blue_box();
    let parent_box = ContentBoxItemLayout {
        margin: 20.0.into(), // This margin should apply to the outside of the paper
        ..Default::default()
    };

    let child = Props::new(red_box());

    widget! {
        (content_box [
            (image_box: {parent_image}) // Blue box will fill the screen
            (vertical_paper: {parent_box} [ // Paper will be white due to lack of theme
                (image_box: {child}) // Image inside of vertical paper will be red
            ])
        ])
    }
}

fn colored_box(color: Color) -> ImageBoxProps {
    ImageBoxProps {
        material: ImageBoxMaterial::Color(ImageBoxColor {
            color,
            ..Default::default()
        }),
        ..Default::default()
    }
}

fn blue_box() -> ImageBoxProps {
    colored_box(Color {
        r: 0.,
        g: 0.,
        b: 1.,
        a: 1.,
    })
}

fn red_box() -> ImageBoxProps {
    colored_box(Color {
        r: 1.,
        g: 0.,
        b: 0.,
        a: 1.,
    })
}

Screenshot

In the example above, we have applied the margin to the white box, and the red box is a child. The margin should space the white box away from the edges where the blue box is, like it is doing, but the red box on the inside of the white box should totally fill the white box, instead of having a margin, because we didn't apply a margin to the red box.

[PsichiX]

investigating the issue right now! :D

[PsichiX]

ok, i see where the problem is - props are cloned so layout duplicates inside paper content box.

widget! {
        (#{key} | {idref.cloned()} paper: {props.clone()} [
            (#{"vertical"} vertical_box: {props.clone()} |[ listed_slots ]|)
        ])
    }

that's gonna be easy fix for all paper versions of material widget, i'll just remove layout of wrapped container inside paper.

[PsichiX]

fixed! gonna reproduce that for every paper container and push the fix

[zicklag]

Awesome, thanks!

[PsichiX]

introduced PaperContentLayoutProps that wraps ContentBoxItemlayout of paper children which is unwrapped and applied for each of them - previously this layout was cloned from paper node to its children which produced interla margins, etc. now you have to intentionally pass layout wrapped in PaperContentLayoutProps to make internal paper content layout. pushed to next branch 🎉

[zicklag]

I think we can close this now. :)