beuvy-runtime 0.1.0

A low-level Bevy UI kit with reusable controls and utility-class styling.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

use crate::button::Button;
use crate::style::{ui_focus_outline_color, ui_focus_outline_hover_color, ui_hover_outline_color};
use bevy::prelude::*;
use bevy::ui::Val::Px;

pub struct FocusableUiPlugin;

#[derive(Component, Debug, Clone, Copy)]
pub struct UiFocusable;

#[derive(Component, Debug, Clone, Copy)]
pub struct UiFocusOutlineOnFocusOnly;

#[derive(Component, Debug, Clone, Copy)]
pub struct UiHovered;

#[derive(Component, Debug, Clone, Copy)]
pub struct UiFocused;

#[derive(Component, Debug, Clone, Copy)]
pub struct UiPressed;

pub const UI_FOCUS_OUTLINE_WIDTH: f32 = 3.0;
pub const UI_FOCUS_OUTLINE_OFFSET: f32 = 2.0;

impl Plugin for FocusableUiPlugin {
    fn build(&self, app: &mut App) {
        app.add_systems(
            Update,
            (
                sync_focusable_outlines_on_state_change,
                sync_focusable_outlines_on_state_removal,
            ),
        );
    }
}

pub fn hidden_outline() -> Outline {
    Outline::new(
        Px(UI_FOCUS_OUTLINE_WIDTH),
        Px(UI_FOCUS_OUTLINE_OFFSET),
        Color::NONE,
    )
}

fn sync_focusable_outlines_on_state_change(
    mut focusables: Query<
        (
            Has<UiHovered>,
            Has<UiFocused>,
            Has<UiFocusOutlineOnFocusOnly>,
            &mut Outline,
        ),
        (
            With<UiFocusable>,
            Without<Button>,
            Or<(Added<UiFocusable>, Changed<UiHovered>, Changed<UiFocused>)>,
        ),
    >,
) {
    for (hovered, focused, focus_only, mut outline) in &mut focusables {
        outline.color = outline_color(hovered, focused, focus_only);
    }
}

fn sync_focusable_outlines_on_state_removal(
    mut removed_hovered: RemovedComponents<UiHovered>,
    mut removed_focused: RemovedComponents<UiFocused>,
    mut focusables: Query<
        (
            Has<UiHovered>,
            Has<UiFocused>,
            Has<UiFocusOutlineOnFocusOnly>,
            &mut Outline,
        ),
        (With<UiFocusable>, Without<Button>),
    >,
) {
    for entity in removed_hovered.read() {
        let Ok((hovered, focused, focus_only, mut outline)) = focusables.get_mut(entity) else {
            continue;
        };
        outline.color = outline_color(hovered, focused, focus_only);
    }

    for entity in removed_focused.read() {
        let Ok((hovered, focused, focus_only, mut outline)) = focusables.get_mut(entity) else {
            continue;
        };
        outline.color = outline_color(hovered, focused, focus_only);
    }
}

pub fn outline_color(hovered: bool, focused: bool, focus_only: bool) -> Color {
    if focus_only {
        return if focused {
            ui_focus_outline_color()
        } else {
            Color::NONE
        };
    }

    match (hovered, focused) {
        (true, true) => ui_focus_outline_hover_color(),
        (true, false) => ui_hover_outline_color(),
        (false, true) => ui_focus_outline_color(),
        (false, false) => Color::NONE,
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn focus_only_outline_ignores_hover_state() {
        assert_eq!(outline_color(true, false, true), Color::NONE);
        assert_eq!(outline_color(true, true, true), ui_focus_outline_color());
    }
}