feat: Option to show current coordinate

plate-tool-web/assets/scss/default_theme/components/_plate_container.scss

@@ -41,11 +41,16 @@ div.plate_container {
 		}
 	}
 
-	div.plate_container--heatmap-notice {
+	div.plate_container--upper-left {
 		position: absolute;
 		top: 0.5em;
 		left: 0.5em;
 
+		display: flex;
+		flex-direction: column;
+	}
+
+	div.plate_container--heatmap-notice {
 		animation: 1s 1 attention_on_load;
 	}
 }

plate-tool-web/src/components/callbacks/main_window_callbacks/settings_callbacks.rs

@@ -35,6 +35,17 @@ pub fn toggle_volume_heatmap_callback(
     })
 }
 
+pub fn toggle_show_current_coordinates_callback(
+    main_dispatch: Dispatch<MainState>,
+) -> Callback<web_sys::MouseEvent> {
+    let main_dispatch = main_dispatch.clone();
+    Callback::from(move |_| {
+        main_dispatch.reduce_mut(|state| {
+            state.preferences.show_current_coordinates ^= true;
+        })
+    })
+}
+
 pub fn change_csv_export_type_callback(
     main_dispatch: Dispatch<MainState>,
 ) -> Callback<web_sys::MouseEvent> {

plate-tool-web/src/components/main_window.rs

@@ -48,6 +48,11 @@ pub fn MainWindow() -> Html {
         main_window_callbacks::toggle_volume_heatmap_callback(main_dispatch)
     };
 
+    let toggle_show_current_coordinates_callback = {
+        let main_dispatch = main_dispatch.clone();
+        main_window_callbacks::toggle_show_current_coordinates_callback(main_dispatch)
+    };
+
     let change_csv_export_type_callback = {
         let main_dispatch = main_dispatch.clone();
         main_window_callbacks::change_csv_export_type_callback(main_dispatch)
@@ -109,6 +114,7 @@ pub fn MainWindow() -> Html {
                     <div>
                     <button onclick={toggle_in_transfer_hashes_callback}>{"Toggle transfer hashes"}</button>
                     <button onclick={toggle_volume_heatmap_callback}>{"Toggle volume heatmap"}</button>
+                    <button onclick={toggle_show_current_coordinates_callback}>{"Toggle current coordinates view"}</button>
                     </div>
                 </div>
                 <div class="dropdown-sub">

plate-tool-web/src/components/plates/plate.rs

@@ -109,7 +109,8 @@ pub fn Plate(props: &PlateProps) -> Html {
         let m_start_handle = m_start_handle.clone();
         let m_end_handle = m_end_handle.clone();
         let m_stat_handle = m_stat_handle.clone();
-        plate_callbacks::mouse_callback(m_start_handle, m_end_handle, m_stat_handle)
+        let send_coordinates = props.send_coordinates.clone();
+        plate_callbacks::mouse_callback(m_start_handle, m_end_handle, m_stat_handle, send_coordinates)
     };
 
     let mouseup_callback = {

plate-tool-web/src/components/plates/plate_callbacks.rs

@@ -15,6 +15,7 @@ pub fn mouse_callback(
     m_start_handle: MStartHandle,
     m_end_handle: MEndHandle,
     m_stat_handle: MStatHandle,
+    send_coordinates: Option<Callback<(u8,u8)>>
 ) -> Callback<(u8, u8, MouseEventType)> {
     Callback::from(move |(i, j, t)| match t {
         MouseEventType::Mousedown => {
@@ -23,6 +24,9 @@ pub fn mouse_callback(
             m_stat_handle.set(true);
         }
         MouseEventType::Mouseenter => {
+            if let Some(cb) = send_coordinates.as_ref() {
+                cb.emit((i,j));
+            }
             if *m_stat_handle {
                 m_end_handle.set(Some((i, j)));
             }

plate-tool-web/src/components/plates/plate_container.rs

@@ -1,4 +1,5 @@
 #![allow(non_snake_case)]
+use plate_tool_lib::util::num_to_letters;
 use wasm_bindgen::prelude::Closure;
 use wasm_bindgen::JsCast;
 use yew::prelude::*;
@@ -54,27 +55,51 @@ pub fn PlateContainer(props: &PlateContainerProps) -> Html {
     onresize.forget(); // Magic!
 
     let heatmap_enabled = main_state.preferences.volume_heatmap;
+    let show_current_coordinates = main_state.preferences.show_current_coordinates;
+    // (Row, Col)
+    let current_coordinates = use_state(|| (0, 0));
+    let send_coordinates = {
+        if show_current_coordinates {
+            let current_coordinates = current_coordinates.clone();
+            Some(Callback::from(move |coords| {
+                current_coordinates.set(coords)
+            }))
+        } else {
+            None
+        }
+    };
 
     html! {
         <div class="plate_container">
+            <div class="plate_container--upper-left" >
             if heatmap_enabled {
             <div class="plate_container--heatmap-notice" >
             <h3>{"Volume Heatmap Enabled"}</h3>
             </div>
             }
+            if show_current_coordinates {
+            <div class="plate_container--location">
+            <h3>{format!("R:{} C:{}",
+                num_to_letters(current_coordinates.0).unwrap_or("".to_string()),
+                current_coordinates.1)}</h3>
+            </div>
+            }
+        </div>
             if let Some(spi) = props.source_dims.clone() {
             if let Some(dpi) = props.destination_dims.clone() {
             <div class="plate_container--source">
                 <h2>{spi.name.clone()}</h2>
                 <h2>{"Source"}</h2>
                 <Plate source_plate={spi.clone()} destination_plate={dpi.clone()}
-                cell_height={cell_height} ptype={PlateType::Source}/>
+                cell_height={cell_height} ptype={PlateType::Source}
+                send_coordinates={send_coordinates.clone()}
+                />
             </div>
             <div class="plate_container--destination">
                 <h2>{dpi.name.clone()}</h2>
                 <h2>{"Destination"}</h2>
                 <Plate source_plate={spi.clone()} destination_plate={dpi.clone()}
-                cell_height={cell_height} ptype={PlateType::Destination}/>
+                cell_height={cell_height} ptype={PlateType::Destination} send_coordinates={send_coordinates.clone()}/>
             </div>
             } else {
                 <h2>{"No Destination Plate Selected"}</h2>

plate-tool-web/src/components/plates/plate_data.rs

@@ -10,6 +10,7 @@ pub struct PlateProps {
     pub destination_plate: PlateInstance,
     pub cell_height: f64,
     pub ptype: PlateType,
+    pub send_coordinates: Option<Callback<(u8,u8)>>,
 }
 
 pub type MStartHandle = UseStateHandle<Option<(u8, u8)>>;

plate-tool-web/src/components/states.rs

@@ -21,11 +21,18 @@ pub struct Preferences {
     pub volume_heatmap: bool,
     #[serde(default)]
     pub csv_export_type: CsvExportType,
+    #[serde(default)]
+    pub show_current_coordinates: bool,
 }
 
 impl Default for Preferences {
     fn default() -> Self {
-        Self { in_transfer_hashes: true, volume_heatmap: false, csv_export_type: CsvExportType::Normal }
+        Self {
+            in_transfer_hashes: true,
+            volume_heatmap: false,
+            csv_export_type: CsvExportType::Normal,
+            show_current_coordinates: false,
+        }
     }
 }
 
@@ -72,7 +79,10 @@ pub struct MainState {
 
 impl Store for MainState {
     fn new(context: &yewdux::Context) -> Self {
-        init_listener(storage::StorageListener::<Self>::new(storage::Area::Local), context);
+        init_listener(
+            storage::StorageListener::<Self>::new(storage::Area::Local),
+            context,
+        );
 
         storage::load(storage::Area::Local)
             .expect("Unable to load state")
@@ -142,10 +152,18 @@ impl MainState {
     }
 
     pub fn change_format(&mut self, id: Uuid, new_format: &PlateFormat) {
-        if let Some(index) = self.source_plates.iter().position(|spi| spi.get_uuid() == id) {
+        if let Some(index) = self
+            .source_plates
+            .iter()
+            .position(|spi| spi.get_uuid() == id)
+        {
             self.source_plates[index].change_format(new_format);
         }
-        if let Some(index) = self.destination_plates.iter().position(|dpi| dpi.get_uuid() == id) {
+        if let Some(index) = self
+            .destination_plates
+            .iter()
+            .position(|dpi| dpi.get_uuid() == id)
+        {
             self.destination_plates[index].change_format(new_format);
         }
     }