Implement mouse events (e.g. hover, clicked) methods on Rect

[kdheepak]

Problem

In egui, when creating a rect, it is possible to find out if the mouse is clicked or hovered over that spot:

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

    if response.clicked() {
        *on = !*on;
    }

In Ratatui, we typically only know the Rect area for a widget during render (as is in most immediate mode rendering frameworks). But currently propagating mouse events to the render method of widgets is quite manual and tedious.

I would like for it to be easier to "click" to focus a text field, or "click" to activate a button or "hover" to change the state of a widget.

Solution

It would be great if in the render methods, if we can check for the mouse state by passing a context to a method on a Rect, e.g.:

let rects = layout.split(area)
for rect in rects {
    if rect.clicked(&ctx) {
        clicked_button.render(rect, buf)
    } else {
        default_button.render(rect, buf)
    }
}

Context is discussed in #1044

I think this can be implemented without context as well, and I thought maybe it should be a separate issue. It seems like we would need key events and mouse events to become part of Ratatui core for this though.

[kdheepak]

Perhaps focus should also be implemented on Rect?

[EdJoPaTo]

I don’t think this should be part of Rect. Rect is purely mathematical.

another think taking a rect, maybe.

also not sure how your clicked method should work as the event still has to come from somewhere to be processed.

[kdheepak]

I don’t think this should be part of Rect.

Fair, but I think they should be associated with the rect in some way. Maybe ctx.clicked(rect)? This would require Ratatui to know about events though, and bring it closer to a framework than a library.

I will convert this issue to a discussion since it requires more things to be discussed first.

[joshka]

Rect should have a contains(x,y) or contains(Into<Position>) method. I don't think it should have anything regarding focus/hover/click.

If you're rethinking the render calls more generally, it might be worth splitting render into multiple steps, the relevant one here being layout(), which should work out the relevant rects to use (and perhaps store them in some context variable).

You might also think more about push rather than pull methods on widgets - e.g.

impl Click for Button {
  fn click(position: Position, context: Context) {
    ...
  }
}

This lets the widget work out what to do with the click (hit test for specific region, call some external method, ...).

egui's approach to this doesn't seem all that relevant as the interactivity is defined declaratively (methods to define ui, rather than widgets)