Moved matrix yew components to file matrix.rs, minor refactoring
This commit is contained in:
parent
881236c725
commit
f53170b16b
2 changed files with 119 additions and 94 deletions
|
|
@ -1,98 +1,7 @@
|
|||
use math::matrix::Matrix;
|
||||
mod matrix;
|
||||
|
||||
use yew::prelude::*;
|
||||
|
||||
pub struct MatrixComponent {
|
||||
matrix: Matrix<f64>
|
||||
}
|
||||
|
||||
pub enum MatrixMsg {
|
||||
CellChange(Cell),
|
||||
AddRow,
|
||||
AddColumn,
|
||||
RemoveRow,
|
||||
RemoveColumn
|
||||
}
|
||||
|
||||
impl Component for MatrixComponent {
|
||||
type Message = MatrixMsg;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_ctx: &Context<Self>) -> Self {
|
||||
Self { matrix: Matrix::new_zeroes(3, 3) }
|
||||
}
|
||||
|
||||
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
|
||||
match msg {
|
||||
MatrixMsg::CellChange(cell) => self.matrix[cell.i][cell.j] = cell.value,
|
||||
MatrixMsg::AddRow => self.matrix.append_row_zeroes(),
|
||||
MatrixMsg::AddColumn => self.matrix.append_column_zeroes(),
|
||||
MatrixMsg::RemoveRow => (),
|
||||
MatrixMsg::RemoveColumn => ()
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||
let on_cell_change = ctx.link().callback(MatrixMsg::CellChange);
|
||||
let on_click_add_row = ctx.link().callback(|_| MatrixMsg::AddRow);
|
||||
let on_click_add_column = ctx.link().callback(|_| MatrixMsg::AddColumn);
|
||||
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 };
|
||||
html! {
|
||||
<td>
|
||||
<MatrixCellComponent cell={cell} on_cell_change={on_cell_change.clone()} />
|
||||
</td>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</tr>
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</table>
|
||||
<button onclick={on_click_add_row}>{"Add row"}</button>
|
||||
<button onclick={on_click_add_column}>{"Add column"}</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub struct MatrixCellComponent;
|
||||
|
||||
#[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
|
||||
}
|
||||
|
||||
impl Component for MatrixCellComponent {
|
||||
type Message = ();
|
||||
type Properties = MatrixCellProps;
|
||||
|
||||
fn create(_ctx: &Context<Self>) -> Self {
|
||||
Self
|
||||
}
|
||||
|
||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||
let cell = ctx.props().cell.clone();
|
||||
let oninput = ctx.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}/>
|
||||
}
|
||||
}
|
||||
}
|
||||
use matrix::MatrixComponent;
|
||||
|
||||
#[function_component]
|
||||
fn App() -> Html {
|
||||
|
|
|
|||
116
web/src/matrix.rs
Normal file
116
web/src/matrix.rs
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
use math::matrix::Matrix;
|
||||
use yew::prelude::*;
|
||||
|
||||
pub enum MatrixMsg {
|
||||
CellChange(Cell),
|
||||
AddRow,
|
||||
AddColumn,
|
||||
RemoveRow,
|
||||
RemoveColumn
|
||||
}
|
||||
|
||||
pub struct MatrixComponent {
|
||||
matrix: Matrix<f64>
|
||||
}
|
||||
|
||||
impl Component for MatrixComponent {
|
||||
type Message = MatrixMsg;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_ctx: &Context<Self>) -> Self {
|
||||
Self { matrix: Matrix::new_zeroes(3, 3) }
|
||||
}
|
||||
|
||||
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
|
||||
match msg {
|
||||
MatrixMsg::CellChange(cell) => self.matrix[cell.i][cell.j] = cell.value,
|
||||
MatrixMsg::AddRow => self.matrix.append_row_zeroes(),
|
||||
MatrixMsg::AddColumn => self.matrix.append_column_zeroes(),
|
||||
MatrixMsg::RemoveRow => {
|
||||
if self.matrix.height() > 2 {
|
||||
self.matrix.remove_last_row();
|
||||
}
|
||||
},
|
||||
MatrixMsg::RemoveColumn => {
|
||||
if self.matrix.width() > 2 {
|
||||
self.matrix.remove_last_column();
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||
let on_size_change = ctx.link().callback(|msg| msg);
|
||||
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);
|
||||
html! {
|
||||
<td>
|
||||
<MatrixCellComponent {cell} {on_cell_change} />
|
||||
</td>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</tr>
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</table>
|
||||
<MatrixSizeControls {on_size_change} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[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>
|
||||
}
|
||||
|
||||
#[function_component]
|
||||
pub fn MatrixSizeControls(props: &MatrixSizeControlsProps) -> Html {
|
||||
let on_click_add_row = props.on_size_change.reform(|_| MatrixMsg::AddRow);
|
||||
let on_click_add_column = props.on_size_change.reform(|_| MatrixMsg::AddColumn);
|
||||
let on_click_remove_row = props.on_size_change.reform(|_|MatrixMsg::RemoveRow);
|
||||
let on_click_remove_column = props.on_size_change.reform(|_| MatrixMsg::RemoveColumn);
|
||||
html! {
|
||||
<div class={classes!("matrix-size-controls")}>
|
||||
<div>
|
||||
<button onclick={on_click_add_row}>{"Add row"}</button>
|
||||
<button onclick={on_click_remove_row}>{"Remove row"}</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick={on_click_add_column}>{"Add column"}</button>
|
||||
<button onclick={on_click_remove_column}>{"Remove column"}</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue