Added web-sys and wasm-bindgen dependencies to web crate, fixed matrix cell oninput event
This commit is contained in:
parent
f53170b16b
commit
8c1272fa9c
3 changed files with 21 additions and 27 deletions
|
@ -5,4 +5,8 @@ edition = "2021"
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
math = { path = "../math" }
|
math = { path = "../math" }
|
||||||
|
log = "0.4.21"
|
||||||
|
wasm-bindgen = "0.2.92"
|
||||||
|
wasm-logger = "0.2.0"
|
||||||
|
web-sys = "0.3.69"
|
||||||
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
|
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
|
||||||
|
|
|
@ -13,5 +13,6 @@ fn App() -> Html {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
|
wasm_logger::init(wasm_logger::Config::default());
|
||||||
yew::Renderer::<App>::new().render();
|
yew::Renderer::<App>::new().render();
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
use math::matrix::Matrix;
|
use math::matrix::Matrix;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
use web_sys::HtmlInputElement;
|
||||||
|
use wasm_bindgen::JsCast;
|
||||||
|
|
||||||
pub enum MatrixMsg {
|
pub enum MatrixMsg {
|
||||||
CellChange(Cell),
|
CellChange(Cell),
|
||||||
|
@ -9,8 +11,13 @@ pub enum MatrixMsg {
|
||||||
RemoveColumn
|
RemoveColumn
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(PartialEq, Clone, Copy)]
|
||||||
|
pub struct Cell {
|
||||||
|
i: usize, j: usize, value: i32
|
||||||
|
}
|
||||||
|
|
||||||
pub struct MatrixComponent {
|
pub struct MatrixComponent {
|
||||||
matrix: Matrix<f64>
|
matrix: Matrix<i32>
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Component for MatrixComponent {
|
impl Component for MatrixComponent {
|
||||||
|
@ -42,17 +49,22 @@ impl Component for MatrixComponent {
|
||||||
|
|
||||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||||
let on_size_change = ctx.link().callback(|msg| msg);
|
let on_size_change = ctx.link().callback(|msg| msg);
|
||||||
|
log::info!("{:?}", &self.matrix);
|
||||||
html! {
|
html! {
|
||||||
<div class={classes!("matrix")}>
|
<div class={classes!("matrix")}>
|
||||||
<table> {
|
<table> {
|
||||||
self.matrix.iter_rows().enumerate().map(|(i, row)| html! {
|
self.matrix.iter_rows().enumerate().map(|(i, row)| html! {
|
||||||
<tr> {
|
<tr> {
|
||||||
row.iter().enumerate().map(|(j, e)| {
|
row.iter().enumerate().map(|(j, e)| {
|
||||||
let cell = Cell { i, j, value: *e };
|
let oninput = ctx.link().callback(move |e: InputEvent| {
|
||||||
let on_cell_change = ctx.link().callback(MatrixMsg::CellChange);
|
let input = e.target().unwrap().unchecked_into::<HtmlInputElement>();
|
||||||
|
let value = input.value().trim().parse::<i32>().unwrap_or_default();
|
||||||
|
log::info!("{}", value);
|
||||||
|
MatrixMsg::CellChange(Cell { i, j, value })
|
||||||
|
});
|
||||||
html! {
|
html! {
|
||||||
<td>
|
<td>
|
||||||
<MatrixCellComponent {cell} {on_cell_change} />
|
<input type="text" value={e.to_string()} {oninput}/>
|
||||||
</td>
|
</td>
|
||||||
}
|
}
|
||||||
}).collect::<Html>()
|
}).collect::<Html>()
|
||||||
|
@ -67,29 +79,6 @@ impl Component for MatrixComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(PartialEq, Properties)]
|
|
||||||
pub struct MatrixCellProps {
|
|
||||||
pub cell: Cell,
|
|
||||||
pub on_cell_change: Callback<Cell>
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(PartialEq, Clone, Copy)]
|
|
||||||
pub struct Cell {
|
|
||||||
i: usize, j: usize, value: f64
|
|
||||||
}
|
|
||||||
|
|
||||||
#[function_component]
|
|
||||||
pub fn MatrixCellComponent(props: &MatrixCellProps) -> Html {
|
|
||||||
let cell = props.cell.clone();
|
|
||||||
let oninput = props.on_cell_change
|
|
||||||
.reform(move |e: InputEvent|
|
|
||||||
Cell { i: cell.i, j: cell.j, value: e.as_f64().unwrap_or_default() }
|
|
||||||
);
|
|
||||||
html! {
|
|
||||||
<input type="text" {oninput}/>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(PartialEq, Properties)]
|
#[derive(PartialEq, Properties)]
|
||||||
pub struct MatrixSizeControlsProps {
|
pub struct MatrixSizeControlsProps {
|
||||||
on_size_change: Callback<MatrixMsg>
|
on_size_change: Callback<MatrixMsg>
|
||||||
|
|
Loading…
Reference in a new issue