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