From c3c44b74228538deb63ac8b8f7a7379f0efb73b9 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 15 Mar 2023 09:03:45 +0000 Subject: [PATCH 01/14] changes: * Split the UI overflow implementation so overflow can be set for each axis separately. * Added new enum `OverflowAxis` with `Hidden` and `Visible` variants. * Changed `Overflow` to a struct with `x` and `y` fields of type `OverflowAxis`. * `Overflow` has new methods `visible()` and `hidden()` that replace its previous `Hidden` and `Visible` variants. * Added `Overflow` helper methods `x_hidden()` and `y_hidden()` that return a new `Overflow` with the given axis hidden. * Added register type for `OverflowAxis`. * Changed the `ui` example to use `Overflow::y_hidden()` instead of `Overflow::Hidden`. * Modified `update_clipping` so it calculates clipping for each axis separately. If a node is only clipped on one axis, the other axis is given -/+ `f32::INFINITY` clipping bounds. --- crates/bevy_ui/src/flex/convert.rs | 2 +- crates/bevy_ui/src/lib.rs | 1 + crates/bevy_ui/src/ui_node.rs | 61 ++++++++++++++++++++++++++++-- crates/bevy_ui/src/update.rs | 23 ++++++++--- examples/ui/ui.rs | 2 +- 5 files changed, 79 insertions(+), 10 deletions(-) diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/flex/convert.rs index 60e22f0e0b9ba..50dc6e91b3bdb 100644 --- a/crates/bevy_ui/src/flex/convert.rs +++ b/crates/bevy_ui/src/flex/convert.rs @@ -277,7 +277,7 @@ mod tests { height: Val::Px(0.), }, aspect_ratio: None, - overflow: crate::Overflow::Hidden, + overflow: crate::Overflow::hidden(), gap: Size { width: Val::Px(0.), height: Val::Percent(0.), diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs index c8456a7d6bd5f..30f5d96c1fd16 100644 --- a/crates/bevy_ui/src/lib.rs +++ b/crates/bevy_ui/src/lib.rs @@ -95,6 +95,7 @@ impl Plugin for UiPlugin { // NOTE: used by Style::aspect_ratio .register_type::>() .register_type::() + .register_type::() .register_type::() .register_type::() .register_type::() diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs index 2a28c5a1e508c..edce21c24cf17 100644 --- a/crates/bevy_ui/src/ui_node.rs +++ b/crates/bevy_ui/src/ui_node.rs @@ -581,18 +581,73 @@ impl Default for JustifyContent { /// Whether to show or hide overflowing items #[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)] #[reflect(PartialEq, Serialize, Deserialize)] -pub enum Overflow { +pub struct Overflow { + /// Whether to show or hide overflowing items on the x axis + pub x: OverflowAxis, + /// Whether to show or hide overflowing items on the y axis + pub y: OverflowAxis, +} + +impl Overflow { + pub const DEFAULT: Self = Self { + x: OverflowAxis::DEFAULT, + y: OverflowAxis::DEFAULT, + }; + + /// Show overflowing items on both axes + pub const fn visible() -> Self { + Self { + x: OverflowAxis::Visible, + y: OverflowAxis::Visible, + } + } + + /// Hide overflowing items on both axes + pub const fn hidden() -> Self { + Self { + x: OverflowAxis::Hidden, + y: OverflowAxis::Hidden, + } + } + + /// Hide overflowing items on the x axis + pub const fn x_hidden() -> Self { + Self { + x: OverflowAxis::Hidden, + y: OverflowAxis::Visible, + } + } + + /// Hide overflowing items on the y axis + pub const fn y_hidden() -> Self { + Self { + x: OverflowAxis::Visible, + y: OverflowAxis::Hidden, + } + } +} + +impl Default for Overflow { + fn default() -> Self { + Self::DEFAULT + } +} + +/// Whether to show or hide overflowing items +#[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)] +#[reflect(PartialEq, Serialize, Deserialize)] +pub enum OverflowAxis { /// Show overflowing items. Visible, /// Hide overflowing items. Hidden, } -impl Overflow { +impl OverflowAxis { pub const DEFAULT: Self = Self::Visible; } -impl Default for Overflow { +impl Default for OverflowAxis { fn default() -> Self { Self::DEFAULT } diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 623add4a6a283..df69a2e075bb9 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -1,6 +1,6 @@ //! This module contains systems that update the UI when something changes -use crate::{CalculatedClip, Overflow, Style}; +use crate::{CalculatedClip, Overflow, OverflowAxis, Style}; use super::Node; use bevy_ecs::{ @@ -56,10 +56,23 @@ fn update_clipping( // Calculate new clip for its children let children_clip = match style.overflow { - Overflow::Visible => clip, - Overflow::Hidden => { - let node_center = global_transform.translation().truncate(); - let node_rect = Rect::from_center_size(node_center, node.calculated_size); + Overflow { + x: OverflowAxis::Visible, + y: OverflowAxis::Visible, + } => clip, + Overflow { + x: overflow_x, + y: overflow_y, + } => { + let mut node_rect = node.logical_rect(global_transform); + if overflow_x == OverflowAxis::Visible { + node_rect.min.x = -f32::INFINITY; + node_rect.max.x = f32::INFINITY; + } + if overflow_y == OverflowAxis::Visible { + node_rect.min.y = -f32::INFINITY; + node_rect.max.y = f32::INFINITY; + } Some(clip.map_or(node_rect, |c| c.intersect(node_rect))) } }; diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs index 647299048e13a..3a4dab345a7b1 100644 --- a/examples/ui/ui.rs +++ b/examples/ui/ui.rs @@ -111,7 +111,7 @@ fn setup(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, size: Size::height(Val::Percent(50.)), - overflow: Overflow::Hidden, + overflow: Overflow::y_hidden(), ..default() }, background_color: Color::rgb(0.10, 0.10, 0.10).into(), From 2fa9401f3d35cad11a56df25c36cb05a03bd7131 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 15 Mar 2023 09:52:00 +0000 Subject: [PATCH 02/14] changes: * Added `overflow_debug` example demonstrating how to use the `overflow`. --- Cargo.toml | 10 ++++ examples/README.md | 1 + examples/ui/overflow_debug.rs | 97 +++++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+) create mode 100644 examples/ui/overflow_debug.rs diff --git a/Cargo.toml b/Cargo.toml index 47d8ea3c9fe93..4b3bb6b7401be 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1705,6 +1705,16 @@ description = "Illustrates how FontAtlases are populated (used to optimize text category = "UI (User Interface)" wasm = true +[[example]] +name = "overflow_debug" +path = "examples/ui/overflow_debug.rs" + +[package.metadata.example.overflow_debug] +name = "Overflow Debug" +description = "Simple example demonstrating overflow behavior" +category = "UI (User Interface)" +wasm = true + [[example]] name = "relative_cursor_position" path = "examples/ui/relative_cursor_position.rs" diff --git a/examples/README.md b/examples/README.md index 8fd8f7c29b8d0..e4b6486ac2024 100644 --- a/examples/README.md +++ b/examples/README.md @@ -327,6 +327,7 @@ Example | Description --- | --- [Button](../examples/ui/button.rs) | Illustrates creating and updating a button [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) +[Overflow Debug](../examples/ui/overflow_debug.rs) | Simple example demonstrating overflow behavior [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs new file mode 100644 index 0000000000000..ff7dc3b5b1b98 --- /dev/null +++ b/examples/ui/overflow_debug.rs @@ -0,0 +1,97 @@ +//! Simple example demonstrating overflow behavior. + +use bevy::{prelude::*, winit::WinitSettings}; + +fn main() { + App::new() + .add_plugins(DefaultPlugins) + // Only run the app when there is user input. This will significantly reduce CPU/GPU use. + .insert_resource(WinitSettings::desktop_app()) + .add_startup_system(setup) + .run(); +} + +fn setup(mut commands: Commands, asset_server: Res) { + commands.spawn(Camera2dBundle::default()); + + let text_style = TextStyle { + font: asset_server.load("fonts/FiraMono-Medium.ttf"), + font_size: 20.0, + color: Color::WHITE, + }; + + commands + .spawn(NodeBundle { + style: Style { + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, + size: Size::width(Val::Percent(100.)), + ..Default::default() + }, + background_color: Color::BLACK.into(), + ..Default::default() + }) + .with_children(|parent| { + for overflow in [ + Overflow::visible(), + Overflow::x_hidden(), + Overflow::y_hidden(), + Overflow::hidden(), + ] { + parent + .spawn(NodeBundle { + style: Style { + flex_direction: FlexDirection::Column, + align_items: AlignItems::Center, + margin: UiRect::horizontal(Val::Px(25.)), + ..Default::default() + }, + ..Default::default() + }) + .with_children(|parent| { + let label = format!("{overflow:#?}"); + parent + .spawn(NodeBundle { + style: Style { + padding: UiRect::all(Val::Px(10.)), + margin: UiRect::bottom(Val::Px(25.)), + ..Default::default() + }, + background_color: Color::DARK_GRAY.into(), + ..Default::default() + }) + .with_children(|parent| { + parent.spawn(TextBundle { + text: Text::from_section(label, text_style.clone()), + ..Default::default() + }); + }); + parent + .spawn(NodeBundle { + style: Style { + size: Size::all(Val::Px(100.)), + padding: UiRect { + left: Val::Px(25.), + top: Val::Px(25.), + ..Default::default() + }, + overflow, + ..Default::default() + }, + background_color: Color::GRAY.into(), + ..Default::default() + }) + .with_children(|parent| { + parent.spawn(NodeBundle { + style: Style { + min_size: Size::all(Val::Px(100.)), + ..Default::default() + }, + background_color: Color::WHITE.into(), + ..Default::default() + }); + }); + }); + } + }); +} From 8ef59f3ad274f72285e9fa82adcb1209d3bd585f Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 15 Mar 2023 10:40:12 +0000 Subject: [PATCH 03/14] simplified match statement in `update` --- crates/bevy_ui/src/update.rs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index df69a2e075bb9..dddcd9b912582 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -60,16 +60,13 @@ fn update_clipping( x: OverflowAxis::Visible, y: OverflowAxis::Visible, } => clip, - Overflow { - x: overflow_x, - y: overflow_y, - } => { + _ => { let mut node_rect = node.logical_rect(global_transform); - if overflow_x == OverflowAxis::Visible { + if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; node_rect.max.x = f32::INFINITY; } - if overflow_y == OverflowAxis::Visible { + if style.overflow.y == OverflowAxis::Visible { node_rect.min.y = -f32::INFINITY; node_rect.max.y = f32::INFINITY; } From c72213f70d92da3ec67ea511a14dc7fe9612fd0d Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 15 Mar 2023 10:40:43 +0000 Subject: [PATCH 04/14] cargo fmt --- crates/bevy_ui/src/update.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index dddcd9b912582..d4ae6d081ffcc 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -60,7 +60,7 @@ fn update_clipping( x: OverflowAxis::Visible, y: OverflowAxis::Visible, } => clip, - _ => { + _ => { let mut node_rect = node.logical_rect(global_transform); if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; From 2b1c527ea9c5c1c53b16e00af653d496e478dcc7 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 21 Mar 2023 10:29:10 +0000 Subject: [PATCH 05/14] Some renamings for clarity and to remove shadowing --- crates/bevy_ui/src/update.rs | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index d4ae6d081ffcc..1245274e2fbff 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -35,23 +35,20 @@ fn update_clipping( children_query: &Query<&Children>, node_query: &mut Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>, entity: Entity, - clip: Option, + maybe_inherited_clip: Option, ) { - let (node, global_transform, style, calculated_clip) = node_query.get_mut(entity).unwrap(); + let (node, global_transform, style, maybe_calculated_clip) = node_query.get_mut(entity).unwrap(); + // Update this node's CalculatedClip component - match (clip, calculated_clip) { - (None, None) => {} + match (maybe_inherited_clip, maybe_calculated_clip) { (None, Some(_)) => { commands.entity(entity).remove::(); } - (Some(clip), None) => { - commands.entity(entity).insert(CalculatedClip { clip }); - } - (Some(clip), Some(mut old_clip)) => { - if old_clip.clip != clip { - *old_clip = CalculatedClip { clip }; - } + (Some(inherited_clip), None) => { + commands.entity(entity).insert(CalculatedClip { clip: inherited_clip }); } + (Some(inherited_clip), Some(mut calculated_clip)) => *calculated_clip = CalculatedClip { clip: inherited_clip }, + _ => {}, } // Calculate new clip for its children @@ -59,7 +56,7 @@ fn update_clipping( Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Visible, - } => clip, + } => maybe_inherited_clip, _ => { let mut node_rect = node.logical_rect(global_transform); if style.overflow.x == OverflowAxis::Visible { @@ -70,12 +67,12 @@ fn update_clipping( node_rect.min.y = -f32::INFINITY; node_rect.max.y = f32::INFINITY; } - Some(clip.map_or(node_rect, |c| c.intersect(node_rect))) + Some(maybe_inherited_clip.map_or(node_rect, |c| c.intersect(node_rect))) } }; if let Ok(children) = children_query.get(entity) { - for child in children.iter().cloned() { + for &child in children { update_clipping(commands, children_query, node_query, child, children_clip); } } From 8653609104fb1da328954d46a3d4544a5f074d79 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 21 Mar 2023 11:06:37 +0000 Subject: [PATCH 06/14] cargo fmt --- crates/bevy_ui/src/update.rs | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 1245274e2fbff..980bc8b079913 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -37,7 +37,8 @@ fn update_clipping( entity: Entity, maybe_inherited_clip: Option, ) { - let (node, global_transform, style, maybe_calculated_clip) = node_query.get_mut(entity).unwrap(); + let (node, global_transform, style, maybe_calculated_clip) = + node_query.get_mut(entity).unwrap(); // Update this node's CalculatedClip component match (maybe_inherited_clip, maybe_calculated_clip) { @@ -45,10 +46,16 @@ fn update_clipping( commands.entity(entity).remove::(); } (Some(inherited_clip), None) => { - commands.entity(entity).insert(CalculatedClip { clip: inherited_clip }); + commands.entity(entity).insert(CalculatedClip { + clip: inherited_clip, + }); } - (Some(inherited_clip), Some(mut calculated_clip)) => *calculated_clip = CalculatedClip { clip: inherited_clip }, - _ => {}, + (Some(inherited_clip), Some(mut calculated_clip)) => { + *calculated_clip = CalculatedClip { + clip: inherited_clip, + } + } + _ => {} } // Calculate new clip for its children From 8284671c868fcfa47a6e978cd9b272aee769404e Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 21 Mar 2023 11:20:50 +0000 Subject: [PATCH 07/14] changes: * Added `is_visible` methods to `Overflow` and `OverflowAxis` * Replaced the second `match` statement in `update_clipping` with an `if` statement. --- crates/bevy_ui/src/ui_node.rs | 10 ++++++++++ crates/bevy_ui/src/update.rs | 28 ++++++++++++---------------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs index edce21c24cf17..19b72238a018d 100644 --- a/crates/bevy_ui/src/ui_node.rs +++ b/crates/bevy_ui/src/ui_node.rs @@ -625,6 +625,11 @@ impl Overflow { y: OverflowAxis::Hidden, } } + + /// Overflow is visible on both axes + pub const fn is_visible(&self) -> bool { + self.x.is_visible() && self.y.is_visible() + } } impl Default for Overflow { @@ -645,6 +650,11 @@ pub enum OverflowAxis { impl OverflowAxis { pub const DEFAULT: Self = Self::Visible; + + /// Overflow is visible on this axis + pub const fn is_visible(&self) -> bool { + matches!(self, Self::Visible) + } } impl Default for OverflowAxis { diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 980bc8b079913..8898f225fd0f0 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -59,23 +59,19 @@ fn update_clipping( } // Calculate new clip for its children - let children_clip = match style.overflow { - Overflow { - x: OverflowAxis::Visible, - y: OverflowAxis::Visible, - } => maybe_inherited_clip, - _ => { - let mut node_rect = node.logical_rect(global_transform); - if style.overflow.x == OverflowAxis::Visible { - node_rect.min.x = -f32::INFINITY; - node_rect.max.x = f32::INFINITY; - } - if style.overflow.y == OverflowAxis::Visible { - node_rect.min.y = -f32::INFINITY; - node_rect.max.y = f32::INFINITY; - } - Some(maybe_inherited_clip.map_or(node_rect, |c| c.intersect(node_rect))) + let children_clip = if style.overflow.is_visible() { + maybe_inherited_clip + } else { + let mut node_rect = node.logical_rect(global_transform); + if style.overflow.x == OverflowAxis::Visible { + node_rect.min.x = -f32::INFINITY; + node_rect.max.x = f32::INFINITY; + } + if style.overflow.y == OverflowAxis::Visible { + node_rect.min.y = -f32::INFINITY; + node_rect.max.y = f32::INFINITY; } + Some(maybe_inherited_clip.map_or(node_rect, |c| c.intersect(node_rect))) }; if let Ok(children) = children_query.get(entity) { From 2a3e1297d141f082793302eff2a5bcf3377e2929 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 24 Mar 2023 11:36:50 +0000 Subject: [PATCH 08/14] Changed match statement into a nested if-let statement --- crates/bevy_ui/src/update.rs | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 8898f225fd0f0..a27e32123881e 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -1,6 +1,6 @@ //! This module contains systems that update the UI when something changes -use crate::{CalculatedClip, Overflow, OverflowAxis, Style}; +use crate::{CalculatedClip, OverflowAxis, Style}; use super::Node; use bevy_ecs::{ @@ -41,23 +41,23 @@ fn update_clipping( node_query.get_mut(entity).unwrap(); // Update this node's CalculatedClip component - match (maybe_inherited_clip, maybe_calculated_clip) { - (None, Some(_)) => { - commands.entity(entity).remove::(); - } - (Some(inherited_clip), None) => { - commands.entity(entity).insert(CalculatedClip { - clip: inherited_clip, - }); - } - (Some(inherited_clip), Some(mut calculated_clip)) => { + if let Some(mut calculated_clip) = maybe_calculated_clip { + if let Some(inherited_clip) = maybe_inherited_clip { + // Replace the previous calculated clip with the inherited clipping rect *calculated_clip = CalculatedClip { clip: inherited_clip, } + } else { + // No inherited clipping rect, remove the component + commands.entity(entity).remove::(); } - _ => {} + } else if let Some(inherited_clip) = maybe_inherited_clip { + // No previous calculated clip, add a new CalculatedClip component with the inherited clipping rect + commands.entity(entity).insert(CalculatedClip { + clip: inherited_clip, + }); } - + // Calculate new clip for its children let children_clip = if style.overflow.is_visible() { maybe_inherited_clip From 131650dd7f93508896292eb40d920e5056ae279b Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 24 Mar 2023 14:16:39 +0000 Subject: [PATCH 09/14] * Renamed `overflow_debug` example to `overflow` * Cargo fmt * Overflow example clips a bevy logo image instead of a rectangle. --- Cargo.toml | 8 ++++---- crates/bevy_ui/src/update.rs | 4 ++-- examples/README.md | 2 +- examples/ui/{overflow_debug.rs => overflow.rs} | 7 +++++-- 4 files changed, 12 insertions(+), 9 deletions(-) rename examples/ui/{overflow_debug.rs => overflow.rs} (94%) diff --git a/Cargo.toml b/Cargo.toml index 4b3bb6b7401be..409f57fa0d221 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1706,11 +1706,11 @@ category = "UI (User Interface)" wasm = true [[example]] -name = "overflow_debug" -path = "examples/ui/overflow_debug.rs" +name = "overflow" +path = "examples/ui/overflow.rs" -[package.metadata.example.overflow_debug] -name = "Overflow Debug" +[package.metadata.example.overflow] +name = "Overflow" description = "Simple example demonstrating overflow behavior" category = "UI (User Interface)" wasm = true diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index a27e32123881e..83f6a8d60bfb5 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -41,7 +41,7 @@ fn update_clipping( node_query.get_mut(entity).unwrap(); // Update this node's CalculatedClip component - if let Some(mut calculated_clip) = maybe_calculated_clip { + if let Some(mut calculated_clip) = maybe_calculated_clip { if let Some(inherited_clip) = maybe_inherited_clip { // Replace the previous calculated clip with the inherited clipping rect *calculated_clip = CalculatedClip { @@ -57,7 +57,7 @@ fn update_clipping( clip: inherited_clip, }); } - + // Calculate new clip for its children let children_clip = if style.overflow.is_visible() { maybe_inherited_clip diff --git a/examples/README.md b/examples/README.md index e4b6486ac2024..6fdec4b155a8c 100644 --- a/examples/README.md +++ b/examples/README.md @@ -327,7 +327,7 @@ Example | Description --- | --- [Button](../examples/ui/button.rs) | Illustrates creating and updating a button [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) -[Overflow Debug](../examples/ui/overflow_debug.rs) | Simple example demonstrating overflow behavior +[Overflow Debug](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow.rs similarity index 94% rename from examples/ui/overflow_debug.rs rename to examples/ui/overflow.rs index ff7dc3b5b1b98..2da26b34b9a76 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow.rs @@ -20,6 +20,8 @@ fn setup(mut commands: Commands, asset_server: Res) { color: Color::WHITE, }; + let image = asset_server.load("branding/icon.png"); + commands .spawn(NodeBundle { style: Style { @@ -28,7 +30,7 @@ fn setup(mut commands: Commands, asset_server: Res) { size: Size::width(Val::Percent(100.)), ..Default::default() }, - background_color: Color::BLACK.into(), + background_color: Color::ANTIQUE_WHITE.into(), ..Default::default() }) .with_children(|parent| { @@ -82,7 +84,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ..Default::default() }) .with_children(|parent| { - parent.spawn(NodeBundle { + parent.spawn(ImageBundle { + image: UiImage::new(image.clone()), style: Style { min_size: Size::all(Val::Px(100.)), ..Default::default() From 8c65e33fd3ed1532139c23716f13e60e848f087d Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 24 Mar 2023 17:21:54 +0000 Subject: [PATCH 10/14] put back change detection guard --- crates/bevy_ui/src/update.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 83f6a8d60bfb5..19eb3699f5b21 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -44,8 +44,8 @@ fn update_clipping( if let Some(mut calculated_clip) = maybe_calculated_clip { if let Some(inherited_clip) = maybe_inherited_clip { // Replace the previous calculated clip with the inherited clipping rect - *calculated_clip = CalculatedClip { - clip: inherited_clip, + if calculated_clip.clip != inherited_clip { + *calculated_clip = CalculatedClip { clip: inherited_clip }; } } else { // No inherited clipping rect, remove the component From 44c170f0c6c7dd416c22b78c33de6ba9fbe7d47f Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 11 Apr 2023 06:55:08 +0100 Subject: [PATCH 11/14] changes: * Renamed `OverflowAxis::Hidden` to `OverflowAxis::Clip` * Replaced `hide`/`hidden` with `clip in the names of the functions belonging to `Overflow` and `OverflowAxis`. * Fixed errors in the examples. --- crates/bevy_ui/src/flex/convert.rs | 2 +- crates/bevy_ui/src/ui_node.rs | 28 ++++++++++++++-------------- crates/bevy_ui/src/update.rs | 3 ++- examples/ui/overflow.rs | 8 ++++---- examples/ui/overflow_debug.rs | 8 +++++--- examples/ui/ui.rs | 2 +- 6 files changed, 27 insertions(+), 24 deletions(-) diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/flex/convert.rs index dbc4cad9eef56..d1991cb883df7 100644 --- a/crates/bevy_ui/src/flex/convert.rs +++ b/crates/bevy_ui/src/flex/convert.rs @@ -264,7 +264,7 @@ mod tests { height: Val::Px(0.), }, aspect_ratio: None, - overflow: crate::Overflow::hidden(), + overflow: crate::Overflow::clip(), gap: Size { width: Val::Px(0.), height: Val::Percent(0.), diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs index 2912b39e59500..eb3cae73a39c1 100644 --- a/crates/bevy_ui/src/ui_node.rs +++ b/crates/bevy_ui/src/ui_node.rs @@ -618,13 +618,13 @@ impl Default for JustifyContent { } } -/// Whether to show or hide overflowing items +/// Whether to show or clip overflowing items #[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)] #[reflect(PartialEq, Serialize, Deserialize)] pub struct Overflow { - /// Whether to show or hide overflowing items on the x axis + /// Whether to show or clip overflowing items on the x axis pub x: OverflowAxis, - /// Whether to show or hide overflowing items on the y axis + /// Whether to show or clip overflowing items on the y axis pub y: OverflowAxis, } @@ -642,27 +642,27 @@ impl Overflow { } } - /// Hide overflowing items on both axes - pub const fn hidden() -> Self { + /// Clip overflowing items on both axes + pub const fn clip() -> Self { Self { - x: OverflowAxis::Hidden, - y: OverflowAxis::Hidden, + x: OverflowAxis::Clip, + y: OverflowAxis::Clip, } } - /// Hide overflowing items on the x axis - pub const fn x_hidden() -> Self { + /// Clip overflowing items on the x axis + pub const fn clip_x() -> Self { Self { - x: OverflowAxis::Hidden, + x: OverflowAxis::Clip, y: OverflowAxis::Visible, } } - /// Hide overflowing items on the y axis - pub const fn y_hidden() -> Self { + /// Clip overflowing items on the y axis + pub const fn clip_y() -> Self { Self { x: OverflowAxis::Visible, - y: OverflowAxis::Hidden, + y: OverflowAxis::Clip, } } @@ -685,7 +685,7 @@ pub enum OverflowAxis { /// Show overflowing items. Visible, /// Hide overflowing items. - Hidden, + Clip, } impl OverflowAxis { diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 37770cd74b091..89efc6d96b478 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -74,7 +74,8 @@ fn update_clipping( if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; node_rect.max.x = f32::INFINITY; - } else { + } + if style.overflow.y == OverflowAxis::Visible { node_rect.min.y = -f32::INFINITY; node_rect.max.y = f32::INFINITY; } diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs index 2da26b34b9a76..e476bd3f43b8f 100644 --- a/examples/ui/overflow.rs +++ b/examples/ui/overflow.rs @@ -7,7 +7,7 @@ fn main() { .add_plugins(DefaultPlugins) // Only run the app when there is user input. This will significantly reduce CPU/GPU use. .insert_resource(WinitSettings::desktop_app()) - .add_startup_system(setup) + .add_systems(Startup, setup) .run(); } @@ -36,9 +36,9 @@ fn setup(mut commands: Commands, asset_server: Res) { .with_children(|parent| { for overflow in [ Overflow::visible(), - Overflow::x_hidden(), - Overflow::y_hidden(), - Overflow::hidden(), + Overflow::clip_x(), + Overflow::clip_y(), + Overflow::clip(), ] { parent .spawn(NodeBundle { diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs index 14e3e0d1f305c..9a6c9fb0a9e78 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow_debug.rs @@ -212,7 +212,7 @@ fn spawn_container( size: Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)), align_items: AlignItems::Center, justify_content: JustifyContent::Center, - overflow: Overflow::Hidden, + overflow: Overflow::clip(), ..default() }, background_color: Color::DARK_GRAY.into(), @@ -278,8 +278,10 @@ fn toggle_overflow(keys: Res>, mut containers: Query<&mut Style, if keys.just_pressed(KeyCode::O) { for mut style in &mut containers { style.overflow = match style.overflow { - Overflow::Visible => Overflow::Hidden, - Overflow::Hidden => Overflow::Visible, + Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Visible } => Overflow::clip_y(), + Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Clip } => Overflow::clip_x(), + Overflow { x: OverflowAxis::Clip, y: OverflowAxis::Visible } => Overflow::clip(), + _ => Overflow::visible(), }; } } diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs index 794dd5bcda604..bf12b1a52e04f 100644 --- a/examples/ui/ui.rs +++ b/examples/ui/ui.rs @@ -112,7 +112,7 @@ fn setup(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, size: Size::height(Val::Percent(50.)), - overflow: Overflow::y_hidden(), + overflow: Overflow::clip_y(), ..default() }, background_color: Color::rgb(0.10, 0.10, 0.10).into(), From cf840cefbdb3d67f4608816de512811a52aaf0c0 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 11 Apr 2023 09:48:57 +0100 Subject: [PATCH 12/14] build-templated-pages + fmt --- Cargo.toml | 2 ++ crates/bevy_ui/src/update.rs | 8 +++++--- examples/README.md | 2 +- examples/ui/overflow_debug.rs | 15 ++++++++++++--- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index a9b6830d1b41e..dc4ebc61d3533 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1752,6 +1752,8 @@ path = "examples/ui/overflow.rs" [package.metadata.example.overflow] name = "Overflow" description = "Simple example demonstrating overflow behavior" +category = "UI (User Interface)" +wasm = true [[example]] name = "overflow_debug" diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 89efc6d96b478..1da4395b55196 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -45,7 +45,9 @@ fn update_clipping( if let Some(inherited_clip) = maybe_inherited_clip { // Replace the previous calculated clip with the inherited clipping rect if calculated_clip.clip != inherited_clip { - *calculated_clip = CalculatedClip { clip: inherited_clip }; + *calculated_clip = CalculatedClip { + clip: inherited_clip, + }; } } else { // No inherited clipping rect, remove the component @@ -73,7 +75,7 @@ fn update_clipping( let mut node_rect = node.logical_rect(global_transform); if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; - node_rect.max.x = f32::INFINITY; + node_rect.max.x = f32::INFINITY; } if style.overflow.y == OverflowAxis::Visible { node_rect.min.y = -f32::INFINITY; @@ -87,4 +89,4 @@ fn update_clipping( update_clipping(commands, children_query, node_query, child, children_clip); } } -} \ No newline at end of file +} diff --git a/examples/README.md b/examples/README.md index aabe7dd04aa93..d1f6fde6ea952 100644 --- a/examples/README.md +++ b/examples/README.md @@ -331,7 +331,7 @@ Example | Description [Button](../examples/ui/button.rs) | Illustrates creating and updating a button [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) -[Overflow Debug](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior +[Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs index 9a6c9fb0a9e78..b4d9b4afdf4ba 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow_debug.rs @@ -278,9 +278,18 @@ fn toggle_overflow(keys: Res>, mut containers: Query<&mut Style, if keys.just_pressed(KeyCode::O) { for mut style in &mut containers { style.overflow = match style.overflow { - Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Visible } => Overflow::clip_y(), - Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Clip } => Overflow::clip_x(), - Overflow { x: OverflowAxis::Clip, y: OverflowAxis::Visible } => Overflow::clip(), + Overflow { + x: OverflowAxis::Visible, + y: OverflowAxis::Visible, + } => Overflow::clip_y(), + Overflow { + x: OverflowAxis::Visible, + y: OverflowAxis::Clip, + } => Overflow::clip_x(), + Overflow { + x: OverflowAxis::Clip, + y: OverflowAxis::Visible, + } => Overflow::clip(), _ => Overflow::visible(), }; } From cafed5419d5e226607ead2dabcdd925b2ffc8b45 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Mon, 17 Apr 2023 22:28:53 +0100 Subject: [PATCH 13/14] cargo fmt --- crates/bevy_ui/src/update.rs | 8 +++++--- examples/ui/overflow_debug.rs | 15 ++++++++++++--- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs index 89efc6d96b478..1da4395b55196 100644 --- a/crates/bevy_ui/src/update.rs +++ b/crates/bevy_ui/src/update.rs @@ -45,7 +45,9 @@ fn update_clipping( if let Some(inherited_clip) = maybe_inherited_clip { // Replace the previous calculated clip with the inherited clipping rect if calculated_clip.clip != inherited_clip { - *calculated_clip = CalculatedClip { clip: inherited_clip }; + *calculated_clip = CalculatedClip { + clip: inherited_clip, + }; } } else { // No inherited clipping rect, remove the component @@ -73,7 +75,7 @@ fn update_clipping( let mut node_rect = node.logical_rect(global_transform); if style.overflow.x == OverflowAxis::Visible { node_rect.min.x = -f32::INFINITY; - node_rect.max.x = f32::INFINITY; + node_rect.max.x = f32::INFINITY; } if style.overflow.y == OverflowAxis::Visible { node_rect.min.y = -f32::INFINITY; @@ -87,4 +89,4 @@ fn update_clipping( update_clipping(commands, children_query, node_query, child, children_clip); } } -} \ No newline at end of file +} diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs index 9a6c9fb0a9e78..b4d9b4afdf4ba 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow_debug.rs @@ -278,9 +278,18 @@ fn toggle_overflow(keys: Res>, mut containers: Query<&mut Style, if keys.just_pressed(KeyCode::O) { for mut style in &mut containers { style.overflow = match style.overflow { - Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Visible } => Overflow::clip_y(), - Overflow { x: OverflowAxis::Visible, y: OverflowAxis::Clip } => Overflow::clip_x(), - Overflow { x: OverflowAxis::Clip, y: OverflowAxis::Visible } => Overflow::clip(), + Overflow { + x: OverflowAxis::Visible, + y: OverflowAxis::Visible, + } => Overflow::clip_y(), + Overflow { + x: OverflowAxis::Visible, + y: OverflowAxis::Clip, + } => Overflow::clip_x(), + Overflow { + x: OverflowAxis::Clip, + y: OverflowAxis::Visible, + } => Overflow::clip(), _ => Overflow::visible(), }; } From 48ef0277c47d90e2e665d3bb0dccf9f3a823b36d Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Mon, 17 Apr 2023 22:42:42 +0100 Subject: [PATCH 14/14] build-templated-pages --- Cargo.toml | 2 ++ examples/README.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/Cargo.toml b/Cargo.toml index a10150312c603..1110809061e9a 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1765,6 +1765,8 @@ path = "examples/ui/overflow.rs" [package.metadata.example.overflow] name = "Overflow" description = "Simple example demonstrating overflow behavior" +category = "UI (User Interface)" +wasm = true [[example]] name = "overflow_debug" diff --git a/examples/README.md b/examples/README.md index 8c182014c86f4..c04d30c3307d5 100644 --- a/examples/README.md +++ b/examples/README.md @@ -334,7 +334,7 @@ Example | Description [CSS Grid](../examples/ui/grid.rs) | An example for CSS Grid layout [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) -[Overflow Debug](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior +[Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text