From b6b11e49563784298549c14649761d96820facf7 Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Sat, 11 Feb 2023 20:39:38 +0000 Subject: [PATCH 01/30] changes: * Added an example demonstrating how Display and Visibility work in the UI. --- Cargo.toml | 10 ++ examples/README.md | 1 + examples/ui/flex_display.rs | 293 ++++++++++++++++++++++++++++++++++++ 3 files changed, 304 insertions(+) create mode 100644 examples/ui/flex_display.rs diff --git a/Cargo.toml b/Cargo.toml index 266831b4af5f2..f4ee9be049b52 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1511,6 +1511,16 @@ description = "Illustrates creating and updating a button" category = "UI (User Interface)" wasm = true +[[example]] +name = "flex_display" +path = "examples/ui/flex_display.rs" + +[package.metadata.example.flex_display] +name = "Flex Display" +description = "Demonstrates how Display and Visibility work in the UI." +category = "UI (User Interface)" +wasm = false + [[example]] name = "window_fallthrough" path = "examples/ui/window_fallthrough.rs" diff --git a/examples/README.md b/examples/README.md index cfa05e8b44756..a43e43d8c96cd 100644 --- a/examples/README.md +++ b/examples/README.md @@ -318,6 +318,7 @@ Example | Description Example | Description --- | --- [Button](../examples/ui/button.rs) | Illustrates creating and updating a button +[Flex Display](../examples/ui/flex_display.rs) | Demonstrates how Display and Visibility work in the UI [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text diff --git a/examples/ui/flex_display.rs b/examples/ui/flex_display.rs new file mode 100644 index 0000000000000..d7bebbc850337 --- /dev/null +++ b/examples/ui/flex_display.rs @@ -0,0 +1,293 @@ +//! Demonstrates how Display and Visibility work in the UI. + +use bevy::prelude::*; + +fn main() { + App::new() + .add_plugins(DefaultPlugins) + .add_startup_system(setup) + .add_system(update) + .add_system(update_text) + .run(); +} + +#[derive(Component)] +struct ButtonTarget{ id: Entity, color: Color } + +fn setup(mut commands: Commands, asset_server: Res) { + let text_style = TextStyle { + font: asset_server.load("fonts/FiraSans-Bold.ttf"), + font_size: 16.0, + color: Color::WHITE, + }; + + commands.spawn(Camera2dBundle::default()); + commands.spawn( + NodeBundle { + style: Style { + size: Size::all(Val::Percent(100.)), + align_items: AlignItems::Center, + justify_content: JustifyContent::SpaceEvenly, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.0)), + ..Default::default() + }, + ).with_children(|parent| { + let mut target_ids = vec![]; + parent.spawn(NodeBundle { + style: Style { + size: Size::all(Val::Px(520.)), + padding: UiRect::all(Val::Px(10.)), + ..Default::default() + }, + background_color: BackgroundColor(Color::WHITE), + ..Default::default() + }).with_children(|parent| { + let id = + parent.spawn(( + NodeBundle { + style: Style { + size: Size::all(Val::Px(500.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::FlexEnd, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.3)), + ..Default::default() + }, + )) + .with_children(|parent| { + let id = + parent.spawn(( + NodeBundle { + style: Style { + size: Size::all(Val::Px(400.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::FlexEnd, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.4)), + ..Default::default() + }, + )) + .with_children(|parent| { + let id = + parent.spawn(( + NodeBundle { + style: Style { + size: Size::all(Val::Px(300.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::FlexEnd, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.5)), + ..Default::default() + }, + )) + .with_children(|parent| { + let id = parent.spawn(( + NodeBundle { + style: Style { + size: Size::all(Val::Px(200.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::FlexEnd, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.6)), + ..Default::default() + }, + )).id(); + target_ids.push(id); + }).id(); + target_ids.push(id); + }).id(); + target_ids.push(id); + }).id(); + target_ids.push(id); + }); + + parent.spawn(NodeBundle { + style: Style { + padding: UiRect::all(Val::Px(10.)), + ..Default::default() + }, + background_color: BackgroundColor(Color::WHITE), + ..Default::default() + }).with_children(|parent| { + + parent.spawn(( + ButtonBundle { + style: Style { + size: Size::all(Val::Px(500.)), + flex_direction: FlexDirection::Column, + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::SpaceBetween, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.3)), + ..Default::default() + }, + ButtonTarget { id: target_ids.pop().unwrap(), color: Color::rgb(0.0, 0.0, 0.3) }, + )) + .with_children(|parent| { + parent.spawn( + TextBundle { + text: Text::from_section( + "", + text_style.clone(), + ), + style: Style { + align_self: AlignSelf::FlexStart, + ..Default::default() + }, + ..Default::default() + }, + ); + + parent.spawn(( + ButtonBundle { + style: Style { + size: Size::all(Val::Px(400.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::SpaceBetween, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.4)), + ..Default::default() + }, + ButtonTarget { id: target_ids.pop().unwrap(), color: Color::rgb(0.0, 0.0, 0.4) }, + )) + .with_children(|parent| { + parent.spawn( + TextBundle { + text: Text::from_section( + "", + text_style.clone(), + ), + style: Style { + align_self: AlignSelf::FlexStart, + ..Default::default() + }, + ..Default::default() + }, + ); + + parent.spawn(( + ButtonBundle { + style: Style { + size: Size::all(Val::Px(300.)), + align_items: AlignItems::FlexEnd, + justify_content: JustifyContent::FlexEnd, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.5)), + ..Default::default() + }, + ButtonTarget { id: target_ids.pop().unwrap(), color: Color::rgb(0.0, 0.0, 0.5) }, + )) + .with_children(|parent| { + parent.spawn( + TextBundle { + text: Text::from_section( + "", + text_style.clone(), + ), + style: Style { + align_self: AlignSelf::FlexStart, + ..Default::default() + }, + ..Default::default() + }, + ); + + parent.spawn(( + ButtonBundle { + style: Style { + size: Size::all(Val::Px(200.)), + align_items: AlignItems::FlexStart, + justify_content: JustifyContent::FlexStart, + padding: UiRect { left: Val::Px(5.), top: Val::Px(5.), ..Default::default() }, + ..Default::default() + }, + background_color: BackgroundColor(Color::rgb(0.0, 0.0, 0.6)), + ..Default::default() + }, + ButtonTarget { id: target_ids.pop().unwrap(), color: Color::rgb(0.0, 0.0, 0.6) }, + )) + .with_children(|parent| { + parent.spawn( + TextBundle { + text: Text::from_section( + "", + text_style.clone(), + ), + ..Default::default() + }, + ); + }); + }); + }); + }); + }); + }); +} + +fn update( + mouse: Res>, + keyboard: Res>, + mut left_query: Query<(&mut BackgroundColor, &mut Style, &mut Visibility), Without>, + mut right_query: Query<(&mut BackgroundColor, &ButtonTarget, &Interaction)>, +) { + right_query.for_each_mut(|(mut background_color, button_target, interaction)| { + match interaction { + Interaction::Hovered => { + let (mut left_background_color, mut style, mut visibility) = left_query.get_mut(button_target.id).unwrap(); + //if mouse.just_pressed(MouseButton::Left) { + if keyboard.just_pressed(KeyCode::Space) { + style.display = + match style.display { + Display::Flex => Display::None, + Display::None => Display::Flex, + }; + } + if mouse.just_pressed(MouseButton::Right) { + *visibility = + match *visibility { + Visibility::Inherited => Visibility::Visible, + Visibility::Visible => Visibility::Hidden, + Visibility::Hidden => Visibility::Inherited, + }; + } + background_color.0 = Color::rgb(0.9, 0.0, 0.0); + left_background_color.0 = Color::rgb(0.9, 0.0, 0.0); + + }, + Interaction::None => { + let (mut left_background_color, ..) = left_query.get_mut(button_target.id).unwrap(); + background_color.0 = button_target.color; + left_background_color.0 = button_target.color; + }, + _ => {} + } + }); +} + +fn update_text( + left_query: Query<(&Style, &Visibility), Or<(Changed