emilia
/
plate-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dynamic sizing of plate cells 

Calculates available size and allocates
This commit is contained in:
Emilia Allison 2023-06-13 12:02:32 -04:00
parent 4665788a27
commit 9275a866d0
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
3 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/plates/destination_plate.rs
View File

@ -18,6 +18,7 @@ use super::super::transfer_menu::{num_to_letters, RegionDisplay};
pub struct DestinationPlateProps { pub struct DestinationPlateProps {
pub source_plate: PlateInstance, pub source_plate: PlateInstance,
pub destination_plate: PlateInstance, pub destination_plate: PlateInstance,
pub cell_height: f64,
} }
#[function_component] #[function_component]
@ -112,6 +113,7 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
mouse={mouse_callback.clone()} mouse={mouse_callback.clone()}
in_transfer={destination_wells.contains(&(i,j))} in_transfer={destination_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).copied()} color={color_map.get(&(i,j)).copied()}
cell_height={props.cell_height}
/> />
} }
}).collect::<Html>(); }).collect::<Html>();
@ -152,6 +154,7 @@ pub struct DestPlateCellProps {
pub mouse: Callback<(u8, u8, MouseEventType)>, pub mouse: Callback<(u8, u8, MouseEventType)>,
pub in_transfer: Option<bool>, pub in_transfer: Option<bool>,
color: Option<u8>, color: Option<u8>,
cell_height: f64,
} }
#[function_component] #[function_component]
@ -174,6 +177,7 @@ fn DestPlateCell(props: &DestPlateCellProps) -> Html {
html! { html! {
<td class={classes!("plate_cell", selected_class, in_transfer_class)} <td class={classes!("plate_cell", selected_class, in_transfer_class)}
style={format!("height: {}px;", props.cell_height)}
onmousedown={move |_| { onmousedown={move |_| {
mouse.emit((i,j, MouseEventType::Mousedown)) mouse.emit((i,j, MouseEventType::Mousedown))
}} }}

28
src/components/plates/plate_container.rs
View File

@ -1,4 +1,6 @@
#![allow(non_snake_case)] #![allow(non_snake_case)]
use wasm_bindgen::JsCast;
use wasm_bindgen::prelude::Closure;
use yew::prelude::*; use yew::prelude::*;
use crate::data::plate_instances::PlateInstance; use crate::data::plate_instances::PlateInstance;
@ -14,17 +16,35 @@ pub struct PlateContainerProps {
#[function_component] #[function_component]
pub fn PlateContainer(props: &PlateContainerProps) -> Html { pub fn PlateContainer(props: &PlateContainerProps) -> Html {
let height = web_sys::window().unwrap().inner_height().unwrap().as_f64().unwrap();
let cell_height = {
if let (Some(src_d), Some(dest_d)) = (&props.source_dims, &props.destination_dims) {
(0.78*height)/(src_d.plate.size().0 + dest_d.plate.size().0) as f64
} else {
1f64
}
};
let resize_trigger = use_force_update();
let onresize = Closure::<dyn FnMut(_)>::new(move |_: Event| {
resize_trigger.force_update();
});
web_sys::window().unwrap().set_onresize(Some(onresize.as_ref().unchecked_ref()));
onresize.forget(); // Magic!
html! { html! {
<div class="plate_container"> <div class="plate_container">
if let Some(spi) = props.source_dims.clone() { if let Some(spi) = props.source_dims.clone() {
if let Some(dpi) = props.destination_dims.clone() { if let Some(dpi) = props.destination_dims.clone() {
<div> <div class="plate_container--source">
<h2>{spi.name.clone()}</h2> <h2>{spi.name.clone()}</h2>
<SourcePlate source_plate={spi.clone()} destination_plate={dpi.clone()} /> <SourcePlate source_plate={spi.clone()} destination_plate={dpi.clone()}
cell_height={cell_height}/>
</div> </div>
<div> <div class="plate_container--destination">
<h2>{dpi.name.clone()}</h2> <h2>{dpi.name.clone()}</h2>
<DestinationPlate source_plate={spi.clone()} destination_plate={dpi.clone()} /> <DestinationPlate source_plate={spi.clone()} destination_plate={dpi.clone()}
cell_height={cell_height}/>
</div> </div>
} else { } else {
<h2>{"No Destination Plate Selected"}</h2> <h2>{"No Destination Plate Selected"}</h2>

4
src/components/plates/source_plate.rs
View File

@ -18,6 +18,7 @@ use super::super::transfer_menu::{num_to_letters, RegionDisplay};
pub struct SourcePlateProps { pub struct SourcePlateProps {
pub source_plate: PlateInstance, pub source_plate: PlateInstance,
pub destination_plate: PlateInstance, pub destination_plate: PlateInstance,
pub cell_height: f64,
} }
#[function_component] #[function_component]
@ -114,6 +115,7 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
mouse={mouse_callback.clone()} mouse={mouse_callback.clone()}
in_transfer={source_wells.contains(&(i,j))} in_transfer={source_wells.contains(&(i,j))}
color={color_map.get(&(i,j)).copied()} color={color_map.get(&(i,j)).copied()}
cell_height={props.cell_height}
/> />
} }
}) })
@ -150,6 +152,7 @@ pub struct SourcePlateCellProps {
mouse: Callback<(u8, u8, MouseEventType)>, mouse: Callback<(u8, u8, MouseEventType)>,
in_transfer: Option<bool>, in_transfer: Option<bool>,
color: Option<u8>, color: Option<u8>,
cell_height: f64,
} }
#[derive(Debug)] #[derive(Debug)]
pub enum MouseEventType { pub enum MouseEventType {
@ -177,6 +180,7 @@ fn SourcePlateCell(props: &SourcePlateCellProps) -> Html {
html! { html! {
<td class={classes!("plate_cell", selected_class, in_transfer_class)} <td class={classes!("plate_cell", selected_class, in_transfer_class)}
style={format!("height: {}px;", props.cell_height)}
id={format!("color={:?}", props.color)} id={format!("color={:?}", props.color)}
onmousedown={move |_| { onmousedown={move |_| {
mouse.emit((i,j, MouseEventType::Mousedown)) mouse.emit((i,j, MouseEventType::Mousedown))