forked from bevyengine/bevy
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split UI
Overflow
by axis (bevyengine#8095)
# Objective Split the UI overflow enum so that overflow can be set for each axis separately. ## Solution Change `Overflow` from an enum to a struct with `x` and `y` `OverflowAxis` fields, where `OverflowAxis` is an enum with `Clip` and `Visible` variants. Modify `update_clipping` to calculate clipping for each axis separately. If only one axis is clipped, the other axis is given infinite bounds. <img width="642" alt="overflow" src="https://user-images.githubusercontent.com/27962798/227592983-568cf76f-7e40-48c4-a511-43c886f5e431.PNG"> --- ## Changelog * Split the UI overflow implementation so overflow can be set for each axis separately. * Added the enum `OverflowAxis` with `Clip` 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 `Clip` and `Visible` variants. * Added `Overflow` helper methods `clip_x()` and `clip_y()` that return a new `Overflow` value with the given axis clipped. * Modified `update_clipping` so it calculates clipping for each axis separately. If a node is only clipped on a single axis, the other axis is given `-f32::INFINITY` to `f32::INFINITY` clipping bounds. ## Migration Guide The `Style` property `Overflow` is now a struct with `x` and `y` fields, that allow for per-axis overflow control. Use these helper functions to replace the variants of `Overflow`: * Replace `Overflow::Visible` with `Overflow::visible()` * Replace `Overflow::Hidden` with `Overflow::clip()`
- Loading branch information
Showing
9 changed files
with
226 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
//! 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_systems(Startup, 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, | ||
}; | ||
|
||
let image = asset_server.load("branding/icon.png"); | ||
|
||
commands | ||
.spawn(NodeBundle { | ||
style: Style { | ||
align_items: AlignItems::Center, | ||
justify_content: JustifyContent::Center, | ||
size: Size::width(Val::Percent(100.)), | ||
..Default::default() | ||
}, | ||
background_color: Color::ANTIQUE_WHITE.into(), | ||
..Default::default() | ||
}) | ||
.with_children(|parent| { | ||
for overflow in [ | ||
Overflow::visible(), | ||
Overflow::clip_x(), | ||
Overflow::clip_y(), | ||
Overflow::clip(), | ||
] { | ||
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(ImageBundle { | ||
image: UiImage::new(image.clone()), | ||
style: Style { | ||
min_size: Size::all(Val::Px(100.)), | ||
..Default::default() | ||
}, | ||
background_color: Color::WHITE.into(), | ||
..Default::default() | ||
}); | ||
}); | ||
}); | ||
} | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters