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/web/src/dom.rs

@@ -13,7 +13,7 @@ use dioxus_core::{ElementId, Template};
 use dioxus_interpreter_js::unified_bindings::Interpreter;
 use rustc_hash::FxHashMap;
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{Document, Element, Event};
+use web_sys::{Document, Element, Event, Node};
 
 use crate::{load_document, virtual_event_from_websys_event, Config, WebEventConverter};
 
@@ -146,6 +146,11 @@ fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Elem
         .expect("missing target")
         .dyn_into::<web_sys::Node>()
         .expect("not a valid node");
+
+    walk_element_for_id(&target)
+}
+
+fn walk_element_for_id(target: &Node) -> Option<(ElementId, web_sys::Element)> {
     let mut current_target_element = target.dyn_ref::<web_sys::Element>().cloned();
 
     loop {

packages/web/src/event.rs

@@ -112,6 +112,14 @@ impl HtmlEventConverter for WebEventConverter {
         downcast_event(event).raw.clone().into()
     }
 
+    #[inline(always)]
+    fn convert_resize_data(
+        &self,
+        event: &dioxus_html::PlatformEventData,
+    ) -> dioxus_html::ResizeData {
+        downcast_event(event).raw.clone().into()
+    }
+
     #[inline(always)]
     fn convert_scroll_data(
         &self,
@@ -158,11 +166,11 @@ impl HtmlEventConverter for WebEventConverter {
 /// A extension trait for web-sys events that provides a way to get the event as a web-sys event.
 pub trait WebEventExt<E> {
     /// Try to downcast this event as a `web-sys` event.
-    fn try_as_web_event(&self) -> Option<&E>;
+    fn try_as_web_event(&self) -> Option<E>;
 
     /// Downcast this event as a `web-sys` event.
     #[inline(always)]
-    fn as_web_event(&self) -> &E
+    fn as_web_event(&self) -> E
     where
         E: 'static,
     {
@@ -177,127 +185,137 @@ pub trait WebEventExt<E> {
 
 impl WebEventExt<web_sys::AnimationEvent> for dioxus_html::AnimationData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::AnimationEvent> {
-        self.downcast::<web_sys::AnimationEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::AnimationEvent> {
+        self.downcast::<web_sys::AnimationEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for dioxus_html::ClipboardData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::CompositionEvent> for dioxus_html::CompositionData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::CompositionEvent> {
-        self.downcast::<web_sys::CompositionEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::CompositionEvent> {
+        self.downcast::<web_sys::CompositionEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::MouseEvent> for dioxus_html::DragData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::MouseEvent> {
-        self.downcast::<WebDragData>().map(|data| &data.raw)
+    fn try_as_web_event(&self) -> Option<web_sys::MouseEvent> {
+        self.downcast::<WebDragData>()
+            .map(|data| &data.raw)
+            .cloned()
     }
 }
 
 impl WebEventExt<web_sys::FocusEvent> for dioxus_html::FocusData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::FocusEvent> {
-        self.downcast::<web_sys::FocusEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::FocusEvent> {
+        self.downcast::<web_sys::FocusEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for dioxus_html::FormData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<WebImageEvent> for dioxus_html::ImageData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&WebImageEvent> {
-        self.downcast::<WebImageEvent>()
+    fn try_as_web_event(&self) -> Option<WebImageEvent> {
+        self.downcast::<WebImageEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::KeyboardEvent> for dioxus_html::KeyboardData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::KeyboardEvent> {
-        self.downcast::<web_sys::KeyboardEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::KeyboardEvent> {
+        self.downcast::<web_sys::KeyboardEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for dioxus_html::MediaData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Element> for MountedData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Element> {
-        self.downcast::<web_sys::Element>()
+    fn try_as_web_event(&self) -> Option<web_sys::Element> {
+        self.downcast::<web_sys::Element>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::MouseEvent> for dioxus_html::MouseData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::MouseEvent> {
-        self.downcast::<web_sys::MouseEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::MouseEvent> {
+        self.downcast::<web_sys::MouseEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::PointerEvent> for dioxus_html::PointerData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::PointerEvent> {
-        self.downcast::<web_sys::PointerEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::PointerEvent> {
+        self.downcast::<web_sys::PointerEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for ScrollData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for dioxus_html::SelectionData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::Event> for dioxus_html::ToggleData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::Event> {
-        self.downcast::<web_sys::Event>()
+    fn try_as_web_event(&self) -> Option<web_sys::Event> {
+        self.downcast::<web_sys::Event>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::TouchEvent> for dioxus_html::TouchData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::TouchEvent> {
-        self.downcast::<web_sys::TouchEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::TouchEvent> {
+        self.downcast::<web_sys::TouchEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::TransitionEvent> for dioxus_html::TransitionData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::TransitionEvent> {
-        self.downcast::<web_sys::TransitionEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::TransitionEvent> {
+        self.downcast::<web_sys::TransitionEvent>().cloned()
     }
 }
 
 impl WebEventExt<web_sys::WheelEvent> for dioxus_html::WheelData {
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<&web_sys::WheelEvent> {
-        self.downcast::<web_sys::WheelEvent>()
+    fn try_as_web_event(&self) -> Option<web_sys::WheelEvent> {
+        self.downcast::<web_sys::WheelEvent>().cloned()
+    }
+}
+
+impl WebEventExt<web_sys::ResizeObserverEntry> for dioxus_html::ResizeData {
+    #[inline(always)]
+    fn try_as_web_event(&self) -> Option<web_sys::ResizeObserverEntry> {
+        self.downcast::<web_sys::CustomEvent>()
+            .and_then(|e| e.detail().dyn_into::<web_sys::ResizeObserverEntry>().ok())
     }
 }
 
@@ -325,6 +343,7 @@ pub(crate) fn load_document() -> Document {
         .expect("should have access to the Document")
 }
 
+#[derive(Clone)]
 struct WebImageEvent {
     raw: Event,
     error: bool,