Display: bring in keyboard navigation code

app-proto/sketch-outline/src/display.rs

@@ -4,6 +4,7 @@ use sycamore::{prelude::*, motion::create_raf};
 use web_sys::{
     console,
     window,
+    KeyboardEvent,
     WebGl2RenderingContext,
     WebGlProgram,
     WebGlShader,
@@ -319,7 +320,16 @@ pub fn Display() -> View {
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
                 
                 // clear the scene change flag
-                scene_changed.set(false);
+                scene_changed.set(
+                    pitch_up_val != 0.0
+                    || pitch_down_val != 0.0
+                    || yaw_left_val != 0.0
+                    || yaw_right_val != 0.0
+                    || roll_cw_val != 0.0
+                    || roll_ccw_val != 0.0
+                    || zoom_in_val != 0.0
+                    || zoom_out_val != 0.0
+                );
             } else {
                 frames_since_last_sample = 0;
                 mean_frame_interval.set(-1.0);
@@ -328,10 +338,71 @@ pub fn Display() -> View {
         start_animation_loop();
     });
     
+    let set_nav_signal = move |event: KeyboardEvent, value: f64| {
+        let mut navigating = true;
+        let shift = event.shift_key();
+        match event.key().as_str() {
+            "ArrowUp" if shift => zoom_in.set(value),
+            "ArrowDown" if shift => zoom_out.set(value),
+            "ArrowUp" => pitch_up.set(value),
+            "ArrowDown" => pitch_down.set(value),
+            "ArrowRight" if shift => roll_cw.set(value),
+            "ArrowLeft" if shift => roll_ccw.set(value),
+            "ArrowRight" => yaw_right.set(value),
+            "ArrowLeft" => yaw_left.set(value),
+            _ => navigating = false
+        };
+        if navigating {
+            scene_changed.set(true);
+            event.prevent_default();
+        }
+    };
+    
     view! {
         /* TO DO */
         // switch back to integer-valued parameters when that becomes possible
         // again
-        canvas(ref=display, width="750", height="750", tabindex="0")
+        canvas(
+            ref=display,
+            width="750",
+            height="750",
+            tabindex="0",
+            on:keydown=move |event: KeyboardEvent| {
+                if event.key() == "Shift" {
+                    roll_cw.set(yaw_right.get());
+                    roll_ccw.set(yaw_left.get());
+                    zoom_in.set(pitch_up.get());
+                    zoom_out.set(pitch_down.get());
+                    yaw_right.set(0.0);
+                    yaw_left.set(0.0);
+                    pitch_up.set(0.0);
+                    pitch_down.set(0.0);
+                } else {
+                    set_nav_signal(event, 1.0);
+                }
+            },
+            on:keyup=move |event: KeyboardEvent| {
+                if event.key() == "Shift" {
+                    yaw_right.set(roll_cw.get());
+                    yaw_left.set(roll_ccw.get());
+                    pitch_up.set(zoom_in.get());
+                    pitch_down.set(zoom_out.get());
+                    roll_cw.set(0.0);
+                    roll_ccw.set(0.0);
+                    zoom_in.set(0.0);
+                    zoom_out.set(0.0);
+                } else {
+                    set_nav_signal(event, 0.0);
+                }
+            },
+            on:blur=move |_| {
+                pitch_up.set(0.0);
+                pitch_down.set(0.0);
+                yaw_right.set(0.0);
+                yaw_left.set(0.0);
+                roll_ccw.set(0.0);
+                roll_cw.set(0.0);
+            }
+        )
     }
 }