use DragEvent not MouseEvent for drag events (#3137)

* use DragEvent not MouseEvent for drag events

* Simplify drag events and remove WebDragData struct

* use DragEvent not MouseEvent for drag events

* re-add the web_sys event reference for drag + mouse data

* remove now vestigial impls for MouseEvent

---------

Co-authored-by: Matt Hunzinger <matthunz2@gmail.com>

packages/web/src/events/animation.rs

@@ -17,7 +17,7 @@ impl HasAnimationData for Synthetic<AnimationEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/clipboard.rs

@@ -11,7 +11,7 @@ impl From<&Event> for Synthetic<Event> {
 
 impl HasClipboardData for Synthetic<Event> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/composition.rs

@@ -9,7 +9,7 @@ impl HasCompositionData for Synthetic<CompositionEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/drag.rs

@@ -1,84 +1,84 @@
+use super::{Synthetic, WebEventExt};
 use dioxus_html::{
+    geometry::{ClientPoint, ElementPoint, PagePoint, ScreenPoint},
+    input_data::{decode_mouse_button_set, MouseButton},
     prelude::{
-        InteractionElementOffset, InteractionLocation, ModifiersInteraction, PointerInteraction,
+        InteractionElementOffset, InteractionLocation, Modifiers, ModifiersInteraction,
+        PointerInteraction,
     },
     HasDragData, HasFileData, HasMouseData,
 };
-use web_sys::MouseEvent;
+use web_sys::DragEvent;
 
-use super::{Synthetic, WebEventExt};
+impl InteractionLocation for Synthetic<DragEvent> {
+    fn client_coordinates(&self) -> ClientPoint {
+        ClientPoint::new(self.event.client_x().into(), self.event.client_y().into())
+    }
 
-pub(crate) struct WebDragData {
+    fn page_coordinates(&self) -> PagePoint {
-    raw: Synthetic<MouseEvent>,
+        PagePoint::new(self.event.page_x().into(), self.event.page_y().into())
+    }
+
+    fn screen_coordinates(&self) -> ScreenPoint {
+        ScreenPoint::new(self.event.screen_x().into(), self.event.screen_y().into())
+    }
 }
 
-impl WebDragData {
+impl InteractionElementOffset for Synthetic<DragEvent> {
-    pub fn new(raw: MouseEvent) -> Self {
+    fn element_coordinates(&self) -> ElementPoint {
-        Self {
+        ElementPoint::new(self.event.offset_x().into(), self.event.offset_y().into())
-            raw: Synthetic::new(raw),
+    }
+}
+
+impl ModifiersInteraction for Synthetic<DragEvent> {
+    fn modifiers(&self) -> Modifiers {
+        let mut modifiers = Modifiers::empty();
+
+        if self.event.alt_key() {
+            modifiers.insert(Modifiers::ALT);
         }
+        if self.event.ctrl_key() {
+            modifiers.insert(Modifiers::CONTROL);
+        }
+        if self.event.meta_key() {
+            modifiers.insert(Modifiers::META);
+        }
+        if self.event.shift_key() {
+            modifiers.insert(Modifiers::SHIFT);
+        }
+
+        modifiers
     }
 }
 
-impl HasDragData for WebDragData {
+impl PointerInteraction for Synthetic<DragEvent> {
-    fn as_any(&self) -> &dyn std::any::Any {
-        &self.raw as &dyn std::any::Any
-    }
-}
-
-impl HasMouseData for WebDragData {
-    fn as_any(&self) -> &dyn std::any::Any {
-        &self.raw as &dyn std::any::Any
-    }
-}
-
-impl PointerInteraction for WebDragData {
-    fn trigger_button(&self) -> Option<dioxus_html::input_data::MouseButton> {
-        self.raw.trigger_button()
-    }
-
     fn held_buttons(&self) -> dioxus_html::input_data::MouseButtonSet {
-        self.raw.held_buttons()
+        decode_mouse_button_set(self.event.buttons())
+    }
+
+    fn trigger_button(&self) -> Option<MouseButton> {
+        Some(MouseButton::from_web_code(self.event.button()))
     }
 }
 
-impl ModifiersInteraction for WebDragData {
+impl HasMouseData for Synthetic<DragEvent> {
-    fn modifiers(&self) -> dioxus_html::prelude::Modifiers {
+    fn as_any(&self) -> &dyn std::any::Any {
-        self.raw.modifiers()
+        &self.event
     }
 }
 
-impl InteractionElementOffset for WebDragData {
+impl HasDragData for Synthetic<DragEvent> {
-    fn coordinates(&self) -> dioxus_html::geometry::Coordinates {
+    fn as_any(&self) -> &dyn std::any::Any {
-        self.raw.coordinates()
+        &self.event
-    }
-
-    fn element_coordinates(&self) -> dioxus_html::geometry::ElementPoint {
-        self.raw.element_coordinates()
     }
 }
 
-impl InteractionLocation for WebDragData {
+impl HasFileData for Synthetic<DragEvent> {
-    fn client_coordinates(&self) -> dioxus_html::geometry::ClientPoint {
-        self.raw.client_coordinates()
-    }
-
-    fn screen_coordinates(&self) -> dioxus_html::geometry::ScreenPoint {
-        self.raw.screen_coordinates()
-    }
-
-    fn page_coordinates(&self) -> dioxus_html::geometry::PagePoint {
-        self.raw.page_coordinates()
-    }
-}
-
-impl HasFileData for WebDragData {
     #[cfg(feature = "file_engine")]
     fn files(&self) -> Option<std::sync::Arc<dyn dioxus_html::FileEngine>> {
         use wasm_bindgen::JsCast;
 
         let files = self
-            .raw
             .event
             .dyn_ref::<web_sys::DragEvent>()
             .and_then(|drag_event| {
@@ -97,12 +97,11 @@ impl HasFileData for WebDragData {
 }
 
 impl WebEventExt for dioxus_html::DragData {
-    type WebEvent = web_sys::MouseEvent;
+    type WebEvent = web_sys::DragEvent;
 
     #[inline(always)]
-    fn try_as_web_event(&self) -> Option<web_sys::MouseEvent> {
+    fn try_as_web_event(&self) -> Option<web_sys::DragEvent> {
-        self.downcast::<WebDragData>()
+        self.downcast::<Synthetic<DragEvent>>()
-            .map(|data| &data.raw.event)
+            .map(|data| data.event.clone())
-            .cloned()
     }
 }

packages/web/src/events/focus.rs

@@ -4,7 +4,7 @@ use super::{Synthetic, WebEventExt};
 
 impl HasFocusData for Synthetic<web_sys::FocusEvent> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/keyboard.rs

@@ -31,7 +31,7 @@ impl HasKeyboardData for Synthetic<KeyboardEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/load.rs

@@ -23,7 +23,7 @@ impl HasImageData for WebImageEvent {
     }
 
     fn as_any(&self) -> &dyn Any {
-        &self.raw as &dyn Any
+        &self.raw
     }
 }
 

packages/web/src/events/media.rs

@@ -1,10 +1,9 @@
-use dioxus_html::HasMediaData;
-
 use super::{Synthetic, WebEventExt};
+use dioxus_html::HasMediaData;
 
 impl HasMediaData for Synthetic<web_sys::Event> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/mod.rs

@@ -1,7 +1,6 @@
 use dioxus_html::{
     DragData, FormData, HtmlEventConverter, ImageData, MountedData, PlatformEventData,
 };
-use drag::WebDragData;
 use form::WebFormData;
 use load::WebImageEvent;
 use wasm_bindgen::JsCast;
@@ -78,7 +77,9 @@ impl HtmlEventConverter for WebEventConverter {
     #[inline(always)]
     fn convert_drag_data(&self, event: &dioxus_html::PlatformEventData) -> dioxus_html::DragData {
         let event = downcast_event(event);
-        DragData::new(WebDragData::new(event.raw.clone().unchecked_into()))
+        DragData::new(Synthetic::new(
+            event.raw.clone().unchecked_into::<web_sys::DragEvent>(),
+        ))
     }
 
     #[inline(always)]

packages/web/src/events/mounted.rs

@@ -61,7 +61,7 @@ impl dioxus_html::RenderedElementBacking for Synthetic<web_sys::Element> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 
     fn scroll_to(

packages/web/src/events/mouse.rs

@@ -5,7 +5,7 @@ use dioxus_html::{
         InteractionElementOffset, InteractionLocation, Modifiers, ModifiersInteraction,
         PointerInteraction,
     },
-    HasDragData, HasFileData, HasMouseData,
+    HasMouseData,
 };
 use web_sys::MouseEvent;
 
@@ -64,15 +64,7 @@ impl PointerInteraction for Synthetic<MouseEvent> {
 
 impl HasMouseData for Synthetic<MouseEvent> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
-    }
-}
-
-impl HasFileData for Synthetic<MouseEvent> {}
-
-impl HasDragData for Synthetic<MouseEvent> {
-    fn as_any(&self) -> &dyn std::any::Any {
-        self
     }
 }
 

packages/web/src/events/pointer.rs

@@ -53,7 +53,7 @@ impl HasPointerData for Synthetic<PointerEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/resize.rs

@@ -22,7 +22,7 @@ impl From<&Event> for Synthetic<ResizeObserverEntry> {
 
 impl HasResizeData for Synthetic<ResizeObserverEntry> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 
     fn get_border_box_size(&self) -> ResizeResult<PixelsSize> {

packages/web/src/events/selection.rs

@@ -1,10 +1,9 @@
-use dioxus_html::HasSelectionData;
-
 use super::{Synthetic, WebEventExt};
+use dioxus_html::HasSelectionData;
 
 impl HasSelectionData for Synthetic<web_sys::Event> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/toggle.rs

@@ -1,10 +1,9 @@
-use dioxus_html::HasToggleData;
-
 use super::{Synthetic, WebEventExt};
+use dioxus_html::HasToggleData;
 
 impl HasToggleData for Synthetic<web_sys::Event> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/touch.rs

@@ -60,7 +60,7 @@ impl dioxus_html::events::HasTouchData for Synthetic<TouchEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 
@@ -82,7 +82,7 @@ impl HasTouchPointData for Synthetic<Touch> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 

packages/web/src/events/transition.rs

@@ -17,6 +17,6 @@ impl HasTransitionData for Synthetic<TransitionEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }

packages/web/src/events/wheel.rs

@@ -22,13 +22,13 @@ impl HasWheelData for Synthetic<WheelEvent> {
     }
 
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 
 impl HasMouseData for Synthetic<WheelEvent> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }
 
@@ -85,7 +85,7 @@ impl PointerInteraction for Synthetic<WheelEvent> {
 
 impl HasScrollData for Synthetic<Event> {
     fn as_any(&self) -> &dyn std::any::Any {
-        self
+        &self.event
     }
 }