Dynamic sizing of plate cells
Calculates available size and allocates
This commit is contained in:
parent
4665788a27
commit
9275a866d0
|
@ -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))
|
||||
}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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))
|
||||
|
|
Loading…
Reference in New Issue