Added web-sys and wasm-bindgen dependencies to web crate, fixed matrix cell oninput event

This commit is contained in:
Egor 2024-05-25 03:21:27 +03:00
parent f53170b16b
commit 8c1272fa9c
3 changed files with 21 additions and 27 deletions

View file

@ -5,4 +5,8 @@ edition = "2021"
[dependencies]
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"] }

View file

@ -13,5 +13,6 @@ fn App() -> Html {
}
fn main() {
wasm_logger::init(wasm_logger::Config::default());
yew::Renderer::<App>::new().render();
}

View file

@ -1,5 +1,7 @@
use math::matrix::Matrix;
use yew::prelude::*;
use web_sys::HtmlInputElement;
use wasm_bindgen::JsCast;
pub enum MatrixMsg {
CellChange(Cell),
@ -9,8 +11,13 @@ pub enum MatrixMsg {
RemoveColumn
}
#[derive(PartialEq, Clone, Copy)]
pub struct Cell {
i: usize, j: usize, value: i32
}
pub struct MatrixComponent {
matrix: Matrix<f64>
matrix: Matrix<i32>
}
impl Component for MatrixComponent {
@ -42,17 +49,22 @@ impl Component for MatrixComponent {
fn view(&self, ctx: &Context<Self>) -> Html {
let on_size_change = ctx.link().callback(|msg| msg);
log::info!("{:?}", &self.matrix);
html! {
<div class={classes!("matrix")}>
<table> {
self.matrix.iter_rows().enumerate().map(|(i, row)| html! {
<tr> {
row.iter().enumerate().map(|(j, e)| {
let cell = Cell { i, j, value: *e };
let on_cell_change = ctx.link().callback(MatrixMsg::CellChange);
let oninput = ctx.link().callback(move |e: InputEvent| {
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! {
<td>
<MatrixCellComponent {cell} {on_cell_change} />
<input type="text" value={e.to_string()} {oninput}/>
</td>
}
}).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)]
pub struct MatrixSizeControlsProps {
on_size_change: Callback<MatrixMsg>