Split UI Overflow by axis

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"

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.),

crates/bevy_ui/src/lib.rs

@@ -95,6 +95,7 @@ impl Plugin for UiPlugin {
  // NOTE: used by Style::aspect_ratio
  .register_type::<Option<f32>>()
  .register_type::<Overflow>()
+ .register_type::<OverflowAxis>()
  .register_type::<PositionType>()
  .register_type::<Size>()
  .register_type::<UiRect>()

crates/bevy_ui/src/ui_node.rs

@@ -581,18 +581,83 @@ 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,
+ }
+ }
+
+ /// 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 {
+ 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;
+
+ /// Overflow is visible on this axis
+ pub const fn is_visible(&self) -> bool {
+ matches!(self, Self::Visible)
+ }
 }
 
-impl Default for Overflow {
+impl Default for OverflowAxis {
  fn default() -> Self {
  Self::DEFAULT
  }

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::{
@@ -35,37 +35,47 @@ fn update_clipping(
  children_query: &Query<&Children>,
  node_query: &mut Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>,
  entity: Entity,
- clip: Option<Rect>,
+ maybe_inherited_clip: Option<Rect>,
 ) {
- 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::<CalculatedClip>();
  }
- (Some(clip), None) => {
- commands.entity(entity).insert(CalculatedClip { clip });
+ (Some(inherited_clip), None) => {
+ commands.entity(entity).insert(CalculatedClip {
+ clip: inherited_clip,
+ });
  }
- (Some(clip), Some(mut old_clip)) => {
- if old_clip.clip != clip {
- *old_clip = CalculatedClip { clip };
+ (Some(inherited_clip), Some(mut calculated_clip)) => {
+ *calculated_clip = CalculatedClip {
+ clip: inherited_clip,
  }
  }
+ _ => {}
  }
 
  // 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);
- Some(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) {
- for child in children.iter().cloned() {
+ for &child in children {
  update_clipping(commands, children_query, node_query, child, children_clip);
  }
  }

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

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<AssetServer>) {
+ 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()
+ });
+ });
+ });
+ }
+ });
+}

examples/ui/ui.rs

@@ -111,7 +111,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
  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(),