feat: also listen to touch events

.github/workflows/check.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Prepare
         run: |
           rustup toolchain install nightly

.github/workflows/kubernetes.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: login to docker
         run: docker login ghcr.io -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}

src/algorithm/mod.rs

@@ -11,8 +11,8 @@ pub use objects::*;
 pub fn redraw_canvas(
     canvas: &HtmlCanvasElement,
     size: (u32, u32),
-    map: Option<Map>,
-    hover_station: Option<Station>,
+    map: Option<&Map>,
+    hover_station: Option<&Station>,
 ) {
     let square_size = map.as_ref().map_or(30, |m| m.get_square_size());
 

src/components/canvas.rs

@@ -1,6 +1,6 @@
 use std::sync::atomic::{AtomicBool, Ordering};
 
-use ev::MouseEvent;
+use ev::UiEvent;
 use leptos::html::Canvas;
 use leptos::*;
 use wasm_bindgen::closure::Closure;
@@ -33,7 +33,8 @@ fn calc_canvas_size(set_size: WriteSignal<(u32, u32)>) {
         - nav_height_px
             .trim_end_matches("px")
             .parse::<f64>()
-            .expect("height should be an integer")) as u32;
+            .expect("height should be a number")
+            .round()) as u32;
 
     // the sidebar borders its side, so width is `window - sidebar`
     let side = doc
@@ -50,7 +51,8 @@ fn calc_canvas_size(set_size: WriteSignal<(u32, u32)>) {
         - side_width_px
             .trim_end_matches("px")
             .parse::<f64>()
-            .expect("width should be an integer")) as u32;
+            .expect("width should be a number")
+            .round()) as u32;
 
     set_size.set((height, width));
 }
@@ -59,7 +61,7 @@ fn on_mouse_down(
     canvas_ref: &NodeRef<Canvas>,
     map_state_signal: &RwSignal<MapState>,
     size: ReadSignal<(u32, u32)>,
-    ev: MouseEvent,
+    ev: &UiEvent,
 ) {
     let mut map_state = map_state_signal.get();
     let map = if let Some(m) = map_state.get_map().clone() {
@@ -68,7 +70,15 @@ fn on_mouse_down(
         return;
     };
 
-    let mouse_pos = map.calc_nearest_grid_node((ev.offset_x(), ev.offset_y()));
+    let map_size = size.get();
+    let win_height = window().inner_height().unwrap().as_f64().unwrap().round() as i32;
+    let win_width = window().inner_width().unwrap().as_f64().unwrap().round() as i32;
+    let pos = (
+        ev.page_x() - (win_width - map_size.1 as i32),
+        ev.page_y() - (win_height - map_size.0 as i32),
+    );
+
+    let mouse_pos = map.calc_nearest_grid_node(pos);
     let selected_opt = map.station_at_pos(mouse_pos).map(|s| s.clone_non_ref());
     if selected_opt.is_none() {
         return;
@@ -82,9 +92,9 @@ fn on_mouse_down(
 
     redraw_canvas(
         &canvas_ref.get().expect("should be loaded now"),
-        size.get(),
-        Some(map),
-        Some(selected),
+        map_size,
+        Some(&map),
+        Some(&selected),
     )
 }
 
@@ -116,7 +126,7 @@ fn on_mouse_up(
     redraw_canvas(
         &canvas_ref.get().expect("should be loaded now"),
         size.get(),
-        Some(map),
+        Some(&map),
         None,
     )
 }
@@ -125,7 +135,7 @@ fn on_mouse_move(
     canvas_ref: &NodeRef<Canvas>,
     map_state_signal: &RwSignal<MapState>,
     size: ReadSignal<(u32, u32)>,
-    ev: MouseEvent,
+    ev: &UiEvent,
 ) {
     let mut map_state = map_state_signal.get();
     let selected_opt = map_state.get_selected_station().clone();
@@ -134,8 +144,16 @@ fn on_mouse_move(
     }
     let selected = selected_opt.unwrap();
 
+    let map_size = size.get();
+    let win_height = window().inner_height().unwrap().as_f64().unwrap().round() as i32;
+    let win_width = window().inner_width().unwrap().as_f64().unwrap().round() as i32;
+    let pos = (
+        ev.page_x() - (win_width - map_size.1 as i32),
+        ev.page_y() - (win_height - map_size.0 as i32),
+    );
+
     let map = map_state.get_map().clone().unwrap();
-    let mouse_pos = map.calc_nearest_grid_node((ev.offset_x(), ev.offset_y()));
+    let mouse_pos = map.calc_nearest_grid_node(pos);
     if mouse_pos == selected.get_pos() {
         return;
     }
@@ -146,10 +164,10 @@ fn on_mouse_move(
 
     redraw_canvas(
         &canvas_ref.get().expect("should be loaded now"),
-        size.get(),
-        Some(map),
-        Some(selected),
-    )
+        map_size,
+        Some(&map),
+        Some(&selected),
+    );
 }
 
 fn on_mouse_out(
@@ -163,15 +181,16 @@ fn on_mouse_out(
     }
 
     map_state.clear_selected_station();
-    let map = map_state.get_map().clone();
-    map_state_signal.set(map_state);
+    let map = map_state.get_map().as_ref();
 
     redraw_canvas(
         &canvas_ref.get().expect("should be loaded now"),
         size.get(),
         map,
         None,
-    )
+    );
+
+    map_state_signal.set(map_state);
 }
 
 #[component]
@@ -198,17 +217,21 @@ pub fn Canvas() -> impl IntoView {
         canvas_node.set_height(s.0);
         canvas_node.set_width(s.1);
 
-        redraw_canvas(&canvas_node, s, map_state.get().get_map().clone(), None);
+        redraw_canvas(canvas_node, s, map_state.get().get_map().as_ref(), None);
     });
 
     view! {
         <div class="grow overflow-hidden bg-zinc-50 dark:bg-neutral-700 text-black dark:text-white">
             <canvas
                 _ref=canvas_ref
-                on:mousedown=move |ev| on_mouse_down(&canvas_ref, &map_state, size, ev)
+                on:mousedown=move |ev| on_mouse_down(&canvas_ref, &map_state, size, ev.as_ref())
                 on:mouseup=move |_| on_mouse_up(&canvas_ref, &map_state, size)
-                on:mousemove=move |ev| on_mouse_move(&canvas_ref, &map_state, size, ev)
+                on:mousemove=move |ev| on_mouse_move(&canvas_ref, &map_state, size, ev.as_ref())
                 on:mouseout=move |_| on_mouse_out(&canvas_ref, &map_state, size)
+                on:touchstart=move |ev| on_mouse_down(&canvas_ref, &map_state, size, ev.as_ref())
+                on:touchend=move |_| on_mouse_up(&canvas_ref, &map_state, size)
+                on:touchmove=move |ev| on_mouse_move(&canvas_ref, &map_state, size, ev.as_ref())
+                on:touchcancel=move |_| on_mouse_out(&canvas_ref, &map_state, size)
                 id="canvas"
                 class="object-contain"/>
         </div>