app-proto/main.css

@@ -90,6 +90,10 @@ summary > div, .regulator {
   padding-right: 8px;
 }
 
+.element > input {
+  margin-left: 8px;
+}
+
 .element-switch {
   width: 18px;
   padding-left: 2px;

app-proto/src/assembly.rs

@@ -101,6 +101,7 @@ pub trait Element: Serial + ProblemPoser + DisplayItem {
     fn id(&self) -> &String;
     fn label(&self) -> &String;
     fn representation(&self) -> Signal<DVector<f64>>;
+    fn ghost(&self) -> Signal<bool>;
     
     // the regulators the element is subject to. the assembly that owns the
     // element is responsible for keeping this set up to date
@@ -154,6 +155,7 @@ pub struct Sphere {
     pub label: String,
     pub color: ElementColor,
     pub representation: Signal<DVector<f64>>,
+    pub ghost: Signal<bool>,
     pub regulators: Signal<BTreeSet<Rc<dyn Regulator>>>,
     serial: u64,
     column_index: Cell<Option<usize>>
@@ -173,6 +175,7 @@ impl Sphere {
             label: label,
             color: color,
             representation: create_signal(representation),
+            ghost: create_signal(false),
             regulators: create_signal(BTreeSet::new()),
             serial: Self::next_serial(),
             column_index: None.into()
@@ -210,6 +213,10 @@ impl Element for Sphere {
         self.representation
     }
     
+    fn ghost(&self) -> Signal<bool> {
+        self.ghost
+    }
+    
     fn regulators(&self) -> Signal<BTreeSet<Rc<dyn Regulator>>> {
         self.regulators
     }
@@ -244,6 +251,7 @@ pub struct Point {
     pub label: String,
     pub color: ElementColor,
     pub representation: Signal<DVector<f64>>,
+    pub ghost: Signal<bool>,
     pub regulators: Signal<BTreeSet<Rc<dyn Regulator>>>,
     serial: u64,
     column_index: Cell<Option<usize>>
@@ -263,6 +271,7 @@ impl Point {
             label,
             color,
             representation: create_signal(representation),
+            ghost: create_signal(false),
             regulators: create_signal(BTreeSet::new()),
             serial: Self::next_serial(),
             column_index: None.into()
@@ -296,6 +305,10 @@ impl Element for Point {
         self.representation
     }
     
+    fn ghost(&self) -> Signal<bool> {
+        self.ghost
+    }
+    
     fn regulators(&self) -> Signal<BTreeSet<Rc<dyn Regulator>>> {
         self.regulators
     }

app-proto/src/display.rs

@@ -25,6 +25,7 @@ use crate::{
 struct SceneSpheres {
     representations: Vec<DVector<f64>>,
     colors: Vec<ElementColor>,
+    opacities: Vec<f32>,
     highlights: Vec<f32>
 }
 
@@ -33,6 +34,7 @@ impl SceneSpheres {
         SceneSpheres {
             representations: Vec::new(),
             colors: Vec::new(),
+            opacities: Vec::new(),
             highlights: Vec::new()
         }
     }
@@ -41,9 +43,10 @@ impl SceneSpheres {
         self.representations.len().try_into().expect("Number of spheres must fit in a 32-bit integer")
     }
     
-    fn push(&mut self, representation: DVector<f64>, color: ElementColor, highlight: f32) {
+    fn push(&mut self, representation: DVector<f64>, color: ElementColor, opacity: f32, highlight: f32) {
         self.representations.push(representation);
         self.colors.push(color);
+        self.opacities.push(opacity);
         self.highlights.push(highlight);
     }
 }
@@ -98,11 +101,16 @@ pub trait DisplayItem {
 
 impl DisplayItem for Sphere {
     fn show(&self, scene: &mut Scene, selected: bool) {
-        const HIGHLIGHT: f32 = 0.2; /* SCAFFOLDING */
+        /* SCAFFOLDING */
+        const DEFAULT_OPACITY: f32 = 0.5;
+        const GHOST_OPACITY: f32 = 0.2;
+        const HIGHLIGHT: f32 = 0.2;
+        
         let representation = self.representation.get_clone_untracked();
         let color = if selected { self.color.map(|channel| 0.2 + 0.8*channel) } else { self.color };
+        let opacity = if self.ghost.get() { GHOST_OPACITY } else { DEFAULT_OPACITY };
         let highlight = if selected { 1.0 } else { HIGHLIGHT };
-        scene.spheres.push(representation, color, highlight);
+        scene.spheres.push(representation, color, opacity, highlight);
     }
     
     // this method should be kept synchronized with `sphere_cast` in
@@ -365,6 +373,7 @@ pub fn Display() -> View {
         state.assembly.elements.with(|elts| {
             for elt in elts {
                 elt.representation().track();
+                elt.ghost().track();
             }
         });
         state.selection.track();
@@ -395,7 +404,6 @@ pub fn Display() -> View {
         const SHRINKING_SPEED: f64 = 0.15; // in length units per second
         
         // display parameters
-        const OPACITY: f32 = 0.5; /* SCAFFOLDING */
         const LAYER_THRESHOLD: i32 = 0; /* DEBUG */
         const DEBUG_MODE: i32 = 0; /* DEBUG */
         
@@ -648,7 +656,7 @@ pub fn Display() -> View {
                     
                     let sphere_color = &mut [0.0; 4];
                     sphere_color[..3].copy_from_slice(&scene.spheres.colors[n]);
-                    sphere_color[3] = OPACITY;
+                    sphere_color[3] = scene.spheres.opacities[n];
                     
                     ctx.uniform3fv_with_f32_array(
                         sphere_sp_locs[n].as_ref(),
@@ -854,7 +862,11 @@ pub fn Display() -> View {
                 let (dir, pixel_size) = event_dir(&event);
                 console::log_1(&JsValue::from(dir.to_string()));
                 let mut clicked: Option<(Rc<dyn Element>, f64)> = None;
-                for elt in state.assembly.elements.get_clone_untracked() {
+                let tangible_elts = state.assembly.elements
+                    .get_clone_untracked()
+                    .into_iter()
+                    .filter(|elt| !elt.ghost().get());
+                for elt in tangible_elts {
                     match assembly_to_world.with(|asm_to_world| elt.cast(dir, asm_to_world, pixel_size)) {
                         Some(depth) => match clicked {
                             Some((_, best_depth)) => {

app-proto/src/outline.rs

@@ -202,7 +202,11 @@ fn ElementOutlineItem(element: Rc<dyn Element>) -> View {
                     ) {
                         div(class="element-label") { (label) }
                         div(class="element-representation") { (rep_components) }
-                        div(class="status")
+                        input(
+                            r#type="checkbox",
+                            bind:checked=element.ghost(),
+                            on:click=|event: MouseEvent| event.stop_propagation()
+                        )
                     }
                 }
                 ul(class="regulators") {