Move Rect to bevy_ui and rename it to UiRect (#4276)

# Objective

- Closes #335.
- Related #4285.
- Part of the splitting process of #3503.

## Solution

- Move `Rect` to `bevy_ui` and rename it to `UiRect`.

## Reasons

- `Rect` is only used in `bevy_ui` and therefore calling it `UiRect` makes the intent clearer.
- We have two types that are called `Rect` currently and it's missleading (see `bevy_sprite::Rect` and #335).
- Discussion in #3503.

## Changelog

### Changed

- The `Rect` type got moved from `bevy_math` to `bevy_ui` and renamed to `UiRect`.

## Migration Guide

- The `Rect` type got renamed to `UiRect`. To migrate you just have to change every occurrence of `Rect` to `UiRect`.

Co-authored-by: KDecay <KDecayMusic@protonmail.com>

crates/bevy_math/Cargo.toml

@@ -10,4 +10,3 @@ keywords = ["bevy"]
 
 [dependencies]
 glam = { version = "0.20.0", features = ["serde", "bytemuck"] }
-bevy_reflect = { path = "../bevy_reflect", version = "0.8.0-dev", features = ["bevy"] }

crates/bevy_math/src/lib.rs

@@ -1,12 +1,9 @@
-mod geometry;
-
-pub use geometry::*;
 pub use glam::*;
 
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        BVec2, BVec3, BVec4, EulerRot, IVec2, IVec3, IVec4, Mat3, Mat4, Quat, Rect, UVec2, UVec3,
-        UVec4, Vec2, Vec3, Vec4,
+        BVec2, BVec3, BVec4, EulerRot, IVec2, IVec3, IVec4, Mat3, Mat4, Quat, UVec2, UVec3, UVec4,
+        Vec2, Vec3, Vec4,
     };
 }

crates/bevy_ui/src/flex/convert.rs

@@ -1,12 +1,11 @@
 use crate::{
     AlignContent, AlignItems, AlignSelf, Direction, Display, FlexDirection, FlexWrap,
-    JustifyContent, PositionType, Size, Style, Val,
+    JustifyContent, PositionType, Size, Style, UiRect, Val,
 };
