diff --git a/crates/egui_flex/examples/flex_example.rs b/crates/egui_flex/examples/flex_example.rs index 2434458..63b8512 100644 --- a/crates/egui_flex/examples/flex_example.rs +++ b/crates/egui_flex/examples/flex_example.rs @@ -31,151 +31,151 @@ fn main() -> eframe::Result { "items", ]; - // Flex::new() - // .align_items(egui_flex::FlexAlign::Stretch) - // .align_items_content(egui::Align2::CENTER_CENTER) - // .wrap(true) - // .show(ui, |flex| { - // flex.add_ui( - // FlexItem::default() - // .grow(1.0) - // .frame(Frame::group(flex.ui().style())), - // |ui| { - // ui.label("Hello"); - // }, - // ); - // - // for item in items { - // flex.add_container(FlexItem::default().grow(1.0), |ui, content| { - // ui.group(|ui| { - // content.content(ui, |ui| { - // Label::new(item).wrap().ui(ui); - // }) - // }) - // .inner - // }); - // } - // - // flex.add_container( - // FlexItem::default().grow(1.0).basis(200.0), - // |ui, content| { - // ui.group(|ui| { - // content.content(ui, |ui| { - // TextEdit::singleline(&mut text) - // .desired_width(ui.available_width()) - // .ui(ui); - // }) - // }) - // .inner - // }, - // ); - // - // flex.add_container( - // FlexItem::default().grow(1.0).basis(80.0), - // |ui, content| { - // ui.group(|ui| { - // content.content(ui, |ui| { - // ui.add(Label::new("I have flex basis 80").wrap()); - // }) - // }) - // .inner - // }, - // ); - // - // for align in &[ - // FlexAlign::Start, - // FlexAlign::End, - // FlexAlign::Center, - // FlexAlign::Stretch, - // ] { - // flex.add_ui_frame( - // FlexItem::default().grow(1.0).align_self(*align), - // Frame::group(flex.ui().style()), - // |ui| { - // ui.add( - // Label::new(format!("I have align-self: {align:?}")) - // .wrap(), - // ); - // }, - // ); - // } - // - // flex.add_ui(FlexItem::new().grow(1.0).basis(150.0), |ui| { - // ui.style_mut().spacing.slider_width = ui.available_width() - 50.0; - // Slider::new(&mut 0.0, 0.0..=1000.0).ui(ui); - // }); - // - // flex.add_flex_frame( - // FlexItem::default().grow(1.0), - // Flex::vertical() - // .align_content(egui_flex::FlexAlignContent::Stretch) - // .grow_items(1.0), - // egui::Frame::group(flex.ui().style()), - // |flex| { - // flex.add(FlexItem::default().grow(1.0), Button::new("btn")); - // flex.add(FlexItem::default(), Button::new("Very long button")); - // flex.add_flex( - // FlexItem::default().grow(1.0), - // Flex::horizontal() - // .align_content(egui_flex::FlexAlignContent::Stretch) - // .grow_items(1.0), - // |flex| { - // flex.add( - // FlexItem::default().grow(1.0), - // Button::new("btn"), - // ); - // flex.add( - // FlexItem::default(), - // Button::new("Very long button"), - // ); - // }, - // ); - // }, - // ); - // - // flex.add(FlexItem::new().grow(1.0), Button::new("Very long button")); - // - // flex.add(FlexItem::new().grow(1.0), Button::new("Button")); - // flex.add( - // FlexItem::new().grow(1.0), - // Button::new("Button wefoijfgiweopjg"), - // ); - // flex.add(FlexItem::new().grow(1.0), Button::new("Button")); - // flex.add(FlexItem::new(), Button::new("Simple Button")); - // - // flex.add(FlexItem::new(), Checkbox::new(&mut false, "Checkbox")); - // - // // flex.add_container( - // // FlexItem::default().grow(1.0).basis(100.0), - // // |ui, content| { - // // ui.group(|ui| { - // // content.content(ui, |ui| { - // // ui.vertical(|ui| { - // // Flex::new().show(ui, |flex| { - // // flex.add( - // // FlexItem::new(), - // // Button::new("Button"), - // // ); - // // - // // flex.add( - // // FlexItem::new(), - // // Button::new("Longer Button"), - // // ); - // // - // // flex.add( - // // FlexItem::new(), - // // Button::new( - // // "Button\nwith\nmultiple\nlines", - // // ), - // // ); - // // }); - // // }); - // // }) - // // }) - // // .inner - // // }, - // // ); - // }); + Flex::new() + .w_full() + .align_items(egui_flex::FlexAlign::Stretch) + .align_items_content(egui::Align2::CENTER_CENTER) + .wrap(true) + .show(ui, |flex| { + flex.add_ui( + FlexItem::default() + .grow(1.0) + .frame(Frame::group(flex.ui().style())), + |ui| { + ui.label("Hello"); + }, + ); + + for item in items { + flex.add_ui( + FlexItem::default() + .grow(1.0) + .frame(Frame::group(flex.ui().style())), + |ui| { + Label::new(item).wrap().ui(ui); + }, + ); + } + + flex.add_ui( + FlexItem::default() + .grow(1.0) + .basis(200.0) + .frame(Frame::group(flex.ui().style())), + |ui| { + TextEdit::singleline(&mut text) + .desired_width(ui.available_width()) + .ui(ui); + }, + ); + + flex.add_ui( + FlexItem::default() + .grow(1.0) + .basis(80.0) + .frame(Frame::group(flex.ui().style())), + |ui| { + ui.add(Label::new("I have flex basis 80").wrap()); + }, + ); + + for align in &[ + FlexAlign::Start, + FlexAlign::End, + FlexAlign::Center, + FlexAlign::Stretch, + ] { + flex.add_ui( + FlexItem::default() + .grow(1.0) + .align_self(*align) + .frame(Frame::group(flex.ui().style())), + |ui| { + ui.add( + Label::new(format!("I have align-self: {align:?}")) + .wrap(), + ); + }, + ); + } + + flex.add_ui(FlexItem::new().grow(1.0).basis(150.0), |ui| { + ui.style_mut().spacing.slider_width = ui.available_width() - 50.0; + Slider::new(&mut 0.0, 0.0..=1000.0).ui(ui); + }); + + flex.add_flex( + FlexItem::default() + .grow(1.0) + .frame(egui::Frame::group(flex.ui().style())), + Flex::vertical() + .align_content(egui_flex::FlexAlignContent::Stretch) + .grow_items(1.0), + |flex| { + flex.add(FlexItem::default().grow(1.0), Button::new("btn")); + flex.add(FlexItem::default(), Button::new("Very long button")); + flex.add_flex( + FlexItem::default().grow(1.0), + Flex::horizontal() + .align_content(egui_flex::FlexAlignContent::Stretch) + .grow_items(1.0), + |flex| { + flex.add( + FlexItem::default().grow(1.0), + Button::new("btn"), + ); + flex.add( + FlexItem::default(), + Button::new("Very long button"), + ); + }, + ); + }, + ); + + flex.add(FlexItem::new().grow(1.0), Button::new("Very long button")); + + flex.add(FlexItem::new().grow(1.0), Button::new("Button")); + flex.add( + FlexItem::new().grow(1.0), + Button::new("Button wefoijfgiweopjg"), + ); + flex.add(FlexItem::new().grow(1.0), Button::new("Button")); + flex.add(FlexItem::new(), Button::new("Simple Button")); + + flex.add(FlexItem::new(), Checkbox::new(&mut false, "Checkbox")); + + // flex.add_container( + // FlexItem::default().grow(1.0).basis(100.0), + // |ui, content| { + // ui.group(|ui| { + // content.content(ui, |ui| { + // ui.vertical(|ui| { + // Flex::new().show(ui, |flex| { + // flex.add( + // FlexItem::new(), + // Button::new("Button"), + // ); + // + // flex.add( + // FlexItem::new(), + // Button::new("Longer Button"), + // ); + // + // flex.add( + // FlexItem::new(), + // Button::new( + // "Button\nwith\nmultiple\nlines", + // ), + // ); + // }); + // }); + // }) + // }) + // .inner + // }, + // ); + }); }); // ui.horizontal_top(|ui| { diff --git a/crates/egui_flex/src/lib.rs b/crates/egui_flex/src/lib.rs index 7dbbe96..7367330 100644 --- a/crates/egui_flex/src/lib.rs +++ b/crates/egui_flex/src/lib.rs @@ -861,10 +861,23 @@ impl<'a> FlexInstance<'a> { let mut content_rect = content_align.align_size_within_rect(target_inner_size, frame_without_margin); + if let Some(basis) = item.basis { + let mut size = content_rect.size(); + size[self.direction] = basis + extra_length; + content_rect = Rect::from_center_size( + content_rect.center(), + size.min(self.ui.available_size() - item_state.margin.sum()), + ); + } + + // ui.ctx() + // .debug_painter() + // .debug_rect(content_rect, egui::Color32::RED, ""); + let max_content_size = self.max_item_size - margin.sum(); // If we shrink, we have to limit the size, otherwise we let it grow to max_content_size - if !do_shrink { + if !do_shrink && item.basis.is_none() { // Because we want to allow the content to grow (e.g. in case the text gets longer), // we set the content_rect's size to match the flex ui's available size. content_rect.set_width(max_content_size.x); @@ -876,14 +889,9 @@ impl<'a> FlexInstance<'a> { // frame_rect.set_width(self.ui.available_width()); // frame_rect.set_height(self.ui.available_height()); - if let Some(basis) = item.basis { - let mut size = content_rect.size(); - size[self.direction] = basis + extra_length; - content_rect = Rect::from_min_size( - content_rect.min, - size.min(self.ui.available_size() - item_state.margin.sum()), - ); - } + // ui.ctx() + // .debug_painter() + // .debug_rect(frame_rect, egui::Color32::GREEN, ""); let mut child_ui = ui.new_child(UiBuilder::new().max_rect(frame_rect).layout(*ui.layout())); @@ -1125,8 +1133,6 @@ impl FlexContainerUi { .. } = self; - let margin_top_left = ui.min_rect().min - frame_rect.min; - // TODO: Which one is correct? let child_rect = content_rect; // let child_rect = content_rect.intersect(ui.max_rect()); @@ -1240,7 +1246,7 @@ impl FlexContainerUi { let intrinsic_size = response.intrinsic_size.map_or( Vec2::new(ui.spacing().interact_size.x, ui.spacing().interact_size.y), - // Add some vertical space to prevent edge cases where text might wrap + // Add some horizontal space to prevent edge cases where text might wrap |s| s + Vec2::X * 1.0, ); @@ -1285,15 +1291,6 @@ fn round_pos2(p: Pos2) -> Pos2 { Pos2::new(round(p.x), round(p.y)) } -fn round_margin(margin: Margin) -> Margin { - Margin { - top: round(margin.top), - left: round(margin.left), - bottom: round(margin.bottom), - right: round(margin.right), - } -} - fn round_rect(rect: Rect) -> Rect { Rect { min: round_pos2(rect.min), diff --git a/crates/egui_flex/tests/flex_tests.rs b/crates/egui_flex/tests/flex_tests.rs index af05977..6d2dcf2 100644 --- a/crates/egui_flex/tests/flex_tests.rs +++ b/crates/egui_flex/tests/flex_tests.rs @@ -388,10 +388,14 @@ fn truncate() { Flex::vertical().w_full().h_full().show(ui, |flex| { let frame = Frame::group(flex.ui().style()); - flex.add_flex(item(), Flex::horizontal(), |flex| { - flex.add(item().shrink(), Button::new(text).wrap()); - flex.add(item(), Button::new("World!").wrap()); - }); + flex.add_flex( + item().frame(Frame::group(flex.ui().style())), + Flex::horizontal(), + |flex| { + flex.add(item().shrink(), Button::new(text).wrap()); + flex.add(item(), Button::new("World!").wrap()); + }, + ); }); });