SidePanel frame leaks into BottomPanel

[abey79]

Consider this code:

#![allow(rustdoc::missing_crate_level_docs)] // it's an example

use eframe::egui;

fn main() -> Result<(), eframe::Error> {
    env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([320.0, 240.0]),
        ..Default::default()
    };
    eframe::run_native("My egui App", options, Box::new(|cc| Ok(Box::new(MyApp))))
}

struct MyApp;

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            egui::TopBottomPanel::bottom("bottom")
                .resizable(true)
                .show_inside(ui, |ui| {
                    egui::ScrollArea::vertical().show(ui, |ui| {
                        for _ in 0..20 {
                            ui.label("bottom panel");
                        }
                    })
                });

            // fix attempt (1) — doesn't work
            //ui.set_clip_rect(ui.max_rect());

            egui::SidePanel::left("left panel")
                .resizable(true)
                .frame(egui::Frame {
                    fill: egui::Color32::RED,
                    ..Default::default()
                })
                .show_inside(ui, |ui| {
                    // fix attempt (2) - only clips content, not the fill
                    //ui.set_clip_rect(ui.max_rect());

                    for _ in 0..20 {
                        ui.label("left panel");
                    }
                });
        });
    }
}

The left panel badly bleed into the bottom panel:

Fix attempt (1) consist of setting a clip rect before the panel code, and doesn't appear to make any change.

Fix attempt (2) does clip the left panel's content correctly, but not it's fill:

This is the root cause of rerun-io/rerun#6227

[abey79]

Possible work around: disable all drawing by the SidePanel and emulate it from the closure:

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            egui::TopBottomPanel::bottom("bottom")
                .resizable(true)
                .show_animated_inside(ui, true, |ui| {
                    egui::ScrollArea::vertical().show(ui, |ui| {
                        for _ in 0..20 {
                            ui.label("bottom panel");
                        }
                    })
                });

            egui::SidePanel::left("left panel")
                .resizable(true)
                .frame(egui::Frame::default())
                .show_separator_line(false)
                .show_animated_inside(ui, true, |ui| {
                    ui.painter()
                        .rect_filled(ui.max_rect(), 0.0, egui::Color32::RED);
                    ui.painter().vline(
                        ui.max_rect().right(),
                        ui.max_rect().y_range(),
                        ui.style().visuals.widgets.noninteractive.bg_stroke,
                    );
                    ui.set_clip_rect(ui.max_rect());

                    for _ in 0..20 {
                        ui.label("left panel");
                    }
                });
        });
    }
}

Note:

• for a better effect, the outer CentralPanel must have zero inner margin
• this work around is imperfect: the on-hover separator line still overlaps the bottom panel

[abey79]

An obvious workaround is to wrap the entire content of the SidePanel in a ScrollArea. However, this is not convenient in every case, for example when the panel content is already made of multiple, independent scroll areas (e.g. rerun's left panel).

[s-nie]

May be related to #4349

[emilk]

I think we need two things to solve this:

• Add a clip-rect for panels, so that if they overflow, it is invisible
• Respect the clip-rect in the interaction code, so you cannot hover/click invisible stuff (fixed in Fix buggy interaction with widgets outside of clip rect #4675)