rio_winit_fork/platform/
web.rs

1//! # Web
2//!
3//! The officially supported browsers are Chrome, Firefox and Safari 13.1+,
4//! though forks of these should work fine.
5//!
6//! Winit supports compiling to the `wasm32-unknown-unknown` target with
7//! `web-sys`.
8//!
9//! On the web platform, a Winit window is backed by a `<canvas>` element. You
10//! can either [provide Winit with a `<canvas>` element][with_canvas], or
11//! [let Winit create a `<canvas>` element which you can then retrieve][get]
12//! and insert it into the DOM yourself.
13//!
14//! Currently, there is no example code using Winit on Web, see [#3473]. For
15//! information on using Rust on WebAssembly, check out the [Rust and
16//! WebAssembly book].
17//!
18//! [with_canvas]: WindowAttributesExtWebSys::with_canvas
19//! [get]: WindowExtWebSys::canvas
20//! [#3473]: https://github.com/rust-windowing/winit/issues/3473
21//! [Rust and WebAssembly book]: https://rustwasm.github.io/book/
22//!
23//! ## CSS properties
24//!
25//! It is recommended **not** to apply certain CSS properties to the canvas:
26//! - [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
27//! - [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
28//! - [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
29//!
30//! The following APIs can't take them into account and will therefore provide inaccurate results:
31//! - [`WindowEvent::Resized`] and [`Window::(set_)inner_size()`]
32//! - [`WindowEvent::Occluded`]
33//! - [`WindowEvent::CursorMoved`], [`WindowEvent::CursorEntered`], [`WindowEvent::CursorLeft`], and
34//!   [`WindowEvent::Touch`].
35//! - [`Window::set_outer_position()`]
36//!
37//! [`WindowEvent::Resized`]: crate::event::WindowEvent::Resized
38//! [`Window::(set_)inner_size()`]: crate::window::Window::inner_size
39//! [`WindowEvent::Occluded`]: crate::event::WindowEvent::Occluded
40//! [`WindowEvent::CursorMoved`]: crate::event::WindowEvent::CursorMoved
41//! [`WindowEvent::CursorEntered`]: crate::event::WindowEvent::CursorEntered
42//! [`WindowEvent::CursorLeft`]: crate::event::WindowEvent::CursorLeft
43//! [`WindowEvent::Touch`]: crate::event::WindowEvent::Touch
44//! [`Window::set_outer_position()`]: crate::window::Window::set_outer_position
45
46use std::error::Error;
47use std::fmt::{self, Display, Formatter};
48use std::future::Future;
49use std::pin::Pin;
50use std::task::{Context, Poll};
51use std::time::Duration;
52
53#[cfg(web_platform)]
54use web_sys::HtmlCanvasElement;
55
56use crate::application::ApplicationHandler;
57use crate::cursor::CustomCursorSource;
58use crate::event::Event;
59use crate::event_loop::{self, ActiveEventLoop, EventLoop};
60#[cfg(web_platform)]
61use crate::platform_impl::CustomCursorFuture as PlatformCustomCursorFuture;
62use crate::platform_impl::PlatformCustomCursorSource;
63use crate::window::{CustomCursor, Window, WindowAttributes};
64
65#[cfg(not(web_platform))]
66#[doc(hidden)]
67pub struct HtmlCanvasElement;
68
69pub trait WindowExtWebSys {
70    /// Only returns the canvas if called from inside the window context (the
71    /// main thread).
72    fn canvas(&self) -> Option<HtmlCanvasElement>;
73
74    /// Returns [`true`] if calling `event.preventDefault()` is enabled.
75    ///
76    /// See [`Window::set_prevent_default()`] for more details.
77    fn prevent_default(&self) -> bool;
78
79    /// Sets whether `event.preventDefault()` should be called on events on the
80    /// canvas that have side effects.
81    ///
82    /// For example, by default using the mouse wheel would cause the page to scroll, enabling this
83    /// would prevent that.
84    ///
85    /// Some events are impossible to prevent. E.g. Firefox allows to access the native browser
86    /// context menu with Shift+Rightclick.
87    fn set_prevent_default(&self, prevent_default: bool);
88}
89
90impl WindowExtWebSys for Window {
91    #[inline]
92    fn canvas(&self) -> Option<HtmlCanvasElement> {
93        self.window.canvas()
94    }
95
96    fn prevent_default(&self) -> bool {
97        self.window.prevent_default()
98    }
99
100    fn set_prevent_default(&self, prevent_default: bool) {
101        self.window.set_prevent_default(prevent_default)
102    }
103}
104
105pub trait WindowAttributesExtWebSys {
106    /// Pass an [`HtmlCanvasElement`] to be used for this [`Window`]. If [`None`],
107    /// [`WindowAttributes::default()`] will create one.
108    ///
109    /// In any case, the canvas won't be automatically inserted into the web page.
110    ///
111    /// [`None`] by default.
112    #[cfg_attr(not(web_platform), doc = "", doc = "[`HtmlCanvasElement`]: #only-available-on-wasm")]
113    fn with_canvas(self, canvas: Option<HtmlCanvasElement>) -> Self;
114
115    /// Sets whether `event.preventDefault()` should be called on events on the
116    /// canvas that have side effects.
117    ///
118    /// See [`Window::set_prevent_default()`] for more details.
119    ///
120    /// Enabled by default.
121    fn with_prevent_default(self, prevent_default: bool) -> Self;
122
123    /// Whether the canvas should be focusable using the tab key. This is necessary to capture
124    /// canvas keyboard events.
125    ///
126    /// Enabled by default.
127    fn with_focusable(self, focusable: bool) -> Self;
128
129    /// On window creation, append the canvas element to the web page if it isn't already.
130    ///
131    /// Disabled by default.
132    fn with_append(self, append: bool) -> Self;
133}
134
135impl WindowAttributesExtWebSys for WindowAttributes {
136    fn with_canvas(mut self, canvas: Option<HtmlCanvasElement>) -> Self {
137        self.platform_specific.set_canvas(canvas);
138        self
139    }
140
141    fn with_prevent_default(mut self, prevent_default: bool) -> Self {
142        self.platform_specific.prevent_default = prevent_default;
143        self
144    }
145
146    fn with_focusable(mut self, focusable: bool) -> Self {
147        self.platform_specific.focusable = focusable;
148        self
149    }
150
151    fn with_append(mut self, append: bool) -> Self {
152        self.platform_specific.append = append;
153        self
154    }
155}
156
157/// Additional methods on `EventLoop` that are specific to the web.
158pub trait EventLoopExtWebSys {
159    /// A type provided by the user that can be passed through `Event::UserEvent`.
160    type UserEvent: 'static;
161
162    /// Initializes the winit event loop.
163    ///
164    /// Unlike
165    #[cfg_attr(all(web_platform, target_feature = "exception-handling"), doc = "`run_app()`")]
166    #[cfg_attr(
167        not(all(web_platform, target_feature = "exception-handling")),
168        doc = "[`run_app()`]"
169    )]
170    /// [^1], this returns immediately, and doesn't throw an exception in order to
171    /// satisfy its [`!`] return type.
172    ///
173    /// Once the event loop has been destroyed, it's possible to reinitialize another event loop
174    /// by calling this function again. This can be useful if you want to recreate the event loop
175    /// while the WebAssembly module is still loaded. For example, this can be used to recreate the
176    /// event loop when switching between tabs on a single page application.
177    #[rustfmt::skip]
178    ///
179    #[cfg_attr(
180        not(all(web_platform, target_feature = "exception-handling")),
181        doc = "[`run_app()`]: EventLoop::run_app()"
182    )]
183    /// [^1]: `run_app()` is _not_ available on WASM when the target supports `exception-handling`.
184    fn spawn_app<A: ApplicationHandler<Self::UserEvent> + 'static>(self, app: A);
185
186    /// See [`spawn_app`].
187    ///
188    /// [`spawn_app`]: Self::spawn_app
189    #[deprecated = "use EventLoopExtWebSys::spawn_app"]
190    fn spawn<F>(self, event_handler: F)
191    where
192        F: 'static + FnMut(Event<Self::UserEvent>, &ActiveEventLoop);
193}
194
195impl<T> EventLoopExtWebSys for EventLoop<T> {
196    type UserEvent = T;
197
198    fn spawn_app<A: ApplicationHandler<Self::UserEvent> + 'static>(self, mut app: A) {
199        self.event_loop.spawn(move |event, event_loop| {
200            event_loop::dispatch_event_for_app(&mut app, event_loop, event)
201        });
202    }
203
204    fn spawn<F>(self, event_handler: F)
205    where
206        F: 'static + FnMut(Event<Self::UserEvent>, &ActiveEventLoop),
207    {
208        self.event_loop.spawn(event_handler)
209    }
210}
211
212pub trait ActiveEventLoopExtWebSys {
213    /// Sets the strategy for [`ControlFlow::Poll`].
214    ///
215    /// See [`PollStrategy`].
216    ///
217    /// [`ControlFlow::Poll`]: crate::event_loop::ControlFlow::Poll
218    fn set_poll_strategy(&self, strategy: PollStrategy);
219
220    /// Gets the strategy for [`ControlFlow::Poll`].
221    ///
222    /// See [`PollStrategy`].
223    ///
224    /// [`ControlFlow::Poll`]: crate::event_loop::ControlFlow::Poll
225    fn poll_strategy(&self) -> PollStrategy;
226
227    /// Async version of [`ActiveEventLoop::create_custom_cursor()`] which waits until the
228    /// cursor has completely finished loading.
229    fn create_custom_cursor_async(&self, source: CustomCursorSource) -> CustomCursorFuture;
230}
231
232impl ActiveEventLoopExtWebSys for ActiveEventLoop {
233    #[inline]
234    fn create_custom_cursor_async(&self, source: CustomCursorSource) -> CustomCursorFuture {
235        self.p.create_custom_cursor_async(source)
236    }
237
238    #[inline]
239    fn set_poll_strategy(&self, strategy: PollStrategy) {
240        self.p.set_poll_strategy(strategy);
241    }
242
243    #[inline]
244    fn poll_strategy(&self) -> PollStrategy {
245        self.p.poll_strategy()
246    }
247}
248
249/// Strategy used for [`ControlFlow::Poll`][crate::event_loop::ControlFlow::Poll].
250#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
251pub enum PollStrategy {
252    /// Uses [`Window.requestIdleCallback()`] to queue the next event loop. If not available
253    /// this will fallback to [`setTimeout()`].
254    ///
255    /// This strategy will wait for the browser to enter an idle period before running and might
256    /// be affected by browser throttling.
257    ///
258    /// [`Window.requestIdleCallback()`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
259    /// [`setTimeout()`]: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
260    IdleCallback,
261    /// Uses the [Prioritized Task Scheduling API] to queue the next event loop. If not available
262    /// this will fallback to [`setTimeout()`].
263    ///
264    /// This strategy will run as fast as possible without disturbing users from interacting with
265    /// the page and is not affected by browser throttling.
266    ///
267    /// This is the default strategy.
268    ///
269    /// [Prioritized Task Scheduling API]: https://developer.mozilla.org/en-US/docs/Web/API/Prioritized_Task_Scheduling_API
270    /// [`setTimeout()`]: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
271    #[default]
272    Scheduler,
273}
274
275pub trait CustomCursorExtWebSys {
276    /// Returns if this cursor is an animation.
277    fn is_animation(&self) -> bool;
278
279    /// Creates a new cursor from a URL pointing to an image.
280    /// It uses the [url css function](https://developer.mozilla.org/en-US/docs/Web/CSS/url),
281    /// but browser support for image formats is inconsistent. Using [PNG] is recommended.
282    ///
283    /// [PNG]: https://en.wikipedia.org/wiki/PNG
284    fn from_url(url: String, hotspot_x: u16, hotspot_y: u16) -> CustomCursorSource;
285
286    /// Crates a new animated cursor from multiple [`CustomCursor`]s.
287    /// Supplied `cursors` can't be empty or other animations.
288    fn from_animation(
289        duration: Duration,
290        cursors: Vec<CustomCursor>,
291    ) -> Result<CustomCursorSource, BadAnimation>;
292}
293
294impl CustomCursorExtWebSys for CustomCursor {
295    fn is_animation(&self) -> bool {
296        self.inner.animation
297    }
298
299    fn from_url(url: String, hotspot_x: u16, hotspot_y: u16) -> CustomCursorSource {
300        CustomCursorSource { inner: PlatformCustomCursorSource::Url { url, hotspot_x, hotspot_y } }
301    }
302
303    fn from_animation(
304        duration: Duration,
305        cursors: Vec<CustomCursor>,
306    ) -> Result<CustomCursorSource, BadAnimation> {
307        if cursors.is_empty() {
308            return Err(BadAnimation::Empty);
309        }
310
311        if cursors.iter().any(CustomCursor::is_animation) {
312            return Err(BadAnimation::Animation);
313        }
314
315        Ok(CustomCursorSource {
316            inner: PlatformCustomCursorSource::Animation { duration, cursors },
317        })
318    }
319}
320
321/// An error produced when using [`CustomCursor::from_animation`] with invalid arguments.
322#[derive(Debug, Clone)]
323pub enum BadAnimation {
324    /// Produced when no cursors were supplied.
325    Empty,
326    /// Produced when a supplied cursor is an animation.
327    Animation,
328}
329
330impl fmt::Display for BadAnimation {
331    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
332        match self {
333            Self::Empty => write!(f, "No cursors supplied"),
334            Self::Animation => write!(f, "A supplied cursor is an animtion"),
335        }
336    }
337}
338
339impl Error for BadAnimation {}
340
341#[cfg(not(web_platform))]
342struct PlatformCustomCursorFuture;
343
344#[derive(Debug)]
345pub struct CustomCursorFuture(pub(crate) PlatformCustomCursorFuture);
346
347impl Future for CustomCursorFuture {
348    type Output = Result<CustomCursor, CustomCursorError>;
349
350    fn poll(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
351        Pin::new(&mut self.0).poll(cx).map_ok(|cursor| CustomCursor { inner: cursor })
352    }
353}
354
355#[derive(Clone, Debug)]
356pub enum CustomCursorError {
357    Blob,
358    Decode(String),
359    Animation,
360}
361
362impl Display for CustomCursorError {
363    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
364        match self {
365            Self::Blob => write!(f, "failed to create `Blob`"),
366            Self::Decode(error) => write!(f, "failed to decode image: {error}"),
367            Self::Animation => {
368                write!(f, "found `CustomCursor` that is an animation when building an animation")
369            },
370        }
371    }
372}