appy 0.1.6

Declarative UI framework with native rendering
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

use appy::{components::*, hooks::*, types::*, *};
use glapp::AppEvent;

#[derive_component(ComponentBuilder, Default, SnakeFactory)]
pub struct Slider {
    label: String,
    value: Option<StateRef<f32>>,
    max: f32,
}

#[function_component]
fn _slider(props: Slider) -> Elements {
    let mut val = use_state(|| 0.0);
    if props.value.is_some() {
        val = props.value.unwrap();
    }

    let down = use_state(|| false);
    let app_context = use_context::<AppContext>();
    let max = props.max;

    use_app_event(rc_with_clone!([val, app_context, down, max], move |e| {
        let update = rc_with_clone!([val, app_context], move |x: f32| {
            let v = max * (x - app_context.rect.x) / app_context.rect.w;
            val.set(v.max(0.0).min(max));
        });

        match *e {
            AppEvent::MouseDown { x, y, .. } => {
                if app_context.rect.contains(x, y) {
                    update(x);
                    down.set(true);
                }
            }
            AppEvent::MouseMove { x, .. } => {
                if *down {
                    update(x);
                }
            }
            AppEvent::MouseUp { .. } => {
                down.set(false);
            }
            _ => {}
        }
    }));

    let p = (*val / max) * (app_context.rect.w - 20.);

    apx! {
        <blk height=20>
            <blk width=pct(100) height=10>
                <bg color=0x808080 corner_radius=5 border_width=1 border_color=0xffffff/>
            </blk>
            <blk width=20 height=20 left=p>
                <bg color=0xc0c0c0 border_width=1 border_color=0xffffff corner_radius=10/>
            </blk>
        </blk>
    }
}

#[derive_component(ComponentBuilder, Default, SnakeFactory)]
pub struct CheckBox {
    value: Option<StateRef<bool>>,
}

#[function_component]
fn _check_box(props: CheckBox) -> Elements {
    let mut val = use_state(|| false);
    if props.value.is_some() {
        val = props.value.unwrap();
    }

    apx! {
        <bg border_width=1 border_color=0xffffff color=0x808080 corner_radius=10/>
        {if *val {
            apx!{
                <blk margin=4>
                    <bg corner_radius=5 color=0xc0c0c0 border_color=0xffffff border_width=1/>
                </blk>
            }
        } else {apx!{}}}

        <interaction on_click=rc_with_clone!([val],move||val.set(!*val))/>
    }
}

#[derive_component(ComponentBuilder, Default, SnakeFactory)]
pub struct Setting {
    text: String,
    value: Option<StateRef<f32>>,
    max: f32,
}

#[function_component]
fn _setting(props: Setting) -> Elements {
    apx! {
        <flow height=20>
            <text text=&*props.text/>
        </flow>
        <flow height=20>
            <slider max=props.max value_option=props.value/>
        </flow>
        <flow height=20/>
    }
}

#[main_window]
fn main() -> Elements {
    let rad = use_state(|| 10.0);
    let border = use_state(|| 5.0);

    let borders = [
        use_state(|| true),
        use_state(|| true),
        use_state(|| true),
        use_state(|| true),
    ];

    apx! {
        <blk left=0 width=200>
            <bg color=0x000080/>

            <blk margin=20 flow_valign=VAlign::Top>
                <Setting text=&*format!("Rad: {:.1}",*rad)
                        value=rad.clone()
                        max=50.0/>
                <Setting text=&*format!("Border: {:.1}",*border)
                        value=border.clone()
                        max=50.0/>
                <flow width=pct(100) height=60>
                    <blk top=0 height=20>
                        <text text="Borders" size=pct(100) />
                    </blk>
                    <blk top=20 height=25>
                        <grid cols=4>
                            {borders.iter().flat_map(move|b|{
                                apx!{
                                    <blk margin=2>
                                        <check_box value=b.clone()/>
                                    </blk>
                                }
                            }).collect()}
                        </grid>
                    </blk>
                </flow>
            </blk>
        </blk>
        <blk left=250 top=100 width=400 height=200>
            <bg color=0x000080
                corner_radius=*rad
                border_color=0x8080ff
                border_width=*border
                borders=borders.map(|b|*b)/>
        </blk>
    }
}