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}