Add the onresize event handler to Element (#2479)

* Add the capability to handle resize event for web target

* Add the capability to handle resize event for desktop target

* Return all the sizes, not just the first one

* Fix conversion from platform to generic ResizedData for liveview

* Update the generated interpreter js code base

* Fix clippy warnings

* Fix inconsistent use of block_size and inline_size

* Rename `onresized` event to `onresize`

* Remove the the special-casing logic from the binding logic

* Propagating the resize events using CustomEvent

* Fix case convention in core ts

* revert changes to unified bindings

* Cleanup as suggested

* add a resize example

* Fix desktop resize events

* remove tracing from resize example

* use the raw resize entry so we can downcast on web

* remove unused ResizeEventDetail

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>

packages/html/src/events/mod.rs

@@ -134,6 +134,8 @@ pub trait HtmlEventConverter: Send + Sync {
     fn convert_mouse_data(&self, event: &PlatformEventData) -> MouseData;
     /// Convert a general event to a pointer data event
     fn convert_pointer_data(&self, event: &PlatformEventData) -> PointerData;
+    /// Convert a general event to a resize data event
+    fn convert_resize_data(&self, event: &PlatformEventData) -> ResizeData;
     /// Convert a general event to a scroll data event
     fn convert_scroll_data(&self, event: &PlatformEventData) -> ScrollData;
     /// Convert a general event to a selection data event
@@ -220,6 +222,12 @@ impl From<&PlatformEventData> for PointerData {
     }
 }
 
+impl From<&PlatformEventData> for ResizeData {
+    fn from(val: &PlatformEventData) -> Self {
+        with_event_converter(|c| c.convert_resize_data(val))
+    }
+}
+
 impl From<&PlatformEventData> for ScrollData {
     fn from(val: &PlatformEventData) -> Self {
         with_event_converter(|c| c.convert_scroll_data(val))
@@ -268,6 +276,7 @@ mod media;
 mod mounted;
 mod mouse;
 mod pointer;
+mod resize;
 mod scroll;
 mod selection;
 mod toggle;
@@ -287,6 +296,7 @@ pub use media::*;
 pub use mounted::*;
 pub use mouse::*;
 pub use pointer::*;
+pub use resize::*;
 pub use scroll::*;
 pub use selection::*;
 pub use toggle::*;
@@ -367,6 +377,7 @@ pub fn event_bubbles(evt: &str) -> bool {
         "playing" => false,
         "progress" => false,
         "ratechange" => false,
+        "resize" => false,
         "seeked" => false,
         "seeking" => false,
         "stalled" => false,

packages/html/src/events/resize.rs

@@ -0,0 +1,168 @@
+use std::fmt::{Display, Formatter};
+
+pub struct ResizeData {
+    inner: Box<dyn HasResizeData>,
+}
+
+impl<E: HasResizeData> From<E> for ResizeData {
+    fn from(e: E) -> Self {
+        Self { inner: Box::new(e) }
+    }
+}
+
+impl ResizeData {
+    /// Create a new ResizeData
+    pub fn new(inner: impl HasResizeData + 'static) -> Self {
+        Self {
+            inner: Box::new(inner),
+        }
+    }
+
+    /// Get the border box size of the observed element
+    pub fn get_border_box_size(&self) -> ResizeResult<PixelsSize> {
+        self.inner.get_border_box_size()
+    }
+
+    /// Get the content box size of the observed element
+    pub fn get_content_box_size(&self) -> ResizeResult<PixelsSize> {
+        self.inner.get_content_box_size()
+    }
+
+    /// Downcast this event to a concrete event type
+    pub fn downcast<T: 'static>(&self) -> Option<&T> {
+        self.inner.as_any().downcast_ref::<T>()
+    }
+}
+
+impl std::fmt::Debug for ResizeData {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("ResizeData")
+            .field("border_box_size", &self.inner.get_border_box_size())
+            .field("content_box_size", &self.inner.get_content_box_size())
+            .finish()
+    }
+}
+
+impl PartialEq for ResizeData {
+    fn eq(&self, _: &Self) -> bool {
+        true
+    }
+}
+
+#[cfg(feature = "serialize")]
+/// A serialized version of ResizeData
+#[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone)]
+pub struct SerializedResizeData {
+    pub border_box_size: PixelsSize,
+    pub content_box_size: PixelsSize,
+}
+
+#[cfg(feature = "serialize")]
+impl SerializedResizeData {
+    /// Create a new SerializedResizeData
+    pub fn new(border_box_size: PixelsSize, content_box_size: PixelsSize) -> Self {
+        Self {
+            border_box_size,
+            content_box_size,
+        }
+    }
+}
+
+#[cfg(feature = "serialize")]
+impl From<&ResizeData> for SerializedResizeData {
+    fn from(data: &ResizeData) -> Self {
+        Self::new(
+            data.get_border_box_size().unwrap(),
+            data.get_content_box_size().unwrap(),
+        )
+    }
+}
+
+#[cfg(feature = "serialize")]
+impl HasResizeData for SerializedResizeData {
+    /// Get the border box size of the observed element
+    fn get_border_box_size(&self) -> ResizeResult<PixelsSize> {
+        Ok(self.border_box_size)
+    }
+
+    /// Get the content box size of the observed element
+    fn get_content_box_size(&self) -> ResizeResult<PixelsSize> {
+        Ok(self.content_box_size)
+    }
+
+    fn as_any(&self) -> &dyn std::any::Any {
+        self
+    }
+}
+
+#[cfg(feature = "serialize")]
+impl serde::Serialize for ResizeData {
+    fn serialize<S: serde::Serializer>(&self, serializer: S) -> Result<S::Ok, S::Error> {
+        SerializedResizeData::from(self).serialize(serializer)
+    }
+}
+
+#[cfg(feature = "serialize")]
+impl<'de> serde::Deserialize<'de> for ResizeData {
+    fn deserialize<D: serde::Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
+        let data = SerializedResizeData::deserialize(deserializer)?;
+        Ok(Self {
+            inner: Box::new(data),
+        })
+    }
+}
+
+pub trait HasResizeData: std::any::Any {
+    /// Get the border box size of the observed element
+    fn get_border_box_size(&self) -> ResizeResult<PixelsSize> {
+        Err(ResizeError::NotSupported)
+    }
+    /// Get the content box size of the observed element
+    fn get_content_box_size(&self) -> ResizeResult<PixelsSize> {
+        Err(ResizeError::NotSupported)
+    }
+
+    /// return self as Any
+    fn as_any(&self) -> &dyn std::any::Any;
+}
+
+use dioxus_core::Event;
+
+use crate::geometry::PixelsSize;
+
+pub type ResizeEvent = Event<ResizeData>;
+
+impl_event! {
+    ResizeData;
+
+    /// onresize
+    onresize
+}
+
+/// The ResizeResult type for the ResizeData
+pub type ResizeResult<T> = Result<T, ResizeError>;
+
+#[derive(Debug)]
+/// The error type for the MountedData
+#[non_exhaustive]
+pub enum ResizeError {
+    /// The renderer does not support the requested operation
+    NotSupported,
+    /// The element was not found
+    OperationFailed(Box<dyn std::error::Error>),
+}
+
+impl Display for ResizeError {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        match self {
+            ResizeError::NotSupported => {
+                write!(f, "The renderer does not support the requested operation")
+            }
+            ResizeError::OperationFailed(e) => {
+                write!(f, "The operation failed: {}", e)
+            }
+        }
+    }
+}
+
+impl std::error::Error for ResizeError {}

