implement on mounted for desktop

packages/html/src/events/mounted.rs

@@ -5,12 +5,15 @@ use euclid::Rect;
 use std::{
     any::Any,
     fmt::{Display, Formatter},
+    future::Future,
+    pin::Pin,
     rc::Rc,
 };
 
 /// An Element that has been rendered and allows reading and modifying information about it.
 ///
 /// Different platforms will have different implementations and different levels of support for this trait. Renderers that do not support specific features will return `None` for those queries.
+// we can not use async_trait here because it does not create a trait that is object safe
 pub trait RenderedElementBacking {
     /// Get the renderer specific element for the given id
     fn get_raw_element(&self) -> MountedResult<&dyn Any> {
@@ -18,26 +21,35 @@ pub trait RenderedElementBacking {
     }
 
     /// Get the bounding rectangle of the element relative to the viewport (this does not include the scroll position)
-    fn get_client_rect(&self) -> MountedResult<Rect<f64, f64>> {
-        Err(MountedError::NotSupported)
+    #[allow(clippy::type_complexity)]
+    fn get_client_rect(&self) -> Pin<Box<dyn Future<Output = MountedResult<Rect<f64, f64>>>>> {
+        Box::pin(async { Err(MountedError::NotSupported) })
     }
 
     /// Scroll to make the element visible
-    fn scroll_to(&self, _behavior: ScrollBehavior) -> MountedResult<()> {
-        Err(MountedError::NotSupported)
+    fn scroll_to(
+        &self,
+        _behavior: ScrollBehavior,
+    ) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
+        Box::pin(async { Err(MountedError::NotSupported) })
     }
 
     /// Set the focus on the element
-    fn set_focus(&self, _focus: bool) -> MountedResult<()> {
-        Err(MountedError::NotSupported)
+    fn set_focus(&self, _focus: bool) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
+        Box::pin(async { Err(MountedError::NotSupported) })
     }
 }
 
+impl RenderedElementBacking for () {}
+
 /// The way that scrolling should be performed
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
 pub enum ScrollBehavior {
     /// Scroll to the element immediately
+    #[cfg_attr(feature = "serialize", serde(rename = "instant"))]
     Instant,
     /// Scroll to the element smoothly
+    #[cfg_attr(feature = "serialize", serde(rename = "smooth"))]
     Smooth,
 }
 
@@ -62,18 +74,18 @@ impl MountedData {
     }
 
     /// Get the bounding rectangle of the element relative to the viewport (this does not include the scroll position)
-    pub fn get_client_rect(&self) -> MountedResult<Rect<f64, f64>> {
-        self.inner.get_client_rect()
+    pub async fn get_client_rect(&self) -> MountedResult<Rect<f64, f64>> {
+        self.inner.get_client_rect().await
     }
 
     /// Scroll to make the element visible
-    pub fn scroll_to(&self, behavior: ScrollBehavior) -> MountedResult<()> {
-        self.inner.scroll_to(behavior)
+    pub async fn scroll_to(&self, behavior: ScrollBehavior) -> MountedResult<()> {
+        self.inner.scroll_to(behavior).await
     }
 
     /// Set the focus on the element
-    pub fn set_focus(&self, focus: bool) -> MountedResult<()> {
-        self.inner.set_focus(focus)
+    pub async fn set_focus(&self, focus: bool) -> MountedResult<()> {
+        self.inner.set_focus(focus).await
     }
 }
 

packages/html/src/transit.rs

@@ -2,6 +2,7 @@ use std::{any::Any, rc::Rc};
 
 use crate::events::*;
 use dioxus_core::ElementId;
+use euclid::Rect;
 use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Debug, Clone, PartialEq)]
@@ -113,6 +114,9 @@ fn fun_name(
         // Toggle
         "toggle" => Toggle(de(data)?),
 
+        // Mounted
+        "mounted" => Mounted,
+
         // ImageData => "load" | "error";
         // OtherData => "abort" | "afterprint" | "beforeprint" | "beforeunload" | "hashchange" | "languagechange" | "message" | "offline" | "online" | "pagehide" | "pageshow" | "popstate" | "rejectionhandled" | "storage" | "unhandledrejection" | "unload" | "userproximity" | "vrdisplayactivate" | "vrdisplayblur" | "vrdisplayconnect" | "vrdisplaydeactivate" | "vrdisplaydisconnect" | "vrdisplayfocus" | "vrdisplaypointerrestricted" | "vrdisplaypointerunrestricted" | "vrdisplaypresentchange";
         other => {
@@ -151,6 +155,7 @@ pub enum EventData {
     Animation(AnimationData),
     Transition(TransitionData),
     Toggle(ToggleData),
+    Mounted,
 }
 
 impl EventData {
@@ -172,6 +177,7 @@ impl EventData {
             EventData::Animation(data) => Rc::new(data) as Rc<dyn Any>,
             EventData::Transition(data) => Rc::new(data) as Rc<dyn Any>,
             EventData::Toggle(data) => Rc::new(data) as Rc<dyn Any>,
+            EventData::Mounted => Rc::new(MountedData::new(())) as Rc<dyn Any>,
         }
     }
 }
@@ -215,3 +221,49 @@ fn test_back_and_forth() {
 
     assert_eq!(data, p);
 }
+
+/// Message to update a node to support MountedData
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+pub struct NodeUpdate {
+    /// The id of the node to update
+    pub id: u32,
+    /// The id of the request
+    pub request_id: usize,
+    /// The data to update the node with
+    pub data: NodeUpdateData,
+}
+
+/// Message to update a node to support MountedData
+#[cfg_attr(
+    feature = "serialize",
+    derive(serde::Serialize, serde::Deserialize),
+    serde(tag = "type")
+)]
+pub enum NodeUpdateData {
+    SetFocus { focus: bool },
+    GetClientRect {},
+    ScrollTo { behavior: ScrollBehavior },
+}
+
+/// The result of a element query
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[derive(Debug, Clone, PartialEq)]
+pub struct MountedReturn {
+    /// A unique id for the query
+    pub id: usize,
+    /// The result of the query
+    pub data: Option<MountedReturnData>,
+}
+
+/// The data of a element query
+#[derive(Debug, Clone, PartialEq)]
+#[cfg_attr(
+    feature = "serialize",
+    derive(serde::Serialize, serde::Deserialize),
+    serde(tag = "type")
+)]
+pub enum MountedReturnData {
+    SetFocus(()),
+    GetClientRect(Rect<f64, f64>),
+    ScrollTo(()),
+}

