|
|
|
@ -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<G: Html>(cx: Scope) -> View<G> {
|
|
|
|
|
let value = create_signal(cx, 0.0);
|
|
|
|
|
#[derive(Clone, Copy, PartialEq, Eq, Default)]
|
|
|
|
|
struct Color {
|
|
|
|
|
red: u8,
|
|
|
|
|
green: u8,
|
|
|
|
|
blue: u8,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
impl<G: Html> ToView<G> for SVGUnit {
|
|
|
|
|
fn to_view(&self) -> View<G> {
|
|
|
|
|
t(self.to_string())
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#[component(inline_props)]
|
|
|
|
|
fn Slider<'a, G: Html>(cx: Scope<'a>, value: &'a Signal<f64>, unit: Option<SVGUnit>) -> View<G> {
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|