How to stop the central panel from overwriting the side panel

[irevoire]

Hello,

I’m new to egui and was trying out some stuff.

I’m trying to create a simple app that draws a maze in a central panel, and then adds a bunch of config options on a side panel.

From what I’ve read here I must put the central panel last:

⚠ Always add any CentralPanel last.

The thing is, when the content of the central panel overlaps on the side panel, it just overwrites all the text.
If I set the central panel first and then draw the side panel, it works.

Thus, I’m wondering:

1. Why should we avoid creating the central panel before the side panel
2. If I should keep them in this order what should I do to avoid the central panel from overwriting the stuff in the side panel?

Screen.Recording.2024-04-23.at.18.22.18.mov

[thmxv]

How is the maze drawn? The yellow walls do not override the side panel, just the background color/background clear do override. I do not have this issue personally and the code to replicate the issue is not provided. So I can only guess, but I will guess there is a bug in the maze drawing code.

[irevoire]

Ah yes sorry, I thought both panel were completely different thing that cannot be overwritten by each other, but if it actually have an impact, here’s the code: https://github.com/irevoire/egui-test/blob/da2ef1d4a3fb9cb6a400050344dc01a846e49f32/src/app.rs

And TLDR:
Here’s my updating function:

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::SidePanel::right("Config").show(ctx, |ui| {
            self.configuration(ui);
        });
        egui::CentralPanel::default().show(ctx, |ui| {
            self.draw_on(ui);
        });
    }

And inside of the central panel > draw_on method, here’s the only usage of the ui I do:

        let (response, painter) =
            ui.allocate_painter(ui.available_size_before_wrap(), Sense::drag());

        ui.set_min_width((window.width() * self.size) as f32);
        ui.set_min_height((window.height() * self.size) as f32);

...

// then, in a loop for every square of the maze:
                painter.rect_filled(
                    rect,
                    Rounding::ZERO,
                    Color32::from_rgba_premultiplied(r, g, b, a), // by default the walls are Color32::WALL, and the path is Color32::TRANSPARENT
                );

Thanks for your answer, let me know if I did anything dumb it’s really my first time using egui!

[thmxv]

I am afraid I am quite inexperienced with the internals too, the bug inside the maze drawing code was just a guess. And thus I am not sure I can help you.

On one side: Putting all the content of the central panel inside a scroll area might fix things.

On the other side: Allocating the painter, and setting the min_width/height after does not look great. Also constructing your own rect instead of using the one you allocated the painter for (and inside the response response.rect) does not look great neither. I do not know the internals and what is best but I have a little experience doing something similar (for which I used the toggle switch demo code as reference). I would:

• Set the minimum size before hand
• Not use allocate_painter() but instead use allocate_exact_size() or maybe allocate_at_least() or allocate_space(). I think allocate_painter() does not respect/modify the layout while the others do. (allocate_at_least() might allocate more space if available and allocate_space() is better if you do not care about interactions)
• Do not construct and use a rect out of thin air

Not sure if this is actually related at all. Je donne juste mon avis a 2 balles.

[thmxv]

So I tried to play around with your code and could not figure a solution but I discovered 2 things:

• This is not only for the maze. Putting a widget native to egui (like a Label), in the central panel, results in the same behavior
• The clip_rect for both the Ui and the Painter are way over-sized compared to the real available space to draw into.

I would say this look like a bug in egui but maybe I am wrong.