packages/html/src/web_sys_bind/events.rs

@@ -9,6 +9,8 @@ use crate::{
 };
 use keyboard_types::{Code, Key, Modifiers};
 use std::convert::TryInto;
+use std::future::Future;
+use std::pin::Pin;
 use std::str::FromStr;
 use wasm_bindgen::{JsCast, JsValue};
 use web_sys::{
@@ -203,19 +205,25 @@ impl From<&web_sys::Element> for MountedData {
 }
 
 impl RenderedElementBacking for web_sys::Element {
-    fn get_client_rect(&self) -> MountedResult<euclid::Rect<f64, f64>> {
+    fn get_client_rect(
+        &self,
+    ) -> Pin<Box<dyn Future<Output = MountedResult<euclid::Rect<f64, f64>>>>> {
         let rect = self.get_bounding_client_rect();
-        Ok(euclid::Rect::new(
+        let result = Ok(euclid::Rect::new(
             euclid::Point2D::new(rect.left(), rect.top()),
             euclid::Size2D::new(rect.width(), rect.height()),
-        ))
+        ));
+        Box::pin(async { result })
     }
 
     fn get_raw_element(&self) -> MountedResult<&dyn std::any::Any> {
         Ok(self)
     }
 
-    fn scroll_to(&self, behavior: ScrollBehavior) -> MountedResult<()> {
+    fn scroll_to(
+        &self,
+        behavior: ScrollBehavior,
+    ) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
         match behavior {
             ScrollBehavior::Instant => self.scroll_into_view_with_scroll_into_view_options(
                 ScrollIntoViewOptions::new().behavior(web_sys::ScrollBehavior::Instant),
@@ -225,16 +233,18 @@ impl RenderedElementBacking for web_sys::Element {
             ),
         }
 
-        Ok(())
+        Box::pin(async { Ok(()) })
     }
 
-    fn set_focus(&self, focus: bool) -> MountedResult<()> {
-        self.dyn_ref::<web_sys::HtmlElement>()
+    fn set_focus(&self, focus: bool) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
+        let result = self
+            .dyn_ref::<web_sys::HtmlElement>()
             .ok_or_else(|| MountedError::OperationFailed(Box::new(FocusError(self.into()))))
             .and_then(|e| {
                 (if focus { e.focus() } else { e.blur() })
                     .map_err(|err| MountedError::OperationFailed(Box::new(FocusError(err))))
-            })
+            });
+        Box::pin(async { result })
     }
 }