52 lines
1.3 KiB
Rust
52 lines
1.3 KiB
Rust
|
use yew::prelude::*;
|
||
|
|
use web_sys::{HtmlInputElement};
|
||
|
|
use crate::colors::COLORS;
|
||
|
|
|
||
|
|
#[derive(PartialEq, Properties, Clone)]
|
||
|
|
pub struct ToolboxProps {
|
||
|
|
pub color: String,
|
||
|
|
pub on_changecolor: Callback<String>,
|
||
|
|
pub on_clearcanvas: Callback<()>
|
||
|
|
}
|
||
|
|
|
||
|
|
#[function_component]
|
||
|
|
pub fn ToolboxComp(props: &ToolboxProps) -> Html {
|
||
|
|
let onchange = {
|
||
|
|
let parent_onchange = props.on_changecolor.clone();
|
||
|
|
Callback::from(move | event: Event | {
|
||
|
|
if let Some(input) = event.target_dyn_into::<HtmlInputElement>() {
|
||
|
|
parent_onchange.emit(input.value());
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
let onclearcanvas = {
|
||
|
|
let parent_onclearcanvas = props.on_clearcanvas.clone();
|
||
|
|
Callback::from(move | _event: MouseEvent | {
|
||
|
|
parent_onclearcanvas.emit(());
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
html! {
|
||
|
|
<div class="toolbox">
|
||
|
|
{ for COLORS.iter().map(| &color | {
|
||
|
|
let style = format!("background: {};", color);
|
||
|
|
let onclick = {
|
||
|
|
let parent_onchange = props.on_changecolor.clone();
|
||
|
|
Callback::from(move | _event | {
|
||
|
|
parent_onchange.emit(color.to_string());
|
||
|
|
})
|
||
|
|
};
|
||
|
|
html! { <div class="color" style={style} {onclick} /> }
|
||
|
|
}) }
|
||
|
|
|
||
|
|
<input type="color" class="button2x" {onchange}
|
||
|
|
value={props.color.clone()} />
|
||
|
|
|
||
|
|
<input type="button" class="button2x" onclick={onclearcanvas}
|
||
|
|
value="♻" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|