diff --git a/crates/bevy_ui/src/geometry.rs b/crates/bevy_ui/src/geometry.rs index d93771d0fefdc..b6c72ae7192bd 100644 --- a/crates/bevy_ui/src/geometry.rs +++ b/crates/bevy_ui/src/geometry.rs @@ -282,6 +282,30 @@ impl Val { } } +/// All the types that should be able to be used in the [`Val`] enum should implement this trait. +/// +/// Instead of just implementing `Into` a custom trait is added. +/// This is done in order to prevent having to define a default unit, which could lead to confusion especially for newcomers. +pub trait ValNum { + /// Called by the [`Val`] helper functions to convert the implementing type to an `f32` that can + /// be used by [`Val`]. + fn val_num_f32(self) -> f32; +} + +macro_rules! impl_to_val_num { + ($($impl_type:ty),*$(,)?) => { + $( + impl ValNum for $impl_type { + fn val_num_f32(self) -> f32 { + self as f32 + } + } + )* + }; +} + +impl_to_val_num!(f32, f64, i8, i16, i32, i64, u8, u16, u32, u64, usize, isize); + /// Returns a [`Val::Auto`] where the value is automatically determined /// based on the context and other [`Node`](crate::Node) properties. pub const fn auto() -> Val { @@ -289,8 +313,8 @@ pub const fn auto() -> Val { } /// Returns a [`Val::Px`] representing a value in logical pixels. -pub const fn px(value: f32) -> Val { - Val::Px(value) +pub fn px(value: T) -> Val { + Val::Px(value.val_num_f32()) } /// Returns a [`Val::Percent`] representing a percentage of the parent node's length @@ -306,28 +330,28 @@ pub const fn px(value: f32) -> Val { /// - `height` is relative to the parent's height. /// * For `margin`, `padding`, and `border` values: the percentage is relative to the parent's width. /// * For positions, `left` and `right` are relative to the parent's width, while `bottom` and `top` are relative to the parent's height. -pub const fn percent(value: f32) -> Val { - Val::Percent(value) +pub fn percent(value: T) -> Val { + Val::Percent(value.val_num_f32()) } /// Returns a [`Val::Vw`] representing a percentage of the viewport width. -pub const fn vw(value: f32) -> Val { - Val::Vw(value) +pub fn vw(value: T) -> Val { + Val::Vw(value.val_num_f32()) } /// Returns a [`Val::Vh`] representing a percentage of the viewport height. -pub const fn vh(value: f32) -> Val { - Val::Vh(value) +pub fn vh(value: T) -> Val { + Val::Vh(value.val_num_f32()) } /// Returns a [`Val::VMin`] representing a percentage of the viewport's smaller dimension. -pub const fn vmin(value: f32) -> Val { - Val::VMin(value) +pub fn vmin(value: T) -> Val { + Val::VMin(value.val_num_f32()) } /// Returns a [`Val::VMax`] representing a percentage of the viewport's larger dimension. -pub const fn vmax(value: f32) -> Val { - Val::VMax(value) +pub fn vmax(value: T) -> Val { + Val::VMax(value.val_num_f32()) } /// A type which is commonly used to define margins, paddings and borders. diff --git a/examples/2d/2d_shapes.rs b/examples/2d/2d_shapes.rs index a77882cd66143..3bc068bdd01ce 100644 --- a/examples/2d/2d_shapes.rs +++ b/examples/2d/2d_shapes.rs @@ -87,8 +87,8 @@ fn setup( Text::new("Press space to toggle wireframes"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/2d/2d_viewport_to_world.rs b/examples/2d/2d_viewport_to_world.rs index f2a52acc87f3d..f6bf9372f939f 100644 --- a/examples/2d/2d_viewport_to_world.rs +++ b/examples/2d/2d_viewport_to_world.rs @@ -150,8 +150,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/2d/bloom_2d.rs b/examples/2d/bloom_2d.rs index 9fb8791ed5ed6..8fe0298246812 100644 --- a/examples/2d/bloom_2d.rs +++ b/examples/2d/bloom_2d.rs @@ -62,8 +62,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/2d/rotation.rs b/examples/2d/rotation.rs index 0ac3540cbc876..8aededae9ca3a 100644 --- a/examples/2d/rotation.rs +++ b/examples/2d/rotation.rs @@ -61,8 +61,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Text::new("Up Arrow: Move Forward\nLeft / Right Arrow: Turn"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/2d/sprite_animation.rs b/examples/2d/sprite_animation.rs index c57fd500bff18..f1890d15f49ad 100644 --- a/examples/2d/sprite_animation.rs +++ b/examples/2d/sprite_animation.rs @@ -94,8 +94,8 @@ fn setup( Text::new("Left Arrow: Animate Left Sprite\nRight Arrow: Animate Right Sprite"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/2d/wireframe_2d.rs b/examples/2d/wireframe_2d.rs index 0f02396a15416..0ae6748e7db41 100644 --- a/examples/2d/wireframe_2d.rs +++ b/examples/2d/wireframe_2d.rs @@ -93,8 +93,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/3d_shapes.rs b/examples/3d/3d_shapes.rs index 552f476d7f9c3..1027181a4f95a 100644 --- a/examples/3d/3d_shapes.rs +++ b/examples/3d/3d_shapes.rs @@ -150,8 +150,8 @@ fn setup( Text::new("Press space to toggle wireframes"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/anisotropy.rs b/examples/3d/anisotropy.rs index edb0e92539564..9804e3ea931e2 100644 --- a/examples/3d/anisotropy.rs +++ b/examples/3d/anisotropy.rs @@ -138,8 +138,8 @@ fn spawn_text(commands: &mut Commands, app_status: &AppStatus) { app_status.create_help_text(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/anti_aliasing.rs b/examples/3d/anti_aliasing.rs index c132d9abf62cc..4ab2c66f58ce5 100644 --- a/examples/3d/anti_aliasing.rs +++ b/examples/3d/anti_aliasing.rs @@ -456,8 +456,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/atmospheric_fog.rs b/examples/3d/atmospheric_fog.rs index 06df19411f6c6..70c1fc2b5528e 100644 --- a/examples/3d/atmospheric_fog.rs +++ b/examples/3d/atmospheric_fog.rs @@ -88,8 +88,8 @@ fn setup_instructions(mut commands: Commands) { commands.spawn((Text::new("Press Spacebar to Toggle Atmospheric Fog.\nPress S to Toggle Directional Light Fog Influence."), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }) ); diff --git a/examples/3d/auto_exposure.rs b/examples/3d/auto_exposure.rs index 62c875dc5dc8a..41d65894eb658 100644 --- a/examples/3d/auto_exposure.rs +++ b/examples/3d/auto_exposure.rs @@ -117,8 +117,8 @@ fn setup( ..default() }, Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), ..default() }, )); @@ -128,8 +128,8 @@ fn setup( commands.spawn((Text::new("Left / Right - Rotate Camera\nC - Toggle Compensation Curve\nM - Toggle Metering Mask\nV - Visualize Metering Mask"), text_font.clone(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }) ); @@ -139,8 +139,8 @@ fn setup( text_font, Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - right: Val::Px(12.0), + top: px(12), + right: px(12), ..default() }, ExampleDisplay, diff --git a/examples/3d/blend_modes.rs b/examples/3d/blend_modes.rs index 95fe522cf0ba8..a96adba733e56 100644 --- a/examples/3d/blend_modes.rs +++ b/examples/3d/blend_modes.rs @@ -171,8 +171,8 @@ fn setup( text_style.clone(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }) ); @@ -182,8 +182,8 @@ fn setup( text_style, Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - right: Val::Px(12.0), + top: px(12), + right: px(12), ..default() }, ExampleDisplay, @@ -327,8 +327,8 @@ fn example_control_system( .world_to_viewport(camera_global_transform, world_position) .unwrap(); - node.top = Val::Px(viewport_position.y); - node.left = Val::Px(viewport_position.x); + node.top = px(viewport_position.y); + node.left = px(viewport_position.x); } display.0 = format!( diff --git a/examples/3d/bloom_3d.rs b/examples/3d/bloom_3d.rs index 113fb95b1b3cc..c97de7f3e62ca 100644 --- a/examples/3d/bloom_3d.rs +++ b/examples/3d/bloom_3d.rs @@ -87,8 +87,8 @@ fn setup_scene( Text::default(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/clearcoat.rs b/examples/3d/clearcoat.rs index 9337906c37f87..613e95d4c62ea 100644 --- a/examples/3d/clearcoat.rs +++ b/examples/3d/clearcoat.rs @@ -219,8 +219,8 @@ fn spawn_text(commands: &mut Commands, light_mode: &LightMode) { light_mode.create_help_text(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/clustered_decals.rs b/examples/3d/clustered_decals.rs index 4f1c1b63674e0..b2a2af6fba266 100644 --- a/examples/3d/clustered_decals.rs +++ b/examples/3d/clustered_decals.rs @@ -263,9 +263,9 @@ fn spawn_buttons(commands: &mut Commands) { .spawn(Node { flex_direction: FlexDirection::Row, position_type: PositionType::Absolute, - right: Val::Px(10.0), - bottom: Val::Px(10.0), - column_gap: Val::Px(6.0), + right: px(10), + bottom: px(10), + column_gap: px(6), ..default() }) .with_children(|parent| { @@ -304,8 +304,8 @@ fn spawn_help_text(commands: &mut Commands, app_status: &AppStatus) { Text::new(create_help_string(app_status)), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, HelpText, diff --git a/examples/3d/color_grading.rs b/examples/3d/color_grading.rs index 6d6ed6d38d28e..843db37f48b2d 100644 --- a/examples/3d/color_grading.rs +++ b/examples/3d/color_grading.rs @@ -141,9 +141,9 @@ fn add_buttons(commands: &mut Commands, font: &Handle, color_grading: &Col .spawn(Node { flex_direction: FlexDirection::Column, position_type: PositionType::Absolute, - row_gap: Val::Px(6.0), - left: Val::Px(12.0), - bottom: Val::Px(12.0), + row_gap: px(6), + left: px(12), + bottom: px(12), ..default() }) .with_children(|parent| { @@ -172,7 +172,7 @@ fn add_buttons_for_global_controls( parent.spawn(Node::default()).with_children(|parent| { // Add some placeholder text to fill this column. parent.spawn(Node { - width: Val::Px(125.0), + width: px(125), ..default() }); @@ -210,7 +210,7 @@ fn add_buttons_for_section( .with_children(|parent| { // Spawn the label ("Highlights", etc.) add_text(parent, §ion.to_string(), font, Color::WHITE).insert(Node { - width: Val::Px(125.0), + width: px(125), ..default() }); @@ -244,12 +244,12 @@ fn add_button_for_value( .spawn(( Button, Node { - border: UiRect::all(Val::Px(1.0)), - width: Val::Px(200.0), + border: UiRect::all(px(1)), + width: px(200), justify_content: JustifyContent::Center, align_items: AlignItems::Center, - padding: UiRect::axes(Val::Px(12.0), Val::Px(6.0)), - margin: UiRect::right(Val::Px(12.0)), + padding: UiRect::axes(px(12), px(6)), + margin: UiRect::right(px(12)), ..default() }, BorderColor::all(Color::WHITE), @@ -305,8 +305,8 @@ fn add_help_text( }, Node { position_type: PositionType::Absolute, - left: Val::Px(12.0), - top: Val::Px(12.0), + left: px(12), + top: px(12), ..default() }, HelpText, diff --git a/examples/3d/deferred_rendering.rs b/examples/3d/deferred_rendering.rs index fcd2d3af5e6a1..0936721c4c70d 100644 --- a/examples/3d/deferred_rendering.rs +++ b/examples/3d/deferred_rendering.rs @@ -185,8 +185,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/depth_of_field.rs b/examples/3d/depth_of_field.rs index d303ac1b90473..82159963324eb 100644 --- a/examples/3d/depth_of_field.rs +++ b/examples/3d/depth_of_field.rs @@ -93,8 +93,8 @@ fn setup(mut commands: Commands, asset_server: Res, app_settings: R create_text(&app_settings), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/fog.rs b/examples/3d/fog.rs index d4e653368c627..9a5e1315b8575 100644 --- a/examples/3d/fog.rs +++ b/examples/3d/fog.rs @@ -127,8 +127,8 @@ fn setup_instructions(mut commands: Commands) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/generate_custom_mesh.rs b/examples/3d/generate_custom_mesh.rs index b94d0b2f73508..7b4219effbd61 100644 --- a/examples/3d/generate_custom_mesh.rs +++ b/examples/3d/generate_custom_mesh.rs @@ -59,8 +59,8 @@ fn setup( Text::new("Controls:\nSpace: Change UVs\nX/Y/Z: Rotate\nR: Reset orientation"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/irradiance_volumes.rs b/examples/3d/irradiance_volumes.rs index 00da6a3fdef82..9b163af46101e 100644 --- a/examples/3d/irradiance_volumes.rs +++ b/examples/3d/irradiance_volumes.rs @@ -293,8 +293,8 @@ fn spawn_text(commands: &mut Commands, app_status: &AppStatus) { app_status.create_text(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/light_textures.rs b/examples/3d/light_textures.rs index acabd2ca1d138..dc1722b025fed 100644 --- a/examples/3d/light_textures.rs +++ b/examples/3d/light_textures.rs @@ -308,9 +308,9 @@ fn spawn_buttons(commands: &mut Commands) { .spawn(Node { flex_direction: FlexDirection::Row, position_type: PositionType::Absolute, - right: Val::Px(10.0), - bottom: Val::Px(10.0), - column_gap: Val::Px(6.0), + right: px(10), + bottom: px(10), + column_gap: px(6), ..default() }) .with_children(|parent| { @@ -357,8 +357,8 @@ fn spawn_help_text(commands: &mut Commands, app_status: &AppStatus) { Text::new(create_help_string(app_status)), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, HelpText, diff --git a/examples/3d/lighting.rs b/examples/3d/lighting.rs index 47c518cbf2fff..a23a68885abb3 100644 --- a/examples/3d/lighting.rs +++ b/examples/3d/lighting.rs @@ -215,8 +215,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, children![ diff --git a/examples/3d/load_gltf_extras.rs b/examples/3d/load_gltf_extras.rs index e787b121ef523..f9102106c0e0b 100644 --- a/examples/3d/load_gltf_extras.rs +++ b/examples/3d/load_gltf_extras.rs @@ -41,8 +41,8 @@ fn setup(mut commands: Commands, asset_server: Res) { }, Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, ExampleDisplay, diff --git a/examples/3d/mixed_lighting.rs b/examples/3d/mixed_lighting.rs index e2453a6132c76..6c98981510c51 100644 --- a/examples/3d/mixed_lighting.rs +++ b/examples/3d/mixed_lighting.rs @@ -205,8 +205,8 @@ fn spawn_help_text(commands: &mut Commands, app_status: &AppStatus) { create_help_text(app_status), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, HelpText, diff --git a/examples/3d/motion_blur.rs b/examples/3d/motion_blur.rs index 308b2042161f3..f82c81fab3613 100644 --- a/examples/3d/motion_blur.rs +++ b/examples/3d/motion_blur.rs @@ -239,8 +239,8 @@ fn setup_ui(mut commands: Commands) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )) diff --git a/examples/3d/occlusion_culling.rs b/examples/3d/occlusion_culling.rs index ee0c4029b9168..d61356b9bca8c 100644 --- a/examples/3d/occlusion_culling.rs +++ b/examples/3d/occlusion_culling.rs @@ -405,8 +405,8 @@ fn spawn_help_text(commands: &mut Commands) { Text::new(""), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/order_independent_transparency.rs b/examples/3d/order_independent_transparency.rs index c5d5f69cf2928..15fac821b23ce 100644 --- a/examples/3d/order_independent_transparency.rs +++ b/examples/3d/order_independent_transparency.rs @@ -51,8 +51,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, RenderLayers::layer(1), diff --git a/examples/3d/parallax_mapping.rs b/examples/3d/parallax_mapping.rs index b0dd376691f39..7766bfd241567 100644 --- a/examples/3d/parallax_mapping.rs +++ b/examples/3d/parallax_mapping.rs @@ -302,8 +302,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )) diff --git a/examples/3d/pbr.rs b/examples/3d/pbr.rs index 846b70e92681c..4a8dc9757cfe2 100644 --- a/examples/3d/pbr.rs +++ b/examples/3d/pbr.rs @@ -67,8 +67,8 @@ fn setup( }, Node { position_type: PositionType::Absolute, - top: Val::Px(20.0), - left: Val::Px(100.0), + top: px(20), + left: px(100), ..default() }, )); @@ -81,7 +81,7 @@ fn setup( }, Node { position_type: PositionType::Absolute, - top: Val::Px(130.0), + top: px(130), right: Val::ZERO, ..default() }, @@ -99,8 +99,8 @@ fn setup( }, Node { position_type: PositionType::Absolute, - bottom: Val::Px(20.0), - right: Val::Px(20.0), + bottom: px(20), + right: px(20), ..default() }, EnvironmentMapLabel, diff --git a/examples/3d/post_processing.rs b/examples/3d/post_processing.rs index da786e812278e..dbfdfb927e192 100644 --- a/examples/3d/post_processing.rs +++ b/examples/3d/post_processing.rs @@ -124,8 +124,8 @@ fn spawn_text(commands: &mut Commands, app_settings: &AppSettings) { create_help_text(app_settings), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/reflection_probes.rs b/examples/3d/reflection_probes.rs index ae7a9a81a335b..22753d1050139 100644 --- a/examples/3d/reflection_probes.rs +++ b/examples/3d/reflection_probes.rs @@ -171,8 +171,8 @@ fn spawn_text(commands: &mut Commands, app_status: &AppStatus) { app_status.create_text(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/shadow_biases.rs b/examples/3d/shadow_biases.rs index 27941b5d43f1a..8f328e336063c 100644 --- a/examples/3d/shadow_biases.rs +++ b/examples/3d/shadow_biases.rs @@ -96,7 +96,7 @@ fn setup( .spawn(( Node { position_type: PositionType::Absolute, - padding: UiRect::all(Val::Px(5.0)), + padding: UiRect::all(px(5)), ..default() }, BackgroundColor(Color::BLACK.with_alpha(0.75)), diff --git a/examples/3d/specular_tint.rs b/examples/3d/specular_tint.rs index 148f11ba5caf6..154226713201f 100644 --- a/examples/3d/specular_tint.rs +++ b/examples/3d/specular_tint.rs @@ -123,8 +123,8 @@ fn setup( commands.spawn(( Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, app_status.create_text(), diff --git a/examples/3d/split_screen.rs b/examples/3d/split_screen.rs index f708748a6d157..84d36c4ae9e55 100644 --- a/examples/3d/split_screen.rs +++ b/examples/3d/split_screen.rs @@ -86,8 +86,8 @@ fn setup( .spawn(( UiTargetCamera(camera), Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..default() }, )) @@ -96,8 +96,8 @@ fn setup( Text::new(*camera_name), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); @@ -109,13 +109,13 @@ fn setup( parent .spawn(Node { position_type: PositionType::Absolute, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), display: Display::Flex, flex_direction: FlexDirection::Row, justify_content: JustifyContent::SpaceBetween, align_items: AlignItems::Center, - padding: UiRect::all(Val::Px(20.)), + padding: UiRect::all(px(20)), ..default() }) .with_children(|parent| { @@ -130,9 +130,9 @@ fn setup( RotateCamera(direction), Button, Node { - width: Val::Px(40.), - height: Val::Px(40.), - border: UiRect::all(Val::Px(2.)), + width: px(40), + height: px(40), + border: UiRect::all(px(2)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/3d/spotlight.rs b/examples/3d/spotlight.rs index b9c99512adcd8..519f514747991 100644 --- a/examples/3d/spotlight.rs +++ b/examples/3d/spotlight.rs @@ -128,8 +128,8 @@ fn setup( Text::new(INSTRUCTIONS), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/ssao.rs b/examples/3d/ssao.rs index 072c963bef8dd..4d9598c5fbaae 100644 --- a/examples/3d/ssao.rs +++ b/examples/3d/ssao.rs @@ -79,8 +79,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/ssr.rs b/examples/3d/ssr.rs index 0d0c2c561516a..db669a0546f45 100644 --- a/examples/3d/ssr.rs +++ b/examples/3d/ssr.rs @@ -255,8 +255,8 @@ fn spawn_text(commands: &mut Commands, app_settings: &AppSettings) { create_text(app_settings), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/tonemapping.rs b/examples/3d/tonemapping.rs index 0bbd8ac48f64f..8f1ed7f108863 100644 --- a/examples/3d/tonemapping.rs +++ b/examples/3d/tonemapping.rs @@ -89,8 +89,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); @@ -184,7 +184,7 @@ fn setup_image_viewer_scene( TextLayout::new_with_justify(Justify::Center), Node { align_self: AlignSelf::Center, - margin: UiRect::all(Val::Auto), + margin: UiRect::all(auto()), ..default() }, SceneNumber(3), diff --git a/examples/3d/transmission.rs b/examples/3d/transmission.rs index f02c26f976999..ee6480bcb1b9a 100644 --- a/examples/3d/transmission.rs +++ b/examples/3d/transmission.rs @@ -325,8 +325,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, ExampleDisplay, diff --git a/examples/3d/visibility_range.rs b/examples/3d/visibility_range.rs index 0130bcf482558..75f2879275f25 100644 --- a/examples/3d/visibility_range.rs +++ b/examples/3d/visibility_range.rs @@ -161,8 +161,8 @@ fn setup( app_status.create_text(), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/volumetric_fog.rs b/examples/3d/volumetric_fog.rs index c0df929503720..2d15c4b0b4e19 100644 --- a/examples/3d/volumetric_fog.rs +++ b/examples/3d/volumetric_fog.rs @@ -123,8 +123,8 @@ fn setup(mut commands: Commands, asset_server: Res, app_settings: R create_text(&app_settings), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/3d/wireframe.rs b/examples/3d/wireframe.rs index eedee90f962b6..8b73c6c72ab10 100644 --- a/examples/3d/wireframe.rs +++ b/examples/3d/wireframe.rs @@ -103,8 +103,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/animation/animated_mesh_control.rs b/examples/animation/animated_mesh_control.rs index 46bf23ddc5cea..3029722c1aa66 100644 --- a/examples/animation/animated_mesh_control.rs +++ b/examples/animation/animated_mesh_control.rs @@ -93,8 +93,8 @@ fn setup( )), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/animation/animated_ui.rs b/examples/animation/animated_ui.rs index b227fd37a40a9..b0d84bb853726 100644 --- a/examples/animation/animated_ui.rs +++ b/examples/animation/animated_ui.rs @@ -128,10 +128,10 @@ fn setup( // Cover the whole screen, and center contents. Node { position_type: PositionType::Absolute, - top: Val::Px(0.0), - left: Val::Px(0.0), - right: Val::Px(0.0), - bottom: Val::Px(0.0), + top: px(0), + left: px(0), + right: px(0), + bottom: px(0), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs index e511a1bb7faa4..bc4b8b2bdf3a1 100644 --- a/examples/animation/animation_graph.rs +++ b/examples/animation/animation_graph.rs @@ -260,8 +260,8 @@ fn setup_help_text(commands: &mut Commands) { Text::new(HELP_TEXT), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); @@ -291,10 +291,10 @@ fn setup_node_rects(commands: &mut Commands) { let mut container = commands.spawn(( Node { position_type: PositionType::Absolute, - bottom: Val::Px(node_rect.bottom), - left: Val::Px(node_rect.left), - height: Val::Px(node_rect.height), - width: Val::Px(node_rect.width), + bottom: px(node_rect.bottom), + left: px(node_rect.left), + height: px(node_rect.height), + width: px(node_rect.width), align_items: AlignItems::Center, justify_items: JustifyItems::Center, align_content: AlignContent::Center, @@ -302,7 +302,7 @@ fn setup_node_rects(commands: &mut Commands) { ..default() }, BorderColor::all(WHITE), - Outline::new(Val::Px(1.), Val::ZERO, Color::WHITE), + Outline::new(px(1), Val::ZERO, Color::WHITE), )); if let NodeType::Clip(clip) = node_type { @@ -322,10 +322,10 @@ fn setup_node_rects(commands: &mut Commands) { .spawn(( Node { position_type: PositionType::Absolute, - top: Val::Px(0.), - left: Val::Px(0.), - height: Val::Px(node_rect.height), - width: Val::Px(node_rect.width), + top: px(0), + left: px(0), + height: px(node_rect.height), + width: px(node_rect.width), ..default() }, BackgroundColor(DARK_GREEN.into()), @@ -348,11 +348,11 @@ fn setup_node_lines(commands: &mut Commands) { commands.spawn(( Node { position_type: PositionType::Absolute, - bottom: Val::Px(line.bottom), - left: Val::Px(line.left), - height: Val::Px(0.0), - width: Val::Px(line.length), - border: UiRect::bottom(Val::Px(1.0)), + bottom: px(line.bottom), + left: px(line.left), + height: px(0), + width: px(line.length), + border: UiRect::bottom(px(1)), ..default() }, BorderColor::all(WHITE), @@ -363,11 +363,11 @@ fn setup_node_lines(commands: &mut Commands) { commands.spawn(( Node { position_type: PositionType::Absolute, - bottom: Val::Px(line.bottom), - left: Val::Px(line.left), - height: Val::Px(line.length), - width: Val::Px(0.0), - border: UiRect::left(Val::Px(1.0)), + bottom: px(line.bottom), + left: px(line.left), + height: px(line.length), + width: px(0), + border: UiRect::left(px(1)), ..default() }, BorderColor::all(WHITE), @@ -433,8 +433,7 @@ fn update_ui( let mut bg_iter = background_query.iter_many_mut(children); if let Some(mut node) = bg_iter.fetch_next() { // All nodes are the same width, so `NODE_RECTS[0]` is as good as any other. - node.width = - Val::Px(NODE_RECTS[0].width * animation_weights.weights[clip_node.index]); + node.width = px(NODE_RECTS[0].width * animation_weights.weights[clip_node.index]); } // Update the node labels with the current weights. diff --git a/examples/animation/animation_masks.rs b/examples/animation/animation_masks.rs index 613e85eb2fce3..26380000ad7c1 100644 --- a/examples/animation/animation_masks.rs +++ b/examples/animation/animation_masks.rs @@ -161,8 +161,8 @@ fn setup_ui(mut commands: Commands) { Text::new("Click on a button to toggle animations for its associated bones"), Node { position_type: PositionType::Absolute, - left: Val::Px(12.0), - top: Val::Px(12.0), + left: px(12), + top: px(12), ..default() }, )); @@ -172,31 +172,31 @@ fn setup_ui(mut commands: Commands) { .spawn(Node { flex_direction: FlexDirection::Column, position_type: PositionType::Absolute, - row_gap: Val::Px(6.0), - left: Val::Px(12.0), - bottom: Val::Px(12.0), + row_gap: px(6), + left: px(12), + bottom: px(12), ..default() }) .with_children(|parent| { let row_node = Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(6.0), + column_gap: px(6), ..default() }; - add_mask_group_control(parent, "Head", Val::Auto, MASK_GROUP_HEAD); + add_mask_group_control(parent, "Head", auto(), MASK_GROUP_HEAD); parent.spawn(row_node.clone()).with_children(|parent| { add_mask_group_control( parent, "Left Front Leg", - Val::Px(MASK_GROUP_BUTTON_WIDTH), + px(MASK_GROUP_BUTTON_WIDTH), MASK_GROUP_LEFT_FRONT_LEG, ); add_mask_group_control( parent, "Right Front Leg", - Val::Px(MASK_GROUP_BUTTON_WIDTH), + px(MASK_GROUP_BUTTON_WIDTH), MASK_GROUP_RIGHT_FRONT_LEG, ); }); @@ -205,18 +205,18 @@ fn setup_ui(mut commands: Commands) { add_mask_group_control( parent, "Left Hind Leg", - Val::Px(MASK_GROUP_BUTTON_WIDTH), + px(MASK_GROUP_BUTTON_WIDTH), MASK_GROUP_LEFT_HIND_LEG, ); add_mask_group_control( parent, "Right Hind Leg", - Val::Px(MASK_GROUP_BUTTON_WIDTH), + px(MASK_GROUP_BUTTON_WIDTH), MASK_GROUP_RIGHT_HIND_LEG, ); }); - add_mask_group_control(parent, "Tail", Val::Auto, MASK_GROUP_TAIL); + add_mask_group_control(parent, "Tail", auto(), MASK_GROUP_TAIL); }); } @@ -246,7 +246,7 @@ fn add_mask_group_control( parent .spawn(( Node { - border: UiRect::all(Val::Px(1.0)), + border: UiRect::all(px(1)), width, flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, @@ -256,7 +256,7 @@ fn add_mask_group_control( ..default() }, BorderColor::all(Color::WHITE), - BorderRadius::all(Val::Px(3.0)), + BorderRadius::all(px(3)), BackgroundColor(Color::BLACK), )) .with_children(|builder| { @@ -264,7 +264,7 @@ fn add_mask_group_control( .spawn(( Node { border: UiRect::ZERO, - width: Val::Percent(100.0), + width: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, padding: UiRect::ZERO, @@ -277,7 +277,7 @@ fn add_mask_group_control( Text::new(label), label_text_style.clone(), Node { - margin: UiRect::vertical(Val::Px(3.0)), + margin: UiRect::vertical(px(3)), ..default() }, )); @@ -285,11 +285,11 @@ fn add_mask_group_control( builder .spawn(( Node { - width: Val::Percent(100.0), + width: percent(100), flex_direction: FlexDirection::Row, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - border: UiRect::top(Val::Px(1.0)), + border: UiRect::top(px(1)), ..default() }, BorderColor::all(Color::WHITE), @@ -315,7 +315,7 @@ fn add_mask_group_control( Node { flex_grow: 1.0, border: if index > 0 { - UiRect::left(Val::Px(1.0)) + UiRect::left(px(1)) } else { UiRect::ZERO }, @@ -337,7 +337,7 @@ fn add_mask_group_control( TextLayout::new_with_justify(Justify::Center), Node { flex_grow: 1.0, - margin: UiRect::vertical(Val::Px(3.0)), + margin: UiRect::vertical(px(3)), ..default() }, )); diff --git a/examples/animation/easing_functions.rs b/examples/animation/easing_functions.rs index d9006278751a0..6481675104040 100644 --- a/examples/animation/easing_functions.rs +++ b/examples/animation/easing_functions.rs @@ -119,8 +119,8 @@ fn setup(mut commands: Commands) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/app/log_layers_ecs.rs b/examples/app/log_layers_ecs.rs index 75083a22cbd64..0452b3144d737 100644 --- a/examples/app/log_layers_ecs.rs +++ b/examples/app/log_layers_ecs.rs @@ -129,10 +129,10 @@ fn setup(mut commands: Commands) { commands.spawn(( Node { - width: Val::Vw(100.0), - height: Val::Vh(100.0), + width: vw(100), + height: vh(100), flex_direction: FlexDirection::Column, - padding: UiRect::all(Val::Px(12.)), + padding: UiRect::all(px(12)), ..default() }, LogViewerRoot, diff --git a/examples/app/logs.rs b/examples/app/logs.rs index 025c2e80ddcb8..6bc395f33d42f 100644 --- a/examples/app/logs.rs +++ b/examples/app/logs.rs @@ -23,8 +23,8 @@ fn setup(mut commands: Commands) { Text::new("Press P to panic"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/asset/alter_mesh.rs b/examples/asset/alter_mesh.rs index f5447eb0930a8..d62178e10cbc5 100644 --- a/examples/asset/alter_mesh.rs +++ b/examples/asset/alter_mesh.rs @@ -138,8 +138,8 @@ fn spawn_text(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/asset/alter_sprite.rs b/examples/asset/alter_sprite.rs index 1863b2006cb1d..db596ed73ca1a 100644 --- a/examples/asset/alter_sprite.rs +++ b/examples/asset/alter_sprite.rs @@ -97,8 +97,8 @@ fn spawn_text(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/asset/multi_asset_sync.rs b/examples/asset/multi_asset_sync.rs index 83add4ba3c016..ef91c29144615 100644 --- a/examples/asset/multi_asset_sync.rs +++ b/examples/asset/multi_asset_sync.rs @@ -175,8 +175,8 @@ fn setup_ui(mut commands: Commands) { Text::new("Loading...".to_owned()), Node { position_type: PositionType::Absolute, - left: Val::Px(12.0), - top: Val::Px(12.0), + left: px(12), + top: px(12), ..default() }, )); diff --git a/examples/audio/audio_control.rs b/examples/audio/audio_control.rs index 3a6e4a609a5c7..ff2a74388c26e 100644 --- a/examples/audio/audio_control.rs +++ b/examples/audio/audio_control.rs @@ -23,8 +23,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Text::new(""), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, ProgressText, @@ -35,8 +35,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Text::new("-/=: Volume Down/Up\nSpace: Toggle Playback\nM: Toggle Mute"), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/audio/spatial_audio_2d.rs b/examples/audio/spatial_audio_2d.rs index d1bf9316d5df3..cffd0498242c5 100644 --- a/examples/audio/spatial_audio_2d.rs +++ b/examples/audio/spatial_audio_2d.rs @@ -66,8 +66,8 @@ fn setup( Text::new("Up/Down/Left/Right: Move Listener\nSpace: Toggle Emitter Movement"), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/audio/spatial_audio_3d.rs b/examples/audio/spatial_audio_3d.rs index 752cfd359dd3f..b921fe6fcfd10 100644 --- a/examples/audio/spatial_audio_3d.rs +++ b/examples/audio/spatial_audio_3d.rs @@ -68,8 +68,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/camera/2d_on_ui.rs b/examples/camera/2d_on_ui.rs index 3a00f2a254a65..0a97080f28277 100644 --- a/examples/camera/2d_on_ui.rs +++ b/examples/camera/2d_on_ui.rs @@ -30,8 +30,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands.spawn(( // We could also use a `UiTargetCamera` component here instead of the general `IsDefaultUiCamera`. Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), display: Display::Flex, justify_content: JustifyContent::Center, align_items: AlignItems::Center, @@ -40,14 +40,14 @@ fn setup(mut commands: Commands, asset_server: Res) { BackgroundColor(tailwind::ROSE_400.into()), children![( Node { - height: Val::Percent(30.), - width: Val::Percent(20.), - min_height: Val::Px(150.), - min_width: Val::Px(150.), - border: UiRect::all(Val::Px(2.)), + height: percent(30), + width: percent(20), + min_height: px(150), + min_width: px(150), + border: UiRect::all(px(2)), ..default() }, - BorderRadius::all(Val::Percent(25.0)), + BorderRadius::all(percent(25)), BorderColor::all(Color::WHITE), )], )); diff --git a/examples/camera/2d_screen_shake.rs b/examples/camera/2d_screen_shake.rs index 7fb9819446950..f7aa6c2574e54 100644 --- a/examples/camera/2d_screen_shake.rs +++ b/examples/camera/2d_screen_shake.rs @@ -213,8 +213,8 @@ fn setup_instructions(mut commands: Commands) { Text::new("Press space repeatedly to trigger a progressively stronger screen shake"), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/camera/2d_top_down_camera.rs b/examples/camera/2d_top_down_camera.rs index 2ab89c8c3872a..7e7b819318bf1 100644 --- a/examples/camera/2d_top_down_camera.rs +++ b/examples/camera/2d_top_down_camera.rs @@ -53,8 +53,8 @@ fn setup_instructions(mut commands: Commands) { Text::new("Move the light with WASD.\nThe camera will smoothly track the light."), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/camera/camera_orbit.rs b/examples/camera/camera_orbit.rs index d2adcf0804dba..a4d2fafd3001d 100644 --- a/examples/camera/camera_orbit.rs +++ b/examples/camera/camera_orbit.rs @@ -89,8 +89,8 @@ fn instructions(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/camera/first_person_view_model.rs b/examples/camera/first_person_view_model.rs index 86e67faa3e623..304b3bb3c07a0 100644 --- a/examples/camera/first_person_view_model.rs +++ b/examples/camera/first_person_view_model.rs @@ -191,8 +191,8 @@ fn spawn_text(mut commands: Commands) { commands .spawn(Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }) .with_child(Text::new(concat!( diff --git a/examples/camera/projection_zoom.rs b/examples/camera/projection_zoom.rs index 0b44f7010b678..73d47d519787e 100644 --- a/examples/camera/projection_zoom.rs +++ b/examples/camera/projection_zoom.rs @@ -101,8 +101,8 @@ fn instructions(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/dev_tools/fps_overlay.rs b/examples/dev_tools/fps_overlay.rs index 5287df9962d8e..5637706c756ed 100644 --- a/examples/dev_tools/fps_overlay.rs +++ b/examples/dev_tools/fps_overlay.rs @@ -64,8 +64,8 @@ fn setup(mut commands: Commands) { )), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.), - left: Val::Px(12.), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/diagnostics/log_diagnostics.rs b/examples/diagnostics/log_diagnostics.rs index 1a36f9a1f21a6..02cc5af473ba8 100644 --- a/examples/diagnostics/log_diagnostics.rs +++ b/examples/diagnostics/log_diagnostics.rs @@ -92,8 +92,8 @@ fn setup( commands.spawn(( LogDiagnosticsCommands, Node { - top: Val::Px(5.), - left: Val::Px(5.), + top: px(5), + left: px(5), flex_direction: FlexDirection::Column, ..default() }, @@ -199,7 +199,7 @@ fn update_commands( ( Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(5.), + column_gap: px(5), ..default() }, children![ @@ -213,7 +213,7 @@ fn update_commands( ( Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(5.), + column_gap: px(5), ..default() }, children![ @@ -230,7 +230,7 @@ fn update_commands( ( Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(5.), + column_gap: px(5), ..default() }, children![ @@ -247,7 +247,7 @@ fn update_commands( ( Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(5.), + column_gap: px(5), ..default() }, children![ @@ -264,7 +264,7 @@ fn update_commands( ( Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(5.), + column_gap: px(5), ..default() }, children![ diff --git a/examples/ecs/entity_disabling.rs b/examples/ecs/entity_disabling.rs index e5f1b5b1572a2..4036523d7d46a 100644 --- a/examples/ecs/entity_disabling.rs +++ b/examples/ecs/entity_disabling.rs @@ -77,8 +77,8 @@ fn list_all_named_entities( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - right: Val::Px(12.0), + top: px(12), + right: px(12), ..default() }, )); @@ -145,8 +145,8 @@ fn display_instructions(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/ecs/hotpatching_systems.rs b/examples/ecs/hotpatching_systems.rs index c70c0a0ca9222..7dd781fae4004 100644 --- a/examples/ecs/hotpatching_systems.rs +++ b/examples/ecs/hotpatching_systems.rs @@ -60,8 +60,8 @@ fn setup(mut commands: Commands) { commands .spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, flex_direction: FlexDirection::Column, diff --git a/examples/ecs/observers.rs b/examples/ecs/observers.rs index d1055cd3b938c..99e8d75e2aad6 100644 --- a/examples/ecs/observers.rs +++ b/examples/ecs/observers.rs @@ -76,8 +76,8 @@ fn setup(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/ecs/state_scoped.rs b/examples/ecs/state_scoped.rs index 52a01c4d7871c..58f0eb386399e 100644 --- a/examples/ecs/state_scoped.rs +++ b/examples/ecs/state_scoped.rs @@ -42,8 +42,8 @@ fn on_a_enter(mut commands: Commands) { TextColor(Color::srgb(0.5, 0.5, 1.0)), Node { position_type: PositionType::Absolute, - top: Val::Px(0.0), - left: Val::Px(0.0), + top: px(0), + left: px(0), ..default() }, )); @@ -61,8 +61,8 @@ fn on_a_exit(mut commands: Commands) { TextColor(Color::srgb(0.5, 0.5, 1.0)), Node { position_type: PositionType::Absolute, - top: Val::Px(0.0), - left: Val::Px(500.0), + top: px(0), + left: px(500), ..default() }, )); @@ -80,8 +80,8 @@ fn on_b_enter(mut commands: Commands) { TextColor(Color::srgb(0.5, 0.5, 1.0)), Node { position_type: PositionType::Absolute, - top: Val::Px(50.0), - left: Val::Px(0.0), + top: px(50), + left: px(0), ..default() }, )); @@ -99,8 +99,8 @@ fn on_b_exit(mut commands: Commands) { TextColor(Color::srgb(0.5, 0.5, 1.0)), Node { position_type: PositionType::Absolute, - top: Val::Px(50.0), - left: Val::Px(500.0), + top: px(50), + left: px(500), ..default() }, )); diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs index c2dabdd31540c..9176d08103026 100644 --- a/examples/games/alien_cake_addict.rs +++ b/examples/games/alien_cake_addict.rs @@ -186,8 +186,8 @@ fn setup(mut commands: Commands, asset_server: Res, mut game: ResMu TextColor(Color::srgb(0.5, 0.5, 1.0)), Node { position_type: PositionType::Absolute, - top: Val::Px(5.0), - left: Val::Px(5.0), + top: px(5), + left: px(5), ..default() }, )); @@ -392,7 +392,7 @@ fn display_score(mut commands: Commands, game: Res) { commands.spawn(( DespawnOnExitState(GameState::GameOver), Node { - width: Val::Percent(100.), + width: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() diff --git a/examples/games/breakout.rs b/examples/games/breakout.rs index f890d90acfc43..23e82b6959a4a 100644 --- a/examples/games/breakout.rs +++ b/examples/games/breakout.rs @@ -57,7 +57,7 @@ fn main() { stepping::SteppingPlugin::default() .add_schedule(Update) .add_schedule(FixedUpdate) - .at(Val::Percent(35.0), Val::Percent(50.0)), + .at(percent(35), percent(50)), ) .insert_resource(Score(0)) .insert_resource(ClearColor(BACKGROUND_COLOR)) diff --git a/examples/games/contributors.rs b/examples/games/contributors.rs index 3c8accc05c506..24dc1445628d3 100644 --- a/examples/games/contributors.rs +++ b/examples/games/contributors.rs @@ -151,8 +151,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ContributorDisplay, Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )) diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs index 836748fa8b0ca..e8f58bfca91a0 100644 --- a/examples/games/game_menu.rs +++ b/examples/games/game_menu.rs @@ -77,8 +77,8 @@ mod splash { Node { align_items: AlignItems::Center, justify_content: JustifyContent::Center, - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), ..default() }, OnSplashScreen, @@ -86,7 +86,7 @@ mod splash { ImageNode::new(icon), Node { // This will set the logo to be 200px wide, and auto adjust its height - width: Val::Px(200.0), + width: px(200), ..default() }, )], @@ -137,8 +137,8 @@ mod game { ) { commands.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), // center children align_items: AlignItems::Center, justify_content: JustifyContent::Center, @@ -165,14 +165,14 @@ mod game { }, TextColor(TEXT_COLOR), Node { - margin: UiRect::all(Val::Px(50.0)), + margin: UiRect::all(px(50)), ..default() }, ), ( Text::default(), Node { - margin: UiRect::all(Val::Px(50.0)), + margin: UiRect::all(px(50)), ..default() }, children![ @@ -372,19 +372,19 @@ mod menu { fn main_menu_setup(mut commands: Commands, asset_server: Res) { // Common style for all buttons on the screen let button_node = Node { - width: Val::Px(300.0), - height: Val::Px(65.0), - margin: UiRect::all(Val::Px(20.0)), + width: px(300), + height: px(65), + margin: UiRect::all(px(20)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() }; let button_icon_node = Node { - width: Val::Px(30.0), + width: px(30), // 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 - left: Val::Px(10.0), + left: px(10), ..default() }; let button_text_font = TextFont { @@ -398,8 +398,8 @@ mod menu { commands.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -422,7 +422,7 @@ mod menu { }, TextColor(TEXT_COLOR), Node { - margin: UiRect::all(Val::Px(50.0)), + margin: UiRect::all(px(50)), ..default() }, ), @@ -475,9 +475,9 @@ mod menu { fn settings_menu_setup(mut commands: Commands) { let button_node = Node { - width: Val::Px(200.0), - height: Val::Px(65.0), - margin: UiRect::all(Val::Px(20.0)), + width: px(200), + height: px(65), + margin: UiRect::all(px(20)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -493,8 +493,8 @@ mod menu { commands.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -531,9 +531,9 @@ mod menu { fn display_settings_menu_setup(mut commands: Commands, display_quality: Res) { fn button_node() -> Node { Node { - width: Val::Px(200.0), - height: Val::Px(65.0), - margin: UiRect::all(Val::Px(20.0)), + width: px(200), + height: px(65), + margin: UiRect::all(px(20)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -552,8 +552,8 @@ mod menu { let display_quality = *display_quality; commands.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -587,8 +587,8 @@ mod menu { let mut entity = parent.spawn(( Button, Node { - width: Val::Px(150.0), - height: Val::Px(65.0), + width: px(150), + height: px(65), ..button_node() }, BackgroundColor(NORMAL_BUTTON), @@ -620,9 +620,9 @@ mod menu { fn sound_settings_menu_setup(mut commands: Commands, volume: Res) { let button_node = Node { - width: Val::Px(200.0), - height: Val::Px(65.0), - margin: UiRect::all(Val::Px(20.0)), + width: px(200), + height: px(65), + margin: UiRect::all(px(20)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -639,8 +639,8 @@ mod menu { let button_node_clone = button_node.clone(); commands.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -667,8 +667,8 @@ mod menu { let mut entity = parent.spawn(( Button, Node { - width: Val::Px(30.0), - height: Val::Px(65.0), + width: px(30), + height: px(65), ..button_node_clone.clone() }, BackgroundColor(NORMAL_BUTTON), diff --git a/examples/games/loading_screen.rs b/examples/games/loading_screen.rs index 8ca179f55ec81..5f9e4c5c6bd76 100644 --- a/examples/games/loading_screen.rs +++ b/examples/games/loading_screen.rs @@ -247,8 +247,8 @@ fn load_loading_screen(mut commands: Commands) { commands .spawn(( Node { - height: Val::Percent(100.0), - width: Val::Percent(100.0), + height: percent(100), + width: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/games/stepping.rs b/examples/games/stepping.rs index defe44ffdd42f..f1e71bcedbc9a 100644 --- a/examples/games/stepping.rs +++ b/examples/games/stepping.rs @@ -174,7 +174,7 @@ fn build_ui( position_type: PositionType::Absolute, top: state.ui_top, left: state.ui_left, - padding: UiRect::all(Val::Px(10.0)), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(Color::srgba(1.0, 1.0, 1.0, 0.33)), @@ -200,8 +200,8 @@ fn build_stepping_hint(mut commands: Commands) { TextColor(FONT_COLOR), Node { position_type: PositionType::Absolute, - bottom: Val::Px(5.0), - left: Val::Px(5.0), + bottom: px(5), + left: px(5), ..default() }, )); diff --git a/examples/gizmos/2d_gizmos.rs b/examples/gizmos/2d_gizmos.rs index fd6f69610c126..0db7e6ac55a7e 100644 --- a/examples/gizmos/2d_gizmos.rs +++ b/examples/gizmos/2d_gizmos.rs @@ -30,8 +30,8 @@ fn setup(mut commands: Commands) { ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/gizmos/3d_gizmos.rs b/examples/gizmos/3d_gizmos.rs index 09514f365fbd9..d298481d4966d 100644 --- a/examples/gizmos/3d_gizmos.rs +++ b/examples/gizmos/3d_gizmos.rs @@ -88,8 +88,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/gizmos/light_gizmos.rs b/examples/gizmos/light_gizmos.rs index c21b4b94e66e7..1a4dcd1970c96 100644 --- a/examples/gizmos/light_gizmos.rs +++ b/examples/gizmos/light_gizmos.rs @@ -111,8 +111,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); @@ -127,8 +127,8 @@ fn setup( GizmoColorText, Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )) diff --git a/examples/helpers/widgets.rs b/examples/helpers/widgets.rs index 74bb0a0ddefcd..43960138860f9 100644 --- a/examples/helpers/widgets.rs +++ b/examples/helpers/widgets.rs @@ -48,9 +48,9 @@ pub fn main_ui_node() -> Node { Node { flex_direction: FlexDirection::Column, position_type: PositionType::Absolute, - row_gap: Val::Px(6.0), - left: Val::Px(10.0), - bottom: Val::Px(10.0), + row_gap: px(6), + left: px(10), + bottom: px(10), ..default() } } @@ -80,7 +80,7 @@ pub fn spawn_option_button( .spawn(( Button, Node { - border: BUTTON_BORDER.with_left(if is_first { Val::Px(1.0) } else { Val::Px(0.0) }), + border: BUTTON_BORDER.with_left(if is_first { px(1) } else { px(0) }), justify_content: JustifyContent::Center, align_items: AlignItems::Center, padding: BUTTON_PADDING, @@ -91,12 +91,12 @@ pub fn spawn_option_button( .with_left(if is_first { BUTTON_BORDER_RADIUS_SIZE } else { - Val::Px(0.0) + px(0) }) .with_right(if is_last { BUTTON_BORDER_RADIUS_SIZE } else { - Val::Px(0.0) + px(0) }), BackgroundColor(bg_color), )) @@ -129,7 +129,7 @@ pub fn spawn_option_buttons( }) .with_children(|parent| { spawn_ui_text(parent, title, Color::BLACK).insert(Node { - width: Val::Px(125.0), + width: px(125), ..default() }); diff --git a/examples/input/text_input.rs b/examples/input/text_input.rs index a1036d854fdf5..a236c2c188721 100644 --- a/examples/input/text_input.rs +++ b/examples/input/text_input.rs @@ -38,8 +38,8 @@ fn setup_scene(mut commands: Commands, asset_server: Res) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, children![ diff --git a/examples/math/bounding_2d.rs b/examples/math/bounding_2d.rs index 8fbb41d784456..aa3e611f13759 100644 --- a/examples/math/bounding_2d.rs +++ b/examples/math/bounding_2d.rs @@ -260,8 +260,8 @@ fn setup(mut commands: Commands) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/math/cubic_splines.rs b/examples/math/cubic_splines.rs index d4c74c7c73bc3..3099963446d52 100644 --- a/examples/math/cubic_splines.rs +++ b/examples/math/cubic_splines.rs @@ -80,10 +80,10 @@ fn setup(mut commands: Commands) { commands .spawn(Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), flex_direction: FlexDirection::Column, - row_gap: Val::Px(20.0), + row_gap: px(20), ..default() }) .with_children(|parent| { diff --git a/examples/math/custom_primitives.rs b/examples/math/custom_primitives.rs index f9121a4aa7a05..a34ee1991442f 100644 --- a/examples/math/custom_primitives.rs +++ b/examples/math/custom_primitives.rs @@ -160,8 +160,8 @@ fn setup( Press 'Space' to switch between 3D and 2D"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/math/random_sampling.rs b/examples/math/random_sampling.rs index 052b8d8c892e7..9dd257ace603b 100644 --- a/examples/math/random_sampling.rs +++ b/examples/math/random_sampling.rs @@ -120,8 +120,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/math/render_primitives.rs b/examples/math/render_primitives.rs index 1b7c7228c430b..b33700ea18157 100644 --- a/examples/math/render_primitives.rs +++ b/examples/math/render_primitives.rs @@ -345,7 +345,7 @@ fn setup_text(mut commands: Commands, cameras: Query<(Entity, &Camera)>) { HeaderNode, Node { justify_self: JustifySelf::Center, - top: Val::Px(5.0), + top: px(5), ..Default::default() }, UiTargetCamera(active_camera), diff --git a/examples/math/sampling_primitives.rs b/examples/math/sampling_primitives.rs index 8eccbba9ca00d..fa9b8a7c705db 100644 --- a/examples/math/sampling_primitives.rs +++ b/examples/math/sampling_primitives.rs @@ -389,8 +389,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs index de831525528d8..71342548ae2f3 100644 --- a/examples/mobile/src/lib.rs +++ b/examples/mobile/src/lib.rs @@ -145,9 +145,9 @@ fn setup_scene( justify_content: JustifyContent::Center, align_items: AlignItems::Center, position_type: PositionType::Absolute, - left: Val::Px(50.0), - right: Val::Px(50.0), - bottom: Val::Px(50.0), + left: px(50), + right: px(50), + bottom: px(50), ..default() }, )) diff --git a/examples/movement/physics_in_fixed_timestep.rs b/examples/movement/physics_in_fixed_timestep.rs index c2e9735c2a1ea..eee2914356484 100644 --- a/examples/movement/physics_in_fixed_timestep.rs +++ b/examples/movement/physics_in_fixed_timestep.rs @@ -229,8 +229,8 @@ fn spawn_text(mut commands: Commands) { commands.spawn(( Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), flex_direction: FlexDirection::Column, ..default() }, diff --git a/examples/picking/debug_picking.rs b/examples/picking/debug_picking.rs index da817c20a8873..e117b1896a4bb 100644 --- a/examples/picking/debug_picking.rs +++ b/examples/picking/debug_picking.rs @@ -40,8 +40,8 @@ fn setup_scene( Text::new("Click Me to get a box\nDrag cubes to rotate\nPress F3 to cycle between picking debug levels"), Node { position_type: PositionType::Absolute, - top: Val::Percent(12.0), - left: Val::Percent(12.0), + top: percent(12), + left: percent(12), ..default() }, )) diff --git a/examples/picking/mesh_picking.rs b/examples/picking/mesh_picking.rs index da571ddbcd4f0..806d4da7786f2 100644 --- a/examples/picking/mesh_picking.rs +++ b/examples/picking/mesh_picking.rs @@ -149,8 +149,8 @@ fn setup_scene( Text::new("Hover over the shapes to pick them\nDrag to rotate"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/picking/simple_picking.rs b/examples/picking/simple_picking.rs index 2df796687e54a..8538554df1a0f 100644 --- a/examples/picking/simple_picking.rs +++ b/examples/picking/simple_picking.rs @@ -19,8 +19,8 @@ fn setup_scene( Text::new("Click Me to get a box\nDrag cubes to rotate"), Node { position_type: PositionType::Absolute, - top: Val::Percent(12.0), - left: Val::Percent(12.0), + top: percent(12), + left: percent(12), ..default() }, )) diff --git a/examples/shader/shader_prepass.rs b/examples/shader/shader_prepass.rs index e44715dd713e0..5ab120aa7fec9 100644 --- a/examples/shader/shader_prepass.rs +++ b/examples/shader/shader_prepass.rs @@ -129,8 +129,8 @@ fn setup( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, children![ diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs index 2650ac99eec9b..592fe2d33af7b 100644 --- a/examples/state/computed_states.rs +++ b/examples/state/computed_states.rs @@ -333,20 +333,20 @@ mod ui { .spawn(( Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), ..default() }, children![ ( Button, Node { - width: Val::Px(200.), - height: Val::Px(65.), + width: px(200), + height: px(65), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text @@ -367,8 +367,8 @@ mod ui { ( Button, Node { - width: Val::Px(200.), - height: Val::Px(65.), + width: px(200), + height: px(65), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text @@ -446,19 +446,19 @@ mod ui { DespawnOnExitState(IsPaused::Paused), Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), position_type: PositionType::Absolute, ..default() }, children![( Node { - width: Val::Px(400.), - height: Val::Px(400.), + width: px(400), + height: px(400), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text @@ -484,12 +484,12 @@ mod ui { DespawnOnExitState(TurboMode), Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Start, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), position_type: PositionType::Absolute, ..default() }, @@ -520,12 +520,12 @@ mod ui { DespawnOnExitState(Tutorial::MovementInstructions), Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::End, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), position_type: PositionType::Absolute, ..default() }, @@ -571,12 +571,12 @@ mod ui { DespawnOnExitState(Tutorial::PauseInstructions), Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::End, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), position_type: PositionType::Absolute, ..default() }, diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs index f7d43f4327d39..b20f1e4e42a2e 100644 --- a/examples/state/custom_transitions.rs +++ b/examples/state/custom_transitions.rs @@ -246,8 +246,8 @@ fn setup_menu(mut commands: Commands) { .spawn(( Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -255,8 +255,8 @@ fn setup_menu(mut commands: Commands) { children![( Button, Node { - width: Val::Px(150.), - height: Val::Px(65.), + width: px(150), + height: px(65), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text diff --git a/examples/state/states.rs b/examples/state/states.rs index b82a15d5fbf0f..699e38d7248e6 100644 --- a/examples/state/states.rs +++ b/examples/state/states.rs @@ -54,8 +54,8 @@ fn setup_menu(mut commands: Commands) { .spawn(( Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -63,8 +63,8 @@ fn setup_menu(mut commands: Commands) { children![( Button, Node { - width: Val::Px(150.), - height: Val::Px(65.), + width: px(150), + height: px(65), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs index 2da18638b10ab..acccc5731816c 100644 --- a/examples/state/sub_states.rs +++ b/examples/state/sub_states.rs @@ -159,8 +159,8 @@ mod ui { .spawn(( Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -168,8 +168,8 @@ mod ui { children![( Button, Node { - width: Val::Px(150.), - height: Val::Px(65.), + width: px(150), + height: px(65), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text @@ -200,18 +200,18 @@ mod ui { DespawnOnExitState(IsPaused::Paused), Node { // center button - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), ..default() }, children![( Node { - width: Val::Px(400.), - height: Val::Px(400.), + width: px(400), + height: px(400), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text diff --git a/examples/stress_tests/bevymark.rs b/examples/stress_tests/bevymark.rs index ed18aa9754ff7..d22f9bc6223db 100644 --- a/examples/stress_tests/bevymark.rs +++ b/examples/stress_tests/bevymark.rs @@ -259,7 +259,7 @@ fn setup( .spawn(( Node { position_type: PositionType::Absolute, - padding: UiRect::all(Val::Px(5.0)), + padding: UiRect::all(px(5)), ..default() }, BackgroundColor(Color::BLACK.with_alpha(0.75)), diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs index 1f1a9acf3e676..a984800e4d1e8 100644 --- a/examples/stress_tests/many_buttons.rs +++ b/examples/stress_tests/many_buttons.rs @@ -163,7 +163,7 @@ fn setup_flex(mut commands: Commands, asset_server: Res, args: Res< let border = if args.no_borders { UiRect::ZERO } else { - UiRect::all(Val::VMin(0.05 * 90. / buttons_f)) + UiRect::all(vmin(0.05 * 90. / buttons_f)) }; let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8); @@ -177,8 +177,8 @@ fn setup_flex(mut commands: Commands, asset_server: Res, args: Res< flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..default() }) .with_children(|commands| { @@ -218,7 +218,7 @@ fn setup_grid(mut commands: Commands, asset_server: Res, args: Res< let border = if args.no_borders { UiRect::ZERO } else { - UiRect::all(Val::VMin(0.05 * 90. / buttons_f)) + UiRect::all(vmin(0.05 * 90. / buttons_f)) }; let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8); @@ -229,8 +229,8 @@ fn setup_grid(mut commands: Commands, asset_server: Res, args: Res< } else { Display::Grid }, - width: Val::Percent(100.), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), grid_template_columns: RepeatedGridTrack::flex(args.buttons as u16, 1.0), grid_template_rows: RepeatedGridTrack::flex(args.buttons as u16, 1.0), ..default() @@ -270,8 +270,8 @@ fn spawn_button( border_color: BorderColor, image: Option>, ) { - let width = Val::Vw(90.0 / buttons); - let height = Val::Vh(90.0 / buttons); + let width = vw(90.0 / buttons); + let height = vh(90.0 / buttons); let margin = UiRect::axes(width * 0.05, height * 0.05); let mut builder = commands.spawn(( Button, @@ -332,7 +332,7 @@ fn setup_many_cameras(mut commands: Commands, asset_server: Res, ar let border = if args.no_borders { UiRect::ZERO } else { - UiRect::all(Val::VMin(0.05 * 90. / buttons_f)) + UiRect::all(vmin(0.05 * 90. / buttons_f)) }; let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8); @@ -360,8 +360,8 @@ fn setup_many_cameras(mut commands: Commands, asset_server: Res, ar flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..default() }, UiTargetCamera(camera), @@ -370,8 +370,8 @@ fn setup_many_cameras(mut commands: Commands, asset_server: Res, ar commands .spawn(Node { position_type: PositionType::Absolute, - top: Val::Vh(column as f32 * 100. / buttons_f), - left: Val::Vw(row as f32 * 100. / buttons_f), + top: vh(column as f32 * 100. / buttons_f), + left: vw(row as f32 * 100. / buttons_f), ..Default::default() }) .with_children(|commands| { diff --git a/examples/stress_tests/many_gizmos.rs b/examples/stress_tests/many_gizmos.rs index 99d8cfb81bf5b..641768a5929f6 100644 --- a/examples/stress_tests/many_gizmos.rs +++ b/examples/stress_tests/many_gizmos.rs @@ -92,8 +92,8 @@ fn setup(mut commands: Commands) { Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/stress_tests/many_glyphs.rs b/examples/stress_tests/many_glyphs.rs index 6ff25735fd379..d1aed3072c72a 100644 --- a/examples/stress_tests/many_glyphs.rs +++ b/examples/stress_tests/many_glyphs.rs @@ -81,7 +81,7 @@ fn setup(mut commands: Commands, args: Res) { if !args.no_ui { commands .spawn(Node { - width: Val::Percent(100.), + width: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -89,7 +89,7 @@ fn setup(mut commands: Commands, args: Res) { .with_children(|commands| { commands .spawn(Node { - width: Val::Px(1000.), + width: px(1000), ..Default::default() }) .with_child((Text(text_string.clone()), text_font.clone(), text_block)); diff --git a/examples/stress_tests/many_gradients.rs b/examples/stress_tests/many_gradients.rs index 285ef1793ae97..4ed41157f7a73 100644 --- a/examples/stress_tests/many_gradients.rs +++ b/examples/stress_tests/many_gradients.rs @@ -82,8 +82,8 @@ fn setup(mut commands: Commands, args: Res) { // Create a grid of gradients commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), display: Display::Grid, grid_template_columns: RepeatedGridTrack::flex(COLS as u16, 1.0), grid_template_rows: RepeatedGridTrack::flex(rows_to_spawn as u16, 1.0), @@ -96,13 +96,13 @@ fn setup(mut commands: Commands, args: Res) { let mut gradient = LinearGradient::new( angle, vec![ - ColorStop::new(RED, Val::Percent(0.0)), - ColorStop::new(BLUE, Val::Percent(100.0)), - ColorStop::new(GREEN, Val::Percent(20.0)), - ColorStop::new(YELLOW, Val::Percent(40.0)), - ColorStop::new(ORANGE, Val::Percent(60.0)), - ColorStop::new(LIME, Val::Percent(80.0)), - ColorStop::new(DARK_CYAN, Val::Percent(90.0)), + ColorStop::new(RED, percent(0)), + ColorStop::new(BLUE, percent(100)), + ColorStop::new(GREEN, percent(20)), + ColorStop::new(YELLOW, percent(40)), + ColorStop::new(ORANGE, percent(60)), + ColorStop::new(LIME, percent(80)), + ColorStop::new(DARK_CYAN, percent(90)), ], ); @@ -116,8 +116,8 @@ fn setup(mut commands: Commands, args: Res) { parent.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), ..default() }, BackgroundGradient(vec![Gradient::Linear(gradient)]), @@ -152,27 +152,27 @@ fn animate_gradients( let color2 = Color::hsl((hue_shift + 0.3) * 360.0 % 360.0, 1.0, 0.5); gradient.stops = vec![ - ColorStop::new(color1, Val::Percent(0.0)), - ColorStop::new(color2, Val::Percent(100.0)), + ColorStop::new(color1, percent(0)), + ColorStop::new(color2, percent(100)), ColorStop::new( Color::hsl((hue_shift + 0.1) * 360.0 % 360.0, 1.0, 0.5), - Val::Percent(20.0), + percent(20), ), ColorStop::new( Color::hsl((hue_shift + 0.15) * 360.0 % 360.0, 1.0, 0.5), - Val::Percent(40.0), + percent(40), ), ColorStop::new( Color::hsl((hue_shift + 0.2) * 360.0 % 360.0, 1.0, 0.5), - Val::Percent(60.0), + percent(60), ), ColorStop::new( Color::hsl((hue_shift + 0.25) * 360.0 % 360.0, 1.0, 0.5), - Val::Percent(80.0), + percent(80), ), ColorStop::new( Color::hsl((hue_shift + 0.28) * 360.0 % 360.0, 1.0, 0.5), - Val::Percent(90.0), + percent(90), ), ]; } diff --git a/examples/testbed/full_ui.rs b/examples/testbed/full_ui.rs index 04ad731e9bb83..7c4e8e779ba3b 100644 --- a/examples/testbed/full_ui.rs +++ b/examples/testbed/full_ui.rs @@ -35,8 +35,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // root node commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), justify_content: JustifyContent::SpaceBetween, ..default() }) @@ -46,8 +46,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(200.), - border: UiRect::all(Val::Px(2.)), + width: px(200), + border: UiRect::all(px(2)), ..default() }, BackgroundColor(Color::srgb(0.65, 0.65, 0.65)), @@ -57,10 +57,10 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Percent(100.), + width: percent(100), flex_direction: FlexDirection::Column, - padding: UiRect::all(Val::Px(5.)), - row_gap: Val::Px(5.), + padding: UiRect::all(px(5)), + row_gap: px(5), ..default() }, BackgroundColor(Color::srgb(0.15, 0.15, 0.15)), @@ -139,7 +139,7 @@ fn setup(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Px(200.), + width: px(200), ..default() }) .with_children(|parent| { @@ -159,7 +159,7 @@ fn setup(mut commands: Commands, asset_server: Res) { Node { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, - height: Val::Percent(50.), + height: percent(50), overflow: Overflow::scroll_y(), ..default() }, @@ -206,8 +206,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(Node { - left: Val::Px(210.), - bottom: Val::Px(10.), + left: px(210), + bottom: px(10), position_type: PositionType::Absolute, ..default() }) @@ -215,9 +215,9 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(200.0), - height: Val::Px(200.0), - border: UiRect::all(Val::Px(20.)), + width: px(200), + height: px(200), + border: UiRect::all(px(20)), flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, ..default() @@ -236,10 +236,10 @@ fn setup(mut commands: Commands, asset_server: Res) { rotation: Rot2::radians(0.25 * PI), ..Default::default() }, - BorderRadius::all(Val::Px(10.)), + BorderRadius::all(px(10)), Outline { - width: Val::Px(2.), - offset: Val::Px(4.), + width: px(2), + offset: px(4), color: DARK_GRAY.into(), }, )); @@ -248,17 +248,17 @@ fn setup(mut commands: Commands, asset_server: Res) { let shadow_style = ShadowStyle { color: Color::BLACK.with_alpha(0.5), - blur_radius: Val::Px(2.), - x_offset: Val::Px(10.), - y_offset: Val::Px(10.), + blur_radius: px(2), + x_offset: px(10), + y_offset: px(10), ..default() }; // render order test: reddest in the back, whitest in the front (flex center) parent .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, align_items: AlignItems::Center, justify_content: JustifyContent::Center, @@ -269,8 +269,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(100.0), - height: Val::Px(100.0), + width: px(100), + height: px(100), ..default() }, BackgroundColor(Color::srgb(1.0, 0.0, 0.)), @@ -280,11 +280,11 @@ fn setup(mut commands: Commands, asset_server: Res) { parent.spawn(( Node { // Take the size of the parent node. - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, - left: Val::Px(20.), - bottom: Val::Px(20.), + left: px(20), + bottom: px(20), ..default() }, BackgroundColor(Color::srgb(1.0, 0.3, 0.3)), @@ -292,11 +292,11 @@ fn setup(mut commands: Commands, asset_server: Res) { )); parent.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, - left: Val::Px(40.), - bottom: Val::Px(40.), + left: px(40), + bottom: px(40), ..default() }, BackgroundColor(Color::srgb(1.0, 0.5, 0.5)), @@ -304,11 +304,11 @@ fn setup(mut commands: Commands, asset_server: Res) { )); parent.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, - left: Val::Px(60.), - bottom: Val::Px(60.), + left: px(60), + bottom: px(60), ..default() }, BackgroundColor(Color::srgb(0.0, 0.7, 0.7)), @@ -317,11 +317,11 @@ fn setup(mut commands: Commands, asset_server: Res) { // alpha test parent.spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, - left: Val::Px(80.), - bottom: Val::Px(80.), + left: px(80), + bottom: px(80), ..default() }, BackgroundColor(Color::srgba(1.0, 0.9, 0.9, 0.4)), @@ -335,7 +335,7 @@ fn setup(mut commands: Commands, asset_server: Res) { // bevy logo (flex center) parent .spawn(Node { - width: Val::Percent(100.0), + width: percent(100), position_type: PositionType::Absolute, justify_content: JustifyContent::Center, align_items: AlignItems::FlexStart, @@ -348,9 +348,9 @@ fn setup(mut commands: Commands, asset_server: Res) { ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png")) .with_mode(NodeImageMode::Stretch), Node { - width: Val::Px(500.0), - height: Val::Px(125.0), - margin: UiRect::top(Val::VMin(5.)), + width: px(500), + height: px(125), + margin: UiRect::top(vmin(5)), ..default() }, )) @@ -371,13 +371,13 @@ fn setup(mut commands: Commands, asset_server: Res) { // four bevy icons demonstrating image flipping parent .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), position_type: PositionType::Absolute, justify_content: JustifyContent::Center, align_items: AlignItems::FlexEnd, - column_gap: Val::Px(10.), - padding: UiRect::all(Val::Px(10.)), + column_gap: px(10), + padding: UiRect::all(px(10)), ..default() }) .insert(Pickable::IGNORE) @@ -394,7 +394,7 @@ fn setup(mut commands: Commands, asset_server: Res) { }, Node { // The height will be chosen automatically to preserve the image's aspect ratio - width: Val::Px(75.), + width: px(75), ..default() }, )); diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs index 18ed5aeaa0167..7cc26d6c90304 100644 --- a/examples/testbed/ui.rs +++ b/examples/testbed/ui.rs @@ -114,8 +114,8 @@ mod grid { commands.spawn(( Node { display: Display::Grid, - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), grid_template_columns: vec![GridTrack::min_content(), GridTrack::flex(1.0)], grid_template_rows: vec![ GridTrack::auto(), @@ -132,7 +132,7 @@ mod grid { Node { display: Display::Grid, grid_column: GridPlacement::span(2), - padding: UiRect::all(Val::Px(40.0)), + padding: UiRect::all(px(40)), ..default() }, BackgroundColor(RED.into()), @@ -140,13 +140,13 @@ mod grid { // Main content grid (auto placed in row 2, column 1) ( Node { - height: Val::Percent(100.0), + height: percent(100), aspect_ratio: Some(1.0), display: Display::Grid, grid_template_columns: RepeatedGridTrack::flex(3, 1.0), grid_template_rows: RepeatedGridTrack::flex(2, 1.0), - row_gap: Val::Px(12.0), - column_gap: Val::Px(12.0), + row_gap: px(12), + column_gap: px(12), ..default() }, BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), @@ -183,40 +183,40 @@ mod borders { // all the different combinations of border edges let borders = [ UiRect::default(), - UiRect::all(Val::Px(20.)), - UiRect::left(Val::Px(20.)), - UiRect::vertical(Val::Px(20.)), + UiRect::all(px(20)), + UiRect::left(px(20)), + UiRect::vertical(px(20)), UiRect { - left: Val::Px(40.), - top: Val::Px(20.), + left: px(40), + top: px(20), ..Default::default() }, UiRect { - right: Val::Px(20.), - bottom: Val::Px(30.), + right: px(20), + bottom: px(30), ..Default::default() }, UiRect { - right: Val::Px(20.), - top: Val::Px(40.), - bottom: Val::Px(20.), + right: px(20), + top: px(40), + bottom: px(20), ..Default::default() }, UiRect { - left: Val::Px(20.), - top: Val::Px(20.), - bottom: Val::Px(20.), + left: px(20), + top: px(20), + bottom: px(20), ..Default::default() }, UiRect { - left: Val::Px(20.), - right: Val::Px(20.), - bottom: Val::Px(40.), + left: px(20), + right: px(20), + bottom: px(40), ..Default::default() }, ]; - let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.); + let non_zero = |x, y| x != px(0) && y != px(0); let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. }; for border in borders { @@ -224,10 +224,10 @@ mod borders { let border_node = commands .spawn(( Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), border, - margin: UiRect::all(Val::Px(30.)), + margin: UiRect::all(px(30)), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -235,8 +235,8 @@ mod borders { BackgroundColor(MAROON.into()), BorderColor::all(RED), Outline { - width: Val::Px(10.), - offset: Val::Px(10.), + width: px(10), + offset: px(10), color: Color::WHITE, }, )) @@ -267,10 +267,10 @@ mod box_shadow { commands .spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), - padding: UiRect::all(Val::Px(30.)), - column_gap: Val::Px(200.), + width: percent(100), + height: percent(100), + padding: UiRect::all(px(30)), + column_gap: px(200), flex_wrap: FlexWrap::Wrap, ..default() }, @@ -284,7 +284,7 @@ mod box_shadow { Vec2::ZERO, 10., 0., - BorderRadius::bottom_right(Val::Px(10.)), + BorderRadius::bottom_right(px(10)), ), (Vec2::new(200., 50.), Vec2::ZERO, 10., 0., BorderRadius::MAX), ( @@ -299,7 +299,7 @@ mod box_shadow { Vec2::splat(20.), 10., 10., - BorderRadius::bottom_right(Val::Px(10.)), + BorderRadius::bottom_right(px(10)), ), ( Vec2::splat(100.), @@ -320,9 +320,9 @@ mod box_shadow { for (size, offset, spread, blur, border_radius) in example_nodes { commands.spawn(( Node { - width: Val::Px(size.x), - height: Val::Px(size.y), - border: UiRect::all(Val::Px(2.)), + width: px(size.x), + height: px(size.y), + border: UiRect::all(px(2)), ..default() }, BorderColor::all(WHITE), @@ -330,10 +330,10 @@ mod box_shadow { BackgroundColor(BLUE.into()), BoxShadow::new( Color::BLACK.with_alpha(0.9), - Val::Percent(offset.x), - Val::Percent(offset.y), - Val::Percent(spread), - Val::Px(blur), + percent(offset.x), + percent(offset.y), + percent(spread), + px(blur), ), )); } @@ -351,8 +351,8 @@ mod text_wrap { .spawn(( Node { flex_direction: FlexDirection::Column, - width: Val::Px(200.), - height: Val::Percent(100.), + width: px(200), + height: percent(100), overflow: Overflow::clip_x(), ..default() }, @@ -393,8 +393,8 @@ mod overflow { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::SpaceAround, ..Default::default() @@ -412,14 +412,14 @@ mod overflow { parent .spawn(( Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), padding: UiRect { - left: Val::Px(25.), - top: Val::Px(25.), + left: px(25), + top: px(25), ..Default::default() }, - border: UiRect::all(Val::Px(5.)), + border: UiRect::all(px(5)), overflow, ..default() }, @@ -430,14 +430,14 @@ mod overflow { parent.spawn(( ImageNode::new(image.clone()), Node { - min_width: Val::Px(100.), - min_height: Val::Px(100.), + min_width: px(100), + min_height: px(100), ..default() }, Interaction::default(), Outline { - width: Val::Px(2.), - offset: Val::Px(2.), + width: px(2), + offset: px(2), color: Color::NONE, }, )); @@ -463,8 +463,8 @@ mod slice { commands .spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::SpaceAround, ..default() @@ -481,8 +481,8 @@ mod slice { ..default() }, Node { - width: Val::Px(w), - height: Val::Px(h), + width: px(w), + height: px(h), ..default() }, )); @@ -501,8 +501,8 @@ mod slice { ..Default::default() }, Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), ..default() }, BackgroundColor(bevy::color::palettes::css::NAVY.into()), @@ -521,8 +521,8 @@ mod layout_rounding { .spawn(( Node { display: Display::Grid, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), grid_template_rows: vec![RepeatedGridTrack::fr(10, 1.)], ..Default::default() }, @@ -541,7 +541,7 @@ mod layout_rounding { for _ in 0..i { commands.spawn(( Node { - border: UiRect::all(Val::Px(5.)), + border: UiRect::all(px(5)), ..Default::default() }, BackgroundColor(MAROON.into()), @@ -573,7 +573,6 @@ mod linear_gradient { use bevy::ui::LinearGradient; use bevy::ui::Node; use bevy::ui::PositionType; - use bevy::ui::Val; use bevy::utils::default; pub fn setup(mut commands: Commands) { @@ -582,11 +581,11 @@ mod linear_gradient { .spawn(( Node { flex_direction: bevy::ui::FlexDirection::Column, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: bevy::ui::percent(100), + height: bevy::ui::percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, - row_gap: Val::Px(5.), + row_gap: bevy::ui::px(5), ..default() }, DespawnOnExitState(super::Scene::LinearGradient), @@ -596,8 +595,8 @@ mod linear_gradient { commands .spawn(Node { display: bevy::ui::Display::Grid, - row_gap: Val::Px(4.), - column_gap: Val::Px(4.), + row_gap: bevy::ui::px(4), + column_gap: bevy::ui::px(4), ..Default::default() }) .with_children(|commands| { @@ -655,8 +654,8 @@ mod linear_gradient { }, children![( Node { - height: Val::Px(30.), - width: Val::Px(300.), + height: bevy::ui::px(30), + width: bevy::ui::px(300), justify_content: JustifyContent::Center, ..Default::default() }, @@ -693,9 +692,9 @@ mod radial_gradient { pub fn setup(mut commands: Commands) { let color_stops = vec![ - ColorStop::new(Color::BLACK, Val::Px(5.)), - ColorStop::new(Color::WHITE, Val::Px(5.)), - ColorStop::new(Color::WHITE, Val::Percent(100.)), + ColorStop::new(Color::BLACK, px(5)), + ColorStop::new(Color::WHITE, px(5)), + ColorStop::new(Color::WHITE, percent(100)), ColorStop::auto(RED), ]; @@ -703,8 +702,8 @@ mod radial_gradient { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), display: Display::Grid, align_items: AlignItems::Start, grid_template_columns: vec![RepeatedGridTrack::px( @@ -712,9 +711,9 @@ mod radial_gradient { CELL_SIZE, )], grid_auto_flow: GridAutoFlow::Row, - row_gap: Val::Px(GAP), - column_gap: Val::Px(GAP), - padding: UiRect::all(Val::Px(GAP)), + row_gap: px(GAP), + column_gap: px(GAP), + padding: UiRect::all(px(GAP)), ..default() }, DespawnOnExitState(super::Scene::RadialGradient), @@ -723,10 +722,7 @@ mod radial_gradient { for (shape, shape_label) in [ (RadialGradientShape::ClosestSide, "ClosestSide"), (RadialGradientShape::FarthestSide, "FarthestSide"), - ( - RadialGradientShape::Circle(Val::Percent(55.)), - "Circle(55%)", - ), + (RadialGradientShape::Circle(percent(55)), "Circle(55%)"), (RadialGradientShape::FarthestCorner, "FarthestCorner"), ] { for (position, position_label) in [ @@ -746,14 +742,14 @@ mod radial_gradient { BackgroundColor(GRAY_700.into()), Node { display: Display::Grid, - width: Val::Px(CELL_SIZE), + width: px(CELL_SIZE), ..Default::default() }, )) .with_children(|commands| { commands.spawn(( Node { - margin: UiRect::all(Val::Px(2.0)), + margin: UiRect::all(px(2)), ..default() }, Text(format!("{shape_label}\n{position_label}")), @@ -761,8 +757,8 @@ mod radial_gradient { )); commands.spawn(( Node { - width: Val::Px(w), - height: Val::Px(h), + width: px(w), + height: px(h), ..default() }, BackgroundGradient::from(RadialGradient { diff --git a/examples/time/virtual_time.rs b/examples/time/virtual_time.rs index 4b6aec436e105..c9c6bd112b65a 100644 --- a/examples/time/virtual_time.rs +++ b/examples/time/virtual_time.rs @@ -80,10 +80,10 @@ fn setup(mut commands: Commands, asset_server: Res, mut time: ResMu Node { display: Display::Flex, justify_content: JustifyContent::SpaceBetween, - width: Val::Percent(100.), + width: percent(100), position_type: PositionType::Absolute, - top: Val::Px(0.), - padding: UiRect::all(Val::Px(20.0)), + top: px(0), + padding: UiRect::all(px(20)), ..default() }, children![ diff --git a/examples/tools/gamepad_viewer.rs b/examples/tools/gamepad_viewer.rs index c49bad495bbf8..e791f59492231 100644 --- a/examples/tools/gamepad_viewer.rs +++ b/examples/tools/gamepad_viewer.rs @@ -364,8 +364,8 @@ fn setup_connected(mut commands: Commands) { Text::new("Connected Gamepads:\n"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.), - left: Val::Px(12.), + top: px(12), + left: px(12), ..default() }, ConnectedGamepadsText, diff --git a/examples/tools/scene_viewer/morph_viewer_plugin.rs b/examples/tools/scene_viewer/morph_viewer_plugin.rs index efab95e1bf0f1..404c07d479e32 100644 --- a/examples/tools/scene_viewer/morph_viewer_plugin.rs +++ b/examples/tools/scene_viewer/morph_viewer_plugin.rs @@ -281,8 +281,8 @@ fn detect_morphs( Text::default(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, Children::spawn(spans), diff --git a/examples/transforms/align.rs b/examples/transforms/align.rs index 889e87531b9ca..517c9c1a066e3 100644 --- a/examples/transforms/align.rs +++ b/examples/transforms/align.rs @@ -105,8 +105,8 @@ fn setup( ), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, Instructions, diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs index 745345219e780..1fc24ddc38be2 100644 --- a/examples/ui/borders.rs +++ b/examples/ui/borders.rs @@ -36,62 +36,62 @@ fn setup(mut commands: Commands) { // these correspond to the labels above let borders = [ UiRect::default(), - UiRect::all(Val::Px(10.)), - UiRect::left(Val::Px(10.)), - UiRect::right(Val::Px(10.)), - UiRect::top(Val::Px(10.)), - UiRect::bottom(Val::Px(10.)), - UiRect::horizontal(Val::Px(10.)), - UiRect::vertical(Val::Px(10.)), + UiRect::all(px(10)), + UiRect::left(px(10)), + UiRect::right(px(10)), + UiRect::top(px(10)), + UiRect::bottom(px(10)), + UiRect::horizontal(px(10)), + UiRect::vertical(px(10)), UiRect { - left: Val::Px(20.), - top: Val::Px(10.), + left: px(20), + top: px(10), ..default() }, UiRect { - left: Val::Px(10.), - bottom: Val::Px(20.), + left: px(10), + bottom: px(20), ..default() }, UiRect { - right: Val::Px(20.), - top: Val::Px(10.), + right: px(20), + top: px(10), ..default() }, UiRect { - right: Val::Px(10.), - bottom: Val::Px(10.), + right: px(10), + bottom: px(10), ..default() }, UiRect { - right: Val::Px(10.), - top: Val::Px(20.), - bottom: Val::Px(10.), + right: px(10), + top: px(20), + bottom: px(10), ..default() }, UiRect { - left: Val::Px(10.), - top: Val::Px(10.), - bottom: Val::Px(10.), + left: px(10), + top: px(10), + bottom: px(10), ..default() }, UiRect { - left: Val::Px(20.), - right: Val::Px(10.), - top: Val::Px(10.), + left: px(20), + right: px(10), + top: px(10), ..default() }, UiRect { - left: Val::Px(10.), - right: Val::Px(10.), - bottom: Val::Px(20.), + left: px(10), + right: px(10), + bottom: px(20), ..default() }, ]; let borders_examples = ( Node { - margin: UiRect::all(Val::Px(25.0)), + margin: UiRect::all(px(25)), align_self: AlignSelf::Stretch, justify_self: JustifySelf::Stretch, flex_wrap: FlexWrap::Wrap, @@ -111,10 +111,10 @@ fn setup(mut commands: Commands) { children![ ( Node { - width: Val::Px(50.), - height: Val::Px(50.), + width: px(50), + height: px(50), border, - margin: UiRect::all(Val::Px(20.)), + margin: UiRect::all(px(20)), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -127,14 +127,14 @@ fn setup(mut commands: Commands) { right: BLUE.into(), }, Outline { - width: Val::Px(6.), - offset: Val::Px(6.), + width: px(6), + offset: px(6), color: Color::WHITE, }, children![( Node { - width: Val::Px(10.), - height: Val::Px(10.), + width: px(10), + height: px(10), ..default() }, BackgroundColor(YELLOW.into()), @@ -147,7 +147,7 @@ fn setup(mut commands: Commands) { ))), ); - let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.); + let non_zero = |x, y| x != px(0) && y != px(0); let border_size = move |x, y| { if non_zero(x, y) { f32::MAX @@ -158,7 +158,7 @@ fn setup(mut commands: Commands) { let borders_examples_rounded = ( Node { - margin: UiRect::all(Val::Px(25.0)), + margin: UiRect::all(px(25)), align_self: AlignSelf::Stretch, justify_self: JustifySelf::Stretch, flex_wrap: FlexWrap::Wrap, @@ -178,10 +178,10 @@ fn setup(mut commands: Commands) { children![ ( Node { - width: Val::Px(50.), - height: Val::Px(50.), + width: px(50), + height: px(50), border, - margin: UiRect::all(Val::Px(20.)), + margin: UiRect::all(px(20)), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -200,14 +200,14 @@ fn setup(mut commands: Commands) { border_size(border.left, border.bottom), ), Outline { - width: Val::Px(6.), - offset: Val::Px(6.), + width: px(6), + offset: px(6), color: Color::WHITE, }, children![( Node { - width: Val::Px(10.), - height: Val::Px(10.), + width: px(10), + height: px(10), ..default() }, BorderRadius::MAX, @@ -223,7 +223,7 @@ fn setup(mut commands: Commands) { commands.spawn(( Node { - margin: UiRect::all(Val::Px(25.0)), + margin: UiRect::all(px(25)), flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, justify_self: JustifySelf::Stretch, @@ -248,7 +248,7 @@ fn setup(mut commands: Commands) { fn label(text: &str) -> impl Bundle { ( Node { - margin: UiRect::all(Val::Px(25.0)), + margin: UiRect::all(px(25)), ..default() }, children![(Text::new(text), TextFont::from_font_size(20.0))], diff --git a/examples/ui/box_shadow.rs b/examples/ui/box_shadow.rs index 1fda225a9dd49..be97133b853bb 100644 --- a/examples/ui/box_shadow.rs +++ b/examples/ui/box_shadow.rs @@ -21,29 +21,29 @@ const SHADOW_DEFAULT_SETTINGS: ShadowSettings = ShadowSettings { const SHAPES: &[(&str, fn(&mut Node, &mut BorderRadius))] = &[ ("1", |node, radius| { - node.width = Val::Px(164.); - node.height = Val::Px(164.); + node.width = px(164); + node.height = px(164); *radius = BorderRadius::ZERO; }), ("2", |node, radius| { - node.width = Val::Px(164.); - node.height = Val::Px(164.); - *radius = BorderRadius::all(Val::Px(41.)); + node.width = px(164); + node.height = px(164); + *radius = BorderRadius::all(px(41)); }), ("3", |node, radius| { - node.width = Val::Px(164.); - node.height = Val::Px(164.); + node.width = px(164); + node.height = px(164); *radius = BorderRadius::MAX; }), ("4", |node, radius| { - node.width = Val::Px(240.); - node.height = Val::Px(80.); - *radius = BorderRadius::all(Val::Px(32.)); + node.width = px(240); + node.height = px(80); + *radius = BorderRadius::all(px(32)); }), ("5", |node, radius| { - node.width = Val::Px(80.); - node.height = Val::Px(240.); - *radius = BorderRadius::all(Val::Px(32.)); + node.width = px(80); + node.height = px(240); + *radius = BorderRadius::all(px(32)); }), ]; @@ -150,8 +150,8 @@ fn setup( commands .spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -160,9 +160,9 @@ fn setup( )) .insert(children![{ let mut node = Node { - width: Val::Px(164.), - height: Val::Px(164.), - border: UiRect::all(Val::Px(1.)), + width: px(164), + height: px(164), + border: UiRect::all(px(1)), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -177,10 +177,10 @@ fn setup( BackgroundColor(Color::srgb(0.21, 0.21, 0.21)), BoxShadow(vec![ShadowStyle { color: Color::BLACK.with_alpha(0.8), - x_offset: Val::Px(shadow.x_offset), - y_offset: Val::Px(shadow.y_offset), - spread_radius: Val::Px(shadow.spread), - blur_radius: Val::Px(shadow.blur), + x_offset: px(shadow.x_offset), + y_offset: px(shadow.y_offset), + spread_radius: px(shadow.spread), + blur_radius: px(shadow.blur), }]), ShadowNode, ) @@ -192,15 +192,15 @@ fn setup( Node { flex_direction: FlexDirection::Column, position_type: PositionType::Absolute, - left: Val::Px(24.0), - bottom: Val::Px(24.0), - width: Val::Px(270.0), - padding: UiRect::all(Val::Px(16.0)), + left: px(24), + bottom: px(24), + width: px(270), + padding: UiRect::all(px(16)), ..default() }, BackgroundColor(Color::srgb(0.12, 0.12, 0.12).with_alpha(0.85)), BorderColor::all(Color::WHITE.with_alpha(0.15)), - BorderRadius::all(Val::Px(12.0)), + BorderRadius::all(px(12)), ZIndex(10), )) .insert(children![ @@ -259,21 +259,21 @@ fn setup( Node { flex_direction: FlexDirection::Row, align_items: AlignItems::Center, - height: Val::Px(36.0), - margin: UiRect::top(Val::Px(12.0)), + height: px(36), + margin: UiRect::top(px(12)), ..default() }, children![( Button, Node { - width: Val::Px(90.), - height: Val::Px(32.), + width: px(90), + height: px(32), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() }, BackgroundColor(NORMAL_BUTTON), - BorderRadius::all(Val::Px(8.)), + BorderRadius::all(px(8)), SettingsButton::Reset, children![( Text::new("Reset"), @@ -308,13 +308,13 @@ fn build_setting_row( Node { flex_direction: FlexDirection::Row, align_items: AlignItems::Center, - height: Val::Px(32.0), + height: px(32), ..default() }, children![ ( Node { - width: Val::Px(80.0), + width: px(80), justify_content: JustifyContent::FlexEnd, align_items: AlignItems::Center, ..default() @@ -332,15 +332,15 @@ fn build_setting_row( ( Button, Node { - width: Val::Px(28.), - height: Val::Px(28.), - margin: UiRect::left(Val::Px(8.)), + width: px(28), + height: px(28), + margin: UiRect::left(px(8)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() }, BackgroundColor(Color::WHITE), - BorderRadius::all(Val::Px(6.)), + BorderRadius::all(px(6)), dec, children![( Text::new(if setting_type == SettingType::Shape { @@ -357,14 +357,14 @@ fn build_setting_row( ), ( Node { - width: Val::Px(48.), - height: Val::Px(28.), - margin: UiRect::horizontal(Val::Px(8.)), + width: px(48), + height: px(28), + margin: UiRect::horizontal(px(8)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() }, - BorderRadius::all(Val::Px(6.)), + BorderRadius::all(px(6)), children![{ ( Text::new(value_text), @@ -380,14 +380,14 @@ fn build_setting_row( ( Button, Node { - width: Val::Px(28.), - height: Val::Px(28.), + width: px(28), + height: px(28), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() }, BackgroundColor(Color::WHITE), - BorderRadius::all(Val::Px(6.)), + BorderRadius::all(px(6)), inc, children![( Text::new(if setting_type == SettingType::Shape { @@ -496,10 +496,10 @@ fn generate_shadows(shadow: &ShadowSettings) -> Vec { fn make_shadow(color: Color, x_offset: f32, y_offset: f32, spread: f32, blur: f32) -> ShadowStyle { ShadowStyle { color: color.with_alpha(0.8), - x_offset: Val::Px(x_offset), - y_offset: Val::Px(y_offset), - spread_radius: Val::Px(spread), - blur_radius: Val::Px(blur), + x_offset: px(x_offset), + y_offset: px(y_offset), + spread_radius: px(spread), + blur_radius: px(blur), } } diff --git a/examples/ui/button.rs b/examples/ui/button.rs index b4d048d0266b4..a1b557945756b 100644 --- a/examples/ui/button.rs +++ b/examples/ui/button.rs @@ -75,8 +75,8 @@ fn setup(mut commands: Commands, assets: Res) { fn button(asset_server: &AssetServer) -> impl Bundle { ( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -84,9 +84,9 @@ fn button(asset_server: &AssetServer) -> impl Bundle { children![( Button, Node { - width: Val::Px(150.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(150), + height: px(65), + border: UiRect::all(px(5)), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text diff --git a/examples/ui/core_widgets.rs b/examples/ui/core_widgets.rs index 297710f6aa70b..d3408f8c972ba 100644 --- a/examples/ui/core_widgets.rs +++ b/examples/ui/core_widgets.rs @@ -161,13 +161,13 @@ fn demo_root( ) -> impl Bundle { ( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, display: Display::Flex, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.0), + row_gap: px(10), ..default() }, TabGroup::default(), @@ -184,9 +184,9 @@ fn demo_root( fn button(asset_server: &AssetServer, on_click: Callback>) -> impl Bundle { ( Node { - width: Val::Px(150.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(150), + height: px(65), + border: UiRect::all(px(5)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -337,9 +337,9 @@ fn slider( justify_content: JustifyContent::Center, align_items: AlignItems::Stretch, justify_items: JustifyItems::Center, - column_gap: Val::Px(4.0), - height: Val::Px(12.0), - width: Val::Percent(30.0), + column_gap: px(4), + height: px(12), + width: percent(30), ..default() }, Name::new("Slider"), @@ -356,11 +356,11 @@ fn slider( // Slider background rail Spawn(( Node { - height: Val::Px(6.0), + height: px(6), ..default() }, BackgroundColor(SLIDER_TRACK), // Border color for the slider - BorderRadius::all(Val::Px(3.0)), + BorderRadius::all(px(3)), )), // Invisible track to allow absolute placement of thumb entity. This is narrower than // the actual slider, which allows us to position the thumb entity using simple @@ -369,11 +369,11 @@ fn slider( Node { display: Display::Flex, position_type: PositionType::Absolute, - left: Val::Px(0.0), + left: px(0), // Track is short by 12px to accommodate the thumb. - right: Val::Px(12.0), - top: Val::Px(0.0), - bottom: Val::Px(0.0), + right: px(12), + top: px(0), + bottom: px(0), ..default() }, children![( @@ -382,10 +382,10 @@ fn slider( CoreSliderThumb, Node { display: Display::Flex, - width: Val::Px(12.0), - height: Val::Px(12.0), + width: px(12), + height: px(12), position_type: PositionType::Absolute, - left: Val::Percent(0.0), // This will be updated by the slider's value + left: percent(0), // This will be updated by the slider's value ..default() }, BorderRadius::MAX, @@ -426,7 +426,7 @@ fn update_slider_style( if let Ok((mut thumb_node, mut thumb_bg, is_thumb)) = thumbs.get_mut(child) && is_thumb { - thumb_node.left = Val::Percent(range.thumb_position(value.0) * 100.0); + thumb_node.left = percent(range.thumb_position(value.0) * 100.0); thumb_bg.0 = thumb_color(disabled, hovered.0 | drag_state.dragging); } } @@ -483,7 +483,7 @@ fn checkbox( justify_content: JustifyContent::FlexStart, align_items: AlignItems::Center, align_content: AlignContent::Center, - column_gap: Val::Px(4.0), + column_gap: px(4), ..default() }, Name::new("Checkbox"), @@ -496,23 +496,23 @@ fn checkbox( // Checkbox outer Node { display: Display::Flex, - width: Val::Px(16.0), - height: Val::Px(16.0), - border: UiRect::all(Val::Px(2.0)), + width: px(16), + height: px(16), + border: UiRect::all(px(2)), ..default() }, BorderColor::all(ELEMENT_OUTLINE), // Border color for the checkbox - BorderRadius::all(Val::Px(3.0)), + BorderRadius::all(px(3)), children![ // Checkbox inner ( Node { display: Display::Flex, - width: Val::Px(8.0), - height: Val::Px(8.0), + width: px(8), + height: px(8), position_type: PositionType::Absolute, - left: Val::Px(2.0), - top: Val::Px(2.0), + left: px(2), + top: px(2), ..default() }, BackgroundColor(ELEMENT_FILL), @@ -673,7 +673,7 @@ fn radio_group(asset_server: &AssetServer, on_change: Callback>) -> display: Display::Flex, flex_direction: FlexDirection::Column, align_items: AlignItems::Start, - column_gap: Val::Px(4.0), + column_gap: px(4), ..default() }, Name::new("RadioGroup"), @@ -696,7 +696,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B justify_content: JustifyContent::FlexStart, align_items: AlignItems::Center, align_content: AlignContent::Center, - column_gap: Val::Px(4.0), + column_gap: px(4), ..default() }, Name::new("RadioButton"), @@ -708,9 +708,9 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B // Radio outer Node { display: Display::Flex, - width: Val::Px(16.0), - height: Val::Px(16.0), - border: UiRect::all(Val::Px(2.0)), + width: px(16), + height: px(16), + border: UiRect::all(px(2)), ..default() }, BorderColor::all(ELEMENT_OUTLINE), // Border color for the radio button @@ -720,11 +720,11 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B ( Node { display: Display::Flex, - width: Val::Px(8.0), - height: Val::Px(8.0), + width: px(8), + height: px(8), position_type: PositionType::Absolute, - left: Val::Px(2.0), - top: Val::Px(2.0), + left: px(2), + top: px(2), ..default() }, BorderRadius::MAX, diff --git a/examples/ui/core_widgets_observers.rs b/examples/ui/core_widgets_observers.rs index 38c0c6f072dc0..0d545bc481850 100644 --- a/examples/ui/core_widgets_observers.rs +++ b/examples/ui/core_widgets_observers.rs @@ -109,13 +109,13 @@ fn demo_root( ) -> impl Bundle { ( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, display: Display::Flex, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.0), + row_gap: px(10), ..default() }, TabGroup::default(), @@ -131,9 +131,9 @@ fn demo_root( fn button(asset_server: &AssetServer, on_click: Callback>) -> impl Bundle { ( Node { - width: Val::Px(150.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(150), + height: px(65), + border: UiRect::all(px(5)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -364,9 +364,9 @@ fn slider( justify_content: JustifyContent::Center, align_items: AlignItems::Stretch, justify_items: JustifyItems::Center, - column_gap: Val::Px(4.0), - height: Val::Px(12.0), - width: Val::Percent(30.0), + column_gap: px(4), + height: px(12), + width: percent(30), ..default() }, Name::new("Slider"), @@ -383,11 +383,11 @@ fn slider( // Slider background rail Spawn(( Node { - height: Val::Px(6.0), + height: px(6), ..default() }, BackgroundColor(SLIDER_TRACK), // Border color for the checkbox - BorderRadius::all(Val::Px(3.0)), + BorderRadius::all(px(3)), )), // Invisible track to allow absolute placement of thumb entity. This is narrower than // the actual slider, which allows us to position the thumb entity using simple @@ -396,11 +396,11 @@ fn slider( Node { display: Display::Flex, position_type: PositionType::Absolute, - left: Val::Px(0.0), + left: px(0), // Track is short by 12px to accommodate the thumb. - right: Val::Px(12.0), - top: Val::Px(0.0), - bottom: Val::Px(0.0), + right: px(12), + top: px(0), + bottom: px(0), ..default() }, children![( @@ -409,10 +409,10 @@ fn slider( CoreSliderThumb, Node { display: Display::Flex, - width: Val::Px(12.0), - height: Val::Px(12.0), + width: px(12), + height: px(12), position_type: PositionType::Absolute, - left: Val::Percent(0.0), // This will be updated by the slider's value + left: percent(0), // This will be updated by the slider's value ..default() }, BorderRadius::MAX, @@ -485,7 +485,7 @@ fn slider_on_change_value( if let Ok((mut thumb_node, is_thumb)) = thumbs.get_mut(child) && is_thumb { - thumb_node.left = Val::Percent(range.thumb_position(value.0) * 100.0); + thumb_node.left = percent(range.thumb_position(value.0) * 100.0); } } } @@ -502,7 +502,7 @@ fn slider_on_change_range( if let Ok((mut thumb_node, is_thumb)) = thumbs.get_mut(child) && is_thumb { - thumb_node.left = Val::Percent(range.thumb_position(value.0) * 100.0); + thumb_node.left = percent(range.thumb_position(value.0) * 100.0); } } } @@ -531,7 +531,7 @@ fn checkbox( justify_content: JustifyContent::FlexStart, align_items: AlignItems::Center, align_content: AlignContent::Center, - column_gap: Val::Px(4.0), + column_gap: px(4), ..default() }, Name::new("Checkbox"), @@ -544,23 +544,23 @@ fn checkbox( // Checkbox outer Node { display: Display::Flex, - width: Val::Px(16.0), - height: Val::Px(16.0), - border: UiRect::all(Val::Px(2.0)), + width: px(16), + height: px(16), + border: UiRect::all(px(2)), ..default() }, BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox - BorderRadius::all(Val::Px(3.0)), + BorderRadius::all(px(3)), children![ // Checkbox inner ( Node { display: Display::Flex, - width: Val::Px(8.0), - height: Val::Px(8.0), + width: px(8), + height: px(8), position_type: PositionType::Absolute, - left: Val::Px(2.0), - top: Val::Px(2.0), + left: px(2), + top: px(2), ..default() }, BackgroundColor(Srgba::NONE.into()), diff --git a/examples/ui/directional_navigation.rs b/examples/ui/directional_navigation.rs index 91c14782c582c..030b3c4237dfa 100644 --- a/examples/ui/directional_navigation.rs +++ b/examples/ui/directional_navigation.rs @@ -114,8 +114,8 @@ fn setup_ui( // Create a full-screen background node let root_node = commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), ..default() }) .id(); @@ -126,10 +126,10 @@ fn setup_ui( Text::new("Use arrow keys or D-pad to navigate. \ Click the buttons, or press Enter / the South gamepad button to interact with the focused button."), Node { - width: Val::Px(300.0), + width: px(300), justify_content: JustifyContent::Center, align_items: AlignItems::Center, - margin: UiRect::all(Val::Px(12.0)), + margin: UiRect::all(px(12)), ..default() }, )) @@ -140,8 +140,8 @@ fn setup_ui( .spawn(Node { display: Display::Grid, // Allow the grid to take up the full height and the rest of the width of the window - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), // Set the number of rows and columns in the grid // allowing the grid to automatically size the cells grid_template_columns: RepeatedGridTrack::auto(N_COLS), @@ -164,10 +164,10 @@ fn setup_ui( .spawn(( Button, Node { - width: Val::Px(200.0), - height: Val::Px(120.0), + width: px(200), + height: px(120), // Add a border so we can show which element is focused - border: UiRect::all(Val::Px(4.0)), + border: UiRect::all(px(4)), // Center the button's text label justify_content: JustifyContent::Center, align_items: AlignItems::Center, @@ -177,7 +177,7 @@ fn setup_ui( ..default() }, ResetTimer::default(), - BorderRadius::all(Val::Px(16.0)), + BorderRadius::all(px(16)), BackgroundColor::from(NORMAL_BUTTON), Name::new(button_name.clone()), )) diff --git a/examples/ui/display_and_visibility.rs b/examples/ui/display_and_visibility.rs index 3513c94321b17..b8035bed6bad6 100644 --- a/examples/ui/display_and_visibility.rs +++ b/examples/ui/display_and_visibility.rs @@ -86,8 +86,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, align_items: AlignItems::Center, justify_content: JustifyContent::SpaceEvenly, @@ -101,22 +101,22 @@ fn setup(mut commands: Commands, asset_server: Res) { text_font.clone(), TextLayout::new_with_justify(Justify::Center), Node { - margin: UiRect::bottom(Val::Px(10.)), + margin: UiRect::bottom(px(10)), ..Default::default() }, )); parent .spawn(Node { - width: Val::Percent(100.), + width: percent(100), ..default() }) .with_children(|parent| { let mut target_ids = vec![]; parent .spawn(Node { - width: Val::Percent(50.), - height: Val::Px(520.), + width: percent(50), + height: px(520), justify_content: JustifyContent::Center, ..default() }) @@ -126,7 +126,7 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(Node { - width: Val::Percent(50.), + width: percent(50), justify_content: JustifyContent::Center, ..default() }) @@ -140,7 +140,7 @@ fn setup(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Row, align_items: AlignItems::Start, justify_content: JustifyContent::Start, - column_gap: Val::Px(10.), + column_gap: px(10), ..default() }) .with_children(|builder| { @@ -171,7 +171,7 @@ fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) -> builder .spawn(( Node { - padding: UiRect::all(Val::Px(10.)), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(Color::WHITE), @@ -189,22 +189,22 @@ fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) -> }, BackgroundColor(palette[0]), Outline { - width: Val::Px(4.), + width: px(4), color: DARK_CYAN.into(), - offset: Val::Px(10.), + offset: px(10), }, )) .with_children(|parent| { parent.spawn(Node { - width: Val::Px(100.), - height: Val::Px(500.), + width: px(100), + height: px(500), ..default() }); let id = parent .spawn(( Node { - height: Val::Px(400.), + height: px(400), align_items: AlignItems::FlexEnd, justify_content: JustifyContent::FlexEnd, ..default() @@ -213,15 +213,15 @@ fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) -> )) .with_children(|parent| { parent.spawn(Node { - width: Val::Px(100.), - height: Val::Px(400.), + width: px(100), + height: px(400), ..default() }); let id = parent .spawn(( Node { - height: Val::Px(300.), + height: px(300), align_items: AlignItems::FlexEnd, justify_content: JustifyContent::FlexEnd, ..default() @@ -230,16 +230,16 @@ fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) -> )) .with_children(|parent| { parent.spawn(Node { - width: Val::Px(100.), - height: Val::Px(300.), + width: px(100), + height: px(300), ..default() }); let id = parent .spawn(( Node { - width: Val::Px(200.), - height: Val::Px(200.), + width: px(200), + height: px(200), ..default() }, BackgroundColor(palette[3]), @@ -273,7 +273,7 @@ fn spawn_right_panel( parent .spawn(( Node { - padding: UiRect::all(Val::Px(10.)), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(Color::WHITE), @@ -282,23 +282,23 @@ fn spawn_right_panel( parent .spawn(( Node { - width: Val::Px(500.), - height: Val::Px(500.), + width: px(500), + height: px(500), flex_direction: FlexDirection::Column, align_items: AlignItems::FlexEnd, justify_content: JustifyContent::SpaceBetween, padding: UiRect { - left: Val::Px(5.), - top: Val::Px(5.), + left: px(5), + top: px(5), ..default() }, ..default() }, BackgroundColor(palette[0]), Outline { - width: Val::Px(4.), + width: px(4), color: DARK_CYAN.into(), - offset: Val::Px(10.), + offset: px(10), }, )) .with_children(|parent| { @@ -307,14 +307,14 @@ fn spawn_right_panel( parent .spawn(( Node { - width: Val::Px(400.), - height: Val::Px(400.), + width: px(400), + height: px(400), flex_direction: FlexDirection::Column, align_items: AlignItems::FlexEnd, justify_content: JustifyContent::SpaceBetween, padding: UiRect { - left: Val::Px(5.), - top: Val::Px(5.), + left: px(5), + top: px(5), ..default() }, ..default() @@ -327,14 +327,14 @@ fn spawn_right_panel( parent .spawn(( Node { - width: Val::Px(300.), - height: Val::Px(300.), + width: px(300), + height: px(300), flex_direction: FlexDirection::Column, align_items: AlignItems::FlexEnd, justify_content: JustifyContent::SpaceBetween, padding: UiRect { - left: Val::Px(5.), - top: Val::Px(5.), + left: px(5), + top: px(5), ..default() }, ..default() @@ -347,14 +347,14 @@ fn spawn_right_panel( parent .spawn(( Node { - width: Val::Px(200.), - height: Val::Px(200.), + width: px(200), + height: px(200), align_items: AlignItems::FlexStart, justify_content: JustifyContent::SpaceBetween, flex_direction: FlexDirection::Column, padding: UiRect { - left: Val::Px(5.), - top: Val::Px(5.), + left: px(5), + top: px(5), ..default() }, ..default() @@ -365,8 +365,8 @@ fn spawn_right_panel( spawn_buttons(parent, target_ids.pop().unwrap()); parent.spawn(Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), ..default() }); }); @@ -386,7 +386,7 @@ where Button, Node { align_self: AlignSelf::FlexStart, - padding: UiRect::axes(Val::Px(5.), Val::Px(1.)), + padding: UiRect::axes(px(5), px(1)), ..default() }, BackgroundColor(Color::BLACK.with_alpha(0.5)), diff --git a/examples/ui/drag_to_scroll.rs b/examples/ui/drag_to_scroll.rs index 2d40ede535756..a3311766a08ea 100644 --- a/examples/ui/drag_to_scroll.rs +++ b/examples/ui/drag_to_scroll.rs @@ -29,8 +29,8 @@ fn setup(mut commands: Commands) { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), overflow: Overflow::scroll(), ..Default::default() }, diff --git a/examples/ui/feathers.rs b/examples/ui/feathers.rs index 1fa6806cae56c..9046d3b1a3edd 100644 --- a/examples/ui/feathers.rs +++ b/examples/ui/feathers.rs @@ -125,13 +125,13 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { ( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Start, justify_content: JustifyContent::Start, display: Display::Flex, flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.0), + row_gap: px(10), ..default() }, TabGroup::default(), @@ -142,10 +142,10 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { flex_direction: FlexDirection::Column, align_items: AlignItems::Stretch, justify_content: JustifyContent::Start, - padding: UiRect::all(Val::Px(8.0)), - row_gap: Val::Px(8.0), - width: Val::Percent(30.), - min_width: Val::Px(200.), + padding: UiRect::all(px(8)), + row_gap: px(8), + width: percent(30), + min_width: px(200), ..default() }, children![ @@ -155,7 +155,7 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { flex_direction: FlexDirection::Row, align_items: AlignItems::Center, justify_content: JustifyContent::Start, - column_gap: Val::Px(8.0), + column_gap: px(8), ..default() }, children![ @@ -204,7 +204,7 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { flex_direction: FlexDirection::Row, align_items: AlignItems::Center, justify_content: JustifyContent::Start, - column_gap: Val::Px(1.0), + column_gap: px(1), ..default() }, children![ @@ -284,7 +284,7 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { Node { display: Display::Flex, flex_direction: FlexDirection::Column, - row_gap: Val::Px(4.0), + row_gap: px(4), ..default() }, CoreRadioGroup { @@ -306,7 +306,7 @@ fn demo_root(commands: &mut Commands) -> impl Bundle { flex_direction: FlexDirection::Row, align_items: AlignItems::Center, justify_content: JustifyContent::Start, - column_gap: Val::Px(8.0), + column_gap: px(8), ..default() }, children![ diff --git a/examples/ui/flex_layout.rs b/examples/ui/flex_layout.rs index 2a155eafb1016..be23790d5cb22 100644 --- a/examples/ui/flex_layout.rs +++ b/examples/ui/flex_layout.rs @@ -25,8 +25,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { .spawn(( Node { // fill the entire window - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, align_items: AlignItems::Center, padding: UiRect::all(MARGIN), @@ -61,8 +61,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { builder .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, row_gap: MARGIN, ..default() @@ -87,8 +87,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { for align_items in alignments { builder .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Row, column_gap: MARGIN, ..Default::default() @@ -120,8 +120,8 @@ fn spawn_child_node( flex_direction: FlexDirection::Column, align_items, justify_content, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..default() }, BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), @@ -137,7 +137,7 @@ fn spawn_child_node( builder, font.clone(), color, - UiRect::top(Val::Px(top_margin)), + UiRect::top(px(top_margin)), &text, ); } @@ -155,7 +155,7 @@ fn spawn_nested_text_bundle( .spawn(( Node { margin, - padding: UiRect::axes(Val::Px(5.), Val::Px(1.)), + padding: UiRect::axes(px(5), px(1)), ..default() }, BackgroundColor(background_color), diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs index 5f0fbe9e12369..5fa5054ce150b 100644 --- a/examples/ui/font_atlas_debug.rs +++ b/examples/ui/font_atlas_debug.rs @@ -56,7 +56,7 @@ fn atlas_render_system( Node { position_type: PositionType::Absolute, top: Val::ZERO, - left: Val::Px(image.width() as f32 * x_offset), + left: px(image.width() as f32 * x_offset), ..default() }, )); diff --git a/examples/ui/ghost_nodes.rs b/examples/ui/ghost_nodes.rs index 6678b24a8089c..10f0d64c7b860 100644 --- a/examples/ui/ghost_nodes.rs +++ b/examples/ui/ghost_nodes.rs @@ -39,8 +39,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // Normal UI root commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -74,9 +74,9 @@ fn create_button() -> impl Bundle { ( Button, Node { - width: Val::Px(150.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(150), + height: px(65), + border: UiRect::all(px(5)), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text diff --git a/examples/ui/gradients.rs b/examples/ui/gradients.rs index a5dedb0cc7065..c0dc64346d099 100644 --- a/examples/ui/gradients.rs +++ b/examples/ui/gradients.rs @@ -29,8 +29,8 @@ fn setup(mut commands: Commands) { commands .spawn(Node { flex_direction: FlexDirection::Column, - row_gap: Val::Px(20.), - margin: UiRect::all(Val::Px(20.)), + row_gap: px(20), + margin: UiRect::all(px(20)), ..Default::default() }) .with_children(|commands| { @@ -38,8 +38,8 @@ fn setup(mut commands: Commands) { ( 4., vec![ - ColorStop::new(Color::WHITE, Val::Percent(15.)), - ColorStop::new(Color::BLACK, Val::Percent(85.)), + ColorStop::new(Color::WHITE, percent(15)), + ColorStop::new(Color::BLACK, percent(85)), ], ), (4., vec![RED.into(), BLUE.into(), LIME.into()]), @@ -47,18 +47,18 @@ fn setup(mut commands: Commands) { 0., vec![ RED.into(), - ColorStop::new(RED, Val::Percent(100. / 7.)), - ColorStop::new(ORANGE, Val::Percent(100. / 7.)), - ColorStop::new(ORANGE, Val::Percent(200. / 7.)), - ColorStop::new(YELLOW, Val::Percent(200. / 7.)), - ColorStop::new(YELLOW, Val::Percent(300. / 7.)), - ColorStop::new(GREEN, Val::Percent(300. / 7.)), - ColorStop::new(GREEN, Val::Percent(400. / 7.)), - ColorStop::new(BLUE, Val::Percent(400. / 7.)), - ColorStop::new(BLUE, Val::Percent(500. / 7.)), - ColorStop::new(INDIGO, Val::Percent(500. / 7.)), - ColorStop::new(INDIGO, Val::Percent(600. / 7.)), - ColorStop::new(VIOLET, Val::Percent(600. / 7.)), + ColorStop::new(RED, percent(100. / 7.)), + ColorStop::new(ORANGE, percent(100. / 7.)), + ColorStop::new(ORANGE, percent(200. / 7.)), + ColorStop::new(YELLOW, percent(200. / 7.)), + ColorStop::new(YELLOW, percent(300. / 7.)), + ColorStop::new(GREEN, percent(300. / 7.)), + ColorStop::new(GREEN, percent(400. / 7.)), + ColorStop::new(BLUE, percent(400. / 7.)), + ColorStop::new(BLUE, percent(500. / 7.)), + ColorStop::new(INDIGO, percent(500. / 7.)), + ColorStop::new(INDIGO, percent(600. / 7.)), + ColorStop::new(VIOLET, percent(600. / 7.)), VIOLET.into(), ], ), @@ -67,26 +67,26 @@ fn setup(mut commands: Commands) { commands .spawn(Node { flex_direction: FlexDirection::Column, - row_gap: Val::Px(5.), + row_gap: px(5), ..Default::default() }) .with_children(|commands| { for (w, h) in [(70., 70.), (35., 70.), (70., 35.)] { commands .spawn(Node { - column_gap: Val::Px(10.), + column_gap: px(10), ..Default::default() }) .with_children(|commands| { for angle in (0..8).map(|i| i as f32 * TAU / 8.) { commands.spawn(( Node { - width: Val::Px(w), - height: Val::Px(h), - border: UiRect::all(Val::Px(b)), + width: px(w), + height: px(h), + border: UiRect::all(px(b)), ..default() }, - BorderRadius::all(Val::Px(20.)), + BorderRadius::all(px(20)), BackgroundGradient::from(LinearGradient { angle, stops: stops.clone(), @@ -111,12 +111,12 @@ fn setup(mut commands: Commands) { commands.spawn(( Node { aspect_ratio: Some(1.), - height: Val::Percent(100.), - border: UiRect::all(Val::Px(b)), - margin: UiRect::left(Val::Px(20.)), + height: percent(100), + border: UiRect::all(px(b)), + margin: UiRect::left(px(20)), ..default() }, - BorderRadius::all(Val::Px(20.)), + BorderRadius::all(px(20)), BackgroundGradient::from(LinearGradient { angle: 0., stops: stops.clone(), @@ -133,12 +133,12 @@ fn setup(mut commands: Commands) { commands.spawn(( Node { aspect_ratio: Some(1.), - height: Val::Percent(100.), - border: UiRect::all(Val::Px(b)), - margin: UiRect::left(Val::Px(20.)), + height: percent(100), + border: UiRect::all(px(b)), + margin: UiRect::left(px(20)), ..default() }, - BorderRadius::all(Val::Px(20.)), + BorderRadius::all(px(20)), BackgroundGradient::from(RadialGradient { stops: stops.clone(), shape: RadialGradientShape::ClosestSide, @@ -155,12 +155,12 @@ fn setup(mut commands: Commands) { commands.spawn(( Node { aspect_ratio: Some(1.), - height: Val::Percent(100.), - border: UiRect::all(Val::Px(b)), - margin: UiRect::left(Val::Px(20.)), + height: percent(100), + border: UiRect::all(px(b)), + margin: UiRect::left(px(20)), ..default() }, - BorderRadius::all(Val::Px(20.)), + BorderRadius::all(px(20)), BackgroundGradient::from(ConicGradient { start: 0., stops: stops @@ -184,8 +184,8 @@ fn setup(mut commands: Commands) { let button = commands.spawn(( Button, Node { - border: UiRect::all(Val::Px(2.0)), - padding: UiRect::axes(Val::Px(8.0), Val::Px(4.0)), + border: UiRect::all(px(2)), + padding: UiRect::axes(px(8), px(4)), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text @@ -272,7 +272,7 @@ fn setup(mut commands: Commands) { commands.spawn( Node { flex_direction: FlexDirection::Column, - row_gap: Val::Px(10.), + row_gap: px(10), align_items: AlignItems::Center, ..Default::default() } diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs index 92156a7bc6a2b..63b2b525be3a0 100644 --- a/examples/ui/grid.rs +++ b/examples/ui/grid.rs @@ -26,8 +26,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { // Use the CSS Grid algorithm for laying out this node display: Display::Grid, // Make node fill the entirety of its parent (in this case the window) - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), // Set the grid to have 2 columns with sizes [min-content, minmax(0, 1fr)] // - The first column will size to the size of its contents // - The second column will take up the remaining available space @@ -53,7 +53,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { display: Display::Grid, // Make this node span two grid columns so that it takes up the entire top tow grid_column: GridPlacement::span(2), - padding: UiRect::all(Val::Px(6.0)), + padding: UiRect::all(px(6)), ..default() }, ) @@ -66,14 +66,14 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { .spawn(( Node { // Make the height of the node fill its parent - height: Val::Percent(100.0), + height: percent(100), // 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), // Use grid layout for this node display: Display::Grid, // Add 24px of padding around the grid - padding: UiRect::all(Val::Px(24.0)), + padding: UiRect::all(px(24)), // Set the grid to have 4 columns all with sizes minmax(0, 1fr) // This creates 4 exactly evenly sized columns grid_template_columns: RepeatedGridTrack::flex(4, 1.0), @@ -81,8 +81,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { // This creates 4 exactly evenly sized rows grid_template_rows: RepeatedGridTrack::flex(4, 1.0), // Set a 12px gap/gutter between rows and columns - row_gap: Val::Px(12.0), - column_gap: Val::Px(12.0), + row_gap: px(12), + column_gap: px(12), ..default() }, BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), @@ -121,12 +121,12 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { // Align content towards the center in the horizontal axis justify_items: JustifyItems::Center, // Add 10px padding - padding: UiRect::all(Val::Px(10.)), + padding: UiRect::all(px(10)), // Add an fr track to take up all the available space at the bottom of the column so that the text nodes // 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 - row_gap: Val::Px(10.), + row_gap: px(10), ..default() }, BackgroundColor(BLACK.into()), @@ -163,14 +163,14 @@ fn spawn_layout(mut commands: Commands, asset_server: Res) { Node { position_type: PositionType::Absolute, margin: UiRect { - top: Val::Px(100.), - bottom: Val::Auto, - left: Val::Auto, - right: Val::Auto, + top: px(100), + bottom: auto(), + left: auto(), + right: auto(), }, - width: Val::Percent(60.), - height: Val::Px(300.), - max_width: Val::Px(600.), + width: percent(60), + height: px(300), + max_width: px(600), ..default() }, Visibility::Hidden, @@ -187,7 +187,7 @@ fn item_rect(builder: &mut ChildSpawnerCommands, color: Srgba) { .spawn(( Node { display: Display::Grid, - padding: UiRect::all(Val::Px(3.0)), + padding: UiRect::all(px(3)), ..default() }, BackgroundColor(BLACK.into()), diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs index c5764ce328f54..2443ac7707bef 100644 --- a/examples/ui/overflow.rs +++ b/examples/ui/overflow.rs @@ -22,8 +22,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..Default::default() @@ -41,7 +41,7 @@ fn setup(mut commands: Commands, asset_server: Res) { .spawn(Node { flex_direction: FlexDirection::Column, align_items: AlignItems::Center, - margin: UiRect::horizontal(Val::Px(25.)), + margin: UiRect::horizontal(px(25)), ..Default::default() }) .with_children(|parent| { @@ -49,8 +49,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - padding: UiRect::all(Val::Px(10.)), - margin: UiRect::bottom(Val::Px(25.)), + padding: UiRect::all(px(10)), + margin: UiRect::bottom(px(25)), ..Default::default() }, BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), @@ -61,14 +61,14 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), padding: UiRect { - left: Val::Px(25.), - top: Val::Px(25.), + left: px(25), + top: px(25), ..Default::default() }, - border: UiRect::all(Val::Px(5.)), + border: UiRect::all(px(5)), overflow, ..default() }, @@ -79,14 +79,14 @@ fn setup(mut commands: Commands, asset_server: Res) { parent.spawn(( ImageNode::new(image.clone()), Node { - min_width: Val::Px(100.), - min_height: Val::Px(100.), + min_width: px(100), + min_height: px(100), ..default() }, Interaction::default(), Outline { - width: Val::Px(2.), - offset: Val::Px(2.), + width: px(2), + offset: px(2), color: Color::NONE, }, )); diff --git a/examples/ui/overflow_clip_margin.rs b/examples/ui/overflow_clip_margin.rs index aebcc0682835f..888aa4d4b45d6 100644 --- a/examples/ui/overflow_clip_margin.rs +++ b/examples/ui/overflow_clip_margin.rs @@ -19,11 +19,11 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, - row_gap: Val::Px(40.), + row_gap: px(40), flex_direction: FlexDirection::Column, ..default() }, @@ -39,15 +39,15 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(Node { flex_direction: FlexDirection::Row, - column_gap: Val::Px(20.), + column_gap: px(20), ..default() }) .with_children(|parent| { parent .spawn(( Node { - padding: UiRect::all(Val::Px(10.)), - margin: UiRect::bottom(Val::Px(25.)), + padding: UiRect::all(px(10)), + margin: UiRect::bottom(px(25)), ..default() }, BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), @@ -57,11 +57,11 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - margin: UiRect::top(Val::Px(10.)), - width: Val::Px(100.), - height: Val::Px(100.), - padding: UiRect::all(Val::Px(20.)), - border: UiRect::all(Val::Px(5.)), + margin: UiRect::top(px(10)), + width: px(100), + height: px(100), + padding: UiRect::all(px(20)), + border: UiRect::all(px(5)), overflow: Overflow::clip(), overflow_clip_margin, ..default() @@ -73,8 +73,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - min_width: Val::Px(50.), - min_height: Val::Px(50.), + min_width: px(50), + min_height: px(50), ..default() }, BackgroundColor(LIGHT_CYAN.into()), @@ -82,8 +82,8 @@ fn setup(mut commands: Commands, asset_server: Res) { .with_child(( ImageNode::new(image.clone()), Node { - min_width: Val::Px(100.), - min_height: Val::Px(100.), + min_width: px(100), + min_height: px(100), ..default() }, )); diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs index 7f77cb98c6380..1f0bde0eb5364 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow_debug.rs @@ -48,8 +48,8 @@ struct Move; impl UpdateTransform for Move { fn update(&self, t: f32, transform: &mut UiTransform) { - transform.translation.x = Val::Percent(ops::sin(t * TAU - FRAC_PI_2) * 50.); - transform.translation.y = Val::Percent(-ops::cos(t * TAU - FRAC_PI_2) * 50.); + transform.translation.x = percent(ops::sin(t * TAU - FRAC_PI_2) * 50.); + transform.translation.y = percent(-ops::cos(t * TAU - FRAC_PI_2) * 50.); } } @@ -89,8 +89,8 @@ fn setup(mut commands: Commands, asset_server: Res) { text_font.clone(), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, Instructions, @@ -104,8 +104,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -116,8 +116,8 @@ fn setup(mut commands: Commands, asset_server: Res) { display: Display::Grid, grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE), grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE), - row_gap: Val::Px(80.), - column_gap: Val::Px(80.), + row_gap: px(80), + column_gap: px(80), ..default() }) .with_children(|parent| { @@ -141,10 +141,10 @@ fn spawn_image( parent.spawn(( ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png")), Node { - height: Val::Px(100.), + height: px(100), position_type: PositionType::Absolute, - top: Val::Px(-50.), - left: Val::Px(-200.), + top: px(-50), + left: px(-200), ..default() }, )); @@ -176,8 +176,8 @@ fn spawn_container( parent .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, overflow: Overflow::clip(), @@ -263,12 +263,12 @@ fn next_container_size(mut containers: Query<(&mut Node, &mut Container)>) { container.0 = (container.0 + 1) % 3; node.width = match container.0 { - 2 => Val::Percent(30.), - _ => Val::Percent(100.), + 2 => percent(30), + _ => percent(100), }; node.height = match container.0 { - 1 => Val::Percent(30.), - _ => Val::Percent(100.), + 1 => percent(30), + _ => percent(100), }; } } diff --git a/examples/ui/relative_cursor_position.rs b/examples/ui/relative_cursor_position.rs index 1fe8e4f853f27..16fec4903925b 100644 --- a/examples/ui/relative_cursor_position.rs +++ b/examples/ui/relative_cursor_position.rs @@ -28,8 +28,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, flex_direction: FlexDirection::Column, @@ -39,9 +39,9 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(250.), - height: Val::Px(250.), - margin: UiRect::bottom(Val::Px(15.)), + width: px(250), + height: px(250), + margin: UiRect::bottom(px(15)), ..default() }, BackgroundColor(Color::srgb(0.92, 0.14, 0.05)), diff --git a/examples/ui/render_ui_to_texture.rs b/examples/ui/render_ui_to_texture.rs index e3be16cb4156e..7a8b211766dd5 100644 --- a/examples/ui/render_ui_to_texture.rs +++ b/examples/ui/render_ui_to_texture.rs @@ -75,8 +75,8 @@ fn setup( .spawn(( Node { // Cover the whole image - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, diff --git a/examples/ui/scroll.rs b/examples/ui/scroll.rs index 46f5ca362005b..e3c7002925f90 100644 --- a/examples/ui/scroll.rs +++ b/examples/ui/scroll.rs @@ -118,8 +118,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // root node commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), justify_content: JustifyContent::SpaceBetween, flex_direction: FlexDirection::Column, ..default() @@ -128,7 +128,7 @@ fn setup(mut commands: Commands, asset_server: Res) { // horizontal scroll example parent .spawn(Node { - width: Val::Percent(100.), + width: percent(100), flex_direction: FlexDirection::Column, ..default() }) @@ -148,8 +148,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Percent(80.), - margin: UiRect::all(Val::Px(10.)), + width: percent(80), + margin: UiRect::all(px(10)), flex_direction: FlexDirection::Row, overflow: Overflow::scroll_x(), // n.b. ..default() @@ -168,7 +168,7 @@ fn setup(mut commands: Commands, asset_server: Res) { Label, AccessibilityNode(Accessible::new(Role::ListItem)), Node { - min_width: Val::Px(200.), + min_width: px(200), align_content: AlignContent::Center, ..default() }, @@ -187,8 +187,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // container for all other examples parent.spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Row, justify_content: JustifyContent::SpaceBetween, ..default() @@ -208,7 +208,7 @@ fn vertically_scrolling_list(font_handle: Handle) -> impl Bundle { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Px(200.), + width: px(200), ..default() }, children![ @@ -227,7 +227,7 @@ fn vertically_scrolling_list(font_handle: Handle) -> impl Bundle { Node { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, - height: Val::Percent(50.), + height: percent(50), overflow: Overflow::scroll_y(), // n.b. ..default() }, @@ -235,8 +235,8 @@ fn vertically_scrolling_list(font_handle: Handle) -> impl Bundle { Children::spawn(SpawnIter((0..25).map(move |i| { ( Node { - min_height: Val::Px(LINE_HEIGHT), - max_height: Val::Px(LINE_HEIGHT), + min_height: px(LINE_HEIGHT), + max_height: px(LINE_HEIGHT), ..default() }, children![( @@ -261,7 +261,7 @@ fn bidirectional_scrolling_list(font_handle: Handle) -> impl Bundle { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Px(200.), + width: px(200), ..default() }, children![ @@ -278,7 +278,7 @@ fn bidirectional_scrolling_list(font_handle: Handle) -> impl Bundle { Node { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, - height: Val::Percent(50.), + height: percent(50), overflow: Overflow::scroll(), // n.b. ..default() }, @@ -316,7 +316,7 @@ fn nested_scrolling_list(font_handle: Handle) -> impl Bundle { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - width: Val::Px(200.), + width: px(200), ..default() }, children![ @@ -333,10 +333,10 @@ fn nested_scrolling_list(font_handle: Handle) -> impl Bundle { ( // Outer, bi-directional scrolling container Node { - column_gap: Val::Px(20.), + column_gap: px(20), flex_direction: FlexDirection::Row, align_self: AlignSelf::Stretch, - height: Val::Percent(50.), + height: percent(50), overflow: Overflow::scroll(), ..default() }, @@ -347,7 +347,7 @@ fn nested_scrolling_list(font_handle: Handle) -> impl Bundle { Node { flex_direction: FlexDirection::Column, align_self: AlignSelf::Stretch, - height: Val::Percent(200. / 5. * (oi as f32 + 1.)), + height: percent(200. / 5. * (oi as f32 + 1.)), overflow: Overflow::scroll_y(), ..default() }, diff --git a/examples/ui/scrollbars.rs b/examples/ui/scrollbars.rs index 72cdfd8229a6e..1a9d29b555393 100644 --- a/examples/ui/scrollbars.rs +++ b/examples/ui/scrollbars.rs @@ -36,12 +36,12 @@ fn setup_view_root(mut commands: Commands) { display: Display::Flex, flex_direction: FlexDirection::Column, position_type: PositionType::Absolute, - left: Val::Px(0.), - top: Val::Px(0.), - right: Val::Px(0.), - bottom: Val::Px(0.), - padding: UiRect::all(Val::Px(3.)), - row_gap: Val::Px(6.), + left: px(0), + top: px(0), + right: px(0), + bottom: px(0), + padding: UiRect::all(px(3)), + row_gap: px(6), ..Default::default() }, BackgroundColor(Color::srgb(0.1, 0.1, 0.1)), @@ -64,12 +64,12 @@ fn scroll_area_demo() -> impl Bundle { // Frame element which contains the scroll area and scrollbars. Node { display: Display::Grid, - width: Val::Px(200.0), - height: Val::Px(150.0), + width: px(200), + height: px(150), grid_template_columns: vec![RepeatedGridTrack::flex(1, 1.), RepeatedGridTrack::auto(1)], grid_template_rows: vec![RepeatedGridTrack::flex(1, 1.), RepeatedGridTrack::auto(1)], - row_gap: Val::Px(2.0), - column_gap: Val::Px(2.0), + row_gap: px(2), + column_gap: px(2), ..default() }, Children::spawn((SpawnWith(|parent: &mut RelatedSpawner| { @@ -81,7 +81,7 @@ fn scroll_area_demo() -> impl Bundle { Node { display: Display::Flex, flex_direction: FlexDirection::Column, - padding: UiRect::all(Val::Px(4.0)), + padding: UiRect::all(px(4)), overflow: Overflow::scroll(), ..default() }, @@ -108,7 +108,7 @@ fn scroll_area_demo() -> impl Bundle { // Vertical scrollbar parent.spawn(( Node { - min_width: Val::Px(8.0), + min_width: px(8), grid_row: GridPlacement::start(1), grid_column: GridPlacement::start(2), ..default() @@ -125,7 +125,7 @@ fn scroll_area_demo() -> impl Bundle { }, Hovered::default(), BackgroundColor(colors::GRAY2.into()), - BorderRadius::all(Val::Px(4.0)), + BorderRadius::all(px(4)), CoreScrollbarThumb, ))), )); @@ -133,7 +133,7 @@ fn scroll_area_demo() -> impl Bundle { // Horizontal scrollbar parent.spawn(( Node { - min_height: Val::Px(8.0), + min_height: px(8), grid_row: GridPlacement::start(2), grid_column: GridPlacement::start(1), ..default() @@ -150,7 +150,7 @@ fn scroll_area_demo() -> impl Bundle { }, Hovered::default(), BackgroundColor(colors::GRAY2.into()), - BorderRadius::all(Val::Px(4.0)), + BorderRadius::all(px(4)), CoreScrollbarThumb, ))), )); diff --git a/examples/ui/size_constraints.rs b/examples/ui/size_constraints.rs index c4a70a9cfff96..0752d8a3dec89 100644 --- a/examples/ui/size_constraints.rs +++ b/examples/ui/size_constraints.rs @@ -54,8 +54,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(( Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -75,7 +75,7 @@ fn setup(mut commands: Commands, asset_server: Res) { Text::new("Size Constraints Example"), text_font.clone(), Node { - margin: UiRect::bottom(Val::Px(25.)), + margin: UiRect::bottom(px(25)), ..Default::default() }, )); @@ -87,8 +87,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Node { flex_direction: FlexDirection::Column, align_items: AlignItems::Stretch, - padding: UiRect::all(Val::Px(10.)), - margin: UiRect::top(Val::Px(50.)), + padding: UiRect::all(px(10)), + margin: UiRect::top(px(50)), ..default() }, BackgroundColor(YELLOW.into()), @@ -111,9 +111,9 @@ fn spawn_bar(parent: &mut ChildSpawnerCommands) { parent .spawn(( Node { - flex_basis: Val::Percent(100.0), + flex_basis: percent(100), align_self: AlignSelf::Stretch, - padding: UiRect::all(Val::Px(10.)), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(YELLOW.into()), @@ -123,9 +123,9 @@ fn spawn_bar(parent: &mut ChildSpawnerCommands) { .spawn(( Node { align_items: AlignItems::Stretch, - width: Val::Percent(100.), - height: Val::Px(100.), - padding: UiRect::all(Val::Px(4.)), + width: percent(100), + height: px(100), + padding: UiRect::all(px(4)), ..default() }, BackgroundColor(Color::BLACK), @@ -152,7 +152,7 @@ fn spawn_button_row( .spawn(( Node { flex_direction: FlexDirection::Column, - padding: UiRect::all(Val::Px(2.)), + padding: UiRect::all(px(2)), align_items: AlignItems::Stretch, ..default() }, @@ -163,15 +163,15 @@ fn spawn_button_row( .spawn(Node { flex_direction: FlexDirection::Row, justify_content: JustifyContent::End, - padding: UiRect::all(Val::Px(2.)), + padding: UiRect::all(px(2)), ..default() }) .with_children(|parent| { // spawn row label parent .spawn((Node { - min_width: Val::Px(200.), - max_width: Val::Px(200.), + min_width: px(200), + max_width: px(200), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -183,17 +183,17 @@ fn spawn_button_row( spawn_button( parent, constraint, - ButtonValue(Val::Auto), + ButtonValue(auto()), "Auto".to_string(), text_style.clone(), true, ); - for percent in [0., 25., 50., 75., 100., 125.] { + for percent_value in [0, 25, 50, 75, 100, 125] { spawn_button( parent, constraint, - ButtonValue(Val::Percent(percent)), - format!("{percent}%"), + ButtonValue(percent(percent_value)), + format!("{percent_value}%"), text_style.clone(), false, ); @@ -217,8 +217,8 @@ fn spawn_button( Node { align_items: AlignItems::Center, justify_content: JustifyContent::Center, - border: UiRect::all(Val::Px(2.)), - margin: UiRect::horizontal(Val::Px(2.)), + border: UiRect::all(px(2)), + margin: UiRect::horizontal(px(2)), ..Default::default() }, BorderColor::all(if active { @@ -233,7 +233,7 @@ fn spawn_button( parent .spawn(( Node { - width: Val::Px(100.), + width: px(100), justify_content: JustifyContent::Center, ..default() }, diff --git a/examples/ui/stacked_gradients.rs b/examples/ui/stacked_gradients.rs index 37ceddc0ac43e..03120dd9ab25b 100644 --- a/examples/ui/stacked_gradients.rs +++ b/examples/ui/stacked_gradients.rs @@ -18,16 +18,16 @@ fn setup(mut commands: Commands) { commands .spawn(Node { display: Display::Grid, - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..Default::default() }) .with_children(|commands| { commands.spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), ..Default::default() }, BackgroundColor(Color::BLACK), @@ -56,8 +56,8 @@ fn setup(mut commands: Commands) { } .into(), RadialGradient { - position: UiPosition::TOP.at_x(Val::Percent(5.)), - shape: RadialGradientShape::Circle(Val::Vh(30.)), + position: UiPosition::TOP.at_x(percent(5)), + shape: RadialGradientShape::Circle(vh(30)), stops: vec![ ColorStop::auto(Color::WHITE), ColorStop::auto(YELLOW), diff --git a/examples/ui/tab_navigation.rs b/examples/ui/tab_navigation.rs index 766016fb1a3f3..eca992f2ab782 100644 --- a/examples/ui/tab_navigation.rs +++ b/examples/ui/tab_navigation.rs @@ -58,8 +58,8 @@ fn focus_system( if focus.0 == Some(button) { commands.entity(button).insert(Outline { color: Color::WHITE, - width: Val::Px(2.0), - offset: Val::Px(2.0), + width: px(2), + offset: px(2), }); } else { commands.entity(button).remove::(); @@ -73,13 +73,13 @@ fn setup(mut commands: Commands) { commands.spawn(Camera2d); commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), display: Display::Flex, flex_direction: FlexDirection::Column, align_items: AlignItems::Center, justify_content: JustifyContent::Center, - row_gap: Val::Px(6.0), + row_gap: px(6), ..default() }) .observe( @@ -105,9 +105,9 @@ fn setup(mut commands: Commands) { Node { display: Display::Flex, flex_direction: FlexDirection::Row, - column_gap: Val::Px(6.0), + column_gap: px(6), margin: UiRect { - bottom: Val::Px(10.0), + bottom: px(10), ..default() }, ..default() @@ -120,9 +120,9 @@ fn setup(mut commands: Commands) { .spawn(( Button, Node { - width: Val::Px(200.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(200), + height: px(65), + border: UiRect::all(px(5)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/ui/text.rs b/examples/ui/text.rs index fa533e6663745..ec0f6185efc04 100644 --- a/examples/ui/text.rs +++ b/examples/ui/text.rs @@ -44,8 +44,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // Set the style of the Node itself. Node { position_type: PositionType::Absolute, - bottom: Val::Px(5.0), - right: Val::Px(5.0), + bottom: px(5), + right: px(5), ..default() }, AnimatedText, @@ -95,8 +95,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Text::new("From an &str into a Text with the default font!"), Node { position_type: PositionType::Absolute, - bottom: Val::Px(5.0), - left: Val::Px(15.0), + bottom: px(5), + left: px(15), ..default() }, )); @@ -110,8 +110,8 @@ fn setup(mut commands: Commands, asset_server: Res) { }, Node { position_type: PositionType::Absolute, - bottom: Val::Px(5.0), - left: Val::Px(15.0), + bottom: px(5), + left: px(15), ..default() }, )); diff --git a/examples/ui/text_background_colors.rs b/examples/ui/text_background_colors.rs index 3f82190f7486f..8f32c8d29e85b 100644 --- a/examples/ui/text_background_colors.rs +++ b/examples/ui/text_background_colors.rs @@ -32,8 +32,8 @@ fn setup(mut commands: Commands) { commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..Default::default() diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs index 84701e3916939..84e4db4e52b43 100644 --- a/examples/ui/text_debug.rs +++ b/examples/ui/text_debug.rs @@ -37,8 +37,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { let root_uinode = commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::SpaceBetween, ..default() }) @@ -50,7 +50,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { justify_content: JustifyContent::SpaceBetween, align_items: AlignItems::Start, flex_grow: 1., - margin: UiRect::axes(Val::Px(15.), Val::Px(5.)), + margin: UiRect::axes(px(15), px(5)), ..default() }).with_children(|builder| { builder.spawn(( @@ -74,7 +74,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { TextColor(YELLOW.into()), TextLayout::new_with_justify(Justify::Right), Node { - max_width: Val::Px(300.), + max_width: px(300), ..default() }, BackgroundColor(background_color) @@ -88,7 +88,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { ..default() }, Node { - max_width: Val::Px(300.), + max_width: px(300), ..default() }, BackgroundColor(background_color) @@ -102,7 +102,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { justify_content: JustifyContent::SpaceBetween, align_items: AlignItems::End, flex_grow: 1., - margin: UiRect::axes(Val::Px(15.), Val::Px(5.)), + margin: UiRect::axes(px(15), px(5)), ..default() }) .with_children(|builder| { @@ -116,7 +116,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { TextColor(Color::srgb(0.8, 0.2, 0.7)), TextLayout::new_with_justify(Justify::Center), Node { - max_width: Val::Px(400.), + max_width: px(400), ..default() }, BackgroundColor(background_color), @@ -132,7 +132,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { TextColor(YELLOW.into()), TextLayout::new_with_justify(Justify::Left), Node { - max_width: Val::Px(300.), + max_width: px(300), ..default() }, BackgroundColor(background_color), @@ -148,7 +148,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res) { TextLayout::new_with_justify(Justify::Justified), TextColor(GREEN_YELLOW.into()), Node { - max_width: Val::Px(300.), + max_width: px(300), ..default() }, BackgroundColor(background_color), diff --git a/examples/ui/text_wrap_debug.rs b/examples/ui/text_wrap_debug.rs index 986d9c79ff3d8..d718a870e8aca 100644 --- a/examples/ui/text_wrap_debug.rs +++ b/examples/ui/text_wrap_debug.rs @@ -54,8 +54,8 @@ fn spawn(mut commands: Commands, asset_server: Res) { let root = commands .spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, ..default() }, @@ -74,8 +74,8 @@ fn spawn(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Row, justify_content: JustifyContent::SpaceAround, align_items: AlignItems::Center, - width: Val::Percent(100.), - height: Val::Percent(50.), + width: percent(100), + height: percent(50), ..default() }) .id(); @@ -96,8 +96,8 @@ fn spawn(mut commands: Commands, asset_server: Res) { Node { justify_content: justification, flex_direction: FlexDirection::Column, - width: Val::Percent(16.), - height: Val::Percent(95.), + width: percent(16), + height: percent(95), overflow: Overflow::clip_x(), ..default() }, diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs index 619e503d33cbc..d3884483f463f 100644 --- a/examples/ui/transparency_ui.rs +++ b/examples/ui/transparency_ui.rs @@ -18,8 +18,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::SpaceAround, ..default() @@ -29,8 +29,8 @@ fn setup(mut commands: Commands, asset_server: Res) { .spawn(( Button, Node { - width: Val::Px(150.0), - height: Val::Px(65.0), + width: px(150), + height: px(65), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() @@ -56,8 +56,8 @@ fn setup(mut commands: Commands, asset_server: Res) { .spawn(( Button, Node { - width: Val::Px(150.0), - height: Val::Px(65.0), + width: px(150), + height: px(65), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/ui/ui_material.rs b/examples/ui/ui_material.rs index 61133a44cc1fd..f283c1be8887d 100644 --- a/examples/ui/ui_material.rs +++ b/examples/ui/ui_material.rs @@ -27,8 +27,8 @@ fn setup( commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -38,9 +38,9 @@ fn setup( parent.spawn(( Node { position_type: PositionType::Absolute, - width: Val::Px(905.0 * banner_scale_factor), - height: Val::Px(363.0 * banner_scale_factor), - border: UiRect::all(Val::Px(20.)), + width: px(905.0 * banner_scale_factor), + height: px(363.0 * banner_scale_factor), + border: UiRect::all(px(20)), ..default() }, MaterialNode(ui_materials.add(CustomUiMaterial { @@ -49,11 +49,11 @@ fn setup( color_texture: asset_server.load("branding/banner.png"), border_color: LinearRgba::WHITE.to_f32_array().into(), })), - BorderRadius::all(Val::Px(20.)), + BorderRadius::all(px(20)), // UI material nodes can have outlines and shadows like any other UI node Outline { - width: Val::Px(2.), - offset: Val::Px(100.), + width: px(2), + offset: px(100), color: DARK_BLUE.into(), }, )); diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs index ea4cd8f1286d1..5a61e41eb8eb2 100644 --- a/examples/ui/ui_scaling.rs +++ b/examples/ui/ui_scaling.rs @@ -32,11 +32,11 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(( Node { - width: Val::Percent(50.0), - height: Val::Percent(50.0), + width: percent(50), + height: percent(50), position_type: PositionType::Absolute, - left: Val::Percent(25.), - top: Val::Percent(25.), + left: percent(25), + top: percent(25), justify_content: JustifyContent::SpaceAround, align_items: AlignItems::Center, ..default() @@ -47,8 +47,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(( Node { - width: Val::Px(40.0), - height: Val::Px(40.0), + width: px(40), + height: px(40), ..default() }, BackgroundColor(RED.into()), @@ -58,8 +58,8 @@ fn setup(mut commands: Commands, asset_server: Res) { }); parent.spawn(( Node { - width: Val::Percent(15.0), - height: Val::Percent(15.0), + width: percent(15), + height: percent(15), ..default() }, BackgroundColor(BLUE.into()), @@ -67,8 +67,8 @@ fn setup(mut commands: Commands, asset_server: Res) { parent.spawn(( ImageNode::new(asset_server.load("branding/icon.png")), Node { - width: Val::Px(30.0), - height: Val::Px(30.0), + width: px(30), + height: px(30), ..default() }, )); diff --git a/examples/ui/ui_texture_atlas.rs b/examples/ui/ui_texture_atlas.rs index 5f326a6c33272..51459c3f47056 100644 --- a/examples/ui/ui_texture_atlas.rs +++ b/examples/ui/ui_texture_atlas.rs @@ -34,12 +34,12 @@ fn setup( // root node commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, align_items: AlignItems::Center, - row_gap: Val::Px(text_font.font_size * 2.), + row_gap: px(text_font.font_size * 2.), ..default() }) .with_children(|parent| { @@ -49,12 +49,12 @@ fn setup( TextureAtlas::from(texture_atlas_handle), ), Node { - width: Val::Px(256.), - height: Val::Px(256.), + width: px(256), + height: px(256), ..default() }, BackgroundColor(ANTIQUE_WHITE.into()), - Outline::new(Val::Px(8.0), Val::ZERO, CRIMSON.into()), + Outline::new(px(8), Val::ZERO, CRIMSON.into()), )); parent .spawn((Text::new("press "), text_font.clone())) diff --git a/examples/ui/ui_texture_atlas_slice.rs b/examples/ui/ui_texture_atlas_slice.rs index 8102810aa56eb..dc639a1a58cc3 100644 --- a/examples/ui/ui_texture_atlas_slice.rs +++ b/examples/ui/ui_texture_atlas_slice.rs @@ -67,8 +67,8 @@ fn setup( commands.spawn(Camera2d); commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -91,13 +91,13 @@ fn setup( ) .with_mode(NodeImageMode::Sliced(slicer.clone())), Node { - width: Val::Px(w), - height: Val::Px(h), + width: px(w), + height: px(h), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text align_items: AlignItems::Center, - margin: UiRect::all(Val::Px(20.0)), + margin: UiRect::all(px(20)), ..default() }, )) diff --git a/examples/ui/ui_texture_slice.rs b/examples/ui/ui_texture_slice.rs index c62bfe00fbc6d..9e9e2339269be 100644 --- a/examples/ui/ui_texture_slice.rs +++ b/examples/ui/ui_texture_slice.rs @@ -57,8 +57,8 @@ fn setup(mut commands: Commands, asset_server: Res) { commands.spawn(Camera2d); commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -74,13 +74,13 @@ fn setup(mut commands: Commands, asset_server: Res) { ..default() }, Node { - width: Val::Px(w), - height: Val::Px(h), + width: px(w), + height: px(h), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text align_items: AlignItems::Center, - margin: UiRect::all(Val::Px(20.0)), + margin: UiRect::all(px(20)), ..default() }, )) diff --git a/examples/ui/ui_texture_slice_flip_and_tile.rs b/examples/ui/ui_texture_slice_flip_and_tile.rs index 3eaf4277f5b70..987eeb28ea024 100644 --- a/examples/ui/ui_texture_slice_flip_and_tile.rs +++ b/examples/ui/ui_texture_slice_flip_and_tile.rs @@ -41,17 +41,17 @@ fn setup(mut commands: Commands, asset_server: Res) { commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), justify_content: JustifyContent::Center, align_content: AlignContent::Center, flex_wrap: FlexWrap::Wrap, - column_gap: Val::Px(10.), - row_gap: Val::Px(10.), + column_gap: px(10), + row_gap: px(10), ..default() }) .with_children(|parent| { - for [columns, rows] in [[3., 3.], [4., 4.], [5., 4.], [4., 5.], [5., 5.]] { + for [columns, rows] in [[3, 3], [4, 4], [5, 4], [4, 5], [5, 5]] { for (flip_x, flip_y) in [(false, false), (false, true), (true, false), (true, true)] { parent.spawn(( @@ -63,8 +63,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ..default() }, Node { - width: Val::Px(16. * columns), - height: Val::Px(16. * rows), + width: px(16 * columns), + height: px(16 * rows), ..default() }, )); diff --git a/examples/ui/ui_transform.rs b/examples/ui/ui_transform.rs index 68abd0ba3631c..b559c938f4a3c 100644 --- a/examples/ui/ui_transform.rs +++ b/examples/ui/ui_transform.rs @@ -106,8 +106,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // Root node filling the whole screen commands.spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -117,8 +117,8 @@ fn setup(mut commands: Commands, asset_server: Res) { Node { align_items: AlignItems::Center, justify_content: JustifyContent::SpaceEvenly, - column_gap: Val::Px(25.0), - row_gap: Val::Px(25.0), + column_gap: px(25), + row_gap: px(25), ..default() }, BackgroundColor(Color::BLACK), @@ -127,9 +127,9 @@ fn setup(mut commands: Commands, asset_server: Res) { Node { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, - row_gap: Val::Px(10.0), - column_gap: Val::Px(10.0), - padding: UiRect::all(Val::Px(10.0)), + row_gap: px(10), + column_gap: px(10), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(Color::BLACK), @@ -138,8 +138,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - height: Val::Px(50.0), - width: Val::Px(50.0), + height: px(50), + width: px(50), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -151,8 +151,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - height: Val::Px(50.0), - width: Val::Px(50.0), + height: px(50), + width: px(50), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -169,8 +169,8 @@ fn setup(mut commands: Commands, asset_server: Res) { flex_direction: FlexDirection::Column, justify_content: JustifyContent::SpaceBetween, align_items: AlignItems::Center, - width: Val::Px(300.0), - height: Val::Px(300.0), + width: px(300), + height: px(300), ..default() }, BackgroundColor(DARK_GRAY.into()), @@ -179,8 +179,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - width: Val::Px(80.0), - height: Val::Px(80.0), + width: px(80), + height: px(80), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -199,8 +199,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - width: Val::Px(80.0), - height: Val::Px(80.0), + width: px(80), + height: px(80), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -213,8 +213,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ), ( Node { - width: Val::Px(100.), - height: Val::Px(100.), + width: px(100), + height: px(100), ..Default::default() }, ImageNode { @@ -226,8 +226,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - width: Val::Px(80.0), - height: Val::Px(80.0), + width: px(80), + height: px(80), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -243,8 +243,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - width: Val::Px(80.0), - height: Val::Px(80.0), + width: px(80), + height: px(80), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -260,9 +260,9 @@ fn setup(mut commands: Commands, asset_server: Res) { Node { flex_direction: FlexDirection::Column, justify_content: JustifyContent::Center, - row_gap: Val::Px(10.0), - column_gap: Val::Px(10.0), - padding: UiRect::all(Val::Px(10.0)), + row_gap: px(10), + column_gap: px(10), + padding: UiRect::all(px(10)), ..default() }, BackgroundColor(Color::BLACK), @@ -271,8 +271,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - height: Val::Px(50.0), - width: Val::Px(50.0), + height: px(50), + width: px(50), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -284,8 +284,8 @@ fn setup(mut commands: Commands, asset_server: Res) { ( Button, Node { - height: Val::Px(50.0), - width: Val::Px(50.0), + height: px(50), + width: px(50), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs index ab936cb80058e..98b56449146f8 100644 --- a/examples/ui/viewport_debug.rs +++ b/examples/ui/viewport_debug.rs @@ -69,9 +69,9 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { commands .spawn(( Node { - width: Val::Vw(100.), - height: Val::Vh(100.), - border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)), + width: vw(100), + height: vh(100), + border: UiRect::axes(vw(5), vh(5)), flex_wrap: FlexWrap::Wrap, ..default() }, @@ -81,9 +81,9 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { .with_children(|builder| { builder.spawn(( Node { - width: Val::Vw(30.), - height: Val::Vh(30.), - border: UiRect::all(Val::VMin(5.)), + width: vw(30), + height: vh(30), + border: UiRect::all(vmin(5)), ..default() }, BackgroundColor(PALETTE[2].into()), @@ -92,8 +92,8 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Vw(60.), - height: Val::Vh(30.), + width: vw(60), + height: vh(30), ..default() }, BackgroundColor(PALETTE[3].into()), @@ -101,9 +101,9 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Vw(45.), - height: Val::Vh(30.), - border: UiRect::left(Val::VMax(45. / 2.)), + width: vw(45), + height: vh(30), + border: UiRect::left(vmax(45. / 2.)), ..default() }, BackgroundColor(PALETTE[4].into()), @@ -112,9 +112,9 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Vw(45.), - height: Val::Vh(30.), - border: UiRect::right(Val::VMax(45. / 2.)), + width: vw(45), + height: vh(30), + border: UiRect::right(vmax(45. / 2.)), ..default() }, BackgroundColor(PALETTE[5].into()), @@ -123,8 +123,8 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Vw(60.), - height: Val::Vh(30.), + width: vw(60), + height: vh(30), ..default() }, BackgroundColor(PALETTE[6].into()), @@ -132,9 +132,9 @@ fn spawn_with_viewport_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Vw(30.), - height: Val::Vh(30.), - border: UiRect::all(Val::VMin(5.)), + width: vw(30), + height: vh(30), + border: UiRect::all(vmin(5)), ..default() }, BackgroundColor(PALETTE[7].into()), @@ -147,9 +147,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { commands .spawn(( Node { - width: Val::Px(640.), - height: Val::Px(360.), - border: UiRect::axes(Val::Px(32.), Val::Px(18.)), + width: px(640), + height: px(360), + border: UiRect::axes(px(32), px(18)), flex_wrap: FlexWrap::Wrap, ..default() }, @@ -159,9 +159,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { .with_children(|builder| { builder.spawn(( Node { - width: Val::Px(192.), - height: Val::Px(108.), - border: UiRect::axes(Val::Px(18.), Val::Px(18.)), + width: px(192), + height: px(108), + border: UiRect::axes(px(18), px(18)), ..default() }, BackgroundColor(PALETTE[2].into()), @@ -170,8 +170,8 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Px(384.), - height: Val::Px(108.), + width: px(384), + height: px(108), ..default() }, BackgroundColor(PALETTE[3].into()), @@ -179,9 +179,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Px(288.), - height: Val::Px(108.), - border: UiRect::left(Val::Px(144.)), + width: px(288), + height: px(108), + border: UiRect::left(px(144)), ..default() }, BackgroundColor(PALETTE[4].into()), @@ -190,9 +190,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Px(288.), - height: Val::Px(108.), - border: UiRect::right(Val::Px(144.)), + width: px(288), + height: px(108), + border: UiRect::right(px(144)), ..default() }, BackgroundColor(PALETTE[5].into()), @@ -201,8 +201,8 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Px(384.), - height: Val::Px(108.), + width: px(384), + height: px(108), ..default() }, BackgroundColor(PALETTE[6].into()), @@ -210,9 +210,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) { builder.spawn(( Node { - width: Val::Px(192.), - height: Val::Px(108.), - border: UiRect::axes(Val::Px(18.), Val::Px(18.)), + width: px(192), + height: px(108), + border: UiRect::axes(px(18), px(18)), ..default() }, BackgroundColor(PALETTE[7].into()), diff --git a/examples/ui/viewport_node.rs b/examples/ui/viewport_node.rs index 0438004886758..2f16e553aab8a 100644 --- a/examples/ui/viewport_node.rs +++ b/examples/ui/viewport_node.rs @@ -74,11 +74,11 @@ fn test( .spawn(( Node { position_type: PositionType::Absolute, - top: Val::Px(50.0), - left: Val::Px(50.0), - width: Val::Px(200.0), - height: Val::Px(200.0), - border: UiRect::all(Val::Px(5.0)), + top: px(50), + left: px(50), + width: px(200), + height: px(200), + border: UiRect::all(px(5)), ..default() }, BorderColor::all(Color::WHITE), @@ -92,8 +92,8 @@ fn on_drag_viewport(drag: On>, mut node_query: Query<&mut Node>) { let mut node = node_query.get_mut(drag.entity()).unwrap(); if let (Val::Px(top), Val::Px(left)) = (node.top, node.left) { - node.left = Val::Px(left + drag.delta.x); - node.top = Val::Px(top + drag.delta.y); + node.left = px(left + drag.delta.x); + node.top = px(top + drag.delta.y); }; } } diff --git a/examples/ui/virtual_keyboard.rs b/examples/ui/virtual_keyboard.rs index dc74760d19a96..00f3c1a12065b 100644 --- a/examples/ui/virtual_keyboard.rs +++ b/examples/ui/virtual_keyboard.rs @@ -65,8 +65,8 @@ fn setup(mut commands: Commands) { commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::End, justify_content: JustifyContent::Center, ..default() @@ -76,16 +76,16 @@ fn setup(mut commands: Commands) { .spawn(( Node { flex_direction: FlexDirection::Column, - border: Val::Px(5.).into(), - row_gap: Val::Px(5.), - padding: Val::Px(5.).into(), + border: px(5).into(), + row_gap: px(5), + padding: px(5).into(), align_items: AlignItems::Center, - margin: Val::Px(25.).into(), + margin: px(25).into(), ..Default::default() }, BackgroundColor(NAVY.into()), BorderColor::all(Color::WHITE), - BorderRadius::all(Val::Px(10.)), + BorderRadius::all(px(10)), )) .with_children(|parent: &mut RelatedSpawnerCommands| { parent.spawn(Text::new("virtual keyboard")); diff --git a/examples/ui/window_fallthrough.rs b/examples/ui/window_fallthrough.rs index ee74e2332ec13..275514662717c 100644 --- a/examples/ui/window_fallthrough.rs +++ b/examples/ui/window_fallthrough.rs @@ -37,8 +37,8 @@ fn setup(mut commands: Commands, asset_server: Res) { // Set the style of the TextBundle itself. Node { position_type: PositionType::Absolute, - bottom: Val::Px(5.), - right: Val::Px(10.), + bottom: px(5), + right: px(10), ..default() }, )); diff --git a/examples/ui/z_index.rs b/examples/ui/z_index.rs index ae4fb22c52542..7f37537f20373 100644 --- a/examples/ui/z_index.rs +++ b/examples/ui/z_index.rs @@ -24,8 +24,8 @@ fn setup(mut commands: Commands) { // because this is a root UI node, using local or global values will do the same thing. commands .spawn(Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -34,8 +34,8 @@ fn setup(mut commands: Commands) { parent .spawn(( Node { - width: Val::Px(180.0), - height: Val::Px(100.0), + width: px(180), + height: px(100), ..default() }, BackgroundColor(GRAY.into()), @@ -45,10 +45,10 @@ fn setup(mut commands: Commands) { parent.spawn(( Node { position_type: PositionType::Absolute, - left: Val::Px(10.0), - bottom: Val::Px(40.0), - width: Val::Px(100.0), - height: Val::Px(50.0), + left: px(10), + bottom: px(40), + width: px(100), + height: px(50), ..default() }, BackgroundColor(RED.into()), @@ -59,10 +59,10 @@ fn setup(mut commands: Commands) { parent.spawn(( Node { position_type: PositionType::Absolute, - left: Val::Px(45.0), - bottom: Val::Px(30.0), - width: Val::Px(100.), - height: Val::Px(50.), + left: px(45), + bottom: px(30), + width: px(100), + height: px(50), ..default() }, ZIndex(2), @@ -74,10 +74,10 @@ fn setup(mut commands: Commands) { parent.spawn(( Node { position_type: PositionType::Absolute, - left: Val::Px(70.0), - bottom: Val::Px(20.0), - width: Val::Px(100.), - height: Val::Px(75.), + left: px(70), + bottom: px(20), + width: px(100), + height: px(75), ..default() }, ZIndex(-1), @@ -90,10 +90,10 @@ fn setup(mut commands: Commands) { parent.spawn(( Node { position_type: PositionType::Absolute, - left: Val::Px(15.0), - bottom: Val::Px(10.0), - width: Val::Px(100.), - height: Val::Px(60.), + left: px(15), + bottom: px(10), + width: px(100), + height: px(60), ..default() }, BackgroundColor(PURPLE.into()), @@ -106,10 +106,10 @@ fn setup(mut commands: Commands) { parent.spawn(( Node { position_type: PositionType::Absolute, - left: Val::Px(-15.0), - bottom: Val::Px(-15.0), - width: Val::Px(100.), - height: Val::Px(125.), + left: px(-15), + bottom: px(-15), + width: px(100), + height: px(125), ..default() }, BackgroundColor(YELLOW.into()), diff --git a/examples/usage/context_menu.rs b/examples/usage/context_menu.rs index cb1316fd783ea..ec3c400063623 100644 --- a/examples/usage/context_menu.rs +++ b/examples/usage/context_menu.rs @@ -91,13 +91,13 @@ fn on_trigger_menu(event: On, mut commands: Commands) { ContextMenu, Node { position_type: PositionType::Absolute, - left: Val::Px(pos.x), - top: Val::Px(pos.y), + left: px(pos.x), + top: px(pos.y), flex_direction: FlexDirection::Column, ..default() }, BorderColor::all(Color::BLACK), - BorderRadius::all(Val::Px(4.)), + BorderRadius::all(px(4)), BackgroundColor(Color::linear_rgb(0.1, 0.1, 0.1)), children![ context_item("fuchsia", basic::FUCHSIA), @@ -128,7 +128,7 @@ fn context_item(text: &str, col: Srgba) -> impl Bundle { ContextMenuItem(col), Button, Node { - padding: UiRect::all(Val::Px(5.0)), + padding: UiRect::all(px(5)), ..default() }, children![( @@ -147,8 +147,8 @@ fn background_and_button() -> impl Bundle { ( Name::new("background"), Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() @@ -160,9 +160,9 @@ fn background_and_button() -> impl Bundle { Name::new("button"), Button, Node { - width: Val::Px(250.0), - height: Val::Px(65.0), - border: UiRect::all(Val::Px(5.0)), + width: px(250), + height: px(65), + border: UiRect::all(px(5)), justify_content: JustifyContent::Center, align_items: AlignItems::Center, ..default() diff --git a/examples/usage/cooldown.rs b/examples/usage/cooldown.rs index e8487ea9412fc..c08384737f0e5 100644 --- a/examples/usage/cooldown.rs +++ b/examples/usage/cooldown.rs @@ -30,11 +30,11 @@ fn setup( let texture_atlas_layout = texture_atlas_layouts.add(layout); commands.spawn(( Node { - width: Val::Percent(100.), - height: Val::Percent(100.), + width: percent(100), + height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, - column_gap: Val::Px(15.), + column_gap: px(15), ..default() }, Children::spawn(SpawnIter( @@ -68,8 +68,8 @@ fn setup( Text::new("*Click some food to eat it*"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); @@ -98,8 +98,8 @@ fn build_ability( // of a cooldown, effectively graying out the whole button, and then getting smaller over time. ( Node { - width: Val::Px(80.0), - height: Val::Px(80.0), + width: px(80), + height: px(80), flex_direction: FlexDirection::ColumnReverse, ..default() }, @@ -110,8 +110,8 @@ fn build_ability( name, children![( Node { - width: Val::Percent(100.), - height: Val::Percent(0.), + width: percent(100), + height: percent(0), ..default() }, BackgroundColor(tailwind::SLATE_50.with_alpha(0.5).into()), @@ -169,9 +169,9 @@ fn animate_cooldowns( let cooldown = children.first().ok_or("No child")?; if timer.0.just_finished() { commands.entity(entity).remove::(); - nodes.get_mut(*cooldown)?.height = Val::Percent(0.); + nodes.get_mut(*cooldown)?.height = percent(0); } else { - nodes.get_mut(*cooldown)?.height = Val::Percent((1. - timer.0.fraction()) * 100.); + nodes.get_mut(*cooldown)?.height = percent((1. - timer.0.fraction()) * 100.); } } diff --git a/examples/window/custom_cursor_image.rs b/examples/window/custom_cursor_image.rs index 28539748c8059..602da9b9a8aa1 100644 --- a/examples/window/custom_cursor_image.rs +++ b/examples/window/custom_cursor_image.rs @@ -77,8 +77,8 @@ Press C to cycle through the sections of the cursor's image using `rect`.", ), Node { position_type: PositionType::Absolute, - bottom: Val::Px(12.0), - left: Val::Px(12.0), + bottom: px(12), + left: px(12), ..default() }, )); diff --git a/examples/window/low_power.rs b/examples/window/low_power.rs index 5b44442b1b9e6..91aca5f626018 100644 --- a/examples/window/low_power.rs +++ b/examples/window/low_power.rs @@ -191,8 +191,8 @@ pub(crate) mod test_setup { Node { align_self: AlignSelf::FlexStart, position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, ModeText, diff --git a/examples/window/monitor_info.rs b/examples/window/monitor_info.rs index 16e7aeda82d6b..18500c10a1a66 100644 --- a/examples/window/monitor_info.rs +++ b/examples/window/monitor_info.rs @@ -72,8 +72,8 @@ fn update( Text(info_text), Node { position_type: PositionType::Relative, - height: Val::Percent(100.0), - width: Val::Percent(100.0), + height: percent(100), + width: percent(100), ..default() }, UiTargetCamera(camera), diff --git a/examples/window/multiple_windows.rs b/examples/window/multiple_windows.rs index 61fd9f3b2ebf3..46d4a708a5a04 100644 --- a/examples/window/multiple_windows.rs +++ b/examples/window/multiple_windows.rs @@ -49,8 +49,8 @@ fn setup_scene(mut commands: Commands, asset_server: Res) { let node = Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }; diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs index e39d3010d9f47..8bc6051cb85ff 100644 --- a/examples/window/scale_factor_override.rs +++ b/examples/window/scale_factor_override.rs @@ -29,8 +29,8 @@ fn setup(mut commands: Commands) { // root node commands .spawn(Node { - width: Val::Percent(100.0), - height: Val::Percent(100.0), + width: percent(100), + height: percent(100), justify_content: JustifyContent::SpaceBetween, ..default() }) @@ -39,9 +39,9 @@ fn setup(mut commands: Commands) { parent .spawn(( Node { - width: Val::Px(300.0), - height: Val::Percent(100.0), - border: UiRect::all(Val::Px(2.0)), + width: px(300), + height: percent(100), + border: UiRect::all(px(2)), ..default() }, BackgroundColor(Color::srgb(0.65, 0.65, 0.65)), diff --git a/examples/window/screenshot.rs b/examples/window/screenshot.rs index cd16539eaeee4..61323be78f42f 100644 --- a/examples/window/screenshot.rs +++ b/examples/window/screenshot.rs @@ -81,8 +81,8 @@ fn setup( Text::new("Press to save a screenshot to disk"), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, )); diff --git a/examples/window/window_drag_move.rs b/examples/window/window_drag_move.rs index 829e315d5fbb0..31b99a5b44072 100644 --- a/examples/window/window_drag_move.rs +++ b/examples/window/window_drag_move.rs @@ -64,7 +64,7 @@ fn setup(mut commands: Commands) { .spawn(( Node { position_type: PositionType::Absolute, - padding: UiRect::all(Val::Px(5.0)), + padding: UiRect::all(px(5)), ..default() }, BackgroundColor(Color::BLACK.with_alpha(0.75)), diff --git a/examples/window/window_resizing.rs b/examples/window/window_resizing.rs index 785d23a87858f..87b3b64cbbd89 100644 --- a/examples/window/window_resizing.rs +++ b/examples/window/window_resizing.rs @@ -36,7 +36,7 @@ fn setup_ui(mut commands: Commands) { // Node that fills entire background commands .spawn(Node { - width: Val::Percent(100.), + width: percent(100), ..default() }) // Text where we display current resolution diff --git a/release-content/release-notes/constructor_functions_for_val_variants.md b/release-content/release-notes/constructor_functions_for_val_variants.md index c08c908f50833..b1815d786910f 100644 --- a/release-content/release-notes/constructor_functions_for_val_variants.md +++ b/release-content/release-notes/constructor_functions_for_val_variants.md @@ -1,7 +1,7 @@ --- title: "`Val` helper functions" -authors: ["@Ickshonpe"] -pull_requests: [20518] +authors: ["@Ickshonpe", "@TheBlckbird"] +pull_requests: [20518, 20551] --- -To make `Val`s easier to construct the following helper functions have been added: `px`, `percent`, `vw`, `vh`, `vmin` and `vmax`. Each function takes an `f32` value and returns value wrapped by its corresponding `Val` variant. There is also an `auto` helper function that maps to `Val::Auto`. +To make `Val`s easier to construct the following helper functions have been added: `px`, `percent`, `vw`, `vh`, `vmin` and `vmax`. Each function takes any integer type and returns the value wrapped by its corresponding `Val` variant. There is also an `auto` helper function that maps to `Val::Auto`. diff --git a/tests/3d/test_invalid_skinned_mesh.rs b/tests/3d/test_invalid_skinned_mesh.rs index 8264beae10319..db149c7cbc887 100644 --- a/tests/3d/test_invalid_skinned_mesh.rs +++ b/tests/3d/test_invalid_skinned_mesh.rs @@ -40,8 +40,8 @@ fn setup_environment( Text::new(description), Node { position_type: PositionType::Absolute, - top: Val::Px(12.0), - left: Val::Px(12.0), + top: px(12), + left: px(12), ..default() }, ));