migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-06-28 07:23:13 -04:00
Code Activity

Convert all SidePanel with Panel

Browse Source 
following those steps:
1. Rename `egui::SidePanel` with `egui::Panel`.
2. Rename `width` with `size` in all chained methods.
    - `default_width()` to `default_size()`
    - `min_width()` to `min_size()`
    - `max_width()` to `max_size()`
    - `width_range()` to `size_range()`
    - `exact_width()` to `exact_size()`

if using `Panel::new()`, replace
- `Side::Left` with `Side::Vertical(VerticalSide::Left)`
- `Side::Right` with `Side::Vertical(VerticalSide::Right)`

NOTE: Non-working commit
This commit is contained in:
Bruno Paré-Simard
2025-01-30 14:10:18 -05:00
parent 3e8a51eb3a
commit ae42de6c9c
14 changed files with 26 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
crates/eframe/src/epi.rs
View File

@@ -137,7 +137,7 @@ impl CreationContext<'_> {
pub trait App {
/// Called each time the UI needs repainting, which may be many times per second.
///
/// Put your widgets into a [`egui::SidePanel`], [`egui::TopBottomPanel`], [`egui::CentralPanel`], [`egui::Window`] or [`egui::Area`].
/// Put your widgets into a [`egui::Panel`], [`egui::TopBottomPanel`], [`egui::CentralPanel`], [`egui::Window`] or [`egui::Area`].
///
/// The [`egui::Context`] can be cloned and saved if you like.
///

4
crates/egui/src/containers/mod.rs
View File

@@ -1,4 +1,4 @@
//! Containers are pieces of the UI which wraps other pieces of UI. Examples: [`Window`], [`ScrollArea`], [`Resize`], [`SidePanel`], etc.
//! Containers are pieces of the UI which wraps other pieces of UI. Examples: [`Window`], [`ScrollArea`], [`Resize`], [`OldSidePanel`], etc.
//!
//! For instance, a [`Frame`] adds a frame and background to some contained UI.
@@ -21,7 +21,7 @@ pub use {
combo_box::*,
frame::Frame,
modal::{Modal, ModalResponse},
panel::{CentralPanel, SidePanel, TopBottomPanel},
panel::{CentralPanel, Panel, TopBottomPanel},
popup::*,
resize::Resize,
scene::Scene,

452
crates/egui/src/containers/panel.rs
View File

@@ -896,456 +896,6 @@ impl Panel {
// ----------------------------------------------------------------------------
/// A panel that covers the entire left or right side of a [`Ui`] or screen.
///
/// The order in which you add panels matter!
/// The first panel you add will always be the outermost, and the last you add will always be the innermost.
///
/// ⚠ Always add any [`CentralPanel`] last.
///
/// See the [module level docs](crate::containers::panel) for more details.
///
/// ```
/// # egui::__run_test_ctx(|ctx| {
/// egui::SidePanel::left("my_left_panel").show(ctx, |ui| {
/// ui.label("Hello World!");
/// });
/// # });
/// ```
///
/// See also [`TopBottomPanel`].
#[must_use = "You should call .show()"]
pub struct SidePanel {
side: OldSide,
id: Id,
frame: Option<Frame>,
resizable: bool,
show_separator_line: bool,
default_width: f32,
width_range: Rangef,
}
impl SidePanel {
/// The id should be globally unique, e.g. `Id::new("my_left_panel")`.
pub fn left(id: impl Into<Id>) -> Self {
Self::new(OldSide::Left, id)
}
/// The id should be globally unique, e.g. `Id::new("my_right_panel")`.
pub fn right(id: impl Into<Id>) -> Self {
Self::new(OldSide::Right, id)
}
/// The id should be globally unique, e.g. `Id::new("my_panel")`.
pub fn new(side: OldSide, id: impl Into<Id>) -> Self {
Self {
side,
id: id.into(),
frame: None,
resizable: true,
show_separator_line: true,
default_width: 200.0,
width_range: Rangef::new(96.0, f32::INFINITY),
}
}
/// Can panel be resized by dragging the edge of it?
///
/// Default is `true`.
///
/// If you want your panel to be resizable you also need a widget in it that
/// takes up more space as you resize it, such as:
/// * Wrapping text ([`Ui::horizontal_wrapped`]).
/// * A [`crate::ScrollArea`].
/// * A [`crate::Separator`].
/// * A [`crate::TextEdit`].
/// * …
#[inline]
pub fn resizable(mut self, resizable: bool) -> Self {
self.resizable = resizable;
self
}
/// Show a separator line, even when not interacting with it?
///
/// Default: `true`.
#[inline]
pub fn show_separator_line(mut self, show_separator_line: bool) -> Self {
self.show_separator_line = show_separator_line;
self
}
/// The initial wrapping width of the [`SidePanel`], including margins.
#[inline]
pub fn default_width(mut self, default_width: f32) -> Self {
self.default_width = default_width;
self.width_range = Rangef::new(
self.width_range.min.at_most(default_width),
self.width_range.max.at_least(default_width),
);
self
}
/// Minimum width of the panel, including margins.
#[inline]
pub fn min_width(mut self, min_width: f32) -> Self {
self.width_range = Rangef::new(min_width, self.width_range.max.at_least(min_width));
self
}
/// Maximum width of the panel, including margins.
#[inline]
pub fn max_width(mut self, max_width: f32) -> Self {
self.width_range = Rangef::new(self.width_range.min.at_most(max_width), max_width);
self
}
/// The allowable width range for the panel, including margins.
#[inline]
pub fn width_range(mut self, width_range: impl Into<Rangef>) -> Self {
let width_range = width_range.into();
self.default_width = clamp_to_range(self.default_width, width_range);
self.width_range = width_range;
self
}
/// Enforce this exact width, including margins.
#[inline]
pub fn exact_width(mut self, width: f32) -> Self {
self.default_width = width;
self.width_range = Rangef::point(width);
self
}
/// Change the background color, margins, etc.
#[inline]
pub fn frame(mut self, frame: Frame) -> Self {
self.frame = Some(frame);
self
}
}
impl SidePanel {
/// Show the panel inside a [`Ui`].
pub fn show_inside<R>(
self,
ui: &mut Ui,
add_contents: impl FnOnce(&mut Ui) -> R,
) -> InnerResponse<R> {
self.show_inside_dyn(ui, Box::new(add_contents))
}
/// Show the panel inside a [`Ui`].
fn show_inside_dyn<'c, R>(
self,
ui: &mut Ui,
add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
) -> InnerResponse<R> {
let Self {
side,
id,
frame,
resizable,
show_separator_line,
default_width,
width_range,
} = self;
let available_rect = ui.available_rect_before_wrap();
let mut panel_rect = available_rect;
let mut width = default_width;
{
if let Some(state) = PanelState::load(ui.ctx(), id) {
width = state.rect.width();
}
width = clamp_to_range(width, width_range).at_most(available_rect.width());
side.set_rect_width(&mut panel_rect, width);
ui.ctx().check_for_id_clash(id, panel_rect, "SidePanel");
}
let resize_id = id.with("__resize");
let mut resize_hover = false;
let mut is_resizing = false;
if resizable {
// First we read the resize interaction results, to avoid frame latency in the resize:
if let Some(resize_response) = ui.ctx().read_response(resize_id) {
resize_hover = resize_response.hovered();
is_resizing = resize_response.dragged();
if is_resizing {
if let Some(pointer) = resize_response.interact_pointer_pos() {
width = (pointer.x - side.side_x(panel_rect)).abs();
width = clamp_to_range(width, width_range).at_most(available_rect.width());
side.set_rect_width(&mut panel_rect, width);
}
}
}
}
panel_rect = panel_rect.round_ui();
let mut panel_ui = ui.new_child(
UiBuilder::new()
.id_salt(id)
.ui_stack_info(UiStackInfo::new(match side {
OldSide::Left => UiKind::LeftPanel,
OldSide::Right => UiKind::RightPanel,
}))
.max_rect(panel_rect)
.layout(Layout::top_down(Align::Min)),
);
panel_ui.expand_to_include_rect(panel_rect);
panel_ui.set_clip_rect(panel_rect); // If we overflow, don't do so visibly (#4475)
let frame = frame.unwrap_or_else(|| Frame::side_top_panel(ui.style()));
let inner_response = frame.show(&mut panel_ui, |ui| {
ui.set_min_height(ui.max_rect().height()); // Make sure the frame fills the full height
ui.set_min_width((width_range.min - frame.inner_margin.sum().x).at_least(0.0));
add_contents(ui)
});
let rect = inner_response.response.rect;
{
let mut cursor = ui.cursor();
match side {
OldSide::Left => {
cursor.min.x = rect.max.x;
}
OldSide::Right => {
cursor.max.x = rect.min.x;
}
}
ui.set_cursor(cursor);
}
ui.expand_to_include_rect(rect);
if resizable {
// Now we do the actual resize interaction, on top of all the contents.
// Otherwise its input could be eaten by the contents, e.g. a
// `ScrollArea` on either side of the panel boundary.
let resize_x = side.opposite().side_x(panel_rect);
let resize_rect = Rect::from_x_y_ranges(resize_x..=resize_x, panel_rect.y_range())
.expand2(vec2(ui.style().interaction.resize_grab_radius_side, 0.0));
let resize_response = ui.interact(resize_rect, resize_id, Sense::drag());
resize_hover = resize_response.hovered();
is_resizing = resize_response.dragged();
}
if resize_hover || is_resizing {
let cursor_icon = if width <= width_range.min {
match self.side {
OldSide::Left => CursorIcon::ResizeEast,
OldSide::Right => CursorIcon::ResizeWest,
}
} else if width < width_range.max {
CursorIcon::ResizeHorizontal
} else {
match self.side {
OldSide::Left => CursorIcon::ResizeWest,
OldSide::Right => CursorIcon::ResizeEast,
}
};
ui.ctx().set_cursor_icon(cursor_icon);
}
PanelState { rect }.store(ui.ctx(), id);
{
let stroke = if is_resizing {
ui.style().visuals.widgets.active.fg_stroke // highly visible
} else if resize_hover {
ui.style().visuals.widgets.hovered.fg_stroke // highly visible
} else if show_separator_line {
// TODO(emilk): distinguish resizable from non-resizable
ui.style().visuals.widgets.noninteractive.bg_stroke // dim
} else {
Stroke::NONE
};
// TODO(emilk): draw line on top of all panels in this ui when https://github.com/emilk/egui/issues/1516 is done
let resize_x = side.opposite().side_x(rect);
// Make sure the line is on the inside of the panel:
let resize_x = resize_x + 0.5 * side.sign() * stroke.width;
ui.painter().vline(resize_x, panel_rect.y_range(), stroke);
}
inner_response
}
/// Show the panel at the top level.
pub fn show<R>(
self,
ctx: &Context,
add_contents: impl FnOnce(&mut Ui) -> R,
) -> InnerResponse<R> {
self.show_dyn(ctx, Box::new(add_contents))
}
/// Show the panel at the top level.
fn show_dyn<'c, R>(
self,
ctx: &Context,
add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
) -> InnerResponse<R> {
let side = self.side;
let available_rect = ctx.available_rect();
let mut panel_ui = Ui::new(
ctx.clone(),
self.id,
UiBuilder::new()
.layer_id(LayerId::background())
.max_rect(available_rect),
);
panel_ui.set_clip_rect(ctx.screen_rect());
let inner_response = self.show_inside_dyn(&mut panel_ui, add_contents);
let rect = inner_response.response.rect;
match side {
OldSide::Left => ctx.pass_state_mut(|state| {
state.allocate_left_panel(Rect::from_min_max(available_rect.min, rect.max));
}),
OldSide::Right => ctx.pass_state_mut(|state| {
state.allocate_right_panel(Rect::from_min_max(rect.min, available_rect.max));
}),
}
inner_response
}
/// Show the panel if `is_expanded` is `true`,
/// otherwise don't show it, but with a nice animation between collapsed and expanded.
pub fn show_animated<R>(
self,
ctx: &Context,
is_expanded: bool,
add_contents: impl FnOnce(&mut Ui) -> R,
) -> Option<InnerResponse<R>> {
let how_expanded = animate_expansion(ctx, self.id.with("animation"), is_expanded);
if 0.0 == how_expanded {
None
} else if how_expanded < 1.0 {
// Show a fake panel in this in-between animation state:
// TODO(emilk): move the panel out-of-screen instead of changing its width.
// Then we can actually paint it as it animates.
let expanded_width = PanelState::load(ctx, self.id)
.map_or(self.default_width, |state| state.rect.width());
let fake_width = how_expanded * expanded_width;
Self {
id: self.id.with("animating_panel"),
..self
}
.resizable(false)
.exact_width(fake_width)
.show(ctx, |_ui| {});
None
} else {
// Show the real panel:
Some(self.show(ctx, add_contents))
}
}
/// Show the panel if `is_expanded` is `true`,
/// otherwise don't show it, but with a nice animation between collapsed and expanded.
pub fn show_animated_inside<R>(
self,
ui: &mut Ui,
is_expanded: bool,
add_contents: impl FnOnce(&mut Ui) -> R,
) -> Option<InnerResponse<R>> {
let how_expanded = animate_expansion(ui.ctx(), self.id.with("animation"), is_expanded);
if 0.0 == how_expanded {
None
} else if how_expanded < 1.0 {
// Show a fake panel in this in-between animation state:
// TODO(emilk): move the panel out-of-screen instead of changing its width.
// Then we can actually paint it as it animates.
let expanded_width = PanelState::load(ui.ctx(), self.id)
.map_or(self.default_width, |state| state.rect.width());
let fake_width = how_expanded * expanded_width;
Self {
id: self.id.with("animating_panel"),
..self
}
.resizable(false)
.exact_width(fake_width)
.show_inside(ui, |_ui| {});
None
} else {
// Show the real panel:
Some(self.show_inside(ui, add_contents))
}
}
/// Show either a collapsed or a expanded panel, with a nice animation between.
pub fn show_animated_between<R>(
ctx: &Context,
is_expanded: bool,
collapsed_panel: Self,
expanded_panel: Self,
add_contents: impl FnOnce(&mut Ui, f32) -> R,
) -> Option<InnerResponse<R>> {
let how_expanded = animate_expansion(ctx, expanded_panel.id.with("animation"), is_expanded);
if 0.0 == how_expanded {
Some(collapsed_panel.show(ctx, |ui| add_contents(ui, how_expanded)))
} else if how_expanded < 1.0 {
// Show animation:
let collapsed_width = PanelState::load(ctx, collapsed_panel.id)
.map_or(collapsed_panel.default_width, |state| state.rect.width());
let expanded_width = PanelState::load(ctx, expanded_panel.id)
.map_or(expanded_panel.default_width, |state| state.rect.width());
let fake_width = lerp(collapsed_width..=expanded_width, how_expanded);
Self {
id: expanded_panel.id.with("animating_panel"),
..expanded_panel
}
.resizable(false)
.exact_width(fake_width)
.show(ctx, |ui| add_contents(ui, how_expanded));
None
} else {
Some(expanded_panel.show(ctx, |ui| add_contents(ui, how_expanded)))
}
}
/// Show either a collapsed or a expanded panel, with a nice animation between.
pub fn show_animated_between_inside<R>(
ui: &mut Ui,
is_expanded: bool,
collapsed_panel: Self,
expanded_panel: Self,
add_contents: impl FnOnce(&mut Ui, f32) -> R,
) -> InnerResponse<R> {
let how_expanded =
animate_expansion(ui.ctx(), expanded_panel.id.with("animation"), is_expanded);
if 0.0 == how_expanded {
collapsed_panel.show_inside(ui, |ui| add_contents(ui, how_expanded))
} else if how_expanded < 1.0 {
// Show animation:
let collapsed_width = PanelState::load(ui.ctx(), collapsed_panel.id)
.map_or(collapsed_panel.default_width, |state| state.rect.width());
let expanded_width = PanelState::load(ui.ctx(), expanded_panel.id)
.map_or(expanded_panel.default_width, |state| state.rect.width());
let fake_width = lerp(collapsed_width..=expanded_width, how_expanded);
Self {
id: expanded_panel.id.with("animating_panel"),
..expanded_panel
}
.resizable(false)
.exact_width(fake_width)
.show_inside(ui, |ui| add_contents(ui, how_expanded))
} else {
expanded_panel.show_inside(ui, |ui| add_contents(ui, how_expanded))
}
}
}
// ----------------------------------------------------------------------------
/// A panel that covers the entire top or bottom of a [`Ui`] or screen.
///
/// The order in which you add panels matter!
@@ -1363,7 +913,7 @@ impl SidePanel {
/// # });
/// ```
///
/// See also [`SidePanel`].
/// See also [`OldSidePanel`].
#[must_use = "You should call .show()"]
pub struct TopBottomPanel {
side: OldTopBottomSide,

2
crates/egui/src/context.rs
View File

@@ -781,7 +781,7 @@ impl Context {
/// and only on the rare occasion that [`Context::request_discard`] is called.
/// Usually, it `run_ui` will only be called once.
///
/// Put your widgets into a [`crate::SidePanel`], [`crate::TopBottomPanel`], [`crate::CentralPanel`], [`crate::Window`] or [`crate::Area`].
/// Put your widgets into a [`crate::Panel`], [`crate::TopBottomPanel`], [`crate::CentralPanel`], [`crate::Window`] or [`crate::Area`].
///
/// Instead of calling `run`, you can alternatively use [`Self::begin_pass`] and [`Context::end_pass`].
///

6
crates/egui/src/lib.rs
View File

@@ -9,7 +9,7 @@
//! which uses [`eframe`](https://docs.rs/eframe).
//!
//! To create a GUI using egui you first need a [`Context`] (by convention referred to by `ctx`).
//! Then you add a [`Window`] or a [`SidePanel`] to get a [`Ui`], which is what you'll be using to add all the buttons and labels that you need.
//! Then you add a [`Window`] or a [`Panel`] to get a [`Ui`], which is what you'll be using to add all the buttons and labels that you need.
//!
//!
//! ## Feature flags
@@ -45,7 +45,7 @@
//!
//! ### Getting a [`Ui`]
//!
//! Use one of [`SidePanel`], [`TopBottomPanel`], [`CentralPanel`], [`Window`] or [`Area`] to
//! Use one of [`Panel`], [`TopBottomPanel`], [`CentralPanel`], [`Window`] or [`Area`] to
//! get access to an [`Ui`] where you can put widgets. For example:
//!
//! ```
@@ -324,7 +324,7 @@
//! when you release the panel/window shrinks again.
//! This is an artifact of immediate mode, and here are some alternatives on how to avoid it:
//!
//! 1. Turn off resizing with [`Window::resizable`], [`SidePanel::resizable`], [`TopBottomPanel::resizable`].
//! 1. Turn off resizing with [`Window::resizable`], [`Panel::resizable`], [`TopBottomPanel::resizable`].
//! 2. Wrap your panel contents in a [`ScrollArea`], or use [`Window::vscroll`] and [`Window::hscroll`].
//! 3. Use a justified layout:
//!

2
crates/egui/src/ui.rs
View File

@@ -120,7 +120,7 @@ impl Ui {
/// Create a new top-level [`Ui`].
///
/// Normally you would not use this directly, but instead use
/// [`crate::SidePanel`], [`crate::TopBottomPanel`], [`crate::CentralPanel`], [`crate::Window`] or [`crate::Area`].
/// [`crate::Panel`], [`crate::TopBottomPanel`], [`crate::CentralPanel`], [`crate::Window`] or [`crate::Area`].
pub fn new(ctx: Context, id: Id, ui_builder: UiBuilder) -> Self {
let UiBuilder {
id_salt,

4
crates/egui/src/ui_stack.rs
View File

@@ -12,10 +12,10 @@ pub enum UiKind {
/// A [`crate::CentralPanel`].
CentralPanel,
/// A left [`crate::SidePanel`].
/// A left [`crate::Panel`].
LeftPanel,
/// A right [`crate::SidePanel`].
/// A right [`crate::Panel`].
RightPanel,
/// A top [`crate::TopBottomPanel`].

2
crates/egui_demo_app/src/apps/image_viewer.rs
View File

@@ -77,7 +77,7 @@ impl eframe::App for ImageViewer {
},
);
egui::SidePanel::new(Side::Vertical(VerticalSide::Left), "controls").show(ctx, |ui| {
egui::Panel::new(Side::Vertical(VerticalSide::Left), "controls").show(ctx, |ui| {
// uv
ui.label("UV");
ui.add(Slider::new(&mut self.image_options.uv.min.x, 0.0..=1.0).text("min x"));

2
crates/egui_demo_app/src/wrap_app.rs
View File

@@ -342,7 +342,7 @@ impl WrapApp {
let mut cmd = Command::Nothing;
egui::SidePanel::left("backend_panel")
egui::Panel::left("backend_panel")
.resizable(false)
.show_animated(ctx, is_open, |ui| {
ui.add_space(4.0);

6
crates/egui_demo_lib/src/demo/demo_app_windows.rs
View File

@@ -252,10 +252,10 @@ impl DemoWindows {
}
fn desktop_ui(&mut self, ctx: &Context) {
egui::SidePanel::right("egui_demo_panel")
egui::Panel::right("egui_demo_panel")
.resizable(false)
.default_width(160.0)
.min_width(160.0)
.default_size(160.0)
.min_size(160.0)
.show(ctx, |ui| {
ui.add_space(4.0);
ui.vertical_centered(|ui| {

12
crates/egui_demo_lib/src/demo/panels.rs
View File

@@ -34,10 +34,10 @@ impl crate::View for Panels {
});
});
egui::SidePanel::left("left_panel")
egui::Panel::left("left_panel")
.resizable(true)
.default_width(150.0)
.width_range(80.0..=200.0)
.default_size(150.0)
.size_range(80.0..=200.0)
.show_inside(ui, |ui| {
ui.vertical_centered(|ui| {
ui.heading("Left Panel");
@@ -47,10 +47,10 @@ impl crate::View for Panels {
});
});
egui::SidePanel::right("right_panel")
egui::Panel::right("right_panel")
.resizable(true)
.default_width(150.0)
.width_range(80.0..=200.0)
.default_size(150.0)
.size_range(80.0..=200.0)
.show_inside(ui, |ui| {
ui.vertical_centered(|ui| {
ui.heading("Right Panel");

2
crates/egui_demo_lib/src/demo/tooltips.rs
View File

@@ -35,7 +35,7 @@ impl crate::View for Tooltips {
ui.add(crate::egui_github_link_file_line!());
});
egui::SidePanel::right("scroll_test").show_inside(ui, |ui| {
egui::Panel::right("scroll_test").show_inside(ui, |ui| {
ui.label(
"The scroll area below has many labels with interactive tooltips. \
The purpose is to test that the tooltips close when you scroll.",

2
crates/egui_glow/examples/pure_glow.rs
View File

@@ -218,7 +218,7 @@ impl winit::application::ApplicationHandler<UserEvent> for GlowApp {
self.egui_glow.as_mut().unwrap().run(
self.gl_window.as_mut().unwrap().window(),
|egui_ctx| {
egui::SidePanel::left("my_side_panel").show(egui_ctx, |ui| {
egui::Panel::left("my_side_panel").show(egui_ctx, |ui| {
ui.heading("Hello World!");
if ui.button("Quit").clicked() {
quit = true;

4
tests/test_ui_stack/src/main.rs
View File

@@ -34,7 +34,7 @@ impl eframe::App for MyApp {
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
ctx.all_styles_mut(|style| style.interaction.tooltip_delay = 0.0);
egui::SidePanel::left("side_panel_left").show(ctx, |ui| {
egui::Panel::left("side_panel_left").show(ctx, |ui| {
ui.heading("Information");
ui.label(
"This is a demo/test environment of the `UiStack` feature. The tables display \
@@ -82,7 +82,7 @@ impl eframe::App for MyApp {
});
});
egui::SidePanel::right("side_panel_right").show(ctx, |ui| {
egui::Panel::right("side_panel_right").show(ctx, |ui| {
egui::ScrollArea::both().auto_shrink(false).show(ui, |ui| {
stack_ui(ui);