From 100767560fdf70b0973e99a12ff11bbcce7d60fb Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 22 Nov 2023 14:30:38 +0000 Subject: [PATCH] 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 | 46 +++++++++++++++---------------------- examples/ui/overflow.rs | 38 +++++++++++++++++++++++------- 2 files changed, 49 insertions(+), 35 deletions(-) diff --git a/crates/bevy_ui/src/focus.rs b/crates/bevy_ui/src/focus.rs index 91454adeeaada..49dc7be8c3dca 100644 --- a/crates/bevy_ui/src/focus.rs +++ b/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( - Component, - Deref, - DerefMut, - Copy, - Clone, - Default, - PartialEq, - Debug, - Reflect, - Serialize, - Deserialize, -)] +#[derive(Component, 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, } @@ -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 ui_position = position.truncate(); - let extents = node.node.size() / 2.0; - let mut min = ui_position - extents; - if let Some(clip) = node.calculated_clip { - min = Vec2::max(min, clip.clip.min); - } + let node_rect = node.node.logical_rect(node.global_transform); + + // Intersect with the calculated clip rect to find the bounds of the visible region of the node + let visible_rect = node + .calculated_clip + .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, }; diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs index 433456f6a9d0e..72d9fabe56553 100644 --- a/examples/ui/overflow.rs +++ b/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) { ..Default::default() }) .with_children(|parent| { - parent.spawn(ImageBundle { - image: UiImage::new(image.clone()), - style: Style { - min_width: Val::Px(100.), - min_height: Val::Px(100.), + parent.spawn(( + ImageBundle { + image: UiImage::new(image.clone()), + style: Style { + min_width: Val::Px(100.), + min_height: Val::Px(100.), + ..Default::default() + }, + background_color: Color::WHITE.into(), + ..Default::default() }, - background_color: Color::WHITE.into(), - ..Default::default() - }); + Interaction::default(), + Outline { + width: Val::Px(2.), + offset: Val::Px(2.), + color: Color::NONE, + }, + )); }); }); } }); } + +fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref)>) { + 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, + }; + } + } +}