Web: improve custom cursor handling and add animated cursors

CHANGELOG.md

@@ -17,6 +17,7 @@ Unreleased` header.
   - Add `CustomCursor`
   - Add `CustomCursor::from_rgba` to allow creating cursor images from RGBA data.
   - Add `CustomCursorExtWebSys::from_url` to allow loading cursor images from URLs.
+  - Add `CustomCursorExtWebSys::from_animation` to allow creating animated cursors from other `CustomCursor`s.
 - On macOS, add services menu.
 - **Breaking:** On Web, remove queuing fullscreen request in absence of transient activation.
 - On Web, fix setting cursor icon overriding cursor visibility.

Cargo.toml

@@ -205,6 +205,7 @@ features = [
     'console',
     'CssStyleDeclaration',
     'Document',
+    'DomException',
     'DomRect',
     'DomRectReadOnly',
     'Element',
@@ -240,12 +241,16 @@ features = [
 ]
 
 [target.'cfg(target_family = "wasm")'.dependencies]
-atomic-waker = "1"
 js-sys = "0.3.64"
+pin-project = "1"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 web-time = "0.2"
 
+[target.'cfg(all(target_family = "wasm", target_feature = "atomics"))'.dependencies]
+atomic-waker = "1"
+concurrent-queue = { version = "2", default-features = false }
+
 [target.'cfg(target_family = "wasm")'.dev-dependencies]
 console_log = "1"
 web-sys = { version = "0.3.22", features = ['CanvasRenderingContext2d'] }

examples/custom_cursors.rs

@@ -8,6 +8,15 @@ use winit::{
     keyboard::Key,
     window::{CursorIcon, CustomCursor, WindowBuilder},
 };
+#[cfg(wasm_platform)]
+use {
+    std::sync::atomic::{AtomicU64, Ordering},
+    std::time::Duration,
+    winit::platform::web::CustomCursorExtWebSys,
+};
+
+#[cfg(wasm_platform)]
+static COUNTER: AtomicU64 = AtomicU64::new(0);
 
 fn decode_cursor<T>(bytes: &[u8], window_target: &EventLoopWindowTarget<T>) -> CustomCursor {
     let img = image::load_from_memory(bytes).unwrap().to_rgba8();
@@ -74,6 +83,45 @@ fn main() -> Result<(), impl std::error::Error> {
                     log::debug!("Setting cursor visibility to {:?}", cursor_visible);
                     window.set_cursor_visible(cursor_visible);
                 }
+                #[cfg(wasm_platform)]
+                Key::Character("4") => {
+                    log::debug!("Setting cursor to a random image from an URL");
+                    window.set_cursor(
+                        CustomCursor::from_url(
+                            format!(
+                                "https://picsum.photos/128?random={}",
+                                COUNTER.fetch_add(1, Ordering::Relaxed)
+                            ),
+                            64,
+                            64,
+                        )
+                        .build(_elwt),
+                    );
+                }
+                #[cfg(wasm_platform)]
+                Key::Character("5") => {
+                    log::debug!("Setting cursor to an animation");
+                    window.set_cursor(
+                        CustomCursor::from_animation(
+                            Duration::from_secs(3),
+                            vec![
+                                custom_cursors[0].clone(),
+                                custom_cursors[1].clone(),
+                                CustomCursor::from_url(
+                                    format!(
+                                        "https://picsum.photos/128?random={}",
+                                        COUNTER.fetch_add(1, Ordering::Relaxed)
+                                    ),
+                                    64,
+                                    64,
+                                )
+                                .build(_elwt),
+                            ],
+                        )
+                        .unwrap()
+                        .build(_elwt),
+                    );
+                }
                 _ => {}
             },
             WindowEvent::RedrawRequested => {

src/platform/web.rs

@@ -27,17 +27,24 @@
 //! [`border`]: https://developer.mozilla.org/en-US/docs/Web/CSS/border
 //! [`padding`]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding
 
-use crate::cursor::CustomCursorBuilder;
-use crate::event::Event;
-use crate::event_loop::EventLoop;
-use crate::event_loop::EventLoopWindowTarget;
-use crate::platform_impl::PlatformCustomCursorBuilder;
-use crate::window::CustomCursor;
-use crate::window::{Window, WindowBuilder};
+use std::error::Error;
+use std::fmt::{self, Display, Formatter};
+use std::future::Future;
+use std::pin::Pin;
+use std::task::{Context, Poll};
+use std::time::Duration;
 
 #[cfg(wasm_platform)]
 use web_sys::HtmlCanvasElement;
 
+use crate::cursor::CustomCursorBuilder;
+use crate::event::Event;
+use crate::event_loop::{EventLoop, EventLoopWindowTarget};
+#[cfg(wasm_platform)]
+use crate::platform_impl::CustomCursorFuture as PlatformCustomCursorFuture;
+use crate::platform_impl::{PlatformCustomCursor, PlatformCustomCursorBuilder};
+use crate::window::{CustomCursor, Window, WindowBuilder};
+
 #[cfg(not(wasm_platform))]
 #[doc(hidden)]
 pub struct HtmlCanvasElement;
@@ -234,15 +241,29 @@ pub enum PollStrategy {
 }
 
 pub trait CustomCursorExtWebSys {
+    /// Returns if this cursor is an animation.
+    fn is_animation(&self) -> bool;
+
     /// Creates a new cursor from a URL pointing to an image.
     /// It uses the [url css function](https://developer.mozilla.org/en-US/docs/Web/CSS/url),
     /// but browser support for image formats is inconsistent. Using [PNG] is recommended.
     ///
     /// [PNG]: https://en.wikipedia.org/wiki/PNG
     fn from_url(url: String, hotspot_x: u16, hotspot_y: u16) -> CustomCursorBuilder;
+
+    /// Crates a new animated cursor from multiple [`CustomCursor`]s.
+    /// Supplied `cursors` can't be empty or other animations.
+    fn from_animation(
+        duration: Duration,
+        cursors: Vec<CustomCursor>,
+    ) -> Result<CustomCursorBuilder, BadAnimation>;
 }
 
 impl CustomCursorExtWebSys for CustomCursor {
+    fn is_animation(&self) -> bool {
+        self.inner.animation
+    }
+
     fn from_url(url: String, hotspot_x: u16, hotspot_y: u16) -> CustomCursorBuilder {
         CustomCursorBuilder {
             inner: PlatformCustomCursorBuilder::Url {
@@ -252,4 +273,92 @@ impl CustomCursorExtWebSys for CustomCursor {
             },
         }
     }
+
+    fn from_animation(
+        duration: Duration,
+        cursors: Vec<CustomCursor>,
+    ) -> Result<CustomCursorBuilder, BadAnimation> {
+        if cursors.is_empty() {
+            return Err(BadAnimation::Empty);
+        }
+
+        if cursors.iter().any(CustomCursor::is_animation) {
+            return Err(BadAnimation::Animation);
+        }
+
+        Ok(CustomCursorBuilder {
+            inner: PlatformCustomCursorBuilder::Animation { duration, cursors },
+        })
+    }
+}
+
+/// An error produced when using [`CustomCursor::from_animation`] with invalid arguments.
+#[derive(Debug, Clone)]
+pub enum BadAnimation {
+    /// Produced when no cursors were supplied.
+    Empty,
+    /// Produced when a supplied cursor is an animation.
+    Animation,
+}
+
+impl fmt::Display for BadAnimation {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Empty => write!(f, "No cursors supplied"),
+            Self::Animation => write!(f, "A supplied cursor is an animtion"),
+        }
+    }
+}
+
+impl Error for BadAnimation {}
+
+pub trait CustomCursorBuilderExtWebSys {
+    /// Async version of [`CustomCursorBuilder::build()`] which waits until the
+    /// cursor has completely finished loading.
+    fn build_async<T>(self, window_target: &EventLoopWindowTarget<T>) -> CustomCursorFuture;
+}
+
+impl CustomCursorBuilderExtWebSys for CustomCursorBuilder {
+    fn build_async<T>(self, window_target: &EventLoopWindowTarget<T>) -> CustomCursorFuture {
+        CustomCursorFuture(PlatformCustomCursor::build_async(
+            self.inner,
+            &window_target.p,
+        ))
+    }
+}
+
+#[cfg(not(wasm_platform))]
+struct PlatformCustomCursorFuture;
+
+#[derive(Debug)]
+pub struct CustomCursorFuture(PlatformCustomCursorFuture);
+
+impl Future for CustomCursorFuture {
+    type Output = Result<CustomCursor, CustomCursorError>;
+
+    fn poll(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+        Pin::new(&mut self.0)
+            .poll(cx)
+            .map_ok(|cursor| CustomCursor { inner: cursor })
+    }
+}
+
+#[derive(Clone, Debug)]
+pub enum CustomCursorError {
+    Blob,
+    Decode(String),
+    Animation,
+}
+
+impl Display for CustomCursorError {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Blob => write!(f, "failed to create `Blob`"),
+            Self::Decode(error) => write!(f, "failed to decode image: {error}"),
+            Self::Animation => write!(
+                f,
+                "found `CustomCursor` that is an animation when building an animation"
+            ),
+        }
+    }
 }

src/platform_impl/web/async/abortable.rs

@@ -0,0 +1,102 @@
+use std::error::Error;
+use std::fmt::{self, Display, Formatter};
+use std::future::Future;
+use std::pin::Pin;
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+use std::task::{Context, Poll};
+
+use pin_project::pin_project;
+
+use super::AtomicWaker;
+
+#[pin_project]
+pub struct Abortable<F: Future> {
+    #[pin]
+    future: F,
+    shared: Arc<Shared>,
+}
+
+impl<F: Future> Abortable<F> {
+    pub fn new(handle: AbortHandle, future: F) -> Self {
+        Self {
+            future,
+            shared: handle.0,
+        }
+    }
+}
+
+impl<F: Future> Future for Abortable<F> {
+    type Output = Result<F::Output, Aborted>;
+
+    fn poll(mut self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> {
+        if self.shared.aborted.load(Ordering::Relaxed) {
+            return Poll::Ready(Err(Aborted));
+        }
+
+        if let Poll::Ready(value) = self.as_mut().project().future.poll(cx) {
+            return Poll::Ready(Ok(value));
+        }
+
+        self.shared.waker.register(cx.waker());
+
+        if self.shared.aborted.load(Ordering::Relaxed) {
+            return Poll::Ready(Err(Aborted));
+        }
+
+        Poll::Pending
+    }
+}
+
+#[derive(Debug)]
+struct Shared {
+    waker: AtomicWaker,
+    aborted: AtomicBool,
+}
+
+#[derive(Clone, Debug)]
+pub struct AbortHandle(Arc<Shared>);
+
+impl AbortHandle {
+    pub fn new() -> Self {
+        Self(Arc::new(Shared {
+            waker: AtomicWaker::new(),
+            aborted: AtomicBool::new(false),
+        }))
+    }
+
+    pub fn abort(&self) {
+        self.0.aborted.store(true, Ordering::Relaxed);
+        self.0.waker.wake()
+    }
+}
+
+#[derive(Debug)]
+pub struct DropAbortHandle(AbortHandle);
+
+impl DropAbortHandle {
+    pub fn new(handle: AbortHandle) -> Self {
+        Self(handle)
+    }
+
+    pub fn handle(&self) -> AbortHandle {
+        self.0.clone()
+    }
+}
+
+impl Drop for DropAbortHandle {
+    fn drop(&mut self) {
+        self.0.abort()
+    }
+}
+
+#[derive(Copy, Clone, Debug, Eq, Hash, PartialEq)]
+pub struct Aborted;
+
+impl Display for Aborted {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        write!(f, "`Abortable` future has been aborted")
+    }
+}
+
+impl Error for Aborted {}

src/platform_impl/web/async/atomic_waker.rs

@@ -0,0 +1,35 @@
+use std::cell::RefCell;
+use std::ops::Deref;
+use std::task::Waker;
+
+#[derive(Debug)]
+pub struct AtomicWaker(RefCell<Option<Waker>>);
+
+impl AtomicWaker {
+    pub const fn new() -> Self {
+        Self(RefCell::new(None))
+    }
+
+    pub fn register(&self, waker: &Waker) {
+        let mut this = self.0.borrow_mut();
+
+        if let Some(old_waker) = this.deref() {
+            if old_waker.will_wake(waker) {
+                return;
+            }
+        }
+
+        *this = Some(waker.clone());
+    }
+
+    pub fn wake(&self) {
+        if let Some(waker) = self.0.borrow_mut().take() {
+            waker.wake();
+        }
+    }
+}
+
+// SAFETY: Wasm without the `atomics` target feature is single-threaded.
+unsafe impl Send for AtomicWaker {}
+// SAFETY: Wasm without the `atomics` target feature is single-threaded.
+unsafe impl Sync for AtomicWaker {}