emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
21.88k stars 1.58k forks source link

`ui.dbg_rect()` and `ui.dbg_rect_text()` draw rectangles for debugging. #5039

Closed rustbasic closed 4 weeks ago

rustbasic commented 1 month ago

ui.dbg_rect() and ui.dbg_rect_text() draw rectangles for debugging.

ui.dbg_rect() and ui.dbg_rect_text() that can be used as easily as dbg!()

I tried it and found it very convenient.

ui.dbg_rect(rect);
ui.dbg_rect_text(rect, "Here it is.");
ui.dbg_rect_text(Rect::ZERO, format!("Value is : {value}"));

Example screen : 20240831-example

Example :

use eframe::egui::*;

fn main() -> eframe::Result {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([800.0, 600.0]),
        ..Default::default()
    };
    eframe::run_native(
        "My egui App",
        options,
        Box::new(|_cc| Ok(Box::<MyApp>::default())),
    )
}

#[derive(Default)]
struct MyApp {
    temp_value: usize,
    _text: String,
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.separator();

            ui.horizontal(|ui| {
                ui.label("TEST");
                ui.label("TEST");
                ui.label("TEST");
            });

            ui.separator();

            ui.horizontal(|ui| {
                let response = ui.label("TEST");
                // Dbg rect
                ui.dbg_rect(response.rect);

                ui.label("TEST");
                ui.label("TEST");

                let rect = ui.available_rect_before_wrap();
                // Dbg rect text
                ui.dbg_rect_text(rect, "Here it is.");

                let i_time = ui.input(|i| i.time);
                // Dbg rect text
                ui.dbg_rect_text(Rect::ZERO, format!("What i_time : {i_time}"));
            });

            ui.separator();

            let inner = ui.horizontal(|ui| {
                ui.label("TEST");
                if ui.button("⟲  25").clicked() {
                    self.temp_value = 25;
                }

                ui.label("TEST");
                if ui.button("⟲  50").clicked() {
                    self.temp_value = 50;
                }

                ui.label("TEST");
                let response = ui.button("⟲ 100");
                if response.clicked() {
                    self.temp_value = 190;
                }
            });

            // Dbg rect text
            ui.dbg_rect_text(inner.response.rect, "Horizontal");

            ui.separator();

            ui.horizontal(|ui| {
                ui.label("TEST");
                ui.add(DragValue::new(&mut self.temp_value));
                if ui.button("⟲  25").clicked() {
                    self.temp_value = 25;
                }

                ui.label("TEST");
                ui.add(DragValue::new(&mut self.temp_value));
                let response = ui.button("⟲  50");
                // Dbg rect
                ui.dbg_rect(response.rect);
                if response.clicked() {
                    self.temp_value = 50;
                }

                ui.label("TEST");
                ui.add(DragValue::new(&mut self.temp_value));
                if ui.button("⟲ 100").clicked() {
                    self.temp_value = 100;
                }
            });

            let response = ui.separator();
            // Dbg rect
            ui.dbg_rect(response.rect);

            ctx.settings_ui(ui);
        });
    }
}
emilk commented 4 weeks ago

That's what the Painter API is for; user can use that directly