packages/html/src/transit.rs

@@ -99,6 +99,9 @@ fn deserialize_raw(name: &str, data: &serde_json::Value) -> Result<EventData, se
         // Touch
         "touchcancel" | "touchend" | "touchmove" | "touchstart" => Touch(de(data)?),
 
+        // Resize
+        "resize" => Resize(de(data)?),
+
         // Scroll
         "scroll" => Scroll(de(data)?),
 
@@ -158,6 +161,7 @@ pub enum EventData {
     Pointer(SerializedPointerData),
     Selection(SerializedSelectionData),
     Touch(SerializedTouchData),
+    Resize(SerializedResizeData),
     Scroll(SerializedScrollData),
     Wheel(SerializedWheelData),
     Media(SerializedMediaData),
@@ -197,6 +201,9 @@ impl EventData {
             EventData::Touch(data) => {
                 Rc::new(PlatformEventData::new(Box::new(data))) as Rc<dyn Any>
             }
+            EventData::Resize(data) => {
+                Rc::new(PlatformEventData::new(Box::new(data))) as Rc<dyn Any>
+            }
             EventData::Scroll(data) => {
                 Rc::new(PlatformEventData::new(Box::new(data))) as Rc<dyn Any>
             }
@@ -360,6 +367,13 @@ impl HtmlEventConverter for SerializedHtmlEventConverter {
             .unwrap()
             .into()
     }
+    fn convert_resize_data(&self, event: &PlatformEventData) -> ResizeData {
+        event
+            .downcast::<SerializedResizeData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
 
     fn convert_scroll_data(&self, event: &PlatformEventData) -> ScrollData {
         event

packages/html/src/web_sys_bind/events.rs

@@ -4,15 +4,17 @@ use crate::events::{
     TransitionData, WheelData,
 };
 use crate::file_data::HasFileData;
+use crate::geometry::PixelsSize;
 use crate::geometry::{ClientPoint, ElementPoint, PagePoint, ScreenPoint};
 use crate::input_data::{decode_key_location, decode_mouse_button_set, MouseButton};
 use crate::prelude::*;
 use keyboard_types::{Code, Key, Modifiers};
 use std::str::FromStr;
 use wasm_bindgen::JsCast;
+use web_sys::{js_sys, ResizeObserverEntry};
 use web_sys::{
-    AnimationEvent, CompositionEvent, Event, KeyboardEvent, MouseEvent, PointerEvent, Touch,
-    TouchEvent, TransitionEvent, WheelEvent,
+    AnimationEvent, CompositionEvent, CustomEvent, Event, KeyboardEvent, MouseEvent, PointerEvent,
+    Touch, TouchEvent, TransitionEvent, WheelEvent,
 };
 
 macro_rules! uncheck_convert {
@@ -51,6 +53,22 @@ uncheck_convert![
     web_sys::FocusEvent       => FocusData,
 ];
 
+impl From<Event> for ResizeData {
+    #[inline]
+    fn from(e: Event) -> Self {
+        <ResizeData as From<&Event>>::from(&e)
+    }
+}
+
+impl From<&Event> for ResizeData {
+    #[inline]
+    fn from(e: &Event) -> Self {
+        let e: &CustomEvent = e.unchecked_ref();
+        let value = e.detail();
+        Self::from(value.unchecked_into::<ResizeObserverEntry>())
+    }
+}
+
 impl HasCompositionData for CompositionEvent {
     fn data(&self) -> std::string::String {
         self.data().unwrap_or_default()
@@ -571,6 +589,32 @@ impl crate::RenderedElementBacking for web_sys::Element {
     }
 }
 
+fn extract_first_size(resize_observer_output: js_sys::Array) -> ResizeResult<PixelsSize> {
+    let first = resize_observer_output.get(0);
+    let size = first.unchecked_into::<web_sys::ResizeObserverSize>();
+
+    // inline_size matches the width of the element if its writing-mode is horizontal, the height otherwise
+    let inline_size = size.inline_size();
+    // block_size matches the height of the element if its writing-mode is horizontal, the width otherwise
+    let block_size = size.block_size();
+
+    Ok(PixelsSize::new(inline_size, block_size))
+}
+
+impl HasResizeData for ResizeObserverEntry {
+    fn as_any(&self) -> &dyn std::any::Any {
+        self
+    }
+
+    fn get_border_box_size(&self) -> ResizeResult<PixelsSize> {
+        extract_first_size(self.border_box_size())
+    }
+
+    fn get_content_box_size(&self) -> ResizeResult<PixelsSize> {
+        extract_first_size(self.content_box_size())
+    }
+}
+
 impl HasScrollData for Event {
     fn as_any(&self) -> &dyn std::any::Any {
         self