From f10d47b53d3360bf86f62e91ccae93ccd7532455 Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Mon, 5 Dec 2022 20:37:55 -0600 Subject: [PATCH] update color picker example --- packages/tui/examples/tui_colorpicker.rs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/tui/examples/tui_colorpicker.rs b/packages/tui/examples/tui_colorpicker.rs index 553a37aa4..3b1184930 100644 --- a/packages/tui/examples/tui_colorpicker.rs +++ b/packages/tui/examples/tui_colorpicker.rs @@ -1,5 +1,5 @@ -use dioxus::core_macro::rsx_without_templates; use dioxus::prelude::*; +use dioxus::core::RenderReturn; use dioxus_tui::query::Query; use dioxus_tui::Size; @@ -10,18 +10,20 @@ fn main() { fn app(cx: Scope) -> Element { let hue = use_state(&cx, || 0.0); let brightness = use_state(&cx, || 0.0); - let tui_query: Query = cx.consume_context().unwrap(); + let tui_query: &Query = cx.consume_context().unwrap(); // disable templates so that every node has an id and can be queried - cx.render(rsx_without_templates! { + cx.render(rsx! { div{ width: "100%", background_color: "hsl({hue}, 70%, {brightness}%)", onmousemove: move |evt| { - let node = tui_query.get(cx.root_node().mounted_id()); - let Size{width, height} = node.size().unwrap(); - let pos = evt.data.element_coordinates(); - hue.set((pos.x as f32/width as f32)*255.0); - brightness.set((pos.y as f32/height as f32)*100.0); + if let RenderReturn::Sync(Ok(node))=cx.root_node(){ + let node = tui_query.get(node.root_ids[0].get()); + let Size{width, height} = node.size().unwrap(); + let pos = evt.inner().element_coordinates(); + hue.set((pos.x as f32/width as f32)*255.0); + brightness.set((pos.y as f32/height as f32)*100.0); + } }, "hsl({hue}, 70%, {brightness}%)", }