On Web, implement WindowEvent::Occluded (#2940)

examples/web.rs

@@ -58,6 +58,9 @@ pub fn main() {
 
 #[cfg(wasm_platform)]
 mod wasm {
+    use std::num::NonZeroU32;
+
+    use softbuffer::{Surface, SurfaceExtWeb};
     use wasm_bindgen::prelude::*;
     use winit::{event::Event, window::Window};
 
@@ -73,16 +76,26 @@ mod wasm {
         use winit::platform::web::WindowExtWebSys;
 
         let canvas = window.canvas().unwrap();
+        let mut surface = Surface::from_canvas(canvas.clone()).unwrap();
+        surface
+            .resize(
+                NonZeroU32::new(canvas.width()).unwrap(),
+                NonZeroU32::new(canvas.height()).unwrap(),
+            )
+            .unwrap();
+        let mut buffer = surface.buffer_mut().unwrap();
+        buffer.fill(0xFFF0000);
+        buffer.present().unwrap();
 
         let window = web_sys::window().unwrap();
         let document = window.document().unwrap();
         let body = document.body().unwrap();
 
-        // Set a background color for the canvas to make it easier to tell where the canvas is for debugging purposes.
-        canvas
-            .style()
-            .set_property("background-color", "crimson")
-            .unwrap();
+        let style = &canvas.style();
+        style.set_property("margin", "50px").unwrap();
+        // Use to test interactions with border and padding.
+        //style.set_property("border", "50px solid black").unwrap();
+        //style.set_property("padding", "50px").unwrap();
         body.append_child(&canvas).unwrap();
 
         let log_header = document.create_element("h2").unwrap();
@@ -100,11 +113,25 @@ mod wasm {
         // Getting access to browser logs requires a lot of setup on mobile devices.
         // So we implement this basic logging system into the page to give developers an easy alternative.
         // As a bonus its also kind of handy on desktop.
-        if let Event::WindowEvent { event, .. } = &event {
+        let event = match event {
+            Event::WindowEvent { event, .. } => Some(format!("{event:?}")),
+            Event::Resumed | Event::Suspended => Some(format!("{event:?}")),
+            _ => None,
+        };
+        if let Some(event) = event {
             let window = web_sys::window().unwrap();
             let document = window.document().unwrap();
             let log = document.create_element("li").unwrap();
-            log.set_text_content(Some(&format!("{event:?}")));
+
+            let date = js_sys::Date::new_0();
+            log.set_text_content(Some(&format!(
+                "{:02}:{:02}:{:02}.{:03}: {event}",
+                date.get_hours(),
+                date.get_minutes(),
+                date.get_seconds(),
+                date.get_milliseconds(),
+            )));
+
             log_list
                 .insert_before(&log, log_list.first_child().as_ref())
                 .unwrap();