Q: Stacking multiple nodes in parent node? #509

CXCubeHD · 2023-07-12T14:17:11Z

CXCubeHD
Jul 12, 2023

How would I be able to stack multiple components in one place like that:

Root, E1, E2, E3 align normally with flexbox, E3_1 E3_2 E3_3 can overlap each other and only rely on E3.

How would I do that?

Answered by inobelar

Jul 12, 2023

@CXCubeHD you can look at my recursive draw function, its pretty simple - you need some 'origin' (for 'root' it {x: 0.0, y: 0.0}, for any 'child' it parent's top-left rect corner) and draw all childs relative to it.

View full answer

CXCubeHD · 2023-07-12T14:18:20Z

CXCubeHD
Jul 12, 2023
Author

Also, E3 would need to also respect the minimal size of its children

0 replies

inobelar · 2023-07-12T17:57:26Z

inobelar
Jul 12, 2023

@CXCubeHD

To snap E3_1 into right-bottom corner of E3 node, set its position into Absolute + inset left and bottom into 0.0.
Similar for E3_3 node - position: Absolute + align_self: Center, since, as i can see - it's not chind of E3_2, but child of E3 too.
To align E3_2 and E3_3 horizontally-centered, set into E3 node justify_content: Center.

Here is quick example (I'm write that rust-like pseudocode without compilation, so it may contain errors):

let mut taffy = Taffy::new();

let E3_3 = taffy.new_leaf(Style {
    position: Absolute, // To snap into center, without layout rules
    align_self: Some(AlignSelf::Center), // Vertically aling inside of E3
    size: Size { width: length(50.0), height: length(50.0) }
    ..Default::default()
})?;

let E3_2 = taffy.new_leaf(Style {
    size: Size { width: percent(0.9), height: length(100.0) },
    align_self: Some(AlignSelf::Center), // Vertically aling inside of E3
    ..Default::default()
})?;

let E3_1 = taffy.new_leaf(Style {
    position: Absolute, // To snap into right-bottom corner, without layout rules
    inset: Rect { left: auto(), right: length(0.0), top: auto(), bottom: length(0.0) },

    size: Size { width: Dimension::Length(100.0), height: Dimension::Length(100.0) },

    ..Default::default()
})?;

let E3 = taffy.new_with_children(
    Style {
        size: Size { width: Dimension::Length(200.0), height: Dimension::Length(200.0) },
        justify_content: Some(JustifyContent::Center), // To align E3_2 and E3_3 horizontally-centered
        ..Default::default()
    },
    &[E3_1, E3_2, E3_3]
)?;

let E2 = taffy.new_leaf(Style {
    size: Size { width: Dimension::Length(100.0), height: Dimension::Length(100.0) },
    ..Default::default()
})?;

let E1 = taffy.new_leaf(Style {
    size: Size { width: Dimension::Length(100.0), height: Dimension::Length(100.0) },
    ..Default::default()
})?;

let root = taffy.new_with_children(
    Style {
        size: Size{ width: length(450.0), height: length(250.0) },
        ..Default::default()
    },
    &[E1, E2, E3]
)?;

P.S: secret message, specially for you

I'm working just-for-fun over (unanounced) Taffy C++ port, and maked (experimental) Web Taffy Playground, specially for Taffy popularization - inspired by similar Yoga Playground and same C++ implementation. You can try play with it, for better feeling, how algoritms works.

Why I started it? - I'm using Yoga on my work, but I dont feel happy with it (lack of grid), and i dont like, where it goes (newly added c++17 requrements, erratas, etc). I found that Taffy is more powerfull, and I even learned Rust a little bit for it - to make c++11 port for my needs & my strictly restricted environment & machines.
Why it's 'secret' message? - Huh, since I'm not finished it, to be sure it ready to be anounced :) Not all features implemented due lack of time & war in Ukraine.
If Nico or Alice read it ... well ... huh, sorry :D I will announce my secret work later (when I feel it's ready) in a special issue, like "Any plans for Playground?" :D

✨ hiding in the shadows like nothing happened ✨

Have a nice day!

0 replies

nicoburns · 2023-07-12T18:41:02Z

nicoburns
Jul 12, 2023
Maintainer

If you hadn't mentioned that E3 needs to respect the minimum sizes of it's children, then I would have suggested something like what @inobelar suggested. To get it to work with the child sizes, you make E3 a grid container with a single grid cell, and then assign all children to that grid cell.

let E3_3 = taffy.new_leaf(Style {
    grid_row: line(1),
    grid_column: line(1),
    align_self: Some(AlignSelf::Center), // Horizontal alignment
    justify_self: Some(JustifySelf::Center), // Vertical alignment
    size: Size { width: length(50.0), height: length(50.0) }
    ..Default::default()
})?;

let E3_2 = taffy.new_leaf(Style {
    grid_row: line(1),
    grid_column: line(1),
    align_self: Some(AlignSelf::Stretch), // Horizontal alignment
    justify_self: Some(JustifySelf::Center), // Vertical alignment
    size: Size { width: percent(0.9), height: length(100.0) },
    ..Default::default()
})?;

let E3_1 = taffy.new_leaf(Style {
    grid_row: line(1),
    grid_column: line(1),
    align_self: Some(AlignSelf::End), // Horizontal alignment
    justify_self: Some(JustifySelf::End), // Vertical alignment
    size: Size { width: Dimension::Length(100.0), height: Dimension::Length(100.0) },
    ..Default::default()
})?;

let E3 = taffy.new_with_children(
    Style {
        display: Display::Grid,
        size: Size { width: Dimension::Length(200.0), height: Dimension::Length(200.0) },
        ..Default::default()
    },
    &[E3_1, E3_2, E3_3]
)?;

0 replies

CXCubeHD · 2023-07-12T19:01:57Z

CXCubeHD
Jul 12, 2023
Author

@inobelar Thank you so much for your help!

However, I could not fully replicate your example.

2023-07-12.20-52-45.mp4

It seems like that the nodes with position: Absolute lose their parent's offset. How would I fix that? Should I add the location to the children nodes? (I don't really like this behavior since it would make my ui system more complicated than it should be...)

Current code (with egui):

let mut taffy = Taffy::new();
let e3_3 = taffy
    .new_leaf(Style {
        position: Position::Absolute, // To snap into center, without layout rules
        align_self: Some(AlignSelf::Center), // Vertically aling inside of E3
        size: Size {
            width: points(50.0),
            height: points(50.0),
        },
        ..Default::default()
    })
    .unwrap();
let e3_2 = taffy
    .new_leaf(Style {
        size: Size {
            width: percent(0.9),
            height: points(100.0),
        },
        align_self: Some(AlignSelf::Center), // Vertically aling inside of E3
        ..Default::default()
    })
    .unwrap();
let e3_1 = taffy
    .new_leaf(Style {
        position: Position::Absolute, // To snap into right-bottom corner, without layout rules
        inset: Rect {
            left: auto(),
            right: points(0.0),
            top: auto(),
            bottom: points(0.0),
        },
        size: Size {
            width: points(100.0),
            height: points(100.0),
        },
        ..Default::default()
    })
    .unwrap();
let e3 = taffy
    .new_with_children(
        Style {
            min_size: Size {
                width: points(200.0),
                height: points(200.0),
            },
            justify_content: Some(JustifyContent::Center), // To align E3_2 and E3_3 horizontally-centered
            ..Default::default()
        },
        &[e3_1, e3_2, e3_3],
    )
    .unwrap();
let e2 = taffy
    .new_leaf(Style {
        min_size: Size {
            width: points(110.0),
            height: points(110.0),
        },
        ..Default::default()
    })
    .unwrap();
let e1 = taffy
    .new_leaf(Style {
        min_size: Size {
            width: points(100.0),
            height: points(100.0),
        },
        ..Default::default()
    })
    .unwrap();
let root = taffy
    .new_with_children(
        Style {
            size: Size {
                width: points(ctx.screen_rect().width() * 0.75),
                height: points(ctx.screen_rect().height() * 0.75),
            },
            ..Default::default()
        },
        &[e1, e2, e3],
    )
    .unwrap();
taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();
let l_root = taffy.layout(root).unwrap();
let l_e1 = taffy.layout(e1).unwrap();
let l_e2 = taffy.layout(e2).unwrap();
let l_e3 = taffy.layout(e3).unwrap();
let l_e3_1 = taffy.layout(e3_1).unwrap();
let l_e3_2 = taffy.layout(e3_2).unwrap();
let l_e3_3 = taffy.layout(e3_3).unwrap();
ui.label(format!("l_root: {:?} | {:?}", l_root.location, l_root.size));
ui.label(format!("l_e1: {:?} | {:?}", l_e1.location, l_e1.size));
ui.label(format!("l_e2: {:?} | {:?}", l_e2.location, l_e2.size));
ui.label(format!("l_e3: {:?} | {:?}", l_e3.location, l_e3.size));
ui.label("");
ui.label(format!("l_e3_1: {:?} | {:?}", l_e3_1.location, l_e3_1.size));
let p = ui.painter();
p.rect_filled(
    l_e1.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(136, 0, 27),
);
p.rect_filled(
    l_e2.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(14, 209, 69),
);
p.rect_filled(
    l_e3.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(63, 72, 204),
);
p.rect_filled(
    l_e3_1.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(255, 242, 0),
);
p.rect_filled(
    l_e3_2.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(185, 122, 86),
);
p.rect_filled(
    l_e3_3.to_erect(),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(14, 209, 69),
);

trait ToEguiPos2 {
    fn to_erect(self) -> egui::Rect;
}
impl ToEguiPos2 for taffy::layout::Layout {
    fn to_erect(self) -> egui::Rect {
        egui::Rect {
            min: egui::Pos2::new(self.location.x, self.location.y),
            max: egui::Pos2::new(
                self.location.x + self.size.width,
                self.location.y + self.size.height,
            ),
        }
    }
}

3 replies

nicoburns Jul 12, 2023
Maintainer

I think the issue might be with your to_erect function. The locations Taffy outputs for nodes are relative to the parent. If you want location relative to the viewport then you need to recurse up/down the tree and apply each parent's offset.

CXCubeHD Jul 12, 2023
Author

I think the issue might be with your to_erect function. The locations Taffy outputs for nodes are relative to the parent. If you want location relative to the viewport then you need to recurse up/down the tree and apply each parent's offset.

Thanks I will check it out

inobelar Jul 12, 2023

@CXCubeHD you can look at my recursive draw function, its pretty simple - you need some 'origin' (for 'root' it {x: 0.0, y: 0.0}, for any 'child' it parent's top-left rect corner) and draw all childs relative to it.

Answer selected by CXCubeHD

CXCubeHD · 2023-07-12T19:11:32Z

CXCubeHD
Jul 12, 2023
Author

@inobelar I tried your solution out as well and it also seems to have the same problem, that the parent offset is not being applied. But other than that, it might be a better and more consistent solution.

0 replies

CXCubeHD · 2023-07-12T19:57:00Z

CXCubeHD
Jul 12, 2023
Author

2023-07-12.21-49-12.mp4

(Temporary fix)

let mut taffy = Taffy::new();

let e3_3 = taffy
    .new_leaf(Style {
        grid_row: line(1),
        grid_column: line(1),
        align_self: Some(AlignSelf::Center),
        justify_self: Some(JustifySelf::Center),
        size: Size {
            width: points(50.0),
            height: points(50.0),
        },
        ..Default::default()
    })
    .unwrap();
let e3_2 = taffy
    .new_leaf(Style {
        grid_row: line(1),
        grid_column: line(1),
        align_self: Some(AlignSelf::Center),
        justify_self: Some(JustifySelf::Center),
        size: Size {
            width: percent(0.9),
            height: points(100.0),
        },
        ..Default::default()
    })
    .unwrap();
let e3_1 = taffy
    .new_leaf(Style {
        grid_row: line(1),
        grid_column: line(1),
        align_self: Some(AlignSelf::End),
        justify_self: Some(JustifySelf::End),
        size: Size {
            width: points(100.0),
            height: points(100.0),
        },
        ..Default::default()
    })
    .unwrap();
let e3 = taffy
    .new_with_children(
        Style {
            display: Display::Grid,
            min_size: Size {
                width: points(200.0),
                height: points(200.0),
            },
            ..Default::default()
        },
        &[e3_1, e3_2, e3_3],
    )
    .unwrap();
let e2 = taffy
    .new_leaf(Style {
        min_size: Size {
            width: points(110.0),
            height: points(110.0),
        },
        ..Default::default()
    })
    .unwrap();
let e1 = taffy
    .new_leaf(Style {
        min_size: Size {
            width: points(100.0),
            height: points(100.0),
        },
        ..Default::default()
    })
    .unwrap();
let root = taffy
    .new_with_children(
        Style {
            size: Size {
                width: points(ctx.screen_rect().width() * 0.75),
                height: points(ctx.screen_rect().height() * 0.75),
            },
            ..Default::default()
        },
        &[e1, e2, e3],
    )
    .unwrap();

taffy.compute_layout(root, Size::MAX_CONTENT).unwrap();

let l_root = taffy.layout(root).unwrap();
let l_e1 = taffy.layout(e1).unwrap();
let l_e2 = taffy.layout(e2).unwrap();
let l_e3 = taffy.layout(e3).unwrap();
let l_e3_1 = taffy.layout(e3_1).unwrap();
let l_e3_2 = taffy.layout(e3_2).unwrap();
let l_e3_3 = taffy.layout(e3_3).unwrap();

let p = ui.painter();

let ll = l_root.location.to_fpair();

p.rect_filled(
    l_e1.to_erect(ll),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(136, 0, 27),
);
p.rect_filled(
    l_e2.to_erect(ll),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(14, 209, 69),
);
p.rect_filled(
    l_e3.to_erect(ll),
    egui::Rounding::same(4.0),
    egui::Color32::from_rgb(63, 72, 204),
);

{
    let ll = l_e3.location.to_fpair_add(ll);
    p.rect_filled(
        l_e3_1.to_erect(ll),
        egui::Rounding::same(4.0),
        egui::Color32::from_rgb(255, 242, 0),
    );
    p.rect_filled(
        l_e3_2.to_erect(ll),
        egui::Rounding::same(4.0),
        egui::Color32::from_rgb(185, 122, 86),
    );
    p.rect_filled(
        l_e3_3.to_erect(ll),
        egui::Rounding::same(4.0),
        egui::Color32::from_rgb(14, 209, 69),
    );
}

trait ToFPair {
    fn to_fpair(self) -> (f32, f32);
    fn to_fpair_add(self, parent: (f32, f32)) -> (f32, f32);
}
impl ToFPair for taffy::geometry::Point<f32> {
    fn to_fpair(self) -> (f32, f32) {
        (self.x, self.y)
    }
    fn to_fpair_add(self, parent: (f32, f32)) -> (f32, f32) {
        (parent.0 + self.x, parent.1 + self.y)
    }
}

trait ToEguiPos2 {
    fn to_erect(self, parent: (f32, f32)) -> egui::Rect;
}
impl ToEguiPos2 for taffy::layout::Layout {
    fn to_erect(self, parent: (f32, f32)) -> egui::Rect {
        egui::Rect {
            min: egui::Pos2::new(self.location.x + parent.0, self.location.y + parent.1),
            max: egui::Pos2::new(
                self.location.x + parent.0 + self.size.width,
                self.location.y + parent.1 + self.size.height,
            ),
        }
    }
}

It fully works now! Thank you so much!

A suggestion from me would be if there was some kind of Stack display, this would definitely reduce the amount of code that somebody would need to write to replicate the behaviour.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Q: Stacking multiple nodes in parent node? #509

{{title}}

Replies: 6 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Q: Stacking multiple nodes in parent node? #509

CXCubeHD Jul 12, 2023

Replies: 6 comments · 3 replies

CXCubeHD Jul 12, 2023 Author

inobelar Jul 12, 2023

nicoburns Jul 12, 2023 Maintainer

CXCubeHD Jul 12, 2023 Author

nicoburns Jul 12, 2023 Maintainer

CXCubeHD Jul 12, 2023 Author

inobelar Jul 12, 2023

CXCubeHD Jul 12, 2023 Author

CXCubeHD Jul 12, 2023 Author

CXCubeHD
Jul 12, 2023

Replies: 6 comments 3 replies

CXCubeHD
Jul 12, 2023
Author

inobelar
Jul 12, 2023

nicoburns
Jul 12, 2023
Maintainer

CXCubeHD
Jul 12, 2023
Author

nicoburns Jul 12, 2023
Maintainer

CXCubeHD Jul 12, 2023
Author

CXCubeHD
Jul 12, 2023
Author

CXCubeHD
Jul 12, 2023
Author