2023-05-11 21:49:03 +00:00
|
|
|
#![allow(non_snake_case)]
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
use yew::prelude::*;
|
2023-05-22 17:25:16 +00:00
|
|
|
use yewdux::prelude::*;
|
|
|
|
use std::rc::Rc;
|
|
|
|
|
|
|
|
use super::super::states::NewTransferState;
|
|
|
|
use super::super::transfer_menu::RegionDisplay;
|
2023-05-11 21:49:03 +00:00
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[derive(PartialEq, Properties)]
|
2023-05-11 21:49:03 +00:00
|
|
|
pub struct SourcePlateProps {
|
2023-05-22 15:26:08 +00:00
|
|
|
pub width: u8,
|
|
|
|
pub height: u8,
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[function_component]
|
|
|
|
pub fn SourcePlate(props: &SourcePlateProps) -> 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();
|
|
|
|
|
2023-05-22 17:25:16 +00:00
|
|
|
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.source_region.col_start, nts.source_region.row_start);
|
|
|
|
let pt2 = (nts.source_region.col_end, nts.source_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)));
|
2023-05-22 17:46:29 +00:00
|
|
|
m_end_handle.set(Some((i,j)));
|
2023-05-22 17:25:16 +00:00
|
|
|
m_stat_handle.set(true);
|
|
|
|
},
|
|
|
|
MouseEventType::MOUSEENTER => {
|
|
|
|
if *m_stat_handle {
|
|
|
|
m_end_handle.set(Some((i,j)));
|
|
|
|
}
|
2023-05-22 15:26:08 +00:00
|
|
|
}
|
2023-05-21 16:45:12 +00:00
|
|
|
}
|
2023-05-22 17:25:16 +00:00
|
|
|
})
|
|
|
|
};
|
|
|
|
|
|
|
|
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| {
|
|
|
|
m_stat_handle.set(false);
|
|
|
|
if let Some(ul) = *m_start_handle {
|
|
|
|
if let Some(br) = *m_end_handle {
|
2023-05-22 17:29:19 +00:00
|
|
|
if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
|
2023-05-24 19:49:07 +00:00
|
|
|
dispatch.reduce_mut(|state| {
|
|
|
|
state.source_region = rd;
|
|
|
|
});
|
2023-05-22 17:29:19 +00:00
|
|
|
}
|
2023-05-22 17:25:16 +00:00
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
2023-05-22 17:25:16 +00:00
|
|
|
})
|
|
|
|
};
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
let mouseleave_callback = Callback::clone(&mouseup_callback);
|
|
|
|
|
|
|
|
let rows = (1..=props.height).map(|i| {
|
|
|
|
let row = (1..=props.width).map(|j| {
|
|
|
|
html! {
|
|
|
|
<SourcePlateCell i={i} j={j}
|
|
|
|
selected={in_rect(*m_start.clone(), *m_end.clone(), (i,j))}
|
|
|
|
mouse={mouse_callback.clone()}/>
|
|
|
|
}
|
|
|
|
}).collect::<Html>();
|
|
|
|
html! {
|
|
|
|
<tr>
|
|
|
|
{ row }
|
|
|
|
</tr>
|
|
|
|
}
|
|
|
|
}).collect::<Html>();
|
|
|
|
|
|
|
|
html! {
|
|
|
|
<div class="source_plate">
|
|
|
|
<table
|
|
|
|
onmouseup={move |e| {
|
|
|
|
mouseup_callback.emit(e);
|
|
|
|
}}
|
|
|
|
onmouseleave={move |e| {
|
|
|
|
mouseleave_callback.emit(e);
|
|
|
|
}}>
|
|
|
|
{ rows }
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[derive(PartialEq, Properties)]
|
|
|
|
pub struct SourcePlateCellProps {
|
|
|
|
i: u8,
|
|
|
|
j: u8,
|
|
|
|
selected: bool,
|
|
|
|
mouse: Callback<(u8,u8, MouseEventType)>,
|
|
|
|
color: Option<String>
|
|
|
|
}
|
|
|
|
#[derive(Debug)]
|
|
|
|
pub enum MouseEventType {
|
|
|
|
MOUSEDOWN,
|
|
|
|
MOUSEENTER
|
|
|
|
}
|
|
|
|
|
|
|
|
#[function_component]
|
|
|
|
fn SourcePlateCell(props: &SourcePlateCellProps) -> Html {
|
|
|
|
let selected_class = match props.selected {
|
|
|
|
true => Some("current_select"),
|
|
|
|
false => None,
|
2023-05-11 21:49:03 +00:00
|
|
|
};
|
2023-05-22 16:22:22 +00:00
|
|
|
let _color_string = match &props.color {
|
2023-05-11 22:39:25 +00:00
|
|
|
Some(c) => c.clone(),
|
2023-05-13 23:13:03 +00:00
|
|
|
None => "None".to_string(),
|
2023-05-11 22:39:25 +00:00
|
|
|
};
|
2023-05-22 15:26:08 +00:00
|
|
|
let mouse = Callback::clone(&props.mouse);
|
|
|
|
let mouse2 = Callback::clone(&props.mouse);
|
|
|
|
let (i,j) = (props.i.clone(), props.j.clone());
|
|
|
|
|
|
|
|
html! {
|
|
|
|
<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" />
|
|
|
|
</td>
|
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-22 17:46:29 +00:00
|
|
|
pub fn in_rect(corner1: Option<(u8, u8)>, corner2: Option<(u8, u8)>, pt: (u8, u8)) -> bool {
|
2023-05-11 21:49:03 +00:00
|
|
|
if let (Some(c1), Some(c2)) = (corner1, corner2) {
|
2023-05-11 21:51:09 +00:00
|
|
|
return pt.0 <= u8::max(c1.0, c2.0)
|
|
|
|
&& pt.0 >= u8::min(c1.0, c2.0)
|
|
|
|
&& pt.1 <= u8::max(c1.1, c2.1)
|
|
|
|
&& pt.1 >= u8::min(c1.1, c2.1);
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
2023-05-11 21:49:03 +00:00
|
|
|
}
|
|
|
|
|
2023-05-12 00:39:43 +00:00
|
|
|
#[cfg(test)]
|
|
|
|
mod tests {
|
|
|
|
use super::in_rect;
|
|
|
|
|
|
|
|
// in_rect tests
|
|
|
|
#[test]
|
|
|
|
fn test_in_rect1() {
|
|
|
|
// Test in center of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt = (5, 5);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
|
|
|
fn test_in_rect2() {
|
|
|
|
// Test on top/bottom edges of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (1, 5);
|
|
|
|
let pt2 = (10, 5);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt2));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt1));
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt2));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
|
|
|
fn test_in_rect3() {
|
|
|
|
// Test on left/right edges of rect
|
2023-05-13 23:13:03 +00:00
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (5, 1);
|
|
|
|
let pt2 = (5, 10);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert!(in_rect(Some(c1), Some(c2), pt2));
|
|
|
|
// Order of the corners should not matter:
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt1));
|
|
|
|
assert!(in_rect(Some(c2), Some(c1), pt2));
|
|
|
|
}
|
|
|
|
|
|
|
|
#[test]
|
|
|
|
fn test_in_rect4() {
|
2023-05-13 23:13:03 +00:00
|
|
|
// Test cases that should fail
|
|
|
|
let c1 = (1, 1);
|
|
|
|
let c2 = (10, 10);
|
|
|
|
let pt1 = (0, 0);
|
|
|
|
let pt2 = (15, 15);
|
2023-05-12 00:39:43 +00:00
|
|
|
assert_eq!(false, in_rect(Some(c1), Some(c2), pt1));
|
|
|
|
assert_eq!(false, in_rect(Some(c1), Some(c2), pt2));
|
|
|
|
}
|
|
|
|
}
|