From 4238ef2d30eb3c8ef4e81f320cd62a8b73e61d2d Mon Sep 17 00:00:00 2001
From: stork <x.arthur.welch@gmail.com>
Date: Thu, 8 Apr 2021 12:44:23 -0700
Subject: [PATCH 1/2] introduced a simple, customizable, and overridable
 default material behavior for buttons

---
 crates/bevy_ui/src/lib.rs           |  10 ++
 crates/bevy_ui/src/widget/button.rs |  88 +++++++++++++++
 examples/ui/button.rs               | 159 +++++++++++++++++++---------
 3 files changed, 208 insertions(+), 49 deletions(-)

diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 352dba04f4972..7d395d93cf038 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -30,6 +30,7 @@ use bevy_math::{Rect, Size};
 use bevy_render::RenderStage;
 use bevy_transform::TransformSystem;
 use update::ui_z_system;
+use widget::DefaultButtonMaterials;
 
 #[derive(Default)]
 pub struct UiPlugin;
@@ -43,6 +44,7 @@ pub enum UiSystem {
 impl Plugin for UiPlugin {
     fn build(&self, app: &mut AppBuilder) {
         app.init_resource::<FlexSurface>()
+            .init_resource::<DefaultButtonMaterials>()
             .register_type::<AlignContent>()
             .register_type::<AlignItems>()
             .register_type::<AlignSelf>()
@@ -85,6 +87,14 @@ impl Plugin for UiPlugin {
                     .after(UiSystem::Flex)
                     .before(TransformSystem::TransformPropagate),
             )
+            .add_system_to_stage(
+                CoreStage::PostUpdate,
+                widget::button_default_materials_system.system(),
+            )
+            .add_system_to_stage(
+                CoreStage::PostUpdate,
+                widget::button_materials_system.system(),
+            )
             .add_system_to_stage(RenderStage::Draw, widget::draw_text_system.system());
 
         crate::render::add_ui_graph(app.world_mut());
diff --git a/crates/bevy_ui/src/widget/button.rs b/crates/bevy_ui/src/widget/button.rs
index 47baf3b6fae5d..fa8555c439d45 100644
--- a/crates/bevy_ui/src/widget/button.rs
+++ b/crates/bevy_ui/src/widget/button.rs
@@ -1,2 +1,90 @@
+use bevy_asset::{Assets, Handle};
+use bevy_ecs::prelude::{Changed, FromWorld, Query, Res, With, Without, World};
+use bevy_render::prelude::Color;
+use bevy_sprite::ColorMaterial;
+
+use crate::Interaction;
+
 #[derive(Debug, Clone)]
 pub struct Button;
+
+#[derive(Debug, Clone)]
+pub struct DefaultButtonMaterials {
+    pub normal: Handle<ColorMaterial>,
+    pub hovered: Handle<ColorMaterial>,
+    pub pressed: Handle<ColorMaterial>,
+}
+
+impl FromWorld for DefaultButtonMaterials {
+    fn from_world(world: &mut World) -> Self {
+        let mut materials = world.get_resource_mut::<Assets<ColorMaterial>>().unwrap();
+
+        DefaultButtonMaterials {
+            normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
+            hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
+            pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
+        }
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct ButtonMaterials {
+    pub normal: Handle<ColorMaterial>,
+    pub hovered: Handle<ColorMaterial>,
+    pub pressed: Handle<ColorMaterial>,
+}
+
+#[derive(Debug, Clone)]
+pub struct CustomButtonMaterialBehavior;
+
+pub fn button_default_materials_system(
+    default_materials: Res<DefaultButtonMaterials>,
+    mut query: Query<
+        (&Interaction, &mut Handle<ColorMaterial>),
+        (
+            Changed<Interaction>,
+            With<Button>,
+            Without<ButtonMaterials>,
+            Without<CustomButtonMaterialBehavior>,
+        ),
+    >,
+) {
+    for (interaction, mut material) in query.iter_mut() {
+        match *interaction {
+            Interaction::None => {
+                *material = default_materials.normal.clone();
+            }
+            Interaction::Hovered => {
+                *material = default_materials.hovered.clone();
+            }
+            Interaction::Clicked => {
+                *material = default_materials.pressed.clone();
+            }
+        }
+    }
+}
+
+pub fn button_materials_system(
+    mut query: Query<
+        (&Interaction, &mut Handle<ColorMaterial>, &ButtonMaterials),
+        (
+            Changed<Interaction>,
+            With<Button>,
+            Without<CustomButtonMaterialBehavior>,
+        ),
+    >,
+) {
+    for (interaction, mut material, materials) in query.iter_mut() {
+        match *interaction {
+            Interaction::None => {
+                *material = materials.normal.clone();
+            }
+            Interaction::Hovered => {
+                *material = materials.hovered.clone();
+            }
+            Interaction::Clicked => {
+                *material = materials.pressed.clone();
+            }
+        }
+    }
+}
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index 6fc8e7f7a9483..5fe144fd8086a 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -1,55 +1,33 @@
-use bevy::prelude::*;
+use bevy::{
+    prelude::*,
+    ui::widget::{ButtonMaterials, CustomButtonMaterialBehavior, DefaultButtonMaterials},
+};
 
 /// This example illustrates how to create a button that changes color and text based on its
 /// interaction state.
 fn main() {
     App::build()
         .add_plugins(DefaultPlugins)
-        .init_resource::<ButtonMaterials>()
         .add_startup_system(setup.system())
         .add_system(button_system.system())
         .run();
 }
 
-struct ButtonMaterials {
-    normal: Handle<ColorMaterial>,
-    hovered: Handle<ColorMaterial>,
-    pressed: Handle<ColorMaterial>,
-}
-
-impl FromWorld for ButtonMaterials {
-    fn from_world(world: &mut World) -> Self {
-        let mut materials = world.get_resource_mut::<Assets<ColorMaterial>>().unwrap();
-        ButtonMaterials {
-            normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
-            hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
-            pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
-        }
-    }
-}
-
 fn button_system(
-    button_materials: Res<ButtonMaterials>,
-    mut interaction_query: Query<
-        (&Interaction, &mut Handle<ColorMaterial>, &Children),
-        (Changed<Interaction>, With<Button>),
-    >,
+    mut interaction_query: Query<(&Interaction, &Children), (Changed<Interaction>, With<Button>)>,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut material, children) in interaction_query.iter_mut() {
+    for (interaction, children) in interaction_query.iter_mut() {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Clicked => {
                 text.sections[0].value = "Press".to_string();
-                *material = button_materials.pressed.clone();
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
-                *material = button_materials.hovered.clone();
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
-                *material = button_materials.normal.clone();
             }
         }
     }
@@ -58,37 +36,120 @@ fn button_system(
 fn setup(
     mut commands: Commands,
     asset_server: Res<AssetServer>,
-    button_materials: Res<ButtonMaterials>,
+    mut materials: ResMut<Assets<ColorMaterial>>,
+    button_materials: Res<DefaultButtonMaterials>,
 ) {
     // ui camera
     commands.spawn_bundle(UiCameraBundle::default());
     commands
-        .spawn_bundle(ButtonBundle {
+        // "container" node
+        .spawn_bundle(NodeBundle {
             style: Style {
-                size: Size::new(Val::Px(150.0), Val::Px(65.0)),
-                // center button
-                margin: Rect::all(Val::Auto),
-                // horizontally center child text
-                justify_content: JustifyContent::Center,
-                // vertically center child text
-                align_items: AlignItems::Center,
+                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                justify_content: JustifyContent::SpaceBetween,
                 ..Default::default()
             },
-            material: button_materials.normal.clone(),
+            material: materials.add(Color::NONE.into()),
             ..Default::default()
         })
         .with_children(|parent| {
-            parent.spawn_bundle(TextBundle {
-                text: Text::with_section(
-                    "Button",
-                    TextStyle {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        font_size: 40.0,
-                        color: Color::rgb(0.9, 0.9, 0.9),
+            // button with default materials
+            parent
+                .spawn_bundle(ButtonBundle {
+                    style: Style {
+                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        // center button
+                        margin: Rect::all(Val::Auto),
+                        // horizontally center child text
+                        justify_content: JustifyContent::Center,
+                        // vertically center child text
+                        align_items: AlignItems::Center,
+                        ..Default::default()
                     },
-                    Default::default(),
-                ),
-                ..Default::default()
-            });
+                    material: button_materials.normal.clone(),
+                    ..Default::default()
+                })
+                .with_children(|parent| {
+                    parent.spawn_bundle(TextBundle {
+                        text: Text::with_section(
+                            "Button",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 40.0,
+                                color: Color::rgb(0.9, 0.9, 0.9),
+                            },
+                            Default::default(),
+                        ),
+                        ..Default::default()
+                    });
+                });
+
+            // button with custom materials
+            parent
+                .spawn_bundle(ButtonBundle {
+                    style: Style {
+                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        // center button
+                        margin: Rect::all(Val::Auto),
+                        // horizontally center child text
+                        justify_content: JustifyContent::Center,
+                        // vertically center child text
+                        align_items: AlignItems::Center,
+                        ..Default::default()
+                    },
+                    material: button_materials.normal.clone(),
+                    ..Default::default()
+                })
+                .insert(ButtonMaterials {
+                    normal: materials.add(Color::rgb(0.75, 0.35, 0.35).into()),
+                    hovered: materials.add(Color::rgb(0.35, 0.35, 0.75).into()),
+                    pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
+                })
+                .with_children(|parent| {
+                    parent.spawn_bundle(TextBundle {
+                        text: Text::with_section(
+                            "Button",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 40.0,
+                                color: Color::rgb(0.9, 0.9, 0.9),
+                            },
+                            Default::default(),
+                        ),
+                        ..Default::default()
+                    });
+                });
+
+            // button with custom material behavior
+            parent
+                .spawn_bundle(ButtonBundle {
+                    style: Style {
+                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        // center button
+                        margin: Rect::all(Val::Auto),
+                        // horizontally center child text
+                        justify_content: JustifyContent::Center,
+                        // vertically center child text
+                        align_items: AlignItems::Center,
+                        ..Default::default()
+                    },
+                    material: button_materials.normal.clone(),
+                    ..Default::default()
+                })
+                .insert(CustomButtonMaterialBehavior {})
+                .with_children(|parent| {
+                    parent.spawn_bundle(TextBundle {
+                        text: Text::with_section(
+                            "Button",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 40.0,
+                                color: Color::rgb(0.9, 0.9, 0.9),
+                            },
+                            Default::default(),
+                        ),
+                        ..Default::default()
+                    });
+                });
         });
 }

From 4e912094c6ad4d47a05d242196318c07bc7ad1c4 Mon Sep 17 00:00:00 2001
From: stork <x.arthur.welch@gmail.com>
Date: Thu, 8 Apr 2021 12:58:01 -0700
Subject: [PATCH 2/2] updated state example

---
 examples/ecs/state.rs | 43 ++++++-------------------------------------
 1 file changed, 6 insertions(+), 37 deletions(-)

diff --git a/examples/ecs/state.rs b/examples/ecs/state.rs
index eb130b3125b80..63baaf9681a6a 100644
--- a/examples/ecs/state.rs
+++ b/examples/ecs/state.rs
@@ -5,7 +5,6 @@ use bevy::prelude::*;
 fn main() {
     App::build()
         .add_plugins(DefaultPlugins)
-        .init_resource::<ButtonMaterials>()
         .add_state(AppState::Menu)
         .add_system_set(SystemSet::on_enter(AppState::Menu).with_system(setup_menu.system()))
         .add_system_set(SystemSet::on_update(AppState::Menu).with_system(menu.system()))
@@ -32,7 +31,7 @@ struct MenuData {
 fn setup_menu(
     mut commands: Commands,
     asset_server: Res<AssetServer>,
-    button_materials: Res<ButtonMaterials>,
+    mut materials: ResMut<Assets<ColorMaterial>>,
 ) {
     // ui camera
     commands.spawn_bundle(UiCameraBundle::default());
@@ -48,7 +47,7 @@ fn setup_menu(
                 align_items: AlignItems::Center,
                 ..Default::default()
             },
-            material: button_materials.normal.clone(),
+            material: materials.add(Color::WHITE.into()),
             ..Default::default()
         })
         .with_children(|parent| {
@@ -71,24 +70,11 @@ fn setup_menu(
 
 fn menu(
     mut state: ResMut<State<AppState>>,
-    button_materials: Res<ButtonMaterials>,
-    mut interaction_query: Query<
-        (&Interaction, &mut Handle<ColorMaterial>),
-        (Changed<Interaction>, With<Button>),
-    >,
+    mut interaction_query: Query<&Interaction, (Changed<Interaction>, With<Button>)>,
 ) {
-    for (interaction, mut material) in interaction_query.iter_mut() {
-        match *interaction {
-            Interaction::Clicked => {
-                *material = button_materials.pressed.clone();
-                state.set(AppState::InGame).unwrap();
-            }
-            Interaction::Hovered => {
-                *material = button_materials.hovered.clone();
-            }
-            Interaction::None => {
-                *material = button_materials.normal.clone();
-            }
+    for interaction in interaction_query.iter_mut() {
+        if *interaction == Interaction::Clicked {
+            state.set(AppState::InGame).unwrap();
         }
     }
 }
@@ -149,20 +135,3 @@ fn change_color(
             .set_b((time.seconds_since_startup() * 5.0).sin() as f32 + 2.0);
     }
 }
-
-struct ButtonMaterials {
-    normal: Handle<ColorMaterial>,
-    hovered: Handle<ColorMaterial>,
-    pressed: Handle<ColorMaterial>,
-}
-
-impl FromWorld for ButtonMaterials {
-    fn from_world(world: &mut World) -> Self {
-        let mut materials = world.get_resource_mut::<Assets<ColorMaterial>>().unwrap();
-        ButtonMaterials {
-            normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
-            hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()),
-            pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()),
-        }
-    }
-}