feat: zoom using scroll

src/components/atoms/button.rs

@@ -9,7 +9,7 @@ where
     let mut class = "inline-block rounded px-6 py-2 text-base font-semibold uppercase leading-normal shadow-primary-3 dark:shadow-neutral-950 hover:shadow-blue-900 dark:hover:shadow-neutral-900".to_owned();
 
     if outlined {
-        class += " border-solid border-4 text-blue-400 border-blue-400 hover:text-blue-500 hover:border-blue-500 active:text-blue-600 active:border-blue-600 dark:text-blue-600 dark:border-blue-600 dark:hover:text-blue-700 dark:hover:border-blue-700 dark:active:text-blue-800 dark:active:border-blue-800"
+        class += " border-solid border-4 text-blue-400 border-blue-400 hover:text-blue-500 hover:border-blue-500 active:text-blue-600 active:border-blue-600 dark:text-blue-500 dark:border-blue-500 dark:hover:text-blue-600 dark:hover:border-blue-600 dark:active:text-blue-700 dark:active:border-blue-700"
     } else {
         class += " text-white bg-blue-400 hover:bg-blue-500 active:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800"
     }

src/components/atoms/number_input.rs

@@ -3,15 +3,16 @@ use std::i32;
 use leptos::*;
 
 #[component]
-pub fn NumberInput<F>(
+pub fn NumberInput<F, V>(
     text: &'static str,
     on_input: F,
+    #[prop(optional)] value: Option<V>,
     #[prop(optional)] min: f64,
     #[prop(default = (i32::MAX) as f64)] max: f64,
-    #[prop(optional)] default: f64,
 ) -> impl IntoView
 where
     F: Fn(f64) + 'static,
+    V: (Fn() -> f64) + Copy + 'static,
 {
     let id = text.to_lowercase().replace(" ", "_");
 
@@ -24,7 +25,7 @@ where
         on:input=move |ev| {on_input(event_target_value(&ev).parse().expect("number input does not give number"))}
         max=max
         min=min
-        value={default.max(min)} />
+        prop:value=move || min.max(value.map_or(0.0, |v| v())) />
       <label
         for={id}
         class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 peer-focus:text-primary -translate-y-[0.9rem] scale-[0.8] dark:text-neutral-400 dark:peer-focus:text-primary"

src/components/molecules/canvas.rs

@@ -164,6 +164,24 @@ fn on_mouse_out(canvas_ref: &NodeRef<Canvas>, map_state_signal: &RwSignal<MapSta
     map_state_signal.set(map_state);
 }
 
+fn on_scroll(amount: f64, map_state_signal: &RwSignal<MapState>) {
+    let current = map_state_signal.get().get_square_size();
+
+    let size = if amount > 0.0 {
+        if current >= 100 {
+            return;
+        }
+        current + 5
+    } else {
+        if current <= 5 {
+            return;
+        }
+        current - 5
+    };
+
+    map_state_signal.update(|state| state.set_square_size(size))
+}
+
 #[component]
 pub fn Canvas() -> impl IntoView {
     let canvas_ref = create_node_ref::<Canvas>();
@@ -202,6 +220,7 @@ pub fn Canvas() -> impl IntoView {
                 on:touchend=move |_| on_mouse_up(&canvas_ref, &map_state)
                 on:touchmove=move |ev| on_mouse_move(&canvas_ref, &map_state, ev.as_ref())
                 on:touchcancel=move |_| on_mouse_out(&canvas_ref, &map_state)
+                on:wheel=move |ev| on_scroll(ev.delta_y(), &map_state)
                 id="canvas"
                 style="touch-action: none;"
                 class="object-contain"/>

src/components/organisms/sidebar.rs

@@ -20,7 +20,7 @@ pub fn Sidebar() -> impl IntoView {
                 text="Set grid size"
                 min=2.0
                 max=u32::MAX as f64
-                default={map_state.get().get_square_size() as f64}
+                value=move || map_state.get().get_square_size() as f64
                 on_input=move |n| map_state.update(|state| state.set_square_size(n as u32))/>
         </div>
     }