raui 0.70.17

Renderer Agnostic User Interface
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

use raui_app::{
    app::{App, AppConfig, declarative::DeclarativeApp},
    event::{ElementState, Event, VirtualKeyCode, WindowEvent},
};
use raui_core::{
    make_widget, pre_hooks,
    view_model::ViewModel,
    widget::{
        component::{
            containers::variant_box::{VariantBoxProps, variant_box},
            image_box::{ImageBoxProps, image_box},
        },
        context::WidgetContext,
        node::WidgetNode,
        utils::Color,
    },
};

const DATA: &str = "data";

fn use_app(ctx: &mut WidgetContext) {
    ctx.life_cycle.mount(|mut ctx| {
        ctx.view_models
            .bindings(DATA, "")
            .unwrap()
            .bind(ctx.id.to_owned());
    });
}

#[pre_hooks(use_app)]
fn app(mut ctx: WidgetContext) -> WidgetNode {
    // we read value from view model created with app builder.
    let variant_name = ctx
        .view_models
        .view_model(DATA)
        .unwrap()
        .read::<String>()
        .map(|value| value.to_owned());

    make_widget!(variant_box)
        .with_props(VariantBoxProps { variant_name })
        .named_slot(
            "A",
            make_widget!(image_box).with_props(ImageBoxProps::colored(Color {
                r: 1.0,
                g: 0.25,
                b: 0.25,
                a: 1.0,
            })),
        )
        .named_slot(
            "S",
            make_widget!(image_box).with_props(ImageBoxProps::colored(Color {
                r: 0.25,
                g: 1.0,
                b: 0.25,
                a: 1.0,
            })),
        )
        .named_slot(
            "D",
            make_widget!(image_box).with_props(ImageBoxProps::colored(Color {
                r: 0.25,
                g: 0.25,
                b: 1.0,
                a: 1.0,
            })),
        )
        .into()
}

fn main() {
    let app = DeclarativeApp::default()
        .tree(make_widget!(app))
        .view_model(DATA, ViewModel::new_object("A".to_owned()))
        .event(move |application, event, _, _| {
            let mut data = application
                .view_models
                .get_mut(DATA)
                .unwrap()
                .write_notified::<String>()
                .unwrap();

            if let Event::WindowEvent {
                event: WindowEvent::KeyboardInput { input, .. },
                ..
            } = event
                && input.state == ElementState::Pressed
                && let Some(key) = input.virtual_keycode
            {
                match key {
                    VirtualKeyCode::A => {
                        // we modify app data with value that represent active variant name.
                        *data = "A".to_owned();
                    }
                    VirtualKeyCode::S => {
                        *data = "S".to_owned();
                    }
                    VirtualKeyCode::D => {
                        *data = "D".to_owned();
                    }
                    _ => {}
                }
            };
            true
        });

    App::new(AppConfig::default().title("Variant Box")).run(app);
}