Skip to content

Commit

Permalink
Fix flex basis growing weirdly
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasmerlin
lucasmerlin committed Nov 8, 2024
1 parent 60e076a commit 93bd85d
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 170 deletions.
290 changes: 145 additions & 145 deletions crates/egui_flex/examples/flex_example.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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| {
Expand Down
39 changes: 18 additions & 21 deletions crates/egui_flex/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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()));
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -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,
);

Expand Down Expand Up @@ -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),
Expand Down
Loading

0 comments on commit 93bd85d

Please sign in to comment.