feat: update examples for tui

examples/tui_border.rs

@@ -1,11 +1,11 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    let (radius, set_radius) = use_state(&cx, || 0);
+    let radius = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
@@ -14,7 +14,7 @@ fn app(cx: Scope) -> Element {
             justify_content: "center",
             align_items: "center",
             background_color: "hsl(248, 53%, 58%)",
-            onwheel: move |w| set_radius((radius + w.delta_y as i8).abs()),
+            onwheel: move |w| radius.modify(|r| (r + w.delta_y as i8).abs()),
 
             border_style: "solid none solid double",
             border_width: "thick",

examples/tui_color_test.rs

@@ -1,11 +1,10 @@
 use dioxus::prelude::*;
 
 fn main() {
-    // rink::launch(app);
-    rink::launch_cfg(
+    dioxus::tui::launch_cfg(
         app,
-        rink::Config {
-            rendering_mode: rink::RenderingMode::Ansi,
+        dioxus::tui::Config {
+            rendering_mode: dioxus::tui::RenderingMode::Ansi,
         },
     );
 }

examples/tui_components.rs

@@ -1,7 +1,9 @@
+#![allow(non_snake_case)]
+
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 #[derive(Props, PartialEq)]
@@ -10,7 +12,7 @@ struct QuadrentProps {
     text: String,
 }
 
-fn Quadrent(cx: Scope<QuadrentProps>) -> Element {
+fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
     cx.render(rsx! {
         div {
             border_width: "1px",
@@ -36,11 +38,11 @@ fn app(cx: Scope) -> Element {
                 width: "100%",
                 height: "50%",
                 flex_direction: "row",
-                Quadrent{
+                Quadrant{
                     color: "red".to_string(),
                     text: "[A]".to_string()
                 },
-                Quadrent{
+                Quadrant{
                     color: "black".to_string(),
                     text: "[B]".to_string()
                 }
@@ -50,11 +52,11 @@ fn app(cx: Scope) -> Element {
                 width: "100%",
                 height: "50%",
                 flex_direction: "row",
-                Quadrent{
+                Quadrant{
                     color: "green".to_string(),
                     text: "[C]".to_string()
                 },
-                Quadrent{
+                Quadrant{
                     color: "blue".to_string(),
                     text: "[D]".to_string()
                 }

examples/tui_frame.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/tui_hover.rs

@@ -3,7 +3,7 @@ use std::{convert::TryInto, sync::Arc};
 use dioxus::{events::MouseData, prelude::*};
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
@@ -12,15 +12,14 @@ fn app(cx: Scope) -> Element {
     }
 
     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 = 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);
@@ -44,11 +43,11 @@ fn app(cx: Scope) -> Element {
                     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]),
+                    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 {
@@ -57,11 +56,11 @@ fn app(cx: Scope) -> Element {
                     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]),
+                    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"
                 }
             }
@@ -76,11 +75,11 @@ fn app(cx: Scope) -> Element {
                     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]),
+                    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 {
@@ -89,11 +88,11 @@ fn app(cx: Scope) -> Element {
                     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]),
+                    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

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/tui_margin.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/tui_quadrants.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/tui_readme.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

examples/tui_task.rs

@@ -1,18 +1,18 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    let (count, set_count) = use_state(&cx, || 0);
+    let count = use_state(&cx, || 0);
 
-    use_future(&cx, move || {
-        let set_count = set_count.to_owned();
+    use_future(&cx, (), move |_| {
+        let count = count.to_owned();
         let update = cx.schedule_update();
         async move {
             loop {
-                set_count.with_mut(|f| *f += 1);
+                count.with_mut(|f| *f += 1);
                 tokio::time::sleep(std::time::Duration::from_millis(1000)).await;
                 update();
             }
@@ -30,17 +30,3 @@ fn app(cx: Scope) -> Element {
         }
     })
 }
-
-// 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();
-//             }
-//         }
-//     });

examples/tui_text.rs

@@ -1,36 +1,24 @@
 use dioxus::prelude::*;
 
 fn main() {
-    rink::launch(app);
-    // rink::launch_cfg(
-    //     app,
-    //     rink::Config {
-    //         rendering_mode: rink::RenderingMode::Ansi,
-    //     },
-    // )
+    dioxus::tui::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    let (alpha, set_alpha) = use_state(&cx, || 100);
+    let 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));
-            },
+            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",
-                // height: "10%",
                 color: "green",
                 "hi"
                 "hi"
@@ -42,7 +30,6 @@ fn app(cx: Scope) -> Element {
                 flex_direction: "column",
                 justify_content: "center",
                 align_items: "center",
-                // height: "10%",
                 "bib"
                 "bib"
                 "bib"
@@ -57,7 +44,6 @@ fn app(cx: Scope) -> Element {
                 flex_direction: "column",
                 justify_content: "center",
                 align_items: "center",
-                // height: "10%",
                 "zib"
                 "zib"
                 "zib"

packages/hooks/src/usestate.rs

@@ -310,6 +310,12 @@ impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
     }
 }
 
+impl<'a, T: std::fmt::Binary> std::fmt::Binary for UseState<T> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{:b}", self.current_val.as_ref())
+    }
+}
+
 impl<T: PartialEq> PartialEq<T> for UseState<T> {
     fn eq(&self, other: &T) -> bool {
         self.current_val.as_ref() == other

packages/tui/examples/keys.rs

@@ -1,75 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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/strecher.rs

@@ -1,34 +0,0 @@
-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(())
-}

src/lib.rs

@@ -17,6 +17,9 @@ pub use dioxus_web as web;
 #[cfg(feature = "desktop")]
 pub use dioxus_desktop as desktop;
 
+#[cfg(feature = "tui")]
+pub use dioxus_tui as tui;
+
 #[cfg(feature = "fermi")]
 pub use fermi;