feat: add tui

packages/tui/examples/border.rs

@@ -0,0 +1,27 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let (radius, set_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| set_radius((radius + 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}"
+        }
+    })
+}

packages/tui/examples/color_test.rs

@@ -0,0 +1,48 @@
+use dioxus::prelude::*;
+
+fn main() {
+    // rink::launch(app);
+    rink::launch_cfg(
+        app,
+        rink::Config {
+            rendering_mode: rink::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}%)",
+                                        }
+                                    })
+                                }
+                            )
+                        }
+                    })
+                }
+            )
+        }
+    })
+}

packages/tui/examples/components.rs

@@ -0,0 +1,64 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::launch(app);
+}
+
+#[derive(Props, PartialEq)]
+struct QuadrentProps {
+    color: String,
+    text: String,
+}
+
+fn Quadrent(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",
+                Quadrent{
+                    color: "red".to_string(),
+                    text: "[A]".to_string()
+                },
+                Quadrent{
+                    color: "black".to_string(),
+                    text: "[B]".to_string()
+                }
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                Quadrent{
+                    color: "green".to_string(),
+                    text: "[C]".to_string()
+                },
+                Quadrent{
+                    color: "blue".to_string(),
+                    text: "[D]".to_string()
+                }
+            }
+        }
+    })
+}

packages/tui/examples/frame.rs

@@ -0,0 +1,82 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::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"
+            }
+        }
+    })
+}

packages/tui/examples/hover.rs

@@ -0,0 +1,102 @@
+use std::{convert::TryInto, sync::Arc};
+
+use dioxus::{events::MouseData, prelude::*};
+
+fn main() {
+    rink::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 mb = m.buttons;
+        let b: i32 = m.buttons.count_ones().try_into().unwrap();
+        127 * b
+    }
+
+    let (q1_color, set_q1_color) = use_state(&cx, || [200; 3]);
+    let (q2_color, set_q2_color) = use_state(&cx, || [200; 3]);
+    let (q3_color, set_q3_color) = use_state(&cx, || [200; 3]);
+    let (q4_color, set_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| set_q1_color([get_brightness(m.data), 0, 0]),
+                    onmousedown: move |m| set_q1_color([get_brightness(m.data), 0, 0]),
+                    onmouseup: move |m| set_q1_color([get_brightness(m.data), 0, 0]),
+                    onwheel: move |w| set_q1_color([q1_color[0] + (10.0*w.delta_y) as i32, 0, 0]),
+                    onmouseleave: move |_| set_q1_color([200; 3]),
+                    "click me"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q2_color_str}",
+                    onmouseenter: move |m| set_q2_color([get_brightness(m.data); 3]),
+                    onmousedown: move |m| set_q2_color([get_brightness(m.data); 3]),
+                    onmouseup: move |m| set_q2_color([get_brightness(m.data); 3]),
+                    onwheel: move |w| set_q2_color([q2_color[0] + (10.0*w.delta_y) as i32;3]),
+                    onmouseleave: move |_| set_q2_color([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| set_q3_color([0, get_brightness(m.data), 0]),
+                    onmousedown: move |m| set_q3_color([0, get_brightness(m.data), 0]),
+                    onmouseup: move |m| set_q3_color([0, get_brightness(m.data), 0]),
+                    onwheel: move |w| set_q3_color([0, q3_color[1] + (10.0*w.delta_y) as i32, 0]),
+                    onmouseleave: move |_| set_q3_color([200; 3]),
+                    "click me"
+                }
+                div {
+                    width: "50%",
+                    height: "100%",
+                    justify_content: "center",
+                    align_items: "center",
+                    background_color: "{q4_color_str}",
+                    onmouseenter: move |m| set_q4_color([0, 0, get_brightness(m.data)]),
+                    onmousedown: move |m| set_q4_color([0, 0, get_brightness(m.data)]),
+                    onmouseup: move |m| set_q4_color([0, 0, get_brightness(m.data)]),
+                    onwheel: move |w| set_q4_color([0, 0, q4_color[2] + (10.0*w.delta_y) as i32]),
+                    onmouseleave: move |_| set_q4_color([200; 3]),
+                    "click me"
+                }
+            }
+        }
+    })
+}

packages/tui/examples/keys.rs

@@ -0,0 +1,75 @@
+use dioxus::events::WheelEvent;
+use dioxus::prelude::*;
+use dioxus_html::on::{KeyboardEvent, MouseEvent};
+use dioxus_html::KeyCode;
+
+fn main() {
+    rink::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let (key, set_key) = use_state(&cx, || "".to_string());
+    let (mouse, set_mouse) = use_state(&cx, || (0, 0));
+    let (count, set_count) = use_state(&cx, || 0);
+    let (buttons, set_buttons) = use_state(&cx, || 0);
+    let (mouse_clicked, set_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 => set_count(count + 1),
+                    KeyCode::RightArrow => set_count(count - 1),
+                    KeyCode::UpArrow => set_count(count + 10),
+                    KeyCode::DownArrow => set_count(count - 10),
+                    _ => {},
+                }
+                set_key(format!("{:?} repeating: {:?}", evt.key, evt.repeat));
+            },
+            onwheel: move |evt: WheelEvent| {
+                set_count(count + evt.data.delta_y as i64);
+            },
+            ondrag: move |evt: MouseEvent| {
+                set_mouse((evt.data.screen_x, evt.data.screen_y));
+            },
+            onmousedown: move |evt: MouseEvent| {
+                set_mouse((evt.data.screen_x, evt.data.screen_y));
+                set_buttons(evt.data.buttons);
+                set_mouse_clicked(true);
+            },
+            onmouseup: move |evt: MouseEvent| {
+                set_buttons(evt.data.buttons);
+                set_mouse_clicked(false);
+            },
+
+            "count: {count:?}",
+            "key: {key}",
+            "mouse buttons: {buttons:b}",
+            "mouse pos: {mouse:?}",
+            "mouse button pressed: {mouse_clicked}"
+        }
+    })
+}
+
+fn app2<'a>(cx: Scope<'a>) -> Element<'a> {
+    let (count, set_count) = use_state(&cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "10px",
+            background_color: "red",
+            justify_content: "center",
+            align_items: "center",
+            oninput: move |_| set_count(count + 1),
+            "Hello world!",
+            h1 {},
+        }
+    })
+}

