New widget interaction logic

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