Remove `Interaction`, and replace it with `bevy_picking` based fields on `Button` #15597

alice-i-cecile · 2024-10-02T17:09:50Z

Objective

Fixes #15550. See that issue and the linked issues within it about why the existing Interaction component is inadequate.

Solution

Note to reviewers: the previous solution has special-cased logic for hidden nodes to ensure that they can't be pressed. I would prefer not to implement that in this PR, as that's fundamentally a picking backend concern.

Testing

For basic functionality, run the button example.

For something more holistic, try the game_menu example.

Migration Guide

The Interaction component has been removed. Instead, use the new pressed and hovered fields on Button. Bear in mind that you can also use observers to listen for bevy_picking events such as Pointer<Down> and Pointer<Over> directly as well.

To migrate code that matches on Interaction to change some property, follow the example below:

Bevy 0.14:

outline.color = match *button {
    Interaction::Pressed => RED.into(),
    Interaction::Hovered => WHITE.into(),
    Interaction::None => Color::NONE,
};

Bevy 0.15:

outline.color = match (button.pressed, button.hovered) {
    (true, _) => RED.into(),
    (false, true) => WHITE.into(),
    (false, false) => Color::NONE,
};

NodeBundle (and their Bevy 0.15 equivalents) no longer track whether or not they are pressed / hovered by default. If you require this functionality, add the Button component to your entity.

The FocusPolicy component has been removed, and replaced with the universal Pickable component.

The RelativeCursorPosition component has been removed. If you need this information, you should compute it from bevy_picking events in your widget's logic. See the animation_graph example for a demonstration of how this can be done.

Leinnan · 2024-10-02T18:38:03Z

From game maker perspective- how to most easily get the "is this button just released" info?

alice-i-cecile · 2024-10-02T18:51:13Z

From game maker perspective- how to most easily get the "is this button just released" info?

I think that the best strategy is to use an observer listening to Pointer<Up> event, and check if it matches the entities you care about. Can you say more about why you want this information? Things like dragging should use the specialized bevy_picking APIs for that purpose.

github-actions · 2024-10-03T19:03:06Z

The generated examples/README.md is out of sync with the example metadata in Cargo.toml or the example readme template. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

tim-blackbird · 2024-10-03T20:02:47Z

crates/bevy_ui/src/node_bundles.rs

+            pickable: Pickable {
+                should_block_lower: true,
+                ..Default::default()
+            },


Suggested change

pickable: Pickable {

should_block_lower: true,

..Default::default()

},

pickable: Pickable::default(),

should_block_lower is true by default

Great; that means we can swap to a pure derive then.

NthTensor · 2024-10-03T21:30:11Z

Pickable::default() is basically a no-op. We should discourage users from adding it imo, or make Pickable required by Node.

mnmaita · 2024-10-06T05:56:58Z

crates/bevy_ui/src/widget/button.rs

+            let mut hovering_over_descendant = false;
+
+            for descendant in children_query.iter_descendants(entity) {
+                if map.contains_key(&descendant) {
+                    hovering_over_descendant = true;
+                    break;
+                }
+            }
+            hovering_over_descendant


Isn't it possible to use any() with DescendantsIter?

ickshonpe · 2025-02-10T12:27:42Z

crates/bevy_ui/src/widget/button.rs

 #[derive(Component, Debug, Default, Clone, Copy, PartialEq, Eq, Reflect)]
 #[reflect(Component, Default, Debug, PartialEq)]
