Add clear scene button to web app

src/app/mod.rs

@@ -152,6 +152,7 @@ impl MvuApp<Model> for App {
         match event {
             Event::MouseButtonPressed => model,
             Event::OpenTestFile(file_path) => open_test_file(file_path, model.clone()),
+            Event::ClearScene => clear_scene(model.clone()),
         }
     }
 
@@ -171,6 +172,8 @@ impl MvuApp<Model> for App {
                         &context.queue,
                     ))
                 }
+            } else {
+                context.scene_data = None;
             }
 
             let frame = context
@@ -222,3 +225,10 @@ fn open_test_file(file: Box<dyn File>, model: Rc<Model>) -> Rc<Model> {
     let dem = Some(Rc::new(raster::Dem::load_from_image(file)));
     Rc::new(Model { dem, ..*model })
 }
+
+fn clear_scene(model: Rc<Model>) -> Rc<Model> {
+    Rc::new(Model {
+        dem: None,
+        ..*model
+    })
+}

src/mvu/mod.rs

@@ -15,6 +15,7 @@ impl File for std::io::Cursor<Vec<u8>> {}
 pub enum Event {
     MouseButtonPressed,
     OpenTestFile(Box<dyn File>),
+    ClearScene,
 }
 
 #[derive(Debug, Clone, Copy)]

src/wasm/mod.rs

@@ -112,6 +112,16 @@ impl PteropusCanvas {
             .await;
     }
 
+    #[wasm_bindgen]
+    pub async fn clear_scene(&mut self) {
+        self.model = self
+            .app
+            .lock()
+            .expect("get app mutex")
+            .update(Rc::clone(&self.model), Event::ClearScene)
+            .await;
+    }
+
     pub fn get_canvas(&self) -> HtmlCanvasElement {
         let window = web_sys::window().expect("get window");
         let document = window.document().expect("get HTML document");

web/index.html

@@ -10,7 +10,8 @@
     <script type="module" src="pteropus-frame.js"></script>
     <canvas id="pteropus-canvas"></canvas>
     <div id="bottom-panel">
-      <input type="file" id="file-upload-file-input" name="filename" accept="image/tiff, .tif, .tiff">
+      <input type="file" id="file-upload-file-input" accept="image/tiff, .tif, .tiff">
+      <button id="clear-scene-button">Clear Scene</button>
     </div>
   </div>
 </body>

web/pteropus-frame.js

@@ -11,6 +11,7 @@ async function run() {
 
     let test_file_data = null;
     let needs_resize = true;
+    let clear_scene = false;
 
     let mainCanvas = document.getElementById("pteropus-canvas");
     mainCanvas.addEventListener("drop", async (event) => {
@@ -31,9 +32,22 @@ async function run() {
         }
     });
 
+    let clearSceneButton = document.getElementById("clear-scene-button");
+    clearSceneButton.addEventListener("click", () => {
+        clear_scene = true;
+    });
+
     while(true)
     {
         await pteropus.render();
+        if(needs_resize) {
+            await pteropus.on_resize();
+            needs_resize = false;
+        }
+        if(clear_scene) {
+            await pteropus.clear_scene();
+            clear_scene = false;
+        }
         // TODO: I really want to do this asynchronously, with the drop
         // event listener calling pteropus_load_file directly, but I need
         // to figure out how to get that to work.
@@ -41,10 +55,6 @@ async function run() {
             await pteropus.load_file(test_file_data);
             test_file_data = null
         }
-        if(needs_resize) {
-            await pteropus.on_resize();
-            needs_resize = false;
-        }
         await new Promise(requestAnimationFrame);
     }
 }