diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs index d7c7797b91..c85bd22ee5 100644 --- a/examples/ui/borders.rs +++ b/examples/ui/borders.rs @@ -1,6 +1,6 @@ //! Example demonstrating bordered UI nodes -use bevy::{color::palettes::css::*, prelude::*}; +use bevy::{color::palettes::css::*, ecs::spawn::SpawnIter, prelude::*}; fn main() { App::new() @@ -11,37 +11,6 @@ fn main() { fn setup(mut commands: Commands) { commands.spawn(Camera2d); - let root = commands - .spawn(( - Node { - margin: UiRect::all(Val::Px(25.0)), - align_self: AlignSelf::Stretch, - justify_self: JustifySelf::Stretch, - flex_wrap: FlexWrap::Wrap, - justify_content: JustifyContent::FlexStart, - align_items: AlignItems::FlexStart, - align_content: AlignContent::FlexStart, - ..default() - }, - BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), - )) - .id(); - - let root_rounded = commands - .spawn(( - Node { - margin: UiRect::all(Val::Px(25.0)), - align_self: AlignSelf::Stretch, - justify_self: JustifySelf::Stretch, - flex_wrap: FlexWrap::Wrap, - justify_content: JustifyContent::FlexStart, - align_items: AlignItems::FlexStart, - align_content: AlignContent::FlexStart, - ..default() - }, - BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), - )) - .id(); // labels for the different border edges let border_labels = [ @@ -77,228 +46,201 @@ fn setup(mut commands: Commands) { UiRect { left: Val::Px(20.), top: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { left: Val::Px(10.), bottom: Val::Px(20.), - ..Default::default() + ..default() }, UiRect { right: Val::Px(20.), top: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { right: Val::Px(10.), bottom: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { right: Val::Px(10.), top: Val::Px(20.), bottom: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { left: Val::Px(10.), top: Val::Px(10.), bottom: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { left: Val::Px(20.), right: Val::Px(10.), top: Val::Px(10.), - ..Default::default() + ..default() }, UiRect { left: Val::Px(10.), right: Val::Px(10.), bottom: Val::Px(20.), - ..Default::default() + ..default() }, ]; - for (label, border) in border_labels.into_iter().zip(borders) { - let inner_spot = commands - .spawn(( - Node { - width: Val::Px(10.), - height: Val::Px(10.), - ..default() - }, - BackgroundColor(YELLOW.into()), - )) - .id(); - let border_node = commands - .spawn(( - Node { - width: Val::Px(50.), - height: Val::Px(50.), - border, - margin: UiRect::all(Val::Px(20.)), - align_items: AlignItems::Center, - justify_content: JustifyContent::Center, - ..default() - }, - BackgroundColor(MAROON.into()), - BorderColor(RED.into()), - Outline { - width: Val::Px(6.), - offset: Val::Px(6.), - color: Color::WHITE, - }, - )) - .add_child(inner_spot) - .id(); - let label_node = commands - .spawn(( - Text::new(label), - TextFont { - font_size: 9.0, - ..Default::default() - }, - )) - .id(); - let container = commands - .spawn(Node { - flex_direction: FlexDirection::Column, - align_items: AlignItems::Center, - ..default() - }) - .add_children(&[border_node, label_node]) - .id(); - commands.entity(root).add_child(container); - } - - for (label, border) in border_labels.into_iter().zip(borders) { - let inner_spot = commands - .spawn(( - Node { - width: Val::Px(10.), - height: Val::Px(10.), - ..default() - }, - BorderRadius::MAX, - BackgroundColor(YELLOW.into()), - )) - .id(); - let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.); - let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. }; - let border_radius = BorderRadius::px( - border_size(border.left, border.top), - border_size(border.right, border.top), - border_size(border.right, border.bottom), - border_size(border.left, border.bottom), - ); - let border_node = commands - .spawn(( - Node { - width: Val::Px(50.), - height: Val::Px(50.), - border, - margin: UiRect::all(Val::Px(20.)), - align_items: AlignItems::Center, - justify_content: JustifyContent::Center, - ..default() - }, - BackgroundColor(MAROON.into()), - BorderColor(RED.into()), - border_radius, - Outline { - width: Val::Px(6.), - offset: Val::Px(6.), - color: Color::WHITE, - }, - )) - .add_child(inner_spot) - .id(); - let label_node = commands - .spawn(( - Text::new(label), - TextFont { - font_size: 9.0, - ..Default::default() - }, - )) - .id(); - let container = commands - .spawn(Node { - flex_direction: FlexDirection::Column, - align_items: AlignItems::Center, - ..default() - }) - .add_children(&[border_node, label_node]) - .id(); - commands.entity(root_rounded).add_child(container); - } - - let border_label = commands - .spawn(( - Node { - margin: UiRect { - left: Val::Px(25.0), - right: Val::Px(25.0), - top: Val::Px(25.0), - bottom: Val::Px(0.0), - }, - ..default() + let borders_examples = ( + Node { + margin: UiRect::all(Val::Px(25.0)), + align_self: AlignSelf::Stretch, + justify_self: JustifySelf::Stretch, + flex_wrap: FlexWrap::Wrap, + justify_content: JustifyContent::FlexStart, + align_items: AlignItems::FlexStart, + align_content: AlignContent::FlexStart, + ..default() + }, + Children::spawn(SpawnIter(border_labels.into_iter().zip(borders).map( + |(label, border)| { + ( + Node { + flex_direction: FlexDirection::Column, + align_items: AlignItems::Center, + ..default() + }, + children![ + ( + Node { + width: Val::Px(50.), + height: Val::Px(50.), + border, + margin: UiRect::all(Val::Px(20.)), + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, + ..default() + }, + BackgroundColor(MAROON.into()), + BorderColor(RED.into()), + Outline { + width: Val::Px(6.), + offset: Val::Px(6.), + color: Color::WHITE, + }, + children![( + Node { + width: Val::Px(10.), + height: Val::Px(10.), + ..default() + }, + BackgroundColor(YELLOW.into()), + )] + ), + (Text::new(label), TextFont::from_font_size(9.0)) + ], + ) }, - BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), - )) - .with_children(|builder| { - builder.spawn(( - Text::new("Borders"), - TextFont { - font_size: 20.0, - ..Default::default() - }, - )); - }) - .id(); + ))), + ); - let border_rounded_label = commands - .spawn(( - Node { - margin: UiRect { - left: Val::Px(25.0), - right: Val::Px(25.0), - top: Val::Px(25.0), - bottom: Val::Px(0.0), - }, - ..default() - }, - BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), - )) - .with_children(|builder| { - builder.spawn(( - Text::new("Borders Rounded"), - TextFont { - font_size: 20.0, - ..Default::default() - }, - )); - }) - .id(); + let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.); + let border_size = move |x, y| { + if non_zero(x, y) { + f32::MAX + } else { + 0. + } + }; - commands - .spawn(( - Node { - margin: UiRect::all(Val::Px(25.0)), - flex_direction: FlexDirection::Column, - align_self: AlignSelf::Stretch, - justify_self: JustifySelf::Stretch, - flex_wrap: FlexWrap::Wrap, - justify_content: JustifyContent::FlexStart, - align_items: AlignItems::FlexStart, - align_content: AlignContent::FlexStart, - ..default() + let borders_examples_rounded = ( + Node { + margin: UiRect::all(Val::Px(25.0)), + align_self: AlignSelf::Stretch, + justify_self: JustifySelf::Stretch, + flex_wrap: FlexWrap::Wrap, + justify_content: JustifyContent::FlexStart, + align_items: AlignItems::FlexStart, + align_content: AlignContent::FlexStart, + ..default() + }, + Children::spawn(SpawnIter(border_labels.into_iter().zip(borders).map( + move |(label, border)| { + ( + Node { + flex_direction: FlexDirection::Column, + align_items: AlignItems::Center, + ..default() + }, + children![ + ( + Node { + width: Val::Px(50.), + height: Val::Px(50.), + border, + margin: UiRect::all(Val::Px(20.)), + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, + ..default() + }, + BackgroundColor(MAROON.into()), + BorderColor(RED.into()), + BorderRadius::px( + border_size(border.left, border.top), + border_size(border.right, border.top), + border_size(border.right, border.bottom,), + border_size(border.left, border.bottom), + ), + Outline { + width: Val::Px(6.), + offset: Val::Px(6.), + color: Color::WHITE, + }, + children![( + Node { + width: Val::Px(10.), + height: Val::Px(10.), + ..default() + }, + BorderRadius::MAX, + BackgroundColor(YELLOW.into()), + )], + ), + (Text::new(label), TextFont::from_font_size(9.0)) + ], + ) }, - BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), - )) - .add_child(border_label) - .add_child(root) - .add_child(border_rounded_label) - .add_child(root_rounded); + ))), + ); + + commands.spawn(( + Node { + margin: UiRect::all(Val::Px(25.0)), + flex_direction: FlexDirection::Column, + align_self: AlignSelf::Stretch, + justify_self: JustifySelf::Stretch, + flex_wrap: FlexWrap::Wrap, + justify_content: JustifyContent::FlexStart, + align_items: AlignItems::FlexStart, + align_content: AlignContent::FlexStart, + ..default() + }, + BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), + children![ + label("Borders"), + borders_examples, + label("Borders Rounded"), + borders_examples_rounded + ], + )); +} + +// A label widget that accepts a &str and returns +// a Bundle that can be spawned +fn label(text: &str) -> impl Bundle { + ( + Node { + margin: UiRect::all(Val::Px(25.0)), + ..default() + }, + children![(Text::new(text), TextFont::from_font_size(20.0))], + ) }