From b78a060af258dca7704ecc06fd13c4e461573b17 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 15 Oct 2024 03:05:08 +0100 Subject: [PATCH] Clip to the UI node's content box (#15442) # Objective Change UI clipping to respect borders and padding. Fixes #15335 ## Solution Based on #15163 1. Add a `padding` field to `Node`. 2. In `ui_layout_size` copy the padding values from taffy to `Node::padding`. 4. Determine the node's content box (The innermost part of the node excluding the padding and border). 5. In `update_clipping` perform the clipping intersection with the node's content box. ## Notes * `Rect` probably needs some helper methods for working with insets but because `Rect` and `BorderRect` are in different crates it's awkward to add them. Left for a follow up. * We could have another `Overflow` variant (probably called `Overflow::Hidden`) to that clips inside of the border box instead of the content box. Left it out here as I'm not certain about the naming or behaviour though. If this PR is adopted, it would be trivial to add a `Hidden` variant in a follow up. * Depending on UI scaling there are sometimes gaps in the layout: rounding-bug This is caused by existing bugs in `ui_layout_system`'s coordinates rounding and not anything to do with the changes in this PR. ## Testing This PR also changes the `overflow` example to display borders on the overflow nodes so you can see how this works: #### main (The image is clipped at the edges of the node, overwriting the border). main_overflow #### this PR (The image is clipped at the edges of the node's border). content-box-clip ## Migration Guide Migration guide is on #15561 --------- Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com> --- crates/bevy_ui/src/layout/mod.rs | 13 ++++++++----- crates/bevy_ui/src/ui_node.rs | 25 +++++++++++++++++++++++++ crates/bevy_ui/src/update.rs | 13 +++++++++++++ examples/ui/overflow.rs | 2 ++ 4 files changed, 48 insertions(+), 5 deletions(-) diff --git a/crates/bevy_ui/src/layout/mod.rs b/crates/bevy_ui/src/layout/mod.rs index d7a2e5fd61..492f1c1e0f 100644 --- a/crates/bevy_ui/src/layout/mod.rs +++ b/crates/bevy_ui/src/layout/mod.rs @@ -363,13 +363,16 @@ with UI components as a child of an entity without UI components, your UI layout node.unrounded_size = layout_size; } - node.bypass_change_detection().border = BorderRect { - left: layout.border.left * inverse_target_scale_factor, - right: layout.border.right * inverse_target_scale_factor, - top: layout.border.top * inverse_target_scale_factor, - bottom: layout.border.bottom * inverse_target_scale_factor, + let taffy_rect_to_border_rect = |rect: taffy::Rect| BorderRect { + left: rect.left * inverse_target_scale_factor, + right: rect.right * inverse_target_scale_factor, + top: rect.top * inverse_target_scale_factor, + bottom: rect.bottom * inverse_target_scale_factor, }; + node.bypass_change_detection().border = taffy_rect_to_border_rect(layout.border); + node.bypass_change_detection().padding = taffy_rect_to_border_rect(layout.padding); + let viewport_size = root_size.unwrap_or(node.calculated_size); if let Some(border_radius) = maybe_border_radius { diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs index ca143c3c3b..d1def12ce0 100644 --- a/crates/bevy_ui/src/ui_node.rs +++ b/crates/bevy_ui/src/ui_node.rs @@ -58,6 +58,11 @@ pub struct Node { /// /// Automatically calculated by [`super::layout::ui_layout_system`]. pub(crate) border_radius: ResolvedBorderRadius, + /// Resolved padding values in logical pixels + /// Padding updates bypass change detection. + /// + /// Automatically calculated by [`super::layout::ui_layout_system`]. + pub(crate) padding: BorderRect, } impl Node { @@ -175,6 +180,25 @@ impl Node { bottom_right: clamp_corner(self.border_radius.bottom_left, s, b.xw()), } } + + /// Returns the thickness of the node's padding on each edge in logical pixels. + /// + /// Automatically calculated by [`super::layout::ui_layout_system`]. + #[inline] + pub fn padding(&self) -> BorderRect { + self.padding + } + + /// Returns the combined inset on each edge including both padding and border thickness in logical pixels. + #[inline] + pub fn content_inset(&self) -> BorderRect { + BorderRect { + left: self.border.left + self.padding.left, + right: self.border.right + self.padding.right, + top: self.border.top + self.padding.top, + bottom: self.border.bottom + self.padding.bottom, + } + } } impl Node { @@ -186,6 +210,7 @@ impl Node { unrounded_size: Vec2::ZERO, border_radius: ResolvedBorderRadius::ZERO, border: BorderRect::ZERO, + padding: BorderRect::ZERO, }; } diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index e9b3329aa8..87abca8ad9 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -79,8 +79,21 @@ fn update_clipping( // current node's clip and the inherited clip. This handles the case // of nested `Overflow::Hidden` nodes. If parent `clip` is not // defined, use the current node's clip. + let mut node_rect = Rect::from_center_size(global_transform.translation().truncate(), node.size()); + + // Content isn't clipped at the edges of the node but at the edges of its content box. + // The content box is innermost part of the node excluding the padding and border. + // + // The `content_inset` should always fit inside the `node_rect`. + // Even if it were to overflow, this won't result in a degenerate clipping rect as `Rect::intersect` clamps the intersection to an empty rect. + let content_inset = node.content_inset(); + node_rect.min.x += content_inset.left; + node_rect.min.y += content_inset.top; + node_rect.max.x -= content_inset.right; + node_rect.max.y -= content_inset.bottom; + if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; node_rect.max.x = f32::INFINITY; diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs index 53d71d2e4a..3bcd2e1eb5 100644 --- a/examples/ui/overflow.rs +++ b/examples/ui/overflow.rs @@ -73,9 +73,11 @@ fn setup(mut commands: Commands, asset_server: Res) { top: Val::Px(25.), ..Default::default() }, + border: UiRect::all(Val::Px(5.)), overflow, ..Default::default() }, + border_color: Color::BLACK.into(), background_color: GRAY.into(), ..Default::default() })