Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-10 07:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

Flatten UI Style properties that use Size + remove Size (#8548)

Browse source 
# Objective

- Simplify API and make authoring styles easier

See:
https://github.com/bevyengine/bevy/issues/8540#issuecomment-1536177102

## Solution

- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by `width`, `height`, `min_width`, `min_height`, `max_width`,
`max_height`, `row_gap`, and `column_gap` properties

---

## Changelog

- Flattened `Style` properties that have a `Size` value directly into
`Style`

## Migration Guide

- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by the `width`, `height`, `min_width`, `min_height`,
`max_width`, `max_height`, `row_gap`, and `column_gap` properties. Use
the new properties instead.

---------

Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
This commit is contained in:
Nico Burns 2023-05-16 02:36:32 +01:00 committed by GitHub
parent 17f045e2a0
commit 08bf1a6c2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 199 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

232
crates/bevy_ui/src/geometry.rs
View file

@ -1,6 +1,5 @@
use crate::Val;
use bevy_reflect::{FromReflect, Reflect, ReflectFromReflect};
use std::ops::{Div, DivAssign, Mul, MulAssign};
/// A type which is commonly used to define margins, paddings and borders.
///
@ -282,152 +281,6 @@ impl Default for UiRect {
}
}
/// A 2-dimensional area defined by a width and height.
///
/// It is commonly used to define the size of a text or UI element.
#[derive(Copy, Clone, PartialEq, Debug, Reflect, FromReflect)]
#[reflect(FromReflect, PartialEq)]
pub struct Size {
/// The width of the 2-dimensional area.
pub width: Val,
/// The height of the 2-dimensional area.
pub height: Val,
}
impl Size {
pub const DEFAULT: Self = Self::AUTO;
/// Creates a new [`Size`] from a width and a height.
///
/// # Example
///
/// ```
/// # use bevy_ui::{Size, Val};
/// #
/// let size = Size::new(Val::Px(100.0), Val::Px(200.0));
///
/// assert_eq!(size.width, Val::Px(100.0));
/// assert_eq!(size.height, Val::Px(200.0));
/// ```
pub const fn new(width: Val, height: Val) -> Self {
Size { width, height }
}
/// Creates a new [`Size`] where both sides take the given value.
///
/// # Example
///
/// ```
/// # use bevy_ui::{Size, Val};
/// #
/// let size = Size::all(Val::Px(10.));
///
/// assert_eq!(size.width, Val::Px(10.0));
/// assert_eq!(size.height, Val::Px(10.0));
/// ```
pub const fn all(value: Val) -> Self {
Self {
width: value,
height: value,
}
}
/// Creates a new [`Size`] where `width` takes the given value,
/// and `height` is set to [`Val::Auto`].
///
/// # Example
///
/// ```
/// # use bevy_ui::{Size, Val};
/// #
/// let size = Size::width(Val::Px(10.));
///
/// assert_eq!(size.width, Val::Px(10.0));
/// assert_eq!(size.height, Val::Auto);
/// ```
pub const fn width(width: Val) -> Self {
Self {
width,
height: Val::Auto,
}
}
/// Creates a new [`Size`] where `height` takes the given value,
/// and `width` is set to [`Val::Auto`].
///
/// # Example
///
/// ```
/// # use bevy_ui::{Size, Val};
/// #
/// let size = Size::height(Val::Px(10.));
///
/// assert_eq!(size.width, Val::Auto);
/// assert_eq!(size.height, Val::Px(10.));
/// ```
pub const fn height(height: Val) -> Self {
Self {
width: Val::Auto,
height,
}
}
/// Creates a Size where both values are [`Val::Auto`].
pub const AUTO: Self = Self::all(Val::Auto);
}
impl Default for Size {
fn default() -> Self {
Self::DEFAULT
}
}
impl From<(Val, Val)> for Size {
fn from(vals: (Val, Val)) -> Self {
Self {
width: vals.0,
height: vals.1,
}
}
}
impl Mul<f32> for Size {
type Output = Size;
fn mul(self, rhs: f32) -> Self::Output {
Self::Output {
width: self.width * rhs,
height: self.height * rhs,
}
}
}
impl MulAssign<f32> for Size {
fn mul_assign(&mut self, rhs: f32) {
self.width *= rhs;
self.height *= rhs;
}
}
impl Div<f32> for Size {
type Output = Size;
fn div(self, rhs: f32) -> Self::Output {
Self::Output {
width: self.width / rhs,
height: self.height / rhs,
}
}
}
impl DivAssign<f32> for Size {
fn div_assign(&mut self, rhs: f32) {
self.width /= rhs;
self.height /= rhs;
}
}
#[cfg(test)]
mod tests {
use super::*;
@ -446,91 +299,6 @@ mod tests {
assert_eq!(UiRect::default(), UiRect::DEFAULT);
}
#[test]
fn test_size_from() {
let size: Size = (Val::Px(20.), Val::Px(30.)).into();
assert_eq!(
size,
Size {
width: Val::Px(20.),
height: Val::Px(30.),
}
);
}
#[test]
fn test_size_mul() {
assert_eq!(Size::all(Val::Px(10.)) * 2., Size::all(Val::Px(20.)));
let mut size = Size::all(Val::Px(10.));
size *= 2.;
assert_eq!(size, Size::all(Val::Px(20.)));
}
#[test]
fn test_size_div() {
assert_eq!(
Size::new(Val::Px(20.), Val::Px(20.)) / 2.,
Size::new(Val::Px(10.), Val::Px(10.))
);
let mut size = Size::new(Val::Px(20.), Val::Px(20.));
size /= 2.;
assert_eq!(size, Size::new(Val::Px(10.), Val::Px(10.)));
}
#[test]
fn test_size_all() {
let length = Val::Px(10.);
assert_eq!(
Size::all(length),
Size {
width: length,
height: length
}
);
}
#[test]
fn test_size_width() {
let width = Val::Px(10.);
assert_eq!(
Size::width(width),
Size {
width,
..Default::default()
}
);
}
#[test]
fn test_size_height() {
let height = Val::Px(7.);
assert_eq!(
Size::height(height),
Size {
height,
..Default::default()
}
);
}
#[test]
fn size_default_equals_const_default() {
assert_eq!(
Size::default(),
Size {
width: Val::Auto,
height: Val::Auto
}
);
assert_eq!(Size::default(), Size::DEFAULT);
}
#[test]
fn test_uirect_axes() {
let x = Val::Px(1.);

63
crates/bevy_ui/src/layout/convert.rs
View file

@ -3,8 +3,8 @@ use taffy::style_helpers;
use crate::{
AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Size, Style,
UiRect, Val,
MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Style, UiRect,
Val,
};
use super::LayoutContext;
@ -63,15 +63,6 @@ impl UiRect {
}
}
impl Size {
fn map_to_taffy_size<T>(self, map_fn: impl Fn(Val) -> T) -> taffy::geometry::Size<T> {
taffy::geometry::Size {
width: map_fn(self.width),
height: map_fn(self.height),
}
}
}
pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style {
taffy::style::Style {
display: style.display.into(),
@ -102,17 +93,23 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
flex_grow: style.flex_grow,
flex_shrink: style.flex_shrink,
flex_basis: style.flex_basis.into_dimension(context),
size: style.size.map_to_taffy_size(|s| s.into_dimension(context)),
min_size: style
.min_size
.map_to_taffy_size(|s| s.into_dimension(context)),
max_size: style
.max_size
.map_to_taffy_size(|s| s.into_dimension(context)),
size: taffy::prelude::Size {
width: style.width.into_dimension(context),
height: style.height.into_dimension(context),
},
min_size: taffy::prelude::Size {
width: style.min_width.into_dimension(context),
height: style.min_height.into_dimension(context),
},
max_size: taffy::prelude::Size {
width: style.max_width.into_dimension(context),
height: style.max_height.into_dimension(context),
},
aspect_ratio: style.aspect_ratio,
gap: style
.gap
.map_to_taffy_size(|s| s.into_length_percentage(context)),
gap: taffy::prelude::Size {
width: style.column_gap.into_length_percentage(context),
height: style.row_gap.into_length_percentage(context),
},
grid_auto_flow: style.grid_auto_flow.into(),
grid_template_rows: style
.grid_template_rows
@ -439,24 +436,16 @@ mod tests {
flex_grow: 1.,
flex_shrink: 0.,
flex_basis: Val::Px(0.),
size: Size {
width: Val::Px(0.),
height: Val::Auto,
},
min_size: Size {
width: Val::Px(0.),
height: Val::Percent(0.),
},
max_size: Size {
width: Val::Auto,
height: Val::Px(0.),
},
width: Val::Px(0.),
height: Val::Auto,
min_width: Val::Px(0.),
min_height: Val::Percent(0.),
max_width: Val::Auto,
max_height: Val::Px(0.),
aspect_ratio: None,
overflow: crate::Overflow::clip(),
gap: Size {
width: Val::Px(0.),
height: Val::Percent(0.),
},
column_gap: Val::Px(0.),
row_gap: Val::Percent(0.),
grid_auto_flow: GridAutoFlow::ColumnDense,
grid_template_rows: vec![
GridTrack::px(10.0),

1
crates/bevy_ui/src/lib.rs
View file

@ -109,7 +109,6 @@ impl Plugin for UiPlugin {
.register_type::<Overflow>()
.register_type::<OverflowAxis>()
.register_type::<PositionType>()
.register_type::<Size>()
.register_type::<UiRect>()
.register_type::<Style>()
.register_type::<BackgroundColor>()

60
crates/bevy_ui/src/ui_node.rs
View file

@ -1,4 +1,4 @@
use crate::{Size, UiRect};
use crate::UiRect;
use bevy_asset::Handle;
use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
use bevy_math::{Rect, Vec2};
@ -351,32 +351,35 @@ pub struct Style {
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>
pub bottom: Val,
/// The ideal size of the node
/// The ideal width of the node. `width` is used when it is within the bounds defined by `min_width` and `max_width`.
///
/// `size.width` is used when it is within the bounds defined by `min_size.width` and `max_size.width`.
/// `size.height` is used when it is within the bounds defined by `min_size.height` and `max_size.height`.
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/width>
pub width: Val,
/// The ideal height of the node. `height` is used when it is within the bounds defined by `min_height` and `max_height`.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/width> <br />
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/height>
pub size: Size,
pub height: Val,
/// The minimum size of the node
/// The minimum width of the node. `min_width` is used if it is greater than either `width` and/or `max_width`.
///
/// `min_size.width` is used if it is greater than either `size.width` or `max_size.width`, or both.
/// `min_size.height` is used if it is greater than either `size.height` or `max_size.height`, or both.
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-width>
pub min_width: Val,
/// The minimum height of the node. `min_height` is used if it is greater than either `height` and/or `max_height`.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-width> <br />
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-height>
pub min_size: Size,
pub min_height: Val,
/// The maximum size of the node
/// The maximum width of the node. `max_width` is used if it is within the bounds defined by `min_width` and `width`.
///
/// `max_size.width` is used if it is within the bounds defined by `min_size.width` and `size.width`.
/// `max_size.height` is used if it is within the bounds defined by `min_size.height` and `size.height.
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-width>
pub max_width: Val,
/// The maximum height of the node. `max_height` is used if it is within the bounds defined by `min_height` and `height`.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-width> <br />
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-height>
pub max_size: Size,
pub max_height: Val,
/// The aspect ratio of the node (defined as `width / height`)
///
@ -521,12 +524,19 @@ pub struct Style {
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis>
pub flex_basis: Val,
/// The size of the gutters between items in flexbox layout or rows/columns in a grid layout
/// The size of the gutters between items in a vertical flexbox layout or between rows in a grid layout
///
/// Note: Values of `Val::Auto` are not valid and are treated as zero.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/gap>
pub gap: Size,
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>
pub row_gap: Val,
/// The size of the gutters between items in a horizontal flexbox layout or between column in a grid layout
///
/// Note: Values of `Val::Auto` are not valid and are treated as zero.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>
pub column_gap: Val,
/// Controls whether automatically placed grid items are placed row-wise or column-wise. And whether the sparse or dense packing algorithm is used.
/// Only affect Grid layouts
@ -591,12 +601,16 @@ impl Style {
flex_grow: 0.0,
flex_shrink: 1.0,
flex_basis: Val::Auto,
size: Size::AUTO,
min_size: Size::AUTO,
max_size: Size::AUTO,
width: Val::Auto,
height: Val::Auto,
min_width: Val::Auto,
min_height: Val::Auto,
max_width: Val::Auto,
max_height: Val::Auto,
aspect_ratio: None,
overflow: Overflow::DEFAULT,
gap: Size::all(Val::Px(0.0)),
row_gap: Val::Px(0.0),
column_gap: Val::Px(0.0),
grid_auto_flow: GridAutoFlow::DEFAULT,
grid_template_rows: Vec::new(),
grid_template_columns: Vec::new(),

2
examples/ecs/apply_system_buffers.rs
View file

@ -69,7 +69,7 @@ fn setup(mut commands: Commands) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
flex_direction: FlexDirection::Column,

5
examples/ecs/state.rs
View file

@ -53,7 +53,7 @@ fn setup_menu(mut commands: Commands) {
.spawn(NodeBundle {
style: Style {
// center button
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
@ -64,7 +64,8 @@ fn setup_menu(mut commands: Commands) {
parent
.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
width: Val::Px(150.),
height: Val::Px(65.),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text

2
examples/games/alien_cake_addict.rs
View file

@ -388,7 +388,7 @@ fn display_score(mut commands: Commands, game: Res<Game>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()

35
examples/games/game_menu.rs
View file

@ -85,7 +85,7 @@ mod splash {
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
..default()
},
..default()
@ -96,7 +96,7 @@ mod splash {
parent.spawn(ImageBundle {
style: Style {
// This will set the logo to be 200px wide, and auto adjust its height
size: Size::new(Val::Px(200.0), Val::Auto),
width: Val::Px(200.0),
..default()
},
image: UiImage::new(icon),
@ -152,7 +152,8 @@ mod game {
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
// center children
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
@ -397,14 +398,15 @@ mod menu {
fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Common style for all buttons on the screen
let button_style = Style {
size: Size::new(Val::Px(250.0), Val::Px(65.0)),
width: Val::Px(250.0),
height: Val::Px(65.0),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
};
let button_icon_style = Style {
size: Size::new(Val::Px(30.0), Val::Auto),
width: Val::Px(30.0),
// This takes the icons out of the flexbox flow, to be positioned exactly
position_type: PositionType::Absolute,
// The icon will be close to the left border of the button
@ -422,7 +424,7 @@ mod menu {
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -529,7 +531,8 @@ mod menu {
fn settings_menu_setup(mut commands: Commands) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
width: Val::Px(200.0),
height: Val::Px(65.0),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
@ -546,7 +549,7 @@ mod menu {
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -594,7 +597,8 @@ mod menu {
fn display_settings_menu_setup(mut commands: Commands, display_quality: Res<DisplayQuality>) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
width: Val::Px(200.0),
height: Val::Px(65.0),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
@ -610,7 +614,7 @@ mod menu {
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -656,7 +660,8 @@ mod menu {
] {
let mut entity = parent.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
width: Val::Px(150.0),
height: Val::Px(65.0),
..button_style.clone()
},
background_color: NORMAL_BUTTON.into(),
@ -692,7 +697,8 @@ mod menu {
fn sound_settings_menu_setup(mut commands: Commands, volume: Res<Volume>) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
width: Val::Px(200.0),
height: Val::Px(65.0),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
@ -708,7 +714,7 @@ mod menu {
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -746,7 +752,8 @@ mod menu {
for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
let mut entity = parent.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(30.0), Val::Px(65.0)),
width: Val::Px(30.0),
height: Val::Px(65.0),
..button_style.clone()
},
background_color: NORMAL_BUTTON.into(),

5
examples/stress_tests/many_buttons.rs
View file

@ -78,7 +78,7 @@ fn setup(mut commands: Commands) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.),
..default()
},
..default()
@ -106,7 +106,8 @@ fn spawn_button(
let mut builder = commands.spawn((
ButtonBundle {
style: Style {
size: Size::new(Val::Percent(width), Val::Percent(width)),
width: Val::Percent(width),
height: Val::Percent(width),
bottom: Val::Percent(100.0 / total * i as f32),
left: Val::Percent(100.0 / total * j as f32),
align_items: AlignItems::Center,

2
examples/stress_tests/many_glyphs.rs
View file

@ -63,7 +63,7 @@ fn setup(mut commands: Commands) {
commands.spawn(TextBundle {
text: text.clone(),
style: Style {
size: Size::width(Val::Px(1000.)),
width: Val::Px(1000.),
..Default::default()
},
..Default::default()

5
examples/ui/button.rs
View file

@ -49,7 +49,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -60,7 +60,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
width: Val::Px(150.0),
height: Val::Px(65.0),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text

8
examples/ui/flex_layout.rs
View file

@ -26,7 +26,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
.spawn(NodeBundle {
style: Style {
// fill the entire window
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center,
..Default::default()
@ -65,7 +65,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
builder
.spawn(NodeBundle {
style: Style {
min_size: Size::new(Val::Px(850.), Val::Px(1020.)),
width: Val::Px(850.),
height: Val::Px(1020.),
flex_direction: FlexDirection::Column,
..Default::default()
},
@ -124,7 +125,8 @@ fn spawn_child_node(
flex_direction: FlexDirection::Column,
align_items,
justify_content,
size: Size::all(Val::Px(160.)),
width: Val::Px(160.),
height: Val::Px(160.),
margin: UiRect::all(MARGIN),
..Default::default()
},

10
examples/ui/grid.rs
View file

@ -26,7 +26,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
/// Use the CSS Grid algorithm for laying out this node
display: Display::Grid,
/// Make node fill the entirety it's parent (in this case the window)
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
/// Set the grid to have 2 columns with sizes [min-content, minmax(0, 1fr)]
/// - The first column will size to the size of it's contents
/// - The second column will take up the remaining available space
@ -67,7 +68,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
.spawn(NodeBundle {
style: Style {
/// Make the height of the node fill its parent
size: Size::height(Val::Percent(100.0)),
height: Val::Percent(100.0),
/// Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
/// As the height is set explicitly, this means the width will adjust to match the height
aspect_ratio: Some(1.0),
@ -82,7 +83,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
/// This creates 4 exactly evenly sized rows
grid_template_rows: RepeatedGridTrack::flex(4, 1.0),
/// Set a 12px gap/gutter between rows and columns
gap: Size::all(Val::Px(12.0)),
row_gap: Val::Px(12.0),
column_gap: Val::Px(12.0),
..default()
},
background_color: BackgroundColor(Color::DARK_GRAY),
@ -130,7 +132,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
// can be top-aligned. Normally you'd use flexbox for this, but this is the CSS Grid example so we're using grid.
grid_template_rows: vec![GridTrack::auto(), GridTrack::auto(), GridTrack::fr(1.0)],
// Add a 10px gap between rows
gap: Size::height(Val::Px(10.)),
row_gap: Val::Px(10.),
..default()
},
background_color: BackgroundColor(Color::BLACK),

8
examples/ui/overflow.rs
View file

@ -27,7 +27,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
size: Size::width(Val::Percent(100.)),
width: Val::Percent(100.),
..Default::default()
},
background_color: Color::ANTIQUE_WHITE.into(),
@ -71,7 +71,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Px(100.)),
width: Val::Px(100.),
height: Val::Px(100.),
padding: UiRect {
left: Val::Px(25.),
top: Val::Px(25.),
@ -87,7 +88,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent.spawn(ImageBundle {
image: UiImage::new(image.clone()),
style: Style {
min_size: Size::all(Val::Px(100.)),
min_width: Val::Px(100.),
min_height: Val::Px(100.),
..Default::default()
},
background_color: Color::WHITE.into(),

23
examples/ui/overflow_debug.rs
View file

@ -86,7 +86,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.)),
width: Val::Percent(100.),
height: Val::Percent(100.),
flex_direction: FlexDirection::Column,
..default()
},
@ -96,7 +97,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::height(Val::Px(32.)),
height: Val::Px(32.),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -149,7 +150,7 @@ fn spawn_row(parent: &mut ChildBuilder, spawn_children: impl FnOnce(&mut ChildBu
parent
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(50.)),
width: Val::Percent(50.),
align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceEvenly,
..default()
@ -168,7 +169,7 @@ fn spawn_image(
parent.spawn(ImageBundle {
image: UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
style: Style {
size: Size::height(Val::Px(100.)),
height: Val::Px(100.),
position_type: PositionType::Absolute,
top: Val::Px(-50.),
left: Val::Px(-200.),
@ -209,7 +210,8 @@ fn spawn_container(
.spawn((
NodeBundle {
style: Style {
size: Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
width: Val::Px(CONTAINER_SIZE),
height: Val::Px(CONTAINER_SIZE),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
overflow: Overflow::clip(),
@ -304,10 +306,13 @@ fn next_container_size(
for (mut style, mut container) in &mut containers {
container.0 = (container.0 + 1) % 3;
style.size = match container.0 {
1 => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(30.)),
2 => Size::new(Val::Px(30.), Val::Px(CONTAINER_SIZE)),
_ => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
style.width = match container.0 {
2 => Val::Px(30.),
_ => Val::Px(CONTAINER_SIZE),
};
style.height = match container.0 {
1 => Val::Px(30.),
_ => Val::Px(CONTAINER_SIZE),
};
}
}

6
examples/ui/relative_cursor_position.rs
View file

@ -18,7 +18,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.)),
width: Val::Percent(100.),
height: Val::Percent(100.),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
flex_direction: FlexDirection::Column,
@ -30,7 +31,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Px(250.0)),
width: Val::Px(250.),
height: Val::Px(250.),
margin: UiRect::bottom(Val::Px(15.)),
..default()
},

15
examples/ui/size_constraints.rs
View file

@ -123,7 +123,8 @@ fn spawn_bar(parent: &mut ChildBuilder) {
.spawn(NodeBundle {
style: Style {
align_items: AlignItems::Stretch,
size: Size::new(Val::Percent(100.), Val::Px(100.)),
width: Val::Percent(100.),
height: Val::Px(100.),
padding: UiRect::all(Val::Px(4.)),
..Default::default()
},
@ -181,8 +182,8 @@ fn spawn_button_row(parent: &mut ChildBuilder, constraint: Constraint, text_styl
parent
.spawn(NodeBundle {
style: Style {
min_size: Size::width(Val::Px(200.)),
max_size: Size::width(Val::Px(200.)),
min_width: Val::Px(200.),
max_width: Val::Px(200.),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..Default::default()
@ -259,7 +260,7 @@ fn spawn_button(
parent
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Px(100.)),
width: Val::Px(100.),
justify_content: JustifyContent::Center,
..Default::default()
},
@ -311,13 +312,13 @@ fn update_buttons(
style.flex_basis = value.0;
}
Constraint::Width => {
style.size.width = value.0;
style.width = value.0;
}
Constraint::MinWidth => {
style.min_size.width = value.0;
style.min_width = value.0;
}
Constraint::MaxWidth => {
style.max_size.width = value.0;
style.max_width = value.0;
}
}
}

7
examples/ui/text_debug.rs
View file

@ -56,7 +56,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
position_type: PositionType::Absolute,
top: Val::Px(5.0),
right: Val::Px(15.0),
max_size: Size::width(Val::Px(400.)),
max_width: Val::Px(400.),
..default()
})
);
@ -127,10 +127,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
position_type: PositionType::Absolute,
bottom: Val::Px(5.0),
left: Val::Px(15.0),
size: Size {
width: Val::Px(200.0),
..default()
},
width: Val::Px(200.0),
..default()
}),
);

8
examples/ui/text_wrap_debug.rs
View file

@ -25,7 +25,7 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
size: Size::new(Val::Percent(100.), Val::Percent(100.)),
width: Val::Percent(100.),
..Default::default()
},
background_color: Color::BLACK.into(),
@ -40,7 +40,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
flex_direction: FlexDirection::Row,
justify_content: JustifyContent::SpaceAround,
align_items: AlignItems::Center,
size: Size::new(Val::Percent(100.), Val::Percent(50.)),
width: Val::Percent(100.),
height: Val::Percent(50.),
..Default::default()
},
..Default::default()
@ -63,7 +64,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
style: Style {
justify_content: justification,
flex_direction: FlexDirection::Column,
size: Size::new(Val::Percent(16.), Val::Percent(95.)),
width: Val::Percent(16.),
height: Val::Percent(95.),
overflow: Overflow::clip(),
..Default::default()
},

8
examples/ui/transparency_ui.rs
View file

@ -19,7 +19,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.0)),
width: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceAround,
..default()
@ -30,7 +30,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
width: Val::Px(150.0),
height: Val::Px(65.0),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
@ -55,7 +56,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
width: Val::Px(150.0),
height: Val::Px(65.0),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()

39
examples/ui/ui.rs
View file

@ -28,7 +28,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
justify_content: JustifyContent::SpaceBetween,
..default()
},
@ -39,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Px(200.)),
width: Val::Px(200.),
border: UiRect::all(Val::Px(2.)),
..default()
},
@ -51,7 +52,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.)),
width: Val::Percent(100.),
..default()
},
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
@ -86,7 +87,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
size: Size::width(Val::Px(200.)),
width: Val::Px(200.),
..default()
},
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
@ -111,7 +112,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
style: Style {
flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch,
size: Size::height(Val::Percent(50.)),
height: Val::Percent(50.),
overflow: Overflow::clip_y(),
..default()
},
@ -156,7 +157,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Px(200.)),
width: Val::Px(200.0),
height: Val::Px(200.0),
position_type: PositionType::Absolute,
left: Val::Px(210.),
bottom: Val::Px(10.),
@ -169,7 +171,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
.with_children(|parent| {
parent.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
..default()
},
background_color: Color::rgb(0.8, 0.8, 1.).into(),
@ -180,7 +183,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
@ -192,7 +196,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Px(100.)),
width: Val::Px(100.0),
height: Val::Px(100.0),
..default()
},
background_color: Color::rgb(1.0, 0.0, 0.).into(),
@ -202,7 +207,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent.spawn(NodeBundle {
style: Style {
// Take the size of the parent node.
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
left: Val::Px(20.),
bottom: Val::Px(20.),
@ -213,7 +219,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
});
parent.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
left: Val::Px(40.),
bottom: Val::Px(40.),
@ -224,7 +231,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
});
parent.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
left: Val::Px(60.),
bottom: Val::Px(60.),
@ -236,7 +244,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// alpha test
parent.spawn(NodeBundle {
style: Style {
size: Size::all(Val::Percent(100.)),
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
left: Val::Px(80.),
bottom: Val::Px(80.),
@ -251,7 +260,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.)),
width: Val::Percent(100.0),
position_type: PositionType::Absolute,
justify_content: JustifyContent::Center,
align_items: AlignItems::FlexStart,
@ -265,7 +274,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
parent
.spawn(ImageBundle {
style: Style {
size: Size::width(Val::Px(500.0)),
width: Val::Px(500.0),
..default()
},
..default()

12
examples/ui/ui_scaling.rs
View file

@ -36,7 +36,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
width: Val::Percent(50.0),
height: Val::Percent(50.0),
position_type: PositionType::Absolute,
left: Val::Percent(25.),
top: Val::Percent(25.),
@ -51,7 +52,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Px(40.), Val::Px(40.)),
width: Val::Px(40.0),
height: Val::Px(40.0),
..default()
},
background_color: Color::RED.into(),
@ -62,7 +64,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
});
parent.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(15.), Val::Percent(15.)),
width: Val::Percent(15.0),
height: Val::Percent(15.0),
..default()
},
background_color: Color::BLUE.into(),
@ -70,7 +73,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
});
parent.spawn(ImageBundle {
style: Style {
size: Size::new(Val::Px(30.0), Val::Px(30.0)),
width: Val::Px(30.0),
height: Val::Px(30.0),
..default()
},
image: asset_server.load("branding/icon.png").into(),

20
examples/ui/z_index.rs
View file

@ -22,7 +22,7 @@ fn setup(mut commands: Commands) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::width(Val::Percent(100.0)),
width: Val::Percent(100.),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
@ -34,7 +34,8 @@ fn setup(mut commands: Commands) {
.spawn(NodeBundle {
background_color: Color::GRAY.into(),
style: Style {
size: Size::new(Val::Px(180.0), Val::Px(100.0)),
width: Val::Px(180.0),
height: Val::Px(100.0),
..default()
},
..default()
@ -47,7 +48,8 @@ fn setup(mut commands: Commands) {
position_type: PositionType::Absolute,
left: Val::Px(10.0),
bottom: Val::Px(40.0),
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
width: Val::Px(100.0),
height: Val::Px(50.0),
..default()
},
..default()
@ -62,7 +64,8 @@ fn setup(mut commands: Commands) {
position_type: PositionType::Absolute,
left: Val::Px(45.0),
bottom: Val::Px(30.0),
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
width: Val::Px(100.),
height: Val::Px(50.),
..default()
},
..default()
@ -77,7 +80,8 @@ fn setup(mut commands: Commands) {
position_type: PositionType::Absolute,
left: Val::Px(70.0),
bottom: Val::Px(20.0),
size: Size::new(Val::Px(100.0), Val::Px(75.0)),
width: Val::Px(100.),
height: Val::Px(75.),
..default()
},
..default()
@ -93,7 +97,8 @@ fn setup(mut commands: Commands) {
position_type: PositionType::Absolute,
left: Val::Px(15.0),
bottom: Val::Px(10.0),
size: Size::new(Val::Px(100.0), Val::Px(60.0)),
width: Val::Px(100.),
height: Val::Px(60.),
..default()
},
..default()
@ -109,7 +114,8 @@ fn setup(mut commands: Commands) {
position_type: PositionType::Absolute,
left: Val::Px(-15.0),
bottom: Val::Px(-15.0),
size: Size::new(Val::Px(100.0), Val::Px(125.0)),
width: Val::Px(100.),
height: Val::Px(125.),
..default()
},
..default()

5
examples/window/scale_factor_override.rs
View file

@ -27,7 +27,7 @@ fn setup(mut commands: Commands) {
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.0),
justify_content: JustifyContent::SpaceBetween,
..default()
},
@ -38,7 +38,8 @@ fn setup(mut commands: Commands) {
parent
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
width: Val::Px(200.0),
height: Val::Percent(100.0),
border: UiRect::all(Val::Px(2.0)),
..default()
},

2
examples/window/window_resizing.rs
View file

@ -36,7 +36,7 @@ fn setup_ui(mut cmd: Commands) {
// Node that fills entire background
cmd.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
width: Val::Percent(100.),
..default()
},
..default()