From 50d509688dd5150a06944d4f02145f1704b9805f Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Wed, 9 Mar 2022 13:36:30 -0500 Subject: [PATCH] feat: update examples for tui --- .../border.rs => examples/tui_border.rs | 6 +- .../tui_color_test.rs | 7 +- .../tui_components.rs | 14 ++-- .../frame.rs => examples/tui_frame.rs | 2 +- .../hover.rs => examples/tui_hover.rs | 51 +++++++------ examples/tui_keys.rs | 58 ++++++++++++++ .../examples/list.rs => examples/tui_list.rs | 2 +- .../margin.rs => examples/tui_margin.rs | 2 +- .../quadrants.rs => examples/tui_quadrants.rs | 2 +- .../readme.rs => examples/tui_readme.rs | 2 +- .../examples/task.rs => examples/tui_task.rs | 24 ++---- .../examples/text.rs => examples/tui_text.rs | 20 +---- packages/hooks/src/usestate.rs | 6 ++ packages/tui/examples/keys.rs | 75 ------------------- packages/tui/examples/layouts.rs | 52 ------------- packages/tui/examples/strecher.rs | 34 --------- src/lib.rs | 3 + 17 files changed, 119 insertions(+), 241 deletions(-) rename packages/tui/examples/border.rs => examples/tui_border.rs (77%) rename packages/tui/examples/color_test.rs => examples/tui_color_test.rs (91%) rename packages/tui/examples/components.rs => examples/tui_components.rs (86%) rename packages/tui/examples/frame.rs => examples/tui_frame.rs (98%) rename packages/tui/examples/hover.rs => examples/tui_hover.rs (62%) create mode 100644 examples/tui_keys.rs rename packages/tui/examples/list.rs => examples/tui_list.rs (94%) rename packages/tui/examples/margin.rs => examples/tui_margin.rs (97%) rename packages/tui/examples/quadrants.rs => examples/tui_quadrants.rs (98%) rename packages/tui/examples/readme.rs => examples/tui_readme.rs (91%) rename packages/tui/examples/task.rs => examples/tui_task.rs (53%) rename packages/tui/examples/text.rs => examples/tui_text.rs (83%) delete mode 100644 packages/tui/examples/keys.rs delete mode 100644 packages/tui/examples/layouts.rs delete mode 100644 packages/tui/examples/strecher.rs diff --git a/packages/tui/examples/border.rs b/examples/tui_border.rs similarity index 77% rename from packages/tui/examples/border.rs rename to examples/tui_border.rs index 1d9f681b7..041df4a8b 100644 --- a/packages/tui/examples/border.rs +++ b/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", diff --git a/packages/tui/examples/color_test.rs b/examples/tui_color_test.rs similarity index 91% rename from packages/tui/examples/color_test.rs rename to examples/tui_color_test.rs index 4aeefee8c..358fae1f6 100644 --- a/packages/tui/examples/color_test.rs +++ b/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, }, ); } diff --git a/packages/tui/examples/components.rs b/examples/tui_components.rs similarity index 86% rename from packages/tui/examples/components.rs rename to examples/tui_components.rs index 4086a5855..91e95deb8 100644 --- a/packages/tui/examples/components.rs +++ b/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) -> Element { +fn Quadrant(cx: Scope) -> 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() } diff --git a/packages/tui/examples/frame.rs b/examples/tui_frame.rs similarity index 98% rename from packages/tui/examples/frame.rs rename to examples/tui_frame.rs index db49cd733..13f3510e0 100644 --- a/packages/tui/examples/frame.rs +++ b/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 { diff --git a/packages/tui/examples/hover.rs b/examples/tui_hover.rs similarity index 62% rename from packages/tui/examples/hover.rs rename to examples/tui_hover.rs index 10916ba2e..2e6f91643 100644 --- a/packages/tui/examples/hover.rs +++ b/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) -> 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" } } diff --git a/examples/tui_keys.rs b/examples/tui_keys.rs new file mode 100644 index 000000000..4fde8c2c0 --- /dev/null +++ b/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}" + } + }) +} diff --git a/packages/tui/examples/list.rs b/examples/tui_list.rs similarity index 94% rename from packages/tui/examples/list.rs rename to examples/tui_list.rs index ff219dcc6..158cafae2 100644 --- a/packages/tui/examples/list.rs +++ b/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 { diff --git a/packages/tui/examples/margin.rs b/examples/tui_margin.rs similarity index 97% rename from packages/tui/examples/margin.rs rename to examples/tui_margin.rs index edc2b659f..6e476c1d6 100644 --- a/packages/tui/examples/margin.rs +++ b/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 { diff --git a/packages/tui/examples/quadrants.rs b/examples/tui_quadrants.rs similarity index 98% rename from packages/tui/examples/quadrants.rs rename to examples/tui_quadrants.rs index db0b92f19..0333e40c8 100644 --- a/packages/tui/examples/quadrants.rs +++ b/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 { diff --git a/packages/tui/examples/readme.rs b/examples/tui_readme.rs similarity index 91% rename from packages/tui/examples/readme.rs rename to examples/tui_readme.rs index 95a306686..3e15cf7e3 100644 --- a/packages/tui/examples/readme.rs +++ b/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 { diff --git a/packages/tui/examples/task.rs b/examples/tui_task.rs similarity index 53% rename from packages/tui/examples/task.rs rename to examples/tui_task.rs index cc39d6711..f53d01af9 100644 --- a/packages/tui/examples/task.rs +++ b/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(); -// } -// } -// }); diff --git a/packages/tui/examples/text.rs b/examples/tui_text.rs similarity index 83% rename from packages/tui/examples/text.rs rename to examples/tui_text.rs index a38dc0b8d..b8f04d99a 100644 --- a/packages/tui/examples/text.rs +++ b/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" diff --git a/packages/hooks/src/usestate.rs b/packages/hooks/src/usestate.rs index 601d72041..68612aca1 100644 --- a/packages/hooks/src/usestate.rs +++ b/packages/hooks/src/usestate.rs @@ -310,6 +310,12 @@ impl<'a, T: 'static + Display> std::fmt::Display for UseState { } } +impl<'a, T: std::fmt::Binary> std::fmt::Binary for UseState { + fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { + write!(f, "{:b}", self.current_val.as_ref()) + } +} + impl PartialEq for UseState { fn eq(&self, other: &T) -> bool { self.current_val.as_ref() == other diff --git a/packages/tui/examples/keys.rs b/packages/tui/examples/keys.rs deleted file mode 100644 index 509199b5b..000000000 --- a/packages/tui/examples/keys.rs +++ /dev/null @@ -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 {}, - } - }) -} diff --git a/packages/tui/examples/layouts.rs b/packages/tui/examples/layouts.rs deleted file mode 100644 index c6d661e5b..000000000 --- a/packages/tui/examples/layouts.rs +++ /dev/null @@ -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, node: &VNode) { -// match node { -// VNode::Text(_) => todo!(), -// VNode::Element(_) => todo!(), -// VNode::Fragment(_) => todo!(), -// VNode::Component(_) => todo!(), -// VNode::Placeholder(_) => todo!(), -// } -// } diff --git a/packages/tui/examples/strecher.rs b/packages/tui/examples/strecher.rs deleted file mode 100644 index b1fa93050..000000000 --- a/packages/tui/examples/strecher.rs +++ /dev/null @@ -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(()) -} diff --git a/src/lib.rs b/src/lib.rs index b8e499367..fe4b7bfbb 100644 --- a/src/lib.rs +++ b/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;