Allow selection of plates in tree

This commit is contained in:
Emilia Allison 2023-05-24 11:20:12 -04:00
parent 85f3fbd113
commit 5be70675ee
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
8 changed files with 72 additions and 17 deletions

View File

@ -34,6 +34,9 @@ div.tree {
div.tree li { div.tree li {
user-select: none; user-select: none;
} }
div.tree li.selected {
background: rgba(0,0,150,0.2);
}
div.transfer_menu { div.transfer_menu {
grid-column: left / left; grid-column: left / left;

View File

@ -70,6 +70,8 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
if let Some(br) = *m_end_handle { if let Some(br) = *m_end_handle {
if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) { if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
dispatch.set(NewTransferState { dispatch.set(NewTransferState {
source_id: current.source_id,
destination_id: current.destination_id,
source_region: current.source_region.clone(), source_region: current.source_region.clone(),
destination_region: rd, destination_region: rd,
interleave_x: current.interleave_x, interleave_x: current.interleave_x,

View File

@ -1,5 +1,8 @@
#![allow(non_snake_case)] #![allow(non_snake_case)]
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*;
use super::super::states::MainState;
use super::source_plate::SourcePlate; use super::source_plate::SourcePlate;
use super::destination_plate::DestinationPlate; use super::destination_plate::DestinationPlate;
@ -11,6 +14,8 @@ pub struct PlateContainerProps {
#[function_component] #[function_component]
pub fn PlateContainer(props: &PlateContainerProps) -> Html { pub fn PlateContainer(props: &PlateContainerProps) -> Html {
let (state, dispatch) = use_store::<MainState>();
html! { html! {
<div class="plate_container"> <div class="plate_container">
<SourcePlate width={props.source_dims.0} height={props.source_dims.1} /> <SourcePlate width={props.source_dims.0} height={props.source_dims.1} />

View File

@ -70,6 +70,8 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
if let Some(br) = *m_end_handle { if let Some(br) = *m_end_handle {
if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) { if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
dispatch.set(NewTransferState { dispatch.set(NewTransferState {
source_id: current.source_id,
destination_id: current.destination_id,
source_region: rd, source_region: rd,
destination_region: current.destination_region.clone(), destination_region: current.destination_region.clone(),
interleave_x: current.interleave_x, interleave_x: current.interleave_x,

View File

@ -10,6 +10,8 @@ use crate::data::plate::*;
#[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize, Store)] #[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize, Store)]
#[store(storage = "session")] #[store(storage = "session")]
pub struct NewTransferState { pub struct NewTransferState {
pub source_id: Uuid,
pub destination_id: Uuid,
pub source_region: RegionDisplay, pub source_region: RegionDisplay,
pub destination_region: RegionDisplay, pub destination_region: RegionDisplay,
pub interleave_x: u8, pub interleave_x: u8,

View File

@ -25,6 +25,8 @@ pub fn TransferMenu() -> Html {
if let Some(input) = input { if let Some(input) = input {
if let Ok(rd) = RegionDisplay::try_from(input.value()) { if let Ok(rd) = RegionDisplay::try_from(input.value()) {
dispatch.set( NewTransferState { dispatch.set( NewTransferState {
source_id: state.source_id,
destination_id: state.destination_id,
source_region: rd, source_region: rd,
destination_region: state.destination_region.clone(), destination_region: state.destination_region.clone(),
interleave_x: state.interleave_x, interleave_x: state.interleave_x,
@ -48,6 +50,8 @@ pub fn TransferMenu() -> Html {
if let Some(input) = input { if let Some(input) = input {
if let Ok(rd) = RegionDisplay::try_from(input.value()) { if let Ok(rd) = RegionDisplay::try_from(input.value()) {
dispatch.set( NewTransferState { dispatch.set( NewTransferState {
source_id: state.source_id,
destination_id: state.destination_id,
source_region: state.source_region.clone(), source_region: state.source_region.clone(),
destination_region: rd, destination_region: rd,
interleave_x: state.interleave_x, interleave_x: state.interleave_x,

View File

@ -8,7 +8,7 @@ use yewdux::prelude::*;
use crate::data::{plate_instances::PlateInstance, transfer::Transfer}; use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
use crate::data::plate::*; use crate::data::plate::*;
use crate::components::states::MainState; use crate::components::states::{MainState, NewTransferState};
#[derive(PartialEq, Properties)] #[derive(PartialEq, Properties)]
pub struct TreeProps { pub struct TreeProps {
@ -17,11 +17,12 @@ pub struct TreeProps {
#[function_component] #[function_component]
pub fn Tree(props: &TreeProps) -> Html { pub fn Tree(props: &TreeProps) -> Html {
let (state, dispatch) = use_store::<MainState>(); let (main_state, main_dispatch) = use_store::<MainState>();
let plate_menu_id: UseStateHandle<Option<Uuid>> = use_state(|| {None}); let (selection_state, selection_dispatch) = use_store::<NewTransferState>();
let plate_modal_id: UseStateHandle<Option<Uuid>> = use_state(|| {None});
let open_plate_info_callback = { let open_plate_info_callback = {
let plate_menu_id =plate_menu_id.clone(); let plate_menu_id =plate_modal_id.clone();
Callback::from(move |e: MouseEvent| { Callback::from(move |e: MouseEvent| {
let target: Option<EventTarget> = e.target(); let target: Option<EventTarget> = e.target();
let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok()); let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
@ -33,14 +34,14 @@ pub fn Tree(props: &TreeProps) -> Html {
}) })
}; };
let plate_info_close_callback = { let plate_info_close_callback = {
let plate_menu_id =plate_menu_id.clone(); let plate_menu_id =plate_modal_id.clone();
Callback::from(move |_| { Callback::from(move |_| {
plate_menu_id.set(None); plate_menu_id.set(None);
}) })
}; };
let plate_info_delete_callback = { let plate_info_delete_callback = {
let dispatch = dispatch.clone(); let dispatch = main_dispatch.clone();
let plate_menu_id =plate_menu_id.clone(); let plate_menu_id = plate_modal_id.clone();
Callback::from(move |_| { Callback::from(move |_| {
if let Some(id) = *plate_menu_id { if let Some(id) = *plate_menu_id {
dispatch.reduce_mut(|state| { dispatch.reduce_mut(|state| {
@ -49,16 +50,52 @@ pub fn Tree(props: &TreeProps) -> Html {
} }
}) })
}; };
let source_plate_select_callback = {
let dispatch = selection_dispatch.clone();
Callback::from(move |e: MouseEvent| {
let target: Option<EventTarget> = e.target();
let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
if let Some(li) = li {
if let Ok(id) = u128::from_str_radix(li.id().as_str(), 10) {
dispatch.reduce_mut(|state| state.source_id = Uuid::from_u128(id))
}
}
})
};
let destination_plate_select_callback = {
let dispatch = selection_dispatch.clone();
Callback::from(move |e: MouseEvent| {
let target: Option<EventTarget> = e.target();
let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
if let Some(li) = li {
if let Ok(id) = u128::from_str_radix(li.id().as_str(), 10) {
dispatch.reduce_mut(|state| state.destination_id = Uuid::from_u128(id))
}
}
})
};
let source_plates = state.source_plates.iter() let source_plates = main_state.source_plates.iter()
.map(|spi| { .map(|spi| {
html!{ <li id={spi.get_uuid().as_u128().to_string()} html!{ <li id={spi.get_uuid().as_u128().to_string()}
ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> } ondblclick={open_plate_info_callback.clone()}
onclick={source_plate_select_callback.clone()}
class={classes!(
Some(if spi.get_uuid() == selection_state.source_id {Some("selected")}
else {None})
)}>
{String::from(spi)}
</li> }
}).collect::<Html>(); }).collect::<Html>();
let dest_plates = state.destination_plates.iter() let dest_plates = main_state.destination_plates.iter()
.map(|spi| { .map(|dpi| {
html!{ <li id={spi.get_uuid().as_u128().to_string()} html!{ <li id={dpi.get_uuid().as_u128().to_string()}
ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> } ondblclick={open_plate_info_callback.clone()}
onclick={destination_plate_select_callback.clone()}
class={classes!(
Some(if dpi.get_uuid() == selection_state.destination_id {Some("selected")}
else {None})
)}> {String::from(dpi)} </li> }
}).collect::<Html>(); }).collect::<Html>();
@ -81,7 +118,7 @@ pub fn Tree(props: &TreeProps) -> Html {
<ul> <ul>
</ul> </ul>
</div> </div>
if let Some(id) = *plate_menu_id { if let Some(id) = *plate_modal_id {
<PlateInfoModal id={id} dialog_close_callback={plate_info_close_callback} <PlateInfoModal id={id} dialog_close_callback={plate_info_close_callback}
delete_button_callback={plate_info_delete_callback}/> delete_button_callback={plate_info_delete_callback}/>
} }

View File

@ -8,7 +8,7 @@ use super::plate_instances::*;
pub struct Transfer { pub struct Transfer {
pub source_id: Uuid, pub source_id: Uuid,
pub dest_id: Uuid, pub dest_id: Uuid,
pub transfer: TransferRegion, pub transfer_region: TransferRegion,
} }
impl Transfer { impl Transfer {
@ -16,7 +16,7 @@ impl Transfer {
Self { Self {
source_id: source.get_uuid(), source_id: source.get_uuid(),
dest_id: dest.get_uuid(), dest_id: dest.get_uuid(),
transfer: tr transfer_region: tr
} }
} }
} }