-pub struct Button;
+pub struct Button {


Before I remembered to check if anyone had started on this yet, I started migrating a few of the examples and I went with the same identical Button { pressed: bool, hovered: bool } component implementation.

I think for the default Button representation, like MiniaczQ pointed out, I prefer the pressed-until-released behaviour. And then have something like a PushButton for the release-on-exit. But I don't think it's that important, this and a StickyButton component (or whatever we call it) would be fine too.

With release-on-exit buttons, the button.pressed && !button.hovered state is invalid? maybe the fields should be private, with pressed() and hovered() accessors where pressed() returns self.pressed && self.hovered

ickshonpe · 2025-02-10T13:38:48Z

crates/bevy_ui/src/focus.rs

-    derive(serde::Serialize, serde::Deserialize),
-    reflect(Serialize, Deserialize)
-)]
-pub struct RelativeCursorPosition {


We could keep the RelativeCursorPosition component for now and just update it in update_hover_status or something. It's easier to use than sometimes than tracking move events.

ickshonpe · 2025-02-10T13:54:53Z

crates/bevy_ui/src/accessibility.rs

@@ -153,7 +153,7 @@ impl Plugin for AccessibilityPlugin {
                    .after(CameraUpdateSystem)
                    // the listed systems do not affect calculated size
                    .ambiguous_with(crate::ui_stack_system),
-                button_changed,
+                button_changed.after(UiSystem::Focus),


We should rename UiSystem::Focus to UiSystem::Picking I think.

ickshonpe · 2025-02-10T14:00:48Z

crates/bevy_ui/src/widget/button.rs

+            // Avoid triggering change detection spuriously
+            // We can't use `set_if_neq` here because we're only looking at a single component
+            if button.hovered {
+                button.hovered = false;
+            }


Suggested change

// Avoid triggering change detection spuriously

// We can't use `set_if_neq` here because we're only looking at a single component

if button.hovered {

button.hovered = false;

}

button.set_if_neq(Button {

pressed: button.pressed,

hovered: false,

});

Wait, if no buttons are hovered we don't need to preserve the pressed state either, so both fields should be set to false?

ickshonpe · 2025-02-10T14:20:45Z

crates/bevy_ui/src/widget/button.rs

+
+        // Avoid triggering change detection spuriously
+        // We can't use `set_if_neq` here because we're only looking at a single component
+        if button.hovered != is_hovered {


Suggested change

if button.hovered != is_hovered {

button.set_if_neq(Button {

pressed: button.pressed,

hovered: is_hovered,

});

ickshonpe · 2025-02-10T14:39:13Z

crates/bevy_ui/src/widget/button.rs

+        let is_hovered = if map.contains_key(&entity) {
+            true
+        } else {
+            let mut hovering_over_descendant = false;


Users should just should_block_lower: false for this? Some interfaces use nested buttons.

As well with should_block_lower: true unless Down events are propagated upwards, won't it be possible that a button could be hovered without being pressable?

Remove Interaction from the engine code

93b512b

alice-i-cecile mentioned this pull request Oct 2, 2024

UI- Interaction Released state for nodes #8157

Closed

alice-i-cecile added 2 commits October 2, 2024 13:38

Add simple observers to set hovered and pressed state

e7633ad

Fix examples to match changes

b774d6e

alice-i-cecile changed the title ~~Remove Interaction, and replace it with a bevy_picking based alternative~~ Remove Interaction, and replace it with bevy_picking based fields on Button Oct 2, 2024

Uncontroversial cleanup to button.rs example

b6dada8

Also release buttons on Pointer<Out>

dc921f7

alice-i-cecile added X-Contentious There are nontrivial implications that should be thought through and removed X-Controversial There is active debate or serious implications around merging this PR labels Oct 2, 2024

cargo fmt

86b9325

Make text not-pickable by default

9a0eb8c

alice-i-cecile requested a review from NthTensor October 2, 2024 19:07

alice-i-cecile removed the S-Needs-Help The author needs help finishing this PR. label Oct 2, 2024

Merge branch 'main' into interaction-yeet

4d786ea

NthTensor approved these changes Oct 3, 2024

View reviewed changes

NthTensor added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Oct 3, 2024

Resolve system order ambiguity

adb8d50

alice-i-cecile enabled auto-merge October 3, 2024 16:26

alice-i-cecile added 3 commits October 3, 2024 14:36

Fix doc links

5f19214

Remove RelativeCursorPosition component

919eaf3

Remove FocusPolicy

4603812

Fix example README

23134b5

tim-blackbird reviewed Oct 3, 2024

View reviewed changes

mnmaita reviewed Oct 6, 2024

View reviewed changes

alice-i-cecile modified the milestones: 0.15, 0.16 Oct 8, 2024

alice-i-cecile mentioned this pull request Oct 28, 2024

Added PressedButtons to PickingInteraction::Pressed. #16004

Open

alice-i-cecile mentioned this pull request Nov 6, 2024

Add a component to enable/disable interactions on a UI node #16270

Draft

ickshonpe reviewed Feb 10, 2025

View reviewed changes

alice-i-cecile marked this pull request as draft February 10, 2025 18:35

auto-merge was automatically disabled February 10, 2025 18:35
Pull request was converted to draft

alice-i-cecile modified the milestones: 0.16, 0.17 Feb 24, 2025

-        if button.hovered != is_hovered {
+             button.set_if_neq(Button {
+                pressed: button.pressed,
+                hovered: is_hovered,
+            });

Uh oh!

Remove Interaction, and replace it with bevy_picking based fields on Button #15597

Are you sure you want to change the base?

Remove Interaction, and replace it with bevy_picking based fields on Button #15597

Uh oh!

Conversation

alice-i-cecile commented Oct 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Objective

Solution

Testing

Migration Guide

Uh oh!

Leinnan commented Oct 2, 2024

Uh oh!

alice-i-cecile commented Oct 2, 2024

Uh oh!

github-actions bot commented Oct 3, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NthTensor commented Oct 3, 2024

Uh oh!

mnmaita Oct 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Feb 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ickshonpe Feb 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Remove `Interaction`, and replace it with `bevy_picking` based fields on `Button` #15597

Remove `Interaction`, and replace it with `bevy_picking` based fields on `Button` #15597

alice-i-cecile commented Oct 2, 2024 •

edited

Loading

mnmaita Oct 6, 2024 •

edited

Loading

ickshonpe Feb 10, 2025 •

edited

Loading

ickshonpe Feb 10, 2025 •

edited

Loading