Click the display to select spheres (#25)

On the incoming branch, you can select a sphere by clicking it in the display. Holding *shift* while clicking enables multiple selection. These controls match the ones already implemented in the outline view.

Since the selection routine is now used in multiple places, the incoming branch factors it out into the `AppState::select` method.

Co-authored-by: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Reviewed-on: glen/dyna3#25
Co-authored-by: Vectornaut <vectornaut@nobody@nowhere.net>
Co-committed-by: Vectornaut <vectornaut@nobody@nowhere.net>

app-proto/src/display.rs

@@ -4,7 +4,9 @@ use sycamore::{prelude::*, motion::create_raf};
 use web_sys::{
     console,
     window,
+    Element,
     KeyboardEvent,
+    MouseEvent,
     WebGl2RenderingContext,
     WebGlProgram,
     WebGlShader,
@@ -12,7 +14,7 @@ use web_sys::{
     wasm_bindgen::{JsCast, JsValue}
 };
 
-use crate::AppState;
+use crate::{AppState, assembly::ElementKey};
 
 fn compile_shader(
     context: &WebGl2RenderingContext,
@@ -82,6 +84,24 @@ fn bind_vertex_attrib(
     );
 }
 
+// the direction in camera space that a mouse event is pointing along
+fn event_dir(event: &MouseEvent) -> Vector3<f64> {
+    let target: Element = event.target().unwrap().unchecked_into();
+    let rect = target.get_bounding_client_rect();
+    let width = rect.width();
+    let height = rect.height();
+    let shortdim = width.min(height);
+    
+    // this constant should be kept synchronized with `inversive.frag`
+    const FOCAL_SLOPE: f64 = 0.3;
+    
+    Vector3::new(
+        FOCAL_SLOPE * (2.0*(f64::from(event.client_x()) - rect.left()) - width) / shortdim,
+        FOCAL_SLOPE * (2.0*(rect.bottom() - f64::from(event.client_y())) - height) / shortdim,
+        -1.0
+    )
+}
+
 #[component]
 pub fn Display() -> View {
     let state = use_context::<AppState>();
@@ -89,6 +109,9 @@ pub fn Display() -> View {
     // canvas
     let display = create_node_ref();
     
+    // viewpoint
+    let assembly_to_world = create_signal(DMatrix::<f64>::identity(5, 5));
+    
     // navigation
     let pitch_up = create_signal(0.0);
     let pitch_down = create_signal(0.0);
@@ -296,7 +319,7 @@ pub fn Display() -> View {
                         0.0, 0.0,   0.0, 0.0, 1.0
                     ])
                 };
-                let assembly_to_world = &location * &orientation;
+                let asm_to_world = &location * &orientation;
                 
                 // get the assembly
                 let (
@@ -311,7 +334,7 @@ pub fn Display() -> View {
                         
                         // representation vectors in world coordinates
                         elts.iter().map(
-                            |(_, elt)| elt.representation.with(|rep| &assembly_to_world * rep)
+                            |(_, elt)| elt.representation.with(|rep| &asm_to_world * rep)
                         ).collect::<Vec<_>>(),
                         
                         // colors
@@ -370,6 +393,9 @@ pub fn Display() -> View {
                 // draw the scene
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
                 
+                // update the viewpoint
+                assembly_to_world.set(asm_to_world);
+                
                 // clear the scene change flag
                 scene_changed.set(
                     pitch_up_val != 0.0
@@ -458,6 +484,31 @@ pub fn Display() -> View {
                 yaw_left.set(0.0);
                 roll_ccw.set(0.0);
                 roll_cw.set(0.0);
+            },
+            on:click=move |event: MouseEvent| {
+                // find the nearest element along the pointer direction
+                let dir = event_dir(&event);
+                console::log_1(&JsValue::from(dir.to_string()));
+                let mut clicked: Option<(ElementKey, f64)> = None;
+                for (key, elt) in state.assembly.elements.get_clone_untracked() {
+                    match assembly_to_world.with(|asm_to_world| elt.cast(dir, asm_to_world)) {
+                        Some(depth) => match clicked {
+                            Some((_, best_depth)) => {
+                                if depth < best_depth {
+                                    clicked = Some((key, depth))
+                                }
+                            },
+                            None => clicked = Some((key, depth))
+                        }
+                        None => ()
+                    };
+                }
+                
+                // if we clicked something, select it
+                match clicked {
+                    Some((key, _)) => state.select(key, event.shift_key()),
+                    None => state.selection.update(|sel| sel.clear())
+                };
             }
         )
     }