New widget interaction logic (#4026)

* Closes #3936
* Closes #3923
* Closes #4058

The interaction code is now done at the start of the frame, using stored
`WidgetRect`s from the previous frame.

The intention is that the new interaction code should be more accurate,
making it easier to hit widgets, and better respecting the rules of
overlapping widgets.

There is a new `style::Interaction::interact_radius` controlling how far
away from a widget the cursor can be and still hit it. This helps big
fat fingers hit small widgets on touch screens.

This PR adds a new `Context::read_response` which lets you read the
`Response` of a `Widget` _before_ you create the widget. This can be
used for styling, or for reading the result of an interaction early (to
prevent frame-delay) for a widget you add late (so it is on top of other
widgets).

# ⚠️ BREAKING CHANGES
`Memory::dragged_id`, `Memory::set_dragged_id` etc have been moved to
`Context`.
The semantics for `Context::dragged_id` is slightly different: a widget
is not considered dragged until egui it is sure this is not a
click-in-progress. For a widget that is only sensitive to drags, that is
right away, but for widgets sensitive to both clicks and drags it is not
until the mouse has moved a certain distance.

# TODO
* [x] Fix panel resizing
* [x] Fix scroll hover weirdness
* [x] Fix Resize widget
* [x] Fix drag-and-drop
* [x] Test all of egui_demo_app
* [x] Change `is_dragging` API
* [x] Consistent naming of start/stop or begin/end drag
* [x] Test `egui_tiles`
* [x] Test Rerun
* [x] Document
* [x] Document breaking changes in PR description
* [x] Test one final time

# Saving for a later PR
* [ ] Fix #4047
* [ ] Specify what the response order for e.g. `ui.horizontal` is

I think both these can be fixed if each `Ui` registers themselves as a
`WidgetRect`, with the possibility to interact with it later, as if the
interaction was under all widgets on top of it.

Author: emilk

crates/egui/src/containers/area.rs

@@ -313,22 +313,21 @@ impl Area {
         let mut move_response = {
             let interact_id = layer_id.id.with("move");
             let sense = if movable {
-                Sense::click_and_drag()
+                Sense::drag()
             } else if interactable {
                 Sense::click() // allow clicks to bring to front
             } else {
                 Sense::hover()
             };
 
-            let move_response = ctx.interact(
-                Rect::EVERYTHING,
-                ctx.style().spacing.item_spacing,
+            let move_response = ctx.create_widget(WidgetRect {
+                id: interact_id,
                 layer_id,
-                interact_id,
-                state.rect(),
+                rect: state.rect(),
+                interact_rect: state.rect(),
                 sense,
                 enabled,
-            );
+            });
 
             if movable && move_response.dragged() {
                 state.pivot_pos += move_response.drag_delta();

crates/egui/src/containers/panel.rs

@@ -238,48 +238,22 @@ impl SidePanel {
             ui.ctx().check_for_id_clash(id, panel_rect, "SidePanel");
         }
 
+        let resize_id = id.with("__resize");
         let mut resize_hover = false;
         let mut is_resizing = false;
         if resizable {
-            let resize_id = id.with("__resize");
-            if let Some(pointer) = ui.ctx().pointer_latest_pos() {
-                let we_are_on_top = ui
-                    .ctx()
-                    .layer_id_at(pointer)
-                    .map_or(true, |top_layer_id| top_layer_id == ui.layer_id());
-                let pointer = if let Some(transform) = ui
-                    .ctx()
-                    .memory(|m| m.layer_transforms.get(&ui.layer_id()).cloned())
-                {
-                    transform.inverse() * pointer
-                } else {
-                    pointer
-                };
-
-                let resize_x = side.opposite().side_x(panel_rect);
-                let mouse_over_resize_line = we_are_on_top
-                    && panel_rect.y_range().contains(pointer.y)
-                    && (resize_x - pointer.x).abs()
-                        <= ui.style().interaction.resize_grab_radius_side;
-
-                if ui.input(|i| i.pointer.any_pressed() && i.pointer.any_down())
-                    && mouse_over_resize_line
-                {
-                    ui.memory_mut(|mem| mem.set_dragged_id(resize_id));
-                }
-                is_resizing = ui.memory(|mem| mem.is_being_dragged(resize_id));
-                if is_resizing {
-                    let width = (pointer.x - side.side_x(panel_rect)).abs();
-                    let width = clamp_to_range(width, width_range).at_most(available_rect.width());
-                    side.set_rect_width(&mut panel_rect, width);
-                }
+            // First we read the resize interaction results, to avoid frame latency in the resize:
+            if let Some(resize_response) = ui.ctx().read_response(resize_id) {
+                resize_hover = resize_response.hovered();
+                is_resizing = resize_response.dragged();
 
-                let dragging_something_else =
-                    ui.input(|i| i.pointer.any_down() || i.pointer.any_pressed());
-                resize_hover = mouse_over_resize_line && !dragging_something_else;
-
-                if resize_hover || is_resizing {
-                    ui.ctx().set_cursor_icon(CursorIcon::ResizeHorizontal);
+                if is_resizing {
+                    if let Some(pointer) = resize_response.interact_pointer_pos() {
+                        let width = (pointer.x - side.side_x(panel_rect)).abs();
+                        let width =
+                            clamp_to_range(width, width_range).at_most(available_rect.width());
+                        side.set_rect_width(&mut panel_rect, width);
+                    }
                 }
             }
         }
@@ -309,6 +283,22 @@ impl SidePanel {
         }
         ui.expand_to_include_rect(rect);
 
+        if resizable {
+            // Now we do the actual resize interaction, on top of all the contents.
+            // Otherwise its input could be eaten by the contents, e.g. a
+            // `ScrollArea` on either side of the panel boundary.
+            let resize_x = side.opposite().side_x(panel_rect);
+            let resize_rect = Rect::from_x_y_ranges(resize_x..=resize_x, panel_rect.y_range())
+                .expand2(vec2(ui.style().interaction.resize_grab_radius_side, 0.0));
+            let resize_response = ui.interact(resize_rect, resize_id, Sense::drag());
+            resize_hover = resize_response.hovered();
+            is_resizing = resize_response.dragged();
+        }
+
+        if resize_hover || is_resizing {
+            ui.ctx().set_cursor_icon(CursorIcon::ResizeHorizontal);
+        }
+
         PanelState { rect }.store(ui.ctx(), id);
 
         {
@@ -706,50 +696,22 @@ impl TopBottomPanel {
                 .check_for_id_clash(id, panel_rect, "TopBottomPanel");
         }
 
+        let resize_id = id.with("__resize");
         let mut resize_hover = false;
         let mut is_resizing = false;
         if resizable {
-            let resize_id = id.with("__resize");
-            let latest_pos = ui.input(|i| i.pointer.latest_pos());
-            if let Some(pointer) = latest_pos {
-                let we_are_on_top = ui
-                    .ctx()
-                    .layer_id_at(pointer)
-                    .map_or(true, |top_layer_id| top_layer_id == ui.layer_id());
-                let pointer = if let Some(transform) = ui
-                    .ctx()
-                    .memory(|m| m.layer_transforms.get(&ui.layer_id()).cloned())
-                {
-                    transform.inverse() * pointer
-                } else {
-                    pointer
-                };
-
-                let resize_y = side.opposite().side_y(panel_rect);
-                let mouse_over_resize_line = we_are_on_top
-                    && panel_rect.x_range().contains(pointer.x)
-                    && (resize_y - pointer.y).abs()
-                        <= ui.style().interaction.resize_grab_radius_side;
-
-                if ui.input(|i| i.pointer.any_pressed() && i.pointer.any_down())
-                    && mouse_over_resize_line
-                {
-                    ui.memory_mut(|mem| mem.set_dragged_id(resize_id));
-                }
-                is_resizing = ui.memory(|mem| mem.is_being_dragged(resize_id));
-                if is_resizing {
-                    let height = (pointer.y - side.side_y(panel_rect)).abs();
-                    let height =
-                        clamp_to_range(height, height_range).at_most(available_rect.height());
-                    side.set_rect_height(&mut panel_rect, height);
-                }
+            // First we read the resize interaction results, to avoid frame latency in the resize:
+            if let Some(resize_response) = ui.ctx().read_response(resize_id) {
+                resize_hover = resize_response.hovered();
+                is_resizing = resize_response.dragged();
 
-                let dragging_something_else =
-                    ui.input(|i| i.pointer.any_down() || i.pointer.any_pressed());
-                resize_hover = mouse_over_resize_line && !dragging_something_else;
-
-                if resize_hover || is_resizing {
-                    ui.ctx().set_cursor_icon(CursorIcon::ResizeVertical);
+                if is_resizing {
+                    if let Some(pointer) = resize_response.interact_pointer_pos() {
+                        let height = (pointer.y - side.side_y(panel_rect)).abs();
+                        let height =
+                            clamp_to_range(height, height_range).at_most(available_rect.height());
+                        side.set_rect_height(&mut panel_rect, height);
+                    }
                 }
             }
         }
@@ -779,6 +741,23 @@ impl TopBottomPanel {
         }
         ui.expand_to_include_rect(rect);
 
+        if resizable {
+            // Now we do the actual resize interaction, on top of all the contents.
+            // Otherwise its input could be eaten by the contents, e.g. a
+            // `ScrollArea` on either side of the panel boundary.
+
+            let resize_y = side.opposite().side_y(panel_rect);
+            let resize_rect = Rect::from_x_y_ranges(panel_rect.x_range(), resize_y..=resize_y)
+                .expand2(vec2(0.0, ui.style().interaction.resize_grab_radius_side));
+            let resize_response = ui.interact(resize_rect, resize_id, Sense::drag());
+            resize_hover = resize_response.hovered();
+            is_resizing = resize_response.dragged();
+        }
+
+        if resize_hover || is_resizing {
+            ui.ctx().set_cursor_icon(CursorIcon::ResizeVertical);
+        }
+
         PanelState { rect }.store(ui.ctx(), id);
 
         {

crates/egui/src/containers/resize.rs

@@ -188,8 +188,8 @@ impl Resize {
 
 struct Prepared {
     id: Id,
+    corner_id: Option<Id>,
     state: State,
-    corner_response: Option<Response>,
     content_ui: Ui,
 }
 
@@ -226,22 +226,17 @@ impl Resize {
 
         let mut user_requested_size = state.requested_size.take();
 
-        let corner_response = if self.resizable {
-            // Resize-corner:
-            let corner_size = Vec2::splat(ui.visuals().resize_corner_size);
-            let corner_rect =
-                Rect::from_min_size(position + state.desired_size - corner_size, corner_size);
-            let corner_response = ui.interact(corner_rect, id.with("corner"), Sense::drag());
+        let corner_id = self.resizable.then(|| id.with("__resize_corner"));
 
-            if let Some(pointer_pos) = corner_response.interact_pointer_pos() {
-                user_requested_size =
-                    Some(pointer_pos - position + 0.5 * corner_response.rect.size());
+        if let Some(corner_id) = corner_id {
+            if let Some(corner_response) = ui.ctx().read_response(corner_id) {
+                if let Some(pointer_pos) = corner_response.interact_pointer_pos() {
+                    // Respond to the interaction early to avoid frame delay.
+                    user_requested_size =
+                        Some(pointer_pos - position + 0.5 * corner_response.rect.size());
+                }
             }
-
-            Some(corner_response)
-        } else {
-            None
-        };
+        }
 
         if let Some(user_requested_size) = user_requested_size {
             state.desired_size = user_requested_size;
@@ -279,8 +274,8 @@ impl Resize {
 
         Prepared {
             id,
+            corner_id,
             state,
-            corner_response,
             content_ui,
         }
     }
@@ -295,8 +290,8 @@ impl Resize {
     fn end(self, ui: &mut Ui, prepared: Prepared) {
         let Prepared {
             id,
+            corner_id,
             mut state,
-            corner_response,
             content_ui,
         } = prepared;
 
@@ -320,6 +315,20 @@ impl Resize {
 
         // ------------------------------
 
+        let corner_response = if let Some(corner_id) = corner_id {
+            // We do the corner interaction last to place it on top of the content:
+            let corner_size = Vec2::splat(ui.visuals().resize_corner_size);
+            let corner_rect = Rect::from_min_size(
+                content_ui.min_rect().left_top() + size - corner_size,
+                corner_size,
+            );
+            Some(ui.interact(corner_rect, corner_id, Sense::drag()))
+        } else {
+            None
+        };
+
+        // ------------------------------
+
         if self.with_stroke && corner_response.is_some() {
             let rect = Rect::from_min_size(content_ui.min_rect().left_top(), state.desired_size);
             let rect = rect.expand(2.0); // breathing room for content