rebase master

examples/tui_color_test.rs

@@ -4,11 +4,54 @@ fn main() {
     dioxus::tui::launch_cfg(
         app,
         dioxus::tui::Config {
-            rendering_mode: dioxus::tui::RenderingMode::Ansi,
+            rendering_mode: dioxus::tui::RenderingMode::Rgb,
         },
     );
 }
 
+#[derive(Props, PartialEq)]
+struct BoxProps {
+    x: i32,
+    y: i32,
+    hue: f32,
+    alpha: f32,
+}
+fn Box(cx: Scope<BoxProps>) -> Element {
+    let painted = use_state(&cx, || true);
+
+    // use_future(&cx, (), move |_| {
+    //     let count = count.to_owned();
+    //     let update = cx.schedule_update();
+    //     async move {
+    //         loop {
+    //             count.with_mut(|i| *i += 1);
+    //             tokio::time::sleep(std::time::Duration::from_millis(800)).await;
+    //             update();
+    //         }
+    //     }
+    // });
+
+    let x = cx.props.x;
+    let y = cx.props.y;
+    let hue = cx.props.hue;
+    let current_painted = painted.get();
+    let alpha = cx.props.alpha + if *current_painted { 100.0 } else { 0.0 };
+
+    cx.render(rsx! {
+        div {
+            left: "{x}px",
+            top: "{y}px",
+            width: "100%",
+            height: "100%",
+            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
+            align_items: "center",
+            onkeydown: |_| painted.with_mut(|i| *i = !*i),
+            onmouseenter: |_| painted.with_mut(|i| *i = !*i),
+            p{" "}
+        }
+    })
+}
+
 fn app(cx: Scope) -> Element {
     let steps = 50;
     cx.render(rsx! {
@@ -28,12 +71,11 @@ fn app(cx: Scope) -> Element {
                                 {
                                     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}%)",
+                                        Box{
+                                            x: x,
+                                            y: y,
+                                            alpha: alpha,
+                                            hue: hue,
                                         }
                                     })
                                 }

examples/tui_readme.rs

@@ -5,15 +5,26 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
+    let alpha = use_state(&cx, || 100);
+
     cx.render(rsx! {
         div {
+            onwheel: move |evt| alpha.set((**alpha + evt.data.delta_y as i64).min(100).max(0)),
+
             width: "100%",
             height: "10px",
             background_color: "red",
-            justify_content: "center",
-            align_items: "center",
+            // justify_content: "center",
+            // align_items: "center",
 
-            "Hello world!"
+            p{
+                color: "rgba(0, 255, 0, {alpha}%)",
+                "Hello world!"
+            }
+            p{
+                "{alpha}"
+            }
+            // p{"Hi"}
         }
     })
 }

examples/tui_text.rs

@@ -15,7 +15,7 @@ fn app(cx: Scope) -> Element {
             onwheel: move |evt| alpha.set((**alpha + evt.data.delta_y as i64).min(100).max(0)),
 
             p {
-                background_color: "black",
+                // background_color: "black",
                 flex_direction: "column",
                 justify_content: "center",
                 align_items: "center",