-use bevy_math::Rect;
 
 pub fn from_rect(
     scale_factor: f64,
-    rect: Rect<Val>,
+    rect: UiRect<Val>,
 ) -> stretch::geometry::Rect<stretch::style::Dimension> {
     stretch::geometry::Rect {
         start: from_val(scale_factor, rect.left),

crates/bevy_ui/src/geometry.rs

@@ -2,6 +2,41 @@ use bevy_math::Vec2;
 use bevy_reflect::Reflect;
 use std::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Sub, SubAssign};
 
+/// A rect, as defined by its "side" locations
+#[derive(Copy, Clone, PartialEq, Debug, Reflect)]
+#[reflect(PartialEq)]
+pub struct UiRect<T: Reflect + PartialEq> {
+    pub left: T,
+    pub right: T,
+    pub top: T,
+    pub bottom: T,
+}
+
+impl<T: Reflect + PartialEq> UiRect<T> {
+    pub fn all(value: T) -> Self
+    where
+        T: Clone,
+    {
+        UiRect {
+            left: value.clone(),
+            right: value.clone(),
+            top: value.clone(),
+            bottom: value,
+        }
+    }
+}
+
+impl<T: Default + Reflect + PartialEq> Default for UiRect<T> {
+    fn default() -> Self {
+        Self {
+            left: Default::default(),
+            right: Default::default(),
+            top: Default::default(),
+            bottom: Default::default(),
+        }
+    }
+}
+
 /// A two dimensional "size" as defined by a width and height
 #[derive(Copy, Clone, PartialEq, Debug, Reflect)]
 #[reflect(PartialEq)]

crates/bevy_ui/src/lib.rs

@@ -29,7 +29,6 @@ use crate::Size;
 use bevy_app::prelude::*;
 use bevy_ecs::schedule::{ParallelSystemDescriptorCoercion, SystemLabel};
 use bevy_input::InputSystem;
-use bevy_math::Rect;
 use bevy_transform::TransformSystem;
 use bevy_window::ModifiesWindows;
 use update::{ui_z_system, update_clipping_system};
@@ -71,7 +70,7 @@ impl Plugin for UiPlugin {
             .register_type::<PositionType>()
             .register_type::<Size<f32>>()
             .register_type::<Size<Val>>()
-            .register_type::<Rect<Val>>()
+            .register_type::<UiRect<Val>>()
             .register_type::<Style>()
             .register_type::<UiColor>()
             .register_type::<UiImage>()

crates/bevy_ui/src/ui_node.rs

@@ -1,7 +1,7 @@
-use crate::Size;
+use crate::{Size, UiRect};
 use bevy_asset::Handle;
 use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
-use bevy_math::{Rect, Vec2};
+use bevy_math::Vec2;
 use bevy_reflect::{Reflect, ReflectDeserialize};
 use bevy_render::{
     color::Color,
@@ -90,13 +90,13 @@ pub struct Style {
     /// How items align according to the main axis
     pub justify_content: JustifyContent,
     /// The position of the node as descrided by its Rect
-    pub position: Rect<Val>,
+    pub position: UiRect<Val>,
     /// The margin of the node
-    pub margin: Rect<Val>,
+    pub margin: UiRect<Val>,
     /// The padding of the node
-    pub padding: Rect<Val>,
+    pub padding: UiRect<Val>,
     /// The border of the node
-    pub border: Rect<Val>,
+    pub border: UiRect<Val>,
     /// Defines how much a flexbox item should grow if there's space available
     pub flex_grow: f32,
     /// How to shrink if there's not enough space available

examples/ecs/state.rs

@@ -40,7 +40,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
                 // center button
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 // horizontally center child text
                 justify_content: JustifyContent::Center,
                 // vertically center child text

examples/games/alien_cake_addict.rs

@@ -165,7 +165,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut game: ResMu
         ),
         style: Style {
             position_type: PositionType::Absolute,
-            position: Rect {
+            position: UiRect {
                 top: Val::Px(5.0),
                 left: Val::Px(5.0),
                 ..default()
@@ -374,7 +374,7 @@ fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: R
     commands
         .spawn_bundle(NodeBundle {
             style: Style {
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..default()

examples/games/breakout.rs

@@ -241,7 +241,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         },
         style: Style {
             position_type: PositionType::Absolute,
-            position: Rect {
+            position: UiRect {
                 top: SCOREBOARD_TEXT_PADDING,
                 left: SCOREBOARD_TEXT_PADDING,
                 ..default()

examples/games/game_menu.rs

@@ -86,7 +86,7 @@ mod splash {
             .spawn_bundle(ImageBundle {
                 style: Style {
                     // This will center the logo
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     // This will set the logo to be 200px wide, and auto adjust its height
                     size: Size::new(Val::Px(200.0), Val::Auto),
                     ..default()
@@ -150,7 +150,7 @@ mod game {
             .spawn_bundle(NodeBundle {
                 style: Style {
                     // This will center the current node
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     // This will display its children in a column, from top to bottom. Unlike
                     // in Flexbox, Bevy origin is on bottom left, so the vertical axis is reversed
                     flex_direction: FlexDirection::ColumnReverse,
@@ -168,7 +168,7 @@ mod game {
                 // Display two lines of text, the second one with the current settings
                 parent.spawn_bundle(TextBundle {
                     style: Style {
-                        margin: Rect::all(Val::Px(50.0)),
+                        margin: UiRect::all(Val::Px(50.0)),
                         ..default()
                     },
                     text: Text::with_section(
@@ -184,7 +184,7 @@ mod game {
                 });
                 parent.spawn_bundle(TextBundle {
                     style: Style {
-                        margin: Rect::all(Val::Px(50.0)),
+                        margin: UiRect::all(Val::Px(50.0)),
                         ..default()
                     },
                     text: Text {
@@ -396,7 +396,7 @@ mod menu {
         // Common style for all buttons on the screen
         let button_style = Style {
             size: Size::new(Val::Px(250.0), Val::Px(65.0)),
-            margin: Rect::all(Val::Px(20.0)),
+            margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
@@ -406,7 +406,7 @@ mod menu {
             // This takes the icons out of the flexbox flow, to be positionned exactly
             position_type: PositionType::Absolute,
             // The icon will be close to the left border of the button
-            position: Rect {
+            position: UiRect {
                 left: Val::Px(10.0),
                 right: Val::Auto,
                 top: Val::Auto,
@@ -423,7 +423,7 @@ mod menu {
         commands
             .spawn_bundle(NodeBundle {
                 style: Style {
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     flex_direction: FlexDirection::ColumnReverse,
                     align_items: AlignItems::Center,
                     ..default()
@@ -436,7 +436,7 @@ mod menu {
                 // Display the game name
                 parent.spawn_bundle(TextBundle {
                     style: Style {
-                        margin: Rect::all(Val::Px(50.0)),
+                        margin: UiRect::all(Val::Px(50.0)),
                         ..default()
                     },
                     text: Text::with_section(
@@ -526,7 +526,7 @@ mod menu {
     fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: Rect::all(Val::Px(20.0)),
+            margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
@@ -540,7 +540,7 @@ mod menu {
         commands
             .spawn_bundle(NodeBundle {
                 style: Style {
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     flex_direction: FlexDirection::ColumnReverse,
                     align_items: AlignItems::Center,
                     ..default()
@@ -609,7 +609,7 @@ mod menu {
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: Rect::all(Val::Px(20.0)),
+            margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
@@ -623,7 +623,7 @@ mod menu {
         commands
             .spawn_bundle(NodeBundle {
                 style: Style {
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     flex_direction: FlexDirection::ColumnReverse,
                     align_items: AlignItems::Center,
                     ..default()
@@ -707,7 +707,7 @@ mod menu {
     ) {
         let button_style = Style {
             size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: Rect::all(Val::Px(20.0)),
+            margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
@@ -721,7 +721,7 @@ mod menu {
         commands
             .spawn_bundle(NodeBundle {
                 style: Style {
-                    margin: Rect::all(Val::Auto),
+                    margin: UiRect::all(Val::Auto),
                     flex_direction: FlexDirection::ColumnReverse,
                     align_items: AlignItems::Center,
                     ..default()

examples/stress_tests/bevymark.rs

@@ -134,7 +134,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             },
             style: Style {
                 position_type: PositionType::Absolute,
-                position: Rect {
+                position: UiRect {
                     top: Val::Px(5.0),
                     left: Val::Px(5.0),
                     ..default()

examples/ui/button.rs

@@ -50,7 +50,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 size: Size::new(Val::Px(150.0), Val::Px(65.0)),
                 // center button
-                margin: Rect::all(Val::Auto),
+                margin: UiRect::all(Val::Auto),
                 // horizontally center child text
                 justify_content: JustifyContent::Center,
                 // vertically center child text

examples/ui/font_atlas_debug.rs

@@ -50,7 +50,7 @@ fn atlas_render_system(
                 image: texture_atlas.texture.clone().into(),
                 style: Style {
                     position_type: PositionType::Absolute,
-                    position: Rect {
+                    position: UiRect {
                         top: Val::Px(0.0),
                         left: Val::Px(512.0 * x_offset),
                         ..default()

examples/ui/text.rs

@@ -33,7 +33,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 align_self: AlignSelf::FlexEnd,
                 position_type: PositionType::Absolute,
-                position: Rect {
+                position: UiRect {
                     bottom: Val::Px(5.0),
                     right: Val::Px(15.0),
                     ..default()

examples/ui/text_debug.rs

@@ -28,7 +28,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
-            position: Rect {
+            position: UiRect {
                 top: Val::Px(5.0),
                 left: Val::Px(15.0),
                 ..default()
@@ -50,7 +50,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
-            position: Rect {
+            position: UiRect {
                 top: Val::Px(5.0),
                 right: Val::Px(15.0),
                 ..default()
@@ -80,7 +80,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 align_self: AlignSelf::FlexEnd,
                 position_type: PositionType::Absolute,
-                position: Rect {
+                position: UiRect {
                     bottom: Val::Px(5.0),
                     right: Val::Px(15.0),
                     ..default()
@@ -147,7 +147,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         style: Style {
             align_self: AlignSelf::FlexEnd,
             position_type: PositionType::Absolute,
-            position: Rect {
+            position: UiRect {
                 bottom: Val::Px(5.0),
                 left: Val::Px(15.0),
                 ..default()