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

View File

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

View File

@ -1,4 +1,6 @@
#![allow(non_snake_case)]
use wasm_bindgen::JsCast;
use wasm_bindgen::prelude::Closure;
use yew::prelude::*;
use crate::data::plate_instances::PlateInstance;
@ -14,17 +16,35 @@ pub struct PlateContainerProps {
#[function_component]
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! {
<div class="plate_container">
if let Some(spi) = props.source_dims.clone() {
if let Some(dpi) = props.destination_dims.clone() {
<div>
<div class="plate_container--source">
<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 class="plate_container--destination">
<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>
} else {
<h2>{"No Destination Plate Selected"}</h2>

View File

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