Make clipped areas of UI nodes non-interactive (#10454)

# Objective

Problems:

* The clipped, non-visible regions of UI nodes are interactive.
* `RelativeCursorPostion` is set relative to the visible part of the
node. It should be relative to the whole node.
* The `RelativeCursorPostion::mouse_over` method returns `true` when the
mouse is over a clipped part of a node.

fixes #10470

## Solution

Intersect a node's bounding rect with its clipping rect before checking
if it contains the cursor.

Added the field `normalized_visible_node_rect` to
`RelativeCursorPosition`. This is set to the bounds of the unclipped
area of the node rect by `ui_focus_system` expressed in normalized
coordinates relative to the entire node.

Instead of checking if the normalized cursor position lies within a unit
square, it instead checks if it is contained by
`normalized_visible_node_rect`.

Added outlines to the `overflow` example that appear when the cursor is
over the visible part of the images, but not the clipped area.

---

## Changelog

* `ui_focus_system` intersects a node's bounding rect with its clipping
rect before checking if mouse over.
* Added the field `normalized_visible_node_rect` to
`RelativeCursorPosition`. This is set to the bounds of the unclipped
area of the node rect by `ui_focus_system` expressed in normalized
coordinates relative to the entire node.
* `RelativeCursorPostion` is calculated relative to the whole node's
position and size, not only the visible part.
* `RelativeCursorPosition::mouse_over` only returns true when the mouse
is over an unclipped region of the UI node.
* Removed the `Deref` and `DerefMut` derives from
`RelativeCursorPosition` as it is no longer a single field struct.
* Added some outlines to the `overflow` example that respond to
`Interaction` changes.

## Migration Guide

The clipped areas of UI nodes are no longer interactive.

`RelativeCursorPostion` is now calculated relative to the whole node's
position and size, not only the visible part. Its `mouse_over` method
only returns true when the cursor is over an unclipped part of the node.

`RelativeCursorPosition` no longer implements `Deref` and `DerefMut`.

crates/bevy_ui/src/focus.rs

@@ -1,5 +1,4 @@
 use crate::{camera_config::UiCameraConfig, CalculatedClip, Node, UiScale, UiStack};
-use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::{
     change_detection::DetectChangesMut,
     entity::Entity,
@@ -9,7 +8,7 @@ use bevy_ecs::{
     system::{Local, Query, Res},
 };
 use bevy_input::{mouse::MouseButton, touch::Touches, Input};
-use bevy_math::Vec2;
+use bevy_math::{Rect, Vec2};
 use bevy_reflect::{Reflect, ReflectDeserialize, ReflectSerialize};
 use bevy_render::{camera::NormalizedRenderTarget, prelude::Camera, view::ViewVisibility};
 use bevy_transform::components::GlobalTransform;
@@ -57,25 +56,16 @@ impl Default for Interaction {
 
 /// A component storing the position of the mouse relative to the node, (0., 0.) being the top-left corner and (1., 1.) being the bottom-right
 /// If the mouse is not over the node, the value will go beyond the range of (0., 0.) to (1., 1.)
-/// A None value means that the cursor position is unknown.
+
 ///
 /// It can be used alongside interaction to get the position of the press.
-#[derive(
+#[derive(Component, Copy, Clone, Default, PartialEq, Debug, Reflect, Serialize, Deserialize)]
-    Component,
-    Deref,
-    DerefMut,
-    Copy,
-    Clone,
-    Default,
-    PartialEq,
-    Debug,
-    Reflect,
-    Serialize,
-    Deserialize,
-)]
 #[reflect(Component, Serialize, Deserialize, PartialEq)]
 pub struct RelativeCursorPosition {
-    /// Cursor position relative to size and position of the Node.
+    /// Visible area of the Node relative to the size of the entire Node.
+    pub normalized_visible_node_rect: Rect,
+    /// Cursor position relative to the size and position of the Node.
+    /// A None value indicates that the cursor position is unknown.
     pub normalized: Option<Vec2>,
 }
 
@@ -83,7 +73,7 @@ impl RelativeCursorPosition {
     /// A helper function to check if the mouse is over the node
     pub fn mouse_over(&self) -> bool {
         self.normalized
-            .map(|position| (0.0..1.).contains(&position.x) && (0.0..1.).contains(&position.y))
+            .map(|position| self.normalized_visible_node_rect.contains(position))
             .unwrap_or(false)
     }
 }
@@ -216,22 +206,24 @@ pub fn ui_focus_system(
                     }
                 }
 
-                let position = node.global_transform.translation();
+                let node_rect = node.node.logical_rect(node.global_transform);
-                let ui_position = position.truncate();
+
-                let extents = node.node.size() / 2.0;
+                // Intersect with the calculated clip rect to find the bounds of the visible region of the node
-                let mut min = ui_position - extents;
+                let visible_rect = node
-                if let Some(clip) = node.calculated_clip {
+                    .calculated_clip
-                    min = Vec2::max(min, clip.clip.min);
+                    .map(|clip| node_rect.intersect(clip.clip))
-                }
+                    .unwrap_or(node_rect);
 
                 // The mouse position relative to the node
                 // (0., 0.) is the top-left corner, (1., 1.) is the bottom-right corner
+                // Coordinates are relative to the entire node, not just the visible region.
                 let relative_cursor_position = cursor_position
-                    .map(|cursor_position| (cursor_position - min) / node.node.size());
+                    .map(|cursor_position| (cursor_position - node_rect.min) / node_rect.size());
 
-                // If the current cursor position is within the bounds of the node, consider it for
+                // If the current cursor position is within the bounds of the node's visible area, consider it for
                 // clicking
                 let relative_cursor_position_component = RelativeCursorPosition {
+                    normalized_visible_node_rect: visible_rect.normalize(node_rect),
                     normalized: relative_cursor_position,
                 };
 

examples/ui/overflow.rs

@@ -8,6 +8,7 @@ fn main() {
         // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
         .insert_resource(WinitSettings::desktop_app())
         .add_systems(Startup, setup)
+        .add_systems(Update, update_outlines)
         .run();
 }
 
@@ -86,18 +87,39 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 ..Default::default()
                             })
                             .with_children(|parent| {
-                                parent.spawn(ImageBundle {
+                                parent.spawn((
-                                    image: UiImage::new(image.clone()),
+                                    ImageBundle {
-                                    style: Style {
+                                        image: UiImage::new(image.clone()),
-                                        min_width: Val::Px(100.),
+                                        style: Style {
-                                        min_height: Val::Px(100.),
+                                            min_width: Val::Px(100.),
+                                            min_height: Val::Px(100.),
+                                            ..Default::default()
+                                        },
+                                        background_color: Color::WHITE.into(),
+
                                         ..Default::default()
                                     },
-                                    background_color: Color::WHITE.into(),
+                                    Interaction::default(),
-                                    ..Default::default()
+                                    Outline {
-                                });
+                                        width: Val::Px(2.),
+                                        offset: Val::Px(2.),
+                                        color: Color::NONE,
+                                    },
+                                ));
                             });
                     });
             }
         });
 }
+
+fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Interaction>)>) {
+    for (mut outline, interaction) in outlines_query.iter_mut() {
+        if interaction.is_changed() {
+            outline.color = match *interaction {
+                Interaction::Pressed => Color::RED,
+                Interaction::Hovered => Color::WHITE,
+                Interaction::None => Color::NONE,
+            };
+        }
+    }
+}