From 5bdd3f65568f703157c74590d8da296004e1395e Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sat, 19 Aug 2023 12:19:34 -0700 Subject: [PATCH] Experiment with reactivity --- dyesub-tool/src/main.rs | 37 ++++++++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/dyesub-tool/src/main.rs b/dyesub-tool/src/main.rs index 84e1558..72c9d2f 100644 --- a/dyesub-tool/src/main.rs +++ b/dyesub-tool/src/main.rs @@ -1,24 +1,43 @@ mod render; pub mod svg; -use sycamore::prelude::*; +use svg::{SVGUnit, SVGMeasure}; +use sycamore::{prelude::*, view::ToView, builder::t}; -#[component] -fn Slider(cx: Scope) -> View { - let value = create_signal(cx, 0.0); +#[derive(Clone, Copy, PartialEq, Eq, Default)] +struct Color { + red: u8, + green: u8, + blue: u8, +} + +impl ToView for SVGUnit { + fn to_view(&self) -> View { + t(self.to_string()) + } +} + +#[component(inline_props)] +fn Slider<'a, G: Html>(cx: Scope<'a>, value: &'a Signal, unit: Option) -> View { view! { cx, - (value.get()) - input(type="range", bind:valueAsNumber=value) + div(class="f-row align-items:center") { + span { (value.get())(unit) } + input(type="range", bind:valueAsNumber=value) + } } } fn main() { sycamore::render_to( |cx| { + let x = create_signal(cx, 0.0); + let y = create_signal(cx, 0.0); + let z = create_signal(cx, 0.0); view! { cx, - Slider - Slider - Slider + "Total: "(*x.get() + *y.get() + *z.get()) + Slider(value=x, unit=SVGUnit::Inch) + Slider(value=y) + Slider(value=z) } }, {