How do I detect clicks on the background of a layout with buttons and labels inside?

[CanisLupus]

Hi! I'm struggling to create an area with buttons/labels inside, whose background I can also click (to do something custom).

I know about Sense but it can't be added to a layout, a frame, or a scope. I've tried an Area with disabled drag, but it doesn't expand to the size of its contents. I've tried detecting clicks on rectangular area myself but it will catch all the clicks, including to buttons in the area.

Do you know how I can achieve this? Thanks!

[CanisLupus]

I accidentally stumbled upon interact_bg just now 😅

You can call it with a Sense inside the widget you are drawing, and the background will detect that Sense:

ui.vertical(|ui| {
    // draw some buttons, labels, etc

    if ui.interact_bg(egui::Sense::click()).clicked() {
        // click-related code
    }
});

Keep in mind that interact_bg works with the ID of the parent element you are drawing, so if you have multiple ones they will each require a custom ID, which you can give them with push_id.

[hydra]

apparently this is now deprecated, an example showing how to detect clicks on the background of a frame using the non-deprecated alternative would be nice. Here's the PR that deprecates it: #5054

[lucasmerlin]

There is an example called interactive_container that showcases it

[hydra]

yes, I found that in PR #5054 and based my approach on it. thanks!

[hydra]

I also note that the deprecation message on interact_bg was not helpful, since it doesn't mention ui.scope_builder.

To find out what to do I had to trawl the codebase looking for usages of Ui::sense and stumbled on the code in the PR.

I'm also not sure what 'Ui::response' is referring to, since I couldn't find a method on Ui called response.

Perhaps you could do another PR to clarify the deprecation message?

[lucasmerlin]

There definietly is a Ui::response 🤔: https://docs.rs/egui/latest/egui/struct.Ui.html#method.response

[hydra]

just following up, this example shows how to detect clicks on en egui::Sides.

let response = ui.scope_builder(
    UiBuilder::new()
        .sense(Sense::click()),
    |ui| {
        egui::Frame::NONE
            .inner_margin(Margin::symmetric(4, 0))
            .show(ui, |ui| {
                egui::Sides::new()
                    .height(ui.available_height())
                    .show(
                        ui,
                        |ui| {
                            Label::new(RichText::new("LEFT")
                                .monospace().color(Color32::RED)).selectable(false).ui(ui);
                        },
                        |ui| {
                            Label::new(RichText::new("RIGHT")
                                .monospace().color(Color32::GREEN)).selectable(false).ui(ui);
                        }
                    );
            });
    }).response;

if response.clicked() {
    debug!("clicked");
}

hope this helps someone, it took me about 30 attempts yesterday to make this work. I found accomplishing this extremely non-intuitive.

[TigranKirakosov]

@hydra thanks a lot! I was on a verge of loosing my mind while attempting to achieve this thing.