Add event for clicks

crates/bevy_ui/src/focus.rs

@@ -3,7 +3,8 @@ use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::{
     change_detection::DetectChangesMut,
     entity::Entity,
-    prelude::{Component, With},
+    event::EventWriter,
+    prelude::{Component, Event, With},
     query::WorldQuery,
     reflect::ReflectComponent,
     system::{Local, Query, Res},
@@ -55,6 +56,15 @@ impl Default for Interaction {
     }
 }
 
+/// Used to publish which entity was clicked
+///
+/// Commonly used by creating a UI node and using [`EventReader<Clicked>`](event::EventReader)
+/// to obtain the list of clicked UI nodes.
+///
+/// **Note:** This captures the full click/press-release action, i.e. it is emitted after release.
+#[derive(Event)]
+pub struct Clicked(pub Entity);
+
 /// A component storing the position of the mouse relative to the node, (0., 0.) being the top-left corner and (1., 1.) being the bottom-right
 /// If the mouse is not over the node, the value will go beyond the range of (0., 0.) to (1., 1.)
 /// A None value means that the cursor position is unknown.
@@ -142,6 +152,7 @@ pub fn ui_focus_system(
     ui_stack: Res<UiStack>,
     mut node_query: Query<NodeQuery>,
     primary_window: Query<Entity, With<PrimaryWindow>>,
+    mut click_events: EventWriter<Clicked>,
 ) {
     let primary_window = primary_window.iter().next();
 
@@ -152,12 +163,14 @@ pub fn ui_focus_system(
         }
     }
 
+    let mut was_pressed = false;
     let mouse_released =
         mouse_button_input.just_released(MouseButton::Left) || touches_input.any_just_released();
     if mouse_released {
         for node in &mut node_query {
             if let Some(mut interaction) = node.interaction {
                 if *interaction == Interaction::Pressed {
+                    was_pressed = true;
                     *interaction = Interaction::None;
                 }
             }
@@ -245,6 +258,10 @@ pub fn ui_focus_system(
                 }
 
                 if contains_cursor {
+                    // Emit a click event only if mouse was released under the button
+                    if mouse_released && was_pressed {
+                        click_events.send(Clicked(*entity));
+                    }
                     Some(*entity)
                 } else {
                     if let Some(mut interaction) = node.interaction {

crates/bevy_ui/src/lib.rs

@@ -37,7 +37,7 @@ pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
         camera_config::*, geometry::*, node_bundles::*, ui_node::*, widget::Button, widget::Label,
-        Interaction, UiScale,
+        Clicked, Interaction, UiScale,
     };
 }
 
@@ -129,6 +129,7 @@ impl Plugin for UiPlugin {
             .register_type::<widget::Label>()
             .register_type::<ZIndex>()
             .register_type::<Outline>()
+            .add_event::<Clicked>()
             .add_systems(
                 PreUpdate,
                 ui_focus_system.in_set(UiSystem::Focus).after(InputSystem),

examples/ecs/state.rs

@@ -20,14 +20,15 @@ fn main() {
         // All systems from the exit schedule of the state we're leaving are run first,
         // and then all systems from the enter schedule of the state we're entering are run second.
         .add_systems(OnEnter(AppState::Menu), setup_menu)
-        // By contrast, update systems are stored in the `Update` schedule. They simply
-        // check the value of the `State<T>` resource to see if they should run each frame.
-        .add_systems(Update, menu.run_if(in_state(AppState::Menu)))
         .add_systems(OnExit(AppState::Menu), cleanup_menu)
         .add_systems(OnEnter(AppState::InGame), setup_game)
         .add_systems(
             Update,
-            (movement, change_color).run_if(in_state(AppState::InGame)),
+            (
+                menu_interaction.run_if(in_state(AppState::Menu)),
+                menu_action.run_if(on_event::<Clicked>()),
+                (movement, change_color).run_if(in_state(AppState::InGame)),
+            ),
         )
         .run();
 }
@@ -95,8 +96,7 @@ fn setup_menu(mut commands: Commands) {
     commands.insert_resource(MenuData { button_entity });
 }
 
-fn menu(
-    mut next_state: ResMut<NextState<AppState>>,
+fn menu_interaction(
     mut interaction_query: Query<
         (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
@@ -106,7 +106,6 @@ fn menu(
         match *interaction {
             Interaction::Pressed => {
                 *color = PRESSED_BUTTON.into();
-                next_state.set(AppState::InGame);
             }
             Interaction::Hovered => {
                 *color = HOVERED_BUTTON.into();
@@ -118,6 +117,10 @@ fn menu(
     }
 }
 
+fn menu_action(mut next_state: ResMut<NextState<AppState>>) {
+    next_state.set(AppState::InGame);
+}
+
 fn cleanup_menu(mut commands: Commands, menu_data: Res<MenuData>) {
     commands.entity(menu_data.button_entity).despawn_recursive();
 }

examples/games/game_menu.rs

@@ -793,17 +793,15 @@ mod menu {
     }
 
     fn menu_action(
-        interaction_query: Query<
-            (&Interaction, &MenuButtonAction),
-            (Changed<Interaction>, With<Button>),
-        >,
+        mut click_events: EventReader<Clicked>,
+        menu_buttons: Query<&MenuButtonAction>,
         mut app_exit_events: EventWriter<AppExit>,
         mut menu_state: ResMut<NextState<MenuState>>,
         mut game_state: ResMut<NextState<GameState>>,
     ) {
-        for (interaction, menu_button_action) in &interaction_query {
-            if *interaction == Interaction::Pressed {
-                match menu_button_action {
+        for event in click_events.read() {
+            if let Ok(menu_button) = menu_buttons.get(event.0) {
+                match menu_button {
                     MenuButtonAction::Quit => app_exit_events.send(AppExit),
                     MenuButtonAction::Play => {
                         game_state.set(GameState::Game);

examples/ui/display_and_visibility.rs

@@ -431,16 +431,18 @@ where
 }
 
 fn buttons_handler<T>(
+    mut click_events: EventReader<Clicked>,
+    visibility_button_query: Query<(&Target<T>, &Children)>,
     mut left_panel_query: Query<&mut <Target<T> as TargetUpdate>::TargetComponent>,
-    mut visibility_button_query: Query<(&Target<T>, &Interaction, &Children), Changed<Interaction>>,
     mut text_query: Query<&mut Text>,
 ) where
     T: Send + Sync,
     Target<T>: TargetUpdate + Component,
 {
-    for (target, interaction, children) in visibility_button_query.iter_mut() {
-        if matches!(interaction, Interaction::Pressed) {
+    for event in click_events.read() {
+        if let Ok((target, children)) = visibility_button_query.get(event.0) {
             let mut target_value = left_panel_query.get_mut(target.id).unwrap();
+
             for &child in children {
                 if let Ok(mut text) = text_query.get_mut(child) {
                     text.sections[0].value = target.update_target(target_value.as_mut());

examples/ui/size_constraints.rs

@@ -5,7 +5,6 @@ use bevy::prelude::*;
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        .add_event::<ButtonActivatedEvent>()
         .add_systems(Startup, setup)
         .add_systems(Update, (update_buttons, update_radio_buttons_colors))
         .run();
@@ -35,9 +34,6 @@ enum Constraint {
 #[derive(Copy, Clone, Component)]
 struct ButtonValue(Val);
 
-#[derive(Event)]
-struct ButtonActivatedEvent(Entity);
-
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // ui camera
     commands.spawn(Camera2dBundle::default());
@@ -302,28 +298,24 @@ fn update_buttons(
     mut bar_query: Query<&mut Style, With<Bar>>,
     mut text_query: Query<&mut Text>,
     children_query: Query<&Children>,
-    mut button_activated_event: EventWriter<ButtonActivatedEvent>,
 ) {
     let mut style = bar_query.single_mut();
     for (button_id, interaction, constraint, value) in button_query.iter_mut() {
         match interaction {
-            Interaction::Pressed => {
-                button_activated_event.send(ButtonActivatedEvent(button_id));
-                match constraint {
-                    Constraint::FlexBasis => {
-                        style.flex_basis = value.0;
-                    }
-                    Constraint::Width => {
-                        style.width = value.0;
-                    }
-                    Constraint::MinWidth => {
-                        style.min_width = value.0;
-                    }
-                    Constraint::MaxWidth => {
-                        style.max_width = value.0;
-                    }
+            Interaction::Pressed => match constraint {
+                Constraint::FlexBasis => {
+                    style.flex_basis = value.0;
                 }
-            }
+                Constraint::Width => {
+                    style.width = value.0;
+                }
+                Constraint::MinWidth => {
+                    style.min_width = value.0;
+                }
+                Constraint::MaxWidth => {
+                    style.max_width = value.0;
+                }
+            },
             Interaction::Hovered => {
                 if let Ok(children) = children_query.get(button_id) {
                     for &child in children {
@@ -359,38 +351,39 @@ fn update_buttons(
 }
 
 fn update_radio_buttons_colors(
-    mut event_reader: EventReader<ButtonActivatedEvent>,
+    mut click_events: EventReader<Clicked>,
     button_query: Query<(Entity, &Constraint, &Interaction)>,
     mut color_query: Query<&mut BackgroundColor>,
     mut text_query: Query<&mut Text>,
     children_query: Query<&Children>,
 ) {
-    for &ButtonActivatedEvent(button_id) in event_reader.read() {
-        let target_constraint = button_query.get_component::<Constraint>(button_id).unwrap();
-        for (id, constraint, interaction) in button_query.iter() {
-            if target_constraint == constraint {
-                let (border_color, inner_color, text_color) = if id == button_id {
-                    (ACTIVE_BORDER_COLOR, ACTIVE_INNER_COLOR, ACTIVE_TEXT_COLOR)
-                } else {
-                    (
-                        INACTIVE_BORDER_COLOR,
-                        INACTIVE_INNER_COLOR,
-                        if matches!(interaction, Interaction::Hovered) {
-                            HOVERED_TEXT_COLOR
-                        } else {
-                            UNHOVERED_TEXT_COLOR
-                        },
-                    )
-                };
+    for &Clicked(button_id) in click_events.read() {
+        if let Ok(target_constraint) = button_query.get_component::<Constraint>(button_id) {
+            for (id, constraint, interaction) in button_query.iter() {
+                if target_constraint == constraint {
+                    let (border_color, inner_color, text_color) = if id == button_id {
+                        (ACTIVE_BORDER_COLOR, ACTIVE_INNER_COLOR, ACTIVE_TEXT_COLOR)
+                    } else {
+                        (
+                            INACTIVE_BORDER_COLOR,
+                            INACTIVE_INNER_COLOR,
+                            if matches!(interaction, Interaction::Hovered) {
+                                HOVERED_TEXT_COLOR
+                            } else {
+                                UNHOVERED_TEXT_COLOR
+                            },
+                        )
+                    };
 
-                color_query.get_mut(id).unwrap().0 = border_color;
-                if let Ok(children) = children_query.get(id) {
-                    for &child in children {
-                        color_query.get_mut(child).unwrap().0 = inner_color;
-                        if let Ok(grand_children) = children_query.get(child) {
-                            for &grandchild in grand_children {
-                                if let Ok(mut text) = text_query.get_mut(grandchild) {
-                                    text.sections[0].style.color = text_color;
+                    color_query.get_mut(id).unwrap().0 = border_color;
+                    if let Ok(children) = children_query.get(id) {
+                        for &child in children {
+                            color_query.get_mut(child).unwrap().0 = inner_color;
+                            if let Ok(grand_children) = children_query.get(child) {
+                                for &grandchild in grand_children {
+                                    if let Ok(mut text) = text_query.get_mut(grandchild) {
+                                        text.sections[0].style.color = text_color;
+                                    }
                                 }
                             }
                         }