chore: code cleanup and style button

Cargo.toml

@@ -7,3 +7,7 @@ edition = "2021"
 leptos = { version = "0.6.11", features = ["csr", "nightly"] }
 web-sys = { version = "0.3", features = ["HtmlCanvasElement", "CanvasRenderingContext2d", "CssStyleDeclaration", "Element", "Window"] }
 wasm-bindgen = { version = "0.2" }
+console_log = "1"
+log = "0.4"
+console_error_panic_hook = "0.1"
+

src/algorithm/grid.rs

@@ -2,11 +2,14 @@ use wasm_bindgen::JsValue;
 use web_sys::CanvasRenderingContext2d;
 
 pub fn draw_grid(canvas: &CanvasRenderingContext2d, size: (u32, u32), square_size: u32) {
+    canvas.begin_path();
     canvas.set_line_width(1.0);
     canvas.set_stroke_style(&JsValue::from_str("grey"));
 
     draw_vertical_lines(canvas, size.0, square_size, size.1 / square_size);
     draw_horizontal_lines(canvas, size.1, square_size, size.0 / square_size);
+
+    canvas.stroke();
 }
 
 fn draw_vertical_lines(
@@ -17,10 +20,8 @@ fn draw_vertical_lines(
 ) {
     for i in 0..count {
         let x = (i * square_size + square_size) as f64;
-        canvas.begin_path();
         canvas.move_to(x, 0.0);
         canvas.line_to(x, length as f64);
-        canvas.stroke();
     }
 }
 
@@ -32,9 +33,7 @@ fn draw_horizontal_lines(
 ) {
     for i in 0..count {
         let y = (i * square_size + square_size) as f64;
-        canvas.begin_path();
         canvas.move_to(0.0, y);
         canvas.line_to(length as f64, y);
-        canvas.stroke();
     }
 }

src/components/canvas.rs

@@ -2,17 +2,16 @@ use std::sync::atomic::{AtomicBool, Ordering};
 
 use ev::MouseEvent;
 use leptos::html::Canvas;
-use leptos::logging::log;
 use leptos::*;
 use wasm_bindgen::closure::Closure;
 use wasm_bindgen::JsCast;
 
-use crate::algorithm::{redraw_canvas, Map};
+use crate::algorithm::redraw_canvas;
 use crate::state::MapState;
 
-const DOCUMENT_LOADED: AtomicBool = AtomicBool::new(false);
+static DOCUMENT_LOADED: AtomicBool = AtomicBool::new(false);
 
-fn redraw(canvas_node: &HtmlElement<Canvas>, map: Option<Map>, set_size: WriteSignal<(u32, u32)>) {
+fn calc_canvas_size(set_size: WriteSignal<(u32, u32)>) {
     // To have a canvas resize dynamically, we need to manually adjust its size
     // CSS will NOT work, as it will just make everything blurry
     let doc = document();
@@ -35,7 +34,6 @@ fn redraw(canvas_node: &HtmlElement<Canvas>, map: Option<Map>, set_size: WriteSi
             .trim_end_matches("px")
             .parse::<f64>()
             .expect("height should be an integer")) as u32;
-    canvas_node.set_height(height);
 
     // the sidebar borders its side, so width is `window - sidebar`
     let side = doc
@@ -53,13 +51,8 @@ fn redraw(canvas_node: &HtmlElement<Canvas>, map: Option<Map>, set_size: WriteSi
             .trim_end_matches("px")
             .parse::<f64>()
             .expect("width should be an integer")) as u32;
-    canvas_node.set_width(width);
 
-    set_size((height, width));
-
-    // Now the canvas is the correct size, we can draw it
-    log!("redrawing canvas");
-    redraw_canvas(&*canvas_node, (height, width), map, None);
+    set_size.set((height, width));
 }
 
 fn on_mouse_down(
@@ -69,9 +62,13 @@ fn on_mouse_down(
     ev: MouseEvent,
 ) {
     let mut map_state = map_state_signal.get();
-    let map = map_state.get_map().clone().unwrap();
-    let mouse_pos = map.calc_nearest_grid_node((ev.offset_x(), ev.offset_y()));
+    let map = if let Some(m) = map_state.get_map().clone() {
+        m
+    } else {
+        return;
+    };
 
+    let mouse_pos = map.calc_nearest_grid_node((ev.offset_x(), ev.offset_y()));
     let selected_opt = map.station_at_pos(mouse_pos).map(|s| s.clone_non_ref());
     if selected_opt.is_none() {
         return;
@@ -139,6 +136,9 @@ fn on_mouse_move(
 
     let map = map_state.get_map().clone().unwrap();
     let mouse_pos = map.calc_nearest_grid_node((ev.offset_x(), ev.offset_y()));
+    if mouse_pos == selected.get_pos() {
+        return;
+    }
 
     selected.set_pos(mouse_pos);
     map_state.set_selected_station(selected.clone());
@@ -182,19 +182,25 @@ pub fn Canvas() -> impl IntoView {
     let (size, set_size) = create_signal((0_u32, 0_u32));
 
     create_effect(move |_| {
-        let map = map_state.get().get_map().clone();
-        let canvas_node = canvas_ref.get().expect("should be loaded now");
-
-        redraw(&canvas_node, map.clone(), set_size);
+        calc_canvas_size(set_size);
 
         if !DOCUMENT_LOADED.load(Ordering::Relaxed) {
             DOCUMENT_LOADED.store(true, Ordering::Release);
-            let f = Closure::<dyn Fn()>::new(move || redraw(&canvas_node, map.clone(), set_size));
+            let f = Closure::<dyn Fn()>::new(move || calc_canvas_size(set_size));
             window().set_onresize(Some(f.as_ref().unchecked_ref()));
             f.forget();
         }
     });
 
+    create_effect(move |_| {
+        let canvas_node = &canvas_ref.get().expect("should be loaded now");
+        let s = size.get();
+        canvas_node.set_height(s.0);
+        canvas_node.set_width(s.1);
+
+        redraw_canvas(&canvas_node, s, map_state.get().get_map().clone(), None);
+    });
+
     view! {
         <div class="grow overflow-hidden bg-zinc-50 dark:bg-neutral-700 text-black dark:text-white">
             <canvas

src/components/sidebar.rs

@@ -12,9 +12,11 @@ pub fn Sidebar() -> impl IntoView {
 
     view! {
         <div id="sidebar" class="h-full w-full flex flex-col bg-zinc-100 py-2 shadow-right shadow-dark-mild dark:shadow-black dark:bg-neutral-750 text-black dark:text-white px-2">
-            <div class="px-3 py-3 w-full">sidebar</div>
-            <button on:click=move |_| map_state.set(MapState::new(testmap()))>
-                reset map
+            <button
+                type="button"
+                class="inline-block rounded bg-blue-400 px-6 pb-2 pt-2 text-md font-medium uppercase leading-normal text-white shadow-primary-3 hover:bg-blue-500 hover:shadow-blue-900 active:bg-blue-600 dark:bg-blue-600 dark:shadow-neutral-950 dark:hover:bg-blue-700 dark:hover:shadow-neutral-900 dark:active:bg-blue-800"
+                on:click=move |_| map_state.set(MapState::new(testmap()))>
+                "reset map"
             </button>
         </div>
     }

src/main.rs

@@ -1,3 +1,5 @@
+#![allow(dead_code)] // for now while it is still in early development
+
 use leptos::*;
 
 mod algorithm;
@@ -8,6 +10,9 @@ use components::Page;
 use state::StateProvider;
 
 fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
     mount_to_body(|| view! { <App/> })
 }