packages/tui/examples/layouts.rs

@@ -0,0 +1,52 @@
+use std::collections::HashMap;
+
+use dioxus::prelude::*;
+
+fn main() {
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    let mut layout = stretch2::Stretch::new();
+    let mut nodes = HashMap::new();
+    rink::collect_layout(&mut layout, &mut nodes, &dom, dom.base_scope().root_node());
+
+    let node = nodes
+        .remove(&dom.base_scope().root_node().mounted_id())
+        .unwrap();
+
+    layout
+        .compute_layout(node.layout, stretch2::geometry::Size::undefined())
+        .unwrap();
+
+    for (_id, node) in nodes.drain() {
+        println!("{:?}", layout.layout(node.layout));
+    }
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                "hi"
+            }
+            div {
+                "bi"
+                "bi"
+            }
+        }
+    })
+}
+
+// fn print_layout(mut nodes: HashMap<ElementId, TuiNode>, node: &VNode) {
+//     match node {
+//         VNode::Text(_) => todo!(),
+//         VNode::Element(_) => todo!(),
+//         VNode::Fragment(_) => todo!(),
+//         VNode::Component(_) => todo!(),
+//         VNode::Placeholder(_) => todo!(),
+//     }
+// }

packages/tui/examples/list.rs

@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::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}"
+                ))
+            }
+        }
+    })
+}

packages/tui/examples/margin.rs

@@ -0,0 +1,50 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::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]"
+                }
+            }
+        }
+    })
+}

packages/tui/examples/quadrants.rs

@@ -0,0 +1,60 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::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]"
+                }
+            }
+        }
+    })
+}

packages/tui/examples/readme.rs

@@ -0,0 +1,19 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::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!"
+        }
+    })
+}

packages/tui/examples/strecher.rs

@@ -0,0 +1,34 @@
+use stretch2::prelude::*;
+
+fn main() -> Result<(), Error> {
+    let mut stretch = Stretch::new();
+
+    let child = stretch.new_node(
+        Style {
+            size: Size {
+                width: Dimension::Percent(0.5),
+                height: Dimension::Auto,
+            },
+            ..Default::default()
+        },
+        &[],
+    )?;
+
+    let node = stretch.new_node(
+        Style {
+            size: Size {
+                width: Dimension::Points(100.0),
+                height: Dimension::Points(100.0),
+            },
+            justify_content: JustifyContent::Center,
+            ..Default::default()
+        },
+        &[child],
+    )?;
+
+    stretch.compute_layout(node, Size::undefined())?;
+    println!("node: {:#?}", stretch.layout(node)?);
+    println!("child: {:#?}", stretch.layout(child)?);
+
+    Ok(())
+}

packages/tui/examples/task.rs

@@ -0,0 +1,46 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let (count, set_count) = use_state(&cx, || 0);
+
+    use_future(&cx, move || {
+        let set_count = set_count.to_owned();
+        let update = cx.schedule_update();
+        async move {
+            loop {
+                set_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}!"
+            }
+        }
+    })
+}
+
+// use_future(&cx, || {
+//         let set_count = count.setter();
+//         let mut mycount = 0;
+//         let update = cx.schedule_update();
+//         async move {
+//             loop {
+//                 tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+//                 mycount += 1;
+//                 set_count(mycount);
+//                 update();
+//             }
+//         }
+//     });

packages/tui/examples/text.rs

@@ -0,0 +1,127 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::launch(app);
+    // rink::launch_cfg(
+    //     app,
+    //     rink::Config {
+    //         rendering_mode: rink::RenderingMode::Ansi,
+    //     },
+    // )
+}
+
+fn app(cx: Scope) -> Element {
+    let (alpha, set_alpha) = use_state(&cx, || 100);
+
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            // justify_content: "center",
+            // align_items: "center",
+            // flex_direction: "row",
+            onwheel: move |evt| {
+                set_alpha((alpha + evt.data.delta_y as i64).min(100).max(0));
+            },
+
+            p {
+                background_color: "black",
+                flex_direction: "column",
+                justify_content: "center",
+                align_items: "center",
+                // height: "10%",
+                color: "green",
+                "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"
+            }
+            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%)"
+                }
+            }
+        }
+    })
+}

packages/tui/examples/ui.rsx

@@ -0,0 +1,5 @@
+div {
+    div {
+
+    }    
+}