feat: update examples for tui

examples/tui_border.rs

@@ -0,0 +1,27 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let radius = use_state(&cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            justify_content: "center",
+            align_items: "center",
+            background_color: "hsl(248, 53%, 58%)",
+            onwheel: move |w| radius.modify(|r| (r + w.delta_y as i8).abs()),
+
+            border_style: "solid none solid double",
+            border_width: "thick",
+            border_radius: "{radius}px",
+            border_color: "#0000FF #FF00FF #FF0000 #00FF00",
+
+            "{radius}"
+        }
+    })
+}

examples/tui_color_test.rs

@@ -0,0 +1,47 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch_cfg(
+        app,
+        dioxus::tui::Config {
+            rendering_mode: dioxus::tui::RenderingMode::Ansi,
+        },
+    );
+}
+
+fn app(cx: Scope) -> Element {
+    let steps = 50;
+    cx.render(rsx! {
+        div{
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            (0..=steps).map(|x|
+                {
+                    let hue = x as f32*360.0/steps as f32;
+                    cx.render(rsx! {
+                        div{
+                            width: "100%",
+                            height: "100%",
+                            flex_direction: "row",
+                            (0..=steps).map(|y|
+                                {
+                                    let alpha = y as f32*100.0/steps as f32;
+                                    cx.render(rsx! {
+                                        div {
+                                            left: "{x}px",
+                                            top: "{y}px",
+                                            width: "10%",
+                                            height: "100%",
+                                            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
+                                        }
+                                    })
+                                }
+                            )
+                        }
+                    })
+                }
+            )
+        }
+    })
+}

examples/tui_components.rs

@@ -0,0 +1,66 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+#[derive(Props, PartialEq)]
+struct QuadrentProps {
+    color: String,
+    text: String,
+}
+
+fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
+    cx.render(rsx! {
+        div {
+            border_width: "1px",
+            width: "50%",
+            height: "100%",
+            background_color: "{cx.props.color}",
+            justify_content: "center",
+            align_items: "center",
+
+            "{cx.props.text}"
+        }
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                Quadrant{
+                    color: "red".to_string(),
+                    text: "[A]".to_string()
+                },
+                Quadrant{
+                    color: "black".to_string(),
+                    text: "[B]".to_string()
+                }
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                Quadrant{
+                    color: "green".to_string(),
+                    text: "[C]".to_string()
+                },
+                Quadrant{
+                    color: "blue".to_string(),
+                    text: "[D]".to_string()
+                }
+            }
+        }
+    })
+}

examples/tui_frame.rs

@@ -0,0 +1,82 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            // justify_content: "center",
+            // align_items: "center",
+            // flex_direction: "row",
+            // background_color: "red",
+
+            p {
+                background_color: "black",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                // height: "10%",
+                "hi"
+                "hi"
+                "hi"
+            }
+
+            li {
+                background_color: "red",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                // height: "10%",
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+            }
+            li {
+                background_color: "blue",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                // height: "10%",
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+            }
+            p {
+                background_color: "yellow",
+                "asd"
+            }
+            p {
+                background_color: "green",
+                "asd"
+            }
+            p {
+                background_color: "white",
+                "asd"
+            }
+            p {
+                background_color: "cyan",
+                "asd"
+            }
+        }
+    })
+}

examples/tui_hover.rs

@@ -0,0 +1,101 @@
+use std::{convert::TryInto, sync::Arc};
+
+use dioxus::{events::MouseData, prelude::*};
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    fn to_str(c: &[i32; 3]) -> String {
+        "#".to_string() + &c.iter().map(|c| format!("{c:02X?}")).collect::<String>()
+    }
+
+    fn get_brightness(m: Arc<MouseData>) -> i32 {
+        let b: i32 = m.buttons.count_ones().try_into().unwrap();
+        127 * b
+    }
+
+    let q1_color = use_state(&cx, || [200; 3]);
+    let q2_color = use_state(&cx, || [200; 3]);
+    let q3_color = use_state(&cx, || [200; 3]);
+    let q4_color = use_state(&cx, || [200; 3]);
+
+    let q1_color_str = to_str(q1_color);
+    let q2_color_str = to_str(q2_color);
+    let q3_color_str = to_str(q3_color);
+    let q4_color_str = to_str(q4_color);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                div {
+                    border_width: "1px",
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q1_color_str}",
+                    onmouseenter: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
+                    onmousedown: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
+                    onmouseup: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
+                    onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta_y) as i32, 0, 0]),
+                    onmouseleave: move |_| q1_color.set([200; 3]),
+                    "click me"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q2_color_str}",
+                    onmouseenter: move |m| q2_color.set([get_brightness(m.data); 3]),
+                    onmousedown: move |m| q2_color.set([get_brightness(m.data); 3]),
+                    onmouseup: move |m| q2_color.set([get_brightness(m.data); 3]),
+                    onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta_y) as i32;3]),
+                    onmouseleave: move |_| q2_color.set([200; 3]),
+                    "click me"
+                }
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                div {
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q3_color_str}",
+                    onmouseenter: move |m| q3_color.set([0, get_brightness(m.data), 0]),
+                    onmousedown: move |m| q3_color.set([0, get_brightness(m.data), 0]),
+                    onmouseup: move |m| q3_color.set([0, get_brightness(m.data), 0]),
+                    onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta_y) as i32, 0]),
+                    onmouseleave: move |_| q3_color.set([200; 3]),
+                    "click me"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q4_color_str}",
+                    onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
+                    onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
+                    onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
+                    onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta_y) as i32]),
+                    onmouseleave: move |_| q4_color.set([200; 3]),
+                    "click me"
+                }
+            }
+        }
+    })
+}

examples/tui_keys.rs

@@ -0,0 +1,58 @@
+use dioxus::events::WheelEvent;
+use dioxus::prelude::*;
+use dioxus_html::on::{KeyboardEvent, MouseEvent};
+use dioxus_html::KeyCode;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let key = use_state(&cx, || "".to_string());
+    let mouse = use_state(&cx, || (0, 0));
+    let count = use_state(&cx, || 0);
+    let buttons = use_state(&cx, || 0);
+    let mouse_clicked = use_state(&cx, || false);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "10px",
+            background_color: "red",
+            justify_content: "center",
+            align_items: "center",
+            flex_direction: "column",
+            onkeydown: move |evt: KeyboardEvent| {
+                match evt.data.key_code {
+                    KeyCode::LeftArrow => count.set(count + 1),
+                    KeyCode::RightArrow => count.set(count - 1),
+                    KeyCode::UpArrow => count.set(count + 10),
+                    KeyCode::DownArrow => count.set(count - 10),
+                    _ => {},
+                }
+                key.set(format!("{:?} repeating: {:?}", evt.key, evt.repeat));
+            },
+            onwheel: move |evt: WheelEvent| {
+                count.set(count + evt.data.delta_y as i64);
+            },
+            ondrag: move |evt: MouseEvent| {
+                mouse.set((evt.data.screen_x, evt.data.screen_y));
+            },
+            onmousedown: move |evt: MouseEvent| {
+                mouse.set((evt.data.screen_x, evt.data.screen_y));
+                buttons.set(evt.data.buttons);
+                mouse_clicked.set(true);
+            },
+            onmouseup: move |evt: MouseEvent| {
+                buttons.set(evt.data.buttons);
+                mouse_clicked.set(false);
+            },
+
+            "count: {count:?}",
+            "key: {key}",
+            "mouse buttons: {buttons:b}",
+            "mouse pos: {mouse:?}",
+            "mouse button pressed: {mouse_clicked}"
+        }
+    })
+}

examples/tui_list.rs

@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            border_width: "1px",
+
+            h1 { height: "2px", color: "green",
+                "that's awesome!"
+            }
+
+            ul {
+                flex_direction: "column",
+                padding_left: "3px",
+                (0..10).map(|i| rsx!(
+                    "> hello {i}"
+                ))
+            }
+        }
+    })
+}

examples/tui_margin.rs

@@ -0,0 +1,50 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            background_color: "black",
+            // margin_right: "10px",
+
+            div {
+                width: "70%",
+                height: "70%",
+                background_color: "green",
+                // margin_left: "4px",
+
+                div {
+                    width: "100%",
+                    height: "100%",
+
+                    margin_top: "2px",
+                    margin_bottom: "2px",
+                    margin_left: "2px",
+                    margin_right: "2px",
+                    flex_shrink: "0",
+
+                    background_color: "red",
+                    justify_content: "center",
+                    align_items: "center",
+                    flex_direction: "column",
+
+                    // padding_top: "2px",
+                    // padding_bottom: "2px",
+                    // padding_left: "4px",
+                    // padding_right: "4px",
+
+                    "[A]"
+                    "[A]"
+                    "[A]"
+                    "[A]"
+                }
+            }
+        }
+    })
+}

examples/tui_quadrants.rs

@@ -0,0 +1,60 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                div {
+                    border_width: "1px",
+                    width: "50%",
+                    height: "100%",
+                    background_color: "red",
+                    justify_content: "center",
+                    align_items: "center",
+                    "[A]"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    background_color: "black",
+                    justify_content: "center",
+                    align_items: "center",
+                    "[B]"
+                }
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                div {
+                    width: "50%",
+                    height: "100%",
+                    background_color: "green",
+                    justify_content: "center",
+                    align_items: "center",
+                    "[C]"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    background_color: "blue",
+                    justify_content: "center",
+                    align_items: "center",
+                    "[D]"
+                }
+            }
+        }
+    })
+}

examples/tui_readme.rs

@@ -0,0 +1,19 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "10px",
+            background_color: "red",
+            justify_content: "center",
+            align_items: "center",
+
+            "Hello world!"
+        }
+    })
+}

examples/tui_task.rs

@@ -0,0 +1,32 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let count = use_state(&cx, || 0);
+
+    use_future(&cx, (), move |_| {
+        let count = count.to_owned();
+        let update = cx.schedule_update();
+        async move {
+            loop {
+                count.with_mut(|f| *f += 1);
+                tokio::time::sleep(std::time::Duration::from_millis(1000)).await;
+                update();
+            }
+        }
+    });
+
+    cx.render(rsx! {
+        div { width: "100%",
+            div { width: "50%", height: "5px", background_color: "blue", justify_content: "center", align_items: "center",
+                "Hello {count}!"
+            }
+            div { width: "50%", height: "10px", background_color: "red", justify_content: "center", align_items: "center",
+                "Hello {count}!"
+            }
+        }
+    })
+}

examples/tui_text.rs

@@ -0,0 +1,113 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let alpha = use_state(&cx, || 100);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            onwheel: move |evt| alpha.set((**alpha + evt.data.delta_y as i64).min(100).max(0)),
+
+            p {
+                background_color: "black",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                color: "green",
+                "hi"
+                "hi"
+                "hi"
+            }
+
+            li {
+                background_color: "red",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+                "bib"
+            }
+            li {
+                background_color: "blue",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+                "zib"
+            }
+            p {
+                background_color: "yellow",
+                "asd"
+            }
+            p {
+                background_color: "green",
+                "asd"
+            }
+            p {
+                background_color: "white",
+                "asd"
+            }
+            p {
+                background_color: "cyan",
+                "asd"
+            }
+            div {
+                font_weight: "bold",
+                color: "#666666",
+                p {
+                    "bold"
+                }
+                p {
+                    font_weight: "normal",
+                    " normal"
+                }
+            }
+            p {
+                font_style: "italic",
+                color: "red",
+                "italic"
+            }
+            p {
+                text_decoration: "underline",
+                color: "rgba(255, 255, 255)",
+                "underline"
+            }
+            p {
+                text_decoration: "line-through",
+                color: "hsla(10, 100%, 70%)",
+                "line-through"
+            }
+            div{
+                position: "absolute",
+                top: "1px",
+                background_color: "rgba(255, 0, 0, 50%)",
+                width: "100%",
+                p {
+                    color: "rgba(255, 255, 255, {alpha}%)",
+                    background_color: "rgba(100, 100, 100, {alpha}%)",
+                    "rgba(255, 255, 255, {alpha}%)"
+                }
+                p {
+                    color: "rgba(255, 255, 255, 100%)",
+                    "rgba(255, 255, 255, 100%)"
+                }
+            }
+        }
+    })
+}