recursive widget

[BctfN0HUK7Yg]

I'm trying to make widget to show filesystem directory structure. So I have a widget that would consits same child widgets. I made it. But I cant understand how to interact with one. As you can see on the picture, I hovered one element but all parents interact too.

Is it possible to substract some rect from interaction rect or stop propagintaion of response?

[BctfN0HUK7Yg]

ok, I found it. I just check, if children response.hovered is false, then react to response in widget. But with click I still have problem

[emilk]

Make sure the widgets actually get unique Id:s. egui does this automagically for most things, but I don't know your code.

[yasn0st]

Make sure the widgets actually get unique Id:s. egui does this automagically for most things, but I don't know your code.

What happend with response.hovered when I clicked? Why I lose hovered state of widget?

[BctfN0HUK7Yg]

use eframe::{
egui::{self},
epi,
};

pub struct TemplateApp {
state: [bool; 3],
}

impl Default for TemplateApp {
fn default() -> Self {
Self {
// Example stuff:
state: [false, false, false],
}
}
}

impl epi::App for TemplateApp {
fn name(&self) -> &str {
"eframe template"
}

fn update(&mut self, ctx: &egui::CtxRef, _frame: &mut epi::Frame<'_>) {
    let Self { state } = self;

    egui::CentralPanel::default().show(ctx, |ui| {
        ui.add(block(2, state));
    });
}

}

fn block_ui(ui: &mut egui::Ui, depth: u32, state: &mut [bool; 3]) -> egui::Response {
let mut child_hovered = false;
let mut child_clicked = false;

let (rect, mut response) = ui.allocate_exact_size(ui.available_size(), egui::Sense::click());

if state[depth as usize] {
    ui.painter().rect(
        rect,
        5.0,
        egui::Color32::DARK_RED,
        egui::Stroke::new(1.0, egui::Color32::BLUE),
    );
} else {
    ui.painter().rect(
        rect,
        5.0,
        egui::Color32::GRAY,
        egui::Stroke::new(1.0, egui::Color32::BLUE),
    );

}
let s = format!("{:#?}",response);
ui.painter().text(
    egui::pos2(rect.min.x + 10.0, rect.min.y + 10.0),
    egui::Align2::LEFT_TOP,
    s,
    egui::TextStyle::Body,
    egui::Color32::WHITE,
);

if depth > 0 {
    let child_response = ui.put(
        rect.shrink2(egui::vec2(300.0, 50.0)),
        block(depth - 1, state),
    );
    if child_response.hovered() {
        child_hovered = true
        
    }
    if child_response.clicked() {
        child_clicked = true
    }

}

if response.hovered() && !child_hovered {
    ui.painter().rect(
        rect,
        5.0,
        egui::Color32::TRANSPARENT,
        egui::Stroke::new(4.0, egui::Color32::GOLD),
    );
}

if response.clicked() && !child_hovered {
    state[depth as usize] = !state[depth as usize]
}

response

}

pub fn block(depth: u32, state: &mut [bool; 3]) -> impl egui::Widget + '_ {
move |ui: &mut egui::Ui| block_ui(ui, depth, state)
}

[BctfN0HUK7Yg]

this is my example code. I want to catch click only when children isn't clicked. With hovering it works fine

[BctfN0HUK7Yg]

ok, I solve it.

if depth > 0 {
let child_rect = rect.shrink2(egui::vec2(200.0, 50.0));

    let child_response = ui.put(child_rect, block(depth - 1, state));

    if child_response.hovered() || child_response.changed() {
        child_hovered = true;
    }
}

if child_hovered {
    response = ui.allocate_rect(egui::Rect::NOTHING, egui::Sense::click_and_drag());
    response.mark_changed();
} else {
    response = ui.allocate_rect(rect, egui::Sense::click_and_drag());
}

May be it isn't best way, but it works