Skip to content

Commit

Permalink
Flatten UI Style properties that use Size + remove Size (#8548)
Browse files Browse the repository at this point in the history 
# Objective

- Simplify API and make authoring styles easier

See:
#8540 (comment)

## 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>
  • Loading branch information
@nicoburns @ickshonpe
nicoburns and ickshonpe committed May 16, 2023
1 parent 17f045e commit 08bf1a6
Show file tree
Hide file tree
Showing 25 changed files with 199 additions and 384 deletions.
232 changes: 0 additions & 232 deletions 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.
///
Expand Down Expand Up @@ -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::*;
Expand All @@ -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.);
Expand Down
63 changes: 26 additions & 37 deletions crates/bevy_ui/src/layout/convert.rs
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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),
Expand Down
1 change: 0 additions & 1 deletion crates/bevy_ui/src/lib.rs
View file
Expand Up @@ -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>()
Expand Down

0 comments on commit 08bf1a6

Please sign in to comment.