euv-example 0.5.50

An example application demonstrating the euv UI framework with reactive signals, custom components, and WebAssembly.
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

use crate::*;

/// A canvas drawing board page component that shows a preview of the
/// drawing and a button to enter fullscreen drawing mode.
///
/// In normal mode, displays a card with the current drawing preview
/// (or a placeholder if no drawing exists) and a "Draw" button.
/// Clicking the button enters fullscreen mode with a portrait-oriented
/// canvas for drawing.
///
/// # Returns
///
/// - `VirtualNode` - The canvas drawing board page virtual DOM tree.
#[component]
pub(crate) fn page_canvas(node: VirtualNode<PageCanvasProps>) -> VirtualNode {
    let _page_canvas_props: PageCanvasProps = node.try_get_props().unwrap_or_default();
    let state: UseCanvas = use_canvas_state();
    use_fullscreen_popstate(state);
    html! {
        div {
            class: c_page_container()
            page_header {
                title: "Canvas"
                subtitle: "A freehand drawing board. Tap Draw to start creating."
            }
            my_card {
                title: "Drawing Board"
                primary_button {
                    label: CANVAS_DRAW_LABEL
                    onclick: canvas_on_draw(state)
                    CANVAS_DRAW_LABEL
                }
                div {
                    class: c_canvas_preview_container()
                    if { state.get_snapshot_data_url().get().is_empty() } {
                        div {
                            class: c_canvas_placeholder()
                            "No drawing yet. Tap Draw to start."
                        }
                    } else {
                        img {
                            class: c_canvas_preview_image()
                            src: state.get_snapshot_data_url().get()
                        }
                    }
                }
            }
        }
        if { state.get_fullscreen().get() } {
            div {
                id: CANVAS_CONTAINER_ID
                class: c_canvas_container_fullscreen()
                div {
                    class: c_canvas_fullscreen_toolbar()
                    button {
                        class: c_canvas_fullscreen_button()
                        onclick: move |_event: Event| {
                            clear_canvas(CANVAS_DRAWING_SELECTOR);
                        }
                        "Clear"
                    }
                    div {
                        class: c_canvas_fullscreen_toolbar_center()
                        input {
                            r#type: "color"
                            class: c_canvas_color_input()
                            value: state.get_stroke_color().get()
                            oninput: move |event: Event| {
                                let new_color: String = Reflect::get(event.as_ref(), &JsValue::from_str("target"))
                                    .ok()
                                    .and_then(|target: JsValue| Reflect::get(&target, &JsValue::from_str("value")).ok())
                                    .and_then(|value: JsValue| value.as_string())
                                    .unwrap_or_default();
                                state.get_stroke_color().set(new_color);
                            }
                        }
                        input {
                            r#type: "range"
                            class: c_canvas_fullscreen_range_input()
                            min: CANVAS_MIN_LINE_WIDTH
                            max: CANVAS_MAX_LINE_WIDTH
                            step: CANVAS_LINE_WIDTH_STEP
                            value: state.get_line_width().get()
                            oninput: move |event: Event| {
                                let new_width: f64 = Reflect::get(event.as_ref(), &JsValue::from_str("target"))
                                    .ok()
                                    .and_then(|target: JsValue| Reflect::get(&target, &JsValue::from_str("value")).ok())
                                    .and_then(|value: JsValue| value.as_string())
                                    .and_then(|string: String| string.parse::<f64>().ok())
                                    .unwrap_or(CANVAS_DEFAULT_LINE_WIDTH);
                                state.get_line_width().set(new_width);
                            }
                        }
                    }
                    button {
                        class: c_canvas_fullscreen_button()
                        onclick: move |_event: Event| {
                            exit_fullscreen(state);
                        }
                        CANVAS_FULLSCREEN_EXIT_LABEL
                    }
                }
                div {
                    id: CANVAS_FULLSCREEN_WRAPPER_ID
                    class: c_canvas_drawing_fullscreen_wrapper()
                    canvas {
                        id: CANVAS_DRAWING_ID
                        class: c_canvas_drawing_fullscreen()
                        onmousedown: move |event: Event| {
                            let (offset_x, offset_y): (f64, f64) = get_pointer_offset(&event);
                            let (client_x, client_y): (f64, f64) = get_mouse_client(&event);
                            let (mapped_x, mapped_y): (f64, f64) = map_rotated_offset(offset_x, offset_y, client_x, client_y, true);
                            start_drawing(state, mapped_x, mapped_y);
                        }
                        onmousemove: move |event: Event| {
                            let (offset_x, offset_y): (f64, f64) = get_pointer_offset(&event);
                            let (client_x, client_y): (f64, f64) = get_mouse_client(&event);
                            let (mapped_x, mapped_y): (f64, f64) = map_rotated_offset(offset_x, offset_y, client_x, client_y, true);
                            continue_drawing(state, mapped_x, mapped_y);
                        }
                        onmouseup: move |_event: Event| {
                            stop_drawing(state);
                        }
                        onmouseleave: move |_event: Event| {
                            stop_drawing(state);
                        }
                        ontouchstart: move |event: Event| {
                            prevent_event_default(&event);
                            let (offset_x, offset_y): (f64, f64) = get_touch_offset(&event);
                            let (client_x, client_y): (f64, f64) = get_touch_client(&event);
                            let (mapped_x, mapped_y): (f64, f64) = map_rotated_offset(offset_x, offset_y, client_x, client_y, true);
                            start_drawing(state, mapped_x, mapped_y);
                        }
                        ontouchmove: move |event: Event| {
                            prevent_event_default(&event);
                            let (offset_x, offset_y): (f64, f64) = get_touch_offset(&event);
                            let (client_x, client_y): (f64, f64) = get_touch_client(&event);
                            let (mapped_x, mapped_y): (f64, f64) = map_rotated_offset(offset_x, offset_y, client_x, client_y, true);
                            continue_drawing(state, mapped_x, mapped_y);
                        }
                        ontouchend: move |_event: Event| {
                            stop_drawing(state);
                        }
                    }
                }
            }
        }
    }
}