Glue destination plate, add selection behaviour
This commit is contained in:
parent
7490a319c7
commit
f8f29cfbf1
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -1,5 +1,10 @@
|
||||||
#![allow(non_snake_case)]
|
#![allow(non_snake_case)]
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
use yewdux::prelude::*;
|
||||||
|
use std::rc::Rc;
|
||||||
|
|
||||||
|
use super::super::states::NewTransferState;
|
||||||
|
use super::super::transfer_menu::RegionDisplay;
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct DestinationPlateProps {
|
pub struct DestinationPlateProps {
|
||||||
|
|
@ -9,10 +14,80 @@ pub struct DestinationPlateProps {
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
|
pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
|
||||||
|
let m_start_handle: UseStateHandle<Option<(u8,u8)>> = use_state_eq(|| None);
|
||||||
|
let m_end_handle: UseStateHandle<Option<(u8,u8)>> = use_state_eq(|| None);
|
||||||
|
let m_stat_handle: UseStateHandle<bool> = use_state_eq(|| false);
|
||||||
|
let m_start = m_start_handle.clone();
|
||||||
|
let m_end = m_end_handle.clone();
|
||||||
|
|
||||||
|
let menu_sync_callback = {
|
||||||
|
let m_start_handle = m_start_handle.clone();
|
||||||
|
let m_end_handle = m_end_handle.clone();
|
||||||
|
let m_stat_handle = m_stat_handle.clone();
|
||||||
|
|
||||||
|
move |nts: Rc<NewTransferState>| {
|
||||||
|
if !(*m_stat_handle) {
|
||||||
|
let pt1 = (nts.destination_region.col_start, nts.destination_region.row_start);
|
||||||
|
let pt2 = (nts.destination_region.col_end, nts.destination_region.row_end);
|
||||||
|
m_start_handle.set(Some(pt1));
|
||||||
|
m_end_handle.set(Some(pt2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let dispatch = Dispatch::<NewTransferState>::subscribe(menu_sync_callback);
|
||||||
|
|
||||||
|
|
||||||
|
let mouse_callback = {
|
||||||
|
let m_start_handle = m_start_handle.clone();
|
||||||
|
let m_end_handle = m_end_handle.clone();
|
||||||
|
let m_stat_handle = m_stat_handle.clone();
|
||||||
|
|
||||||
|
Callback::from(move |(i,j,t)| {
|
||||||
|
match t {
|
||||||
|
MouseEventType::MOUSEDOWN => {
|
||||||
|
m_start_handle.set(Some((i,j)));
|
||||||
|
m_end_handle.set(Some((i,j)));
|
||||||
|
m_stat_handle.set(true);
|
||||||
|
},
|
||||||
|
MouseEventType::MOUSEENTER => {
|
||||||
|
if *m_stat_handle {
|
||||||
|
m_end_handle.set(Some((i,j)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
let mouseup_callback = {
|
||||||
|
let m_start_handle = m_start_handle.clone();
|
||||||
|
let m_end_handle = m_end_handle.clone();
|
||||||
|
let m_stat_handle = m_stat_handle.clone();
|
||||||
|
|
||||||
|
Callback::from(move |_: MouseEvent| {
|
||||||
|
let current = dispatch.get();
|
||||||
|
m_stat_handle.set(false);
|
||||||
|
if let Some(ul) = *m_start_handle {
|
||||||
|
if let Some(br) = *m_end_handle {
|
||||||
|
if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
|
||||||
|
dispatch.set(NewTransferState {
|
||||||
|
source_region: current.source_region.clone(),
|
||||||
|
destination_region: rd,
|
||||||
|
interleave_x: current.interleave_x,
|
||||||
|
interleave_y: current.interleave_y })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
let mouseleave_callback = Callback::clone(&mouseup_callback);
|
||||||
|
|
||||||
let rows = (1..=props.height).map(|i| {
|
let rows = (1..=props.height).map(|i| {
|
||||||
let row = (1..=props.width).map(|j| {
|
let row = (1..=props.width).map(|j| {
|
||||||
html! {
|
html! {
|
||||||
<DestPlateCell i={i} j={j} />
|
<DestPlateCell i={i} j={j}
|
||||||
|
selected={super::source_plate::in_rect(*m_start.clone(), *m_end.clone(), (i,j))}
|
||||||
|
mouse={mouse_callback.clone()} />
|
||||||
}
|
}
|
||||||
}).collect::<Html>();
|
}).collect::<Html>();
|
||||||
html! {
|
html! {
|
||||||
|
|
@ -24,29 +99,56 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="dest_plate">
|
<div class="dest_plate">
|
||||||
<table>
|
<table
|
||||||
|
onmouseup={move |e| {
|
||||||
|
mouseup_callback.emit(e);
|
||||||
|
}}
|
||||||
|
onmouseleave={move |e| {
|
||||||
|
mouseleave_callback.emit(e);
|
||||||
|
}}>
|
||||||
{ rows }
|
{ rows }
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(Debug)]
|
||||||
|
pub enum MouseEventType {
|
||||||
|
MOUSEDOWN,
|
||||||
|
MOUSEENTER
|
||||||
|
}
|
||||||
|
|
||||||
#[derive(Properties, PartialEq)]
|
#[derive(Properties, PartialEq)]
|
||||||
pub struct DestPlateCellProps {
|
pub struct DestPlateCellProps {
|
||||||
pub i: u8,
|
pub i: u8,
|
||||||
pub j: u8,
|
pub j: u8,
|
||||||
|
pub selected: bool,
|
||||||
|
pub mouse: Callback<(u8,u8, MouseEventType)>,
|
||||||
pub color: Option<String>
|
pub color: Option<String>
|
||||||
}
|
}
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
fn DestPlateCell(props: &DestPlateCellProps) -> Html {
|
fn DestPlateCell(props: &DestPlateCellProps) -> Html {
|
||||||
|
let selected_class = match props.selected {
|
||||||
|
true => Some("current_select"),
|
||||||
|
false => None,
|
||||||
|
};
|
||||||
let _color_string = match &props.color {
|
let _color_string = match &props.color {
|
||||||
Some(c) => c.clone(),
|
Some(c) => c.clone(),
|
||||||
None => "None".to_string(),
|
None => "None".to_string(),
|
||||||
};
|
};
|
||||||
|
let mouse = Callback::clone(&props.mouse);
|
||||||
|
let mouse2 = Callback::clone(&props.mouse);
|
||||||
|
let (i,j) = (props.i.clone(), props.j.clone());
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<td class="plate_cell">
|
<td class={classes!("plate_cell", selected_class)}
|
||||||
|
onmousedown={move |_| {
|
||||||
|
mouse.emit((i,j, MouseEventType::MOUSEDOWN))
|
||||||
|
}}
|
||||||
|
onmouseenter={move |_| {
|
||||||
|
mouse2.emit((i,j, MouseEventType::MOUSEENTER))
|
||||||
|
}}>
|
||||||
<div class="plate_cell_inner" />
|
<div class="plate_cell_inner" />
|
||||||
</td>
|
</td>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,27 @@ pub fn TransferMenu() -> Html {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
let on_dest_region_change = {
|
||||||
|
let state = state.clone();
|
||||||
|
let dispatch = dispatch.clone();
|
||||||
|
|
||||||
|
Callback::from(move |e: Event| {
|
||||||
|
log::debug!("Input changed.");
|
||||||
|
let target: Option<EventTarget> = e.target();
|
||||||
|
let input = target.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
|
||||||
|
if let Some(input) = input {
|
||||||
|
if let Ok(rd) = RegionDisplay::try_from(input.value()) {
|
||||||
|
dispatch.set( NewTransferState {
|
||||||
|
source_region: state.source_region.clone(),
|
||||||
|
destination_region: rd,
|
||||||
|
interleave_x: state.interleave_x,
|
||||||
|
interleave_y: state.interleave_y
|
||||||
|
});
|
||||||
|
log::debug!("{:?}", dispatch.get());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="transfer_menu">
|
<div class="transfer_menu">
|
||||||
|
|
@ -42,7 +63,8 @@ pub fn TransferMenu() -> Html {
|
||||||
<input type="text" name="src_region"
|
<input type="text" name="src_region"
|
||||||
onchange={on_src_region_change} value={state.source_region.text.clone()}/>
|
onchange={on_src_region_change} value={state.source_region.text.clone()}/>
|
||||||
<label for="dest_region">{"Destination Region:"}</label>
|
<label for="dest_region">{"Destination Region:"}</label>
|
||||||
<input type="text" name="dest_region" />
|
<input type="text" name="dest_region"
|
||||||
|
onchange={on_dest_region_change} value={state.destination_region.text.clone()}/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue