Add web fullscreen support (#1142)

Adds fullscreen using native web APIs to the stdweb and web-sys backends.

Due to limitations of browser APIs, requests for fullscreen can only be fulfilled during a short-lived user-triggered event. This commit does automatically handle that under the hood, but it does introduce unavoidable latency in full-screening the canvas.

src/platform_impl/web/stdweb/canvas.rs

@@ -4,11 +4,14 @@ use crate::error::OsError as RootOE;
 use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
 use crate::platform_impl::OsError;
 
+use std::cell::RefCell;
+use std::rc::Rc;
 use stdweb::traits::IPointerEvent;
 use stdweb::unstable::TryInto;
 use stdweb::web::event::{
-    BlurEvent, ConcreteEvent, FocusEvent, KeyDownEvent, KeyPressEvent, KeyUpEvent, MouseWheelEvent,
-    PointerDownEvent, PointerMoveEvent, PointerOutEvent, PointerOverEvent, PointerUpEvent,
+    BlurEvent, ConcreteEvent, FocusEvent, FullscreenChangeEvent, KeyDownEvent, KeyPressEvent,
+    KeyUpEvent, MouseWheelEvent, PointerDownEvent, PointerMoveEvent, PointerOutEvent,
+    PointerOverEvent, PointerUpEvent,
 };
 use stdweb::web::html_element::CanvasElement;
 use stdweb::web::{
@@ -28,6 +31,8 @@ pub struct Canvas {
     on_mouse_press: Option<EventListenerHandle>,
     on_mouse_release: Option<EventListenerHandle>,
     on_mouse_wheel: Option<EventListenerHandle>,
+    on_fullscreen_change: Option<EventListenerHandle>,
+    wants_fullscreen: Rc<RefCell<bool>>,
 }
 
 impl Drop for Canvas {
@@ -66,6 +71,8 @@ impl Canvas {
             on_mouse_release: None,
             on_mouse_press: None,
             on_mouse_wheel: None,
+            on_fullscreen_change: None,
+            wants_fullscreen: Rc::new(RefCell::new(false)),
         })
     }
 
@@ -120,7 +127,7 @@ impl Canvas {
     where
         F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
     {
-        self.on_keyboard_release = Some(self.add_event(move |event: KeyUpEvent| {
+        self.on_keyboard_release = Some(self.add_user_event(move |event: KeyUpEvent| {
             handler(
                 event::scan_code(&event),
                 event::virtual_key_code(&event),
@@ -133,7 +140,7 @@ impl Canvas {
     where
         F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
     {
-        self.on_keyboard_press = Some(self.add_event(move |event: KeyDownEvent| {
+        self.on_keyboard_press = Some(self.add_user_event(move |event: KeyDownEvent| {
             handler(
                 event::scan_code(&event),
                 event::virtual_key_code(&event),
@@ -151,7 +158,7 @@ impl Canvas {
         // The `keypress` event is deprecated, but there does not seem to be a
         // viable/compatible alternative as of now. `beforeinput` is still widely
         // unsupported.
-        self.on_received_character = Some(self.add_event(move |event: KeyPressEvent| {
+        self.on_received_character = Some(self.add_user_event(move |event: KeyPressEvent| {
             handler(event::codepoint(&event));
         }));
     }
@@ -178,7 +185,7 @@ impl Canvas {
     where
         F: 'static + FnMut(i32, MouseButton, ModifiersState),
     {
-        self.on_mouse_release = Some(self.add_event(move |event: PointerUpEvent| {
+        self.on_mouse_release = Some(self.add_user_event(move |event: PointerUpEvent| {
             handler(
                 event.pointer_id(),
                 event::mouse_button(&event),
@@ -191,7 +198,7 @@ impl Canvas {
     where
         F: 'static + FnMut(i32, MouseButton, ModifiersState),
     {
-        self.on_mouse_press = Some(self.add_event(move |event: PointerDownEvent| {
+        self.on_mouse_press = Some(self.add_user_event(move |event: PointerDownEvent| {
             handler(
                 event.pointer_id(),
                 event::mouse_button(&event),
@@ -224,6 +231,13 @@ impl Canvas {
         }));
     }
 
+    pub fn on_fullscreen_change<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.on_fullscreen_change = Some(self.add_event(move |_: FullscreenChangeEvent| handler()));
+    }
+
     fn add_event<E, F>(&self, mut handler: F) -> EventListenerHandle
     where
         E: ConcreteEvent,
@@ -236,4 +250,33 @@ impl Canvas {
             handler(event);
         })
     }
+
+    // The difference between add_event and add_user_event is that the latter has a special meaning
+    // for browser security. A user event is a deliberate action by the user (like a mouse or key
+    // press) and is the only time things like a fullscreen request may be successfully completed.)
+    fn add_user_event<E, F>(&self, mut handler: F) -> EventListenerHandle
+    where
+        E: ConcreteEvent,
+        F: 'static + FnMut(E),
+    {
+        let wants_fullscreen = self.wants_fullscreen.clone();
+        let canvas = self.raw.clone();
+
+        self.add_event(move |event: E| {
+            handler(event);
+
+            if *wants_fullscreen.borrow() {
+                canvas.request_fullscreen();
+                *wants_fullscreen.borrow_mut() = false;
+            }
+        })
+    }
+
+    pub fn request_fullscreen(&self) {
+        *self.wants_fullscreen.borrow_mut() = true;
+    }
+
+    pub fn is_fullscreen(&self) -> bool {
+        super::is_fullscreen(&self.raw)
+    }
 }

src/platform_impl/web/stdweb/mod.rs

@@ -5,19 +5,24 @@ mod timeout;
 pub use self::canvas::Canvas;
 pub use self::timeout::Timeout;
 
+use crate::dpi::LogicalSize;
 use crate::platform::web::WindowExtStdweb;
 use crate::window::Window;
 
 use stdweb::js;
 use stdweb::web::event::BeforeUnloadEvent;
-use stdweb::web::html_element::CanvasElement;
 use stdweb::web::window;
 use stdweb::web::IEventTarget;
+use stdweb::web::{document, html_element::CanvasElement, Element};
 
 pub fn throw(msg: &str) {
     js! { throw @{msg} }
 }
 
+pub fn exit_fullscreen() {
+    document().exit_fullscreen();
+}
+
 pub fn on_unload(mut handler: impl FnMut() + 'static) {
     window().add_event_listener(move |_: BeforeUnloadEvent| handler());
 }
@@ -27,3 +32,21 @@ impl WindowExtStdweb for Window {
         self.window.canvas().raw().clone()
     }
 }
+
+pub fn window_size() -> LogicalSize {
+    let window = window();
+    let width = window.inner_width() as f64;
+    let height = window.inner_height() as f64;
+
+    LogicalSize { width, height }
+}
+
+pub fn is_fullscreen(canvas: &CanvasElement) -> bool {
+    match document().fullscreen_element() {
+        Some(elem) => {
+            let raw: Element = canvas.clone().into();
+            raw == elem
+        }
+        None => false,
+    }
+}