On Web, add WindowBuilderExtWebSys::with_append() (#2953)

CHANGELOG.md

@@ -20,6 +20,7 @@ And please only add new entries to the top of this list, right below the `# Unre
 - On Web, fix some `WindowBuilder` methods doing nothing.
 - On Web, implement `Window::focus_window()`.
 - On Web, remove unnecessary `Window::is_dark_mode()`, which was replaced with `Window::theme()`.
+- On Web, add `WindowBuilderExtWebSys::with_append()` to append the canvas element to the web page on creation.
 
 # 0.29.0-beta.0
 

examples/web.rs

@@ -10,10 +10,13 @@ use winit::{
 pub fn main() {
     let event_loop = EventLoop::new();
 
-    let window = WindowBuilder::new()
-        .with_title("A fantastic window!")
-        .build(&event_loop)
-        .unwrap();
+    let builder = WindowBuilder::new().with_title("A fantastic window!");
+    #[cfg(wasm_platform)]
+    let builder = {
+        use winit::platform::web::WindowBuilderExtWebSys;
+        builder.with_append(true)
+    };
+    let window = builder.build(&event_loop).unwrap();
 
     #[cfg(wasm_platform)]
     let log_list = wasm::insert_canvas_and_create_log_list(&window);
@@ -96,7 +99,6 @@ mod wasm {
         // 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();
         log_header.set_text_content(Some("Event Log"));

examples/web_aspect_ratio.rs

@@ -13,6 +13,7 @@ mod wasm {
         dpi::PhysicalSize,
         event::{Event, WindowEvent},
         event_loop::{ControlFlow, EventLoop},
+        platform::web::WindowBuilderExtWebSys,
         window::{Window, WindowBuilder},
     };
 
@@ -37,6 +38,7 @@ This example demonstrates the desired future functionality which will possibly b
             // When running in a non-wasm environment this would set the window size to 100x100.
             // However in this example it just sets a default initial size of 100x100 that is immediately overwritten due to the layout + styling of the page.
             .with_inner_size(PhysicalSize::new(100, 100))
+            .with_append(true)
             .build(&event_loop)
             .unwrap();
 
@@ -72,7 +74,6 @@ This example demonstrates the desired future functionality which will possibly b
         canvas
             .style()
             .set_css_text("display: block; background-color: crimson; margin: auto; width: 50%; aspect-ratio: 4 / 1;");
-        body.append_child(&canvas).unwrap();
 
         let explanation = document.create_element("pre").unwrap();
         explanation.set_text_content(Some(EXPLANATION));

src/platform/web.rs

@@ -66,6 +66,11 @@ pub trait WindowBuilderExtWebSys {
     ///
     /// Enabled by default.
     fn with_focusable(self, focusable: bool) -> Self;
+
+    /// On window creation, append the canvas element to the web page if it isn't already.
+    ///
+    /// Disabled by default.
+    fn with_append(self, append: bool) -> Self;
 }
 
 impl WindowBuilderExtWebSys for WindowBuilder {
@@ -86,6 +91,12 @@ impl WindowBuilderExtWebSys for WindowBuilder {
 
         self
     }
+
+    fn with_append(mut self, append: bool) -> Self {
+        self.platform_specific.append = append;
+
+        self
+    }
 }
 
 /// Additional methods on `EventLoop` that are specific to the web.

src/platform_impl/web/web_sys/canvas.rs

@@ -70,6 +70,14 @@ impl Canvas {
                 .unchecked_into(),
         };
 
+        if platform_attr.append && !document.contains(Some(&canvas)) {
+            document
+                .body()
+                .expect("Failed to get body from document")
+                .append_child(&canvas)
+                .expect("Failed to append canvas to body");
+        }
+
         // A tabindex is needed in order to capture local keyboard events.
         // A "0" value means that the element should be focusable in
         // sequential keyboard navigation, but its order is defined by the

src/platform_impl/web/window.rs

@@ -483,6 +483,7 @@ pub struct PlatformSpecificWindowBuilderAttributes {
     pub(crate) canvas: Option<backend::RawCanvasType>,
     pub(crate) prevent_default: bool,
     pub(crate) focusable: bool,
+    pub(crate) append: bool,
 }
 
 impl Default for PlatformSpecificWindowBuilderAttributes {
@@ -491,6 +492,7 @@ impl Default for PlatformSpecificWindowBuilderAttributes {
             canvas: None,
             prevent_default: true,
             focusable: true,
+            append: false,
         }
     }
 }