wip: more work on html

examples/svg.rs

@@ -1,6 +1,6 @@
 // Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
 
-use dioxus::{events::MouseData, html::MouseEvent, prelude::*};
+use dioxus::prelude::*;
 
 fn main() {
     dioxus_desktop::launch(app);
@@ -9,7 +9,7 @@ fn main() {
 fn app(cx: Scope) -> Element {
     let val = use_state(&cx, || 5);
 
-    render! {
+    cx.render(rsx! {
         div {
             user_select: "none",
             webkit_user_select: "none",
@@ -31,7 +31,7 @@ fn app(cx: Scope) -> Element {
                 }
             }
         }
-    }
+    })
 }
 
 #[derive(Props)]
@@ -78,7 +78,7 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
             })
         });
 
-    render! {
+    cx.render(rsx! {
       svg {
         onclick: move |e| cx.props.onclick.call(e),
         prevent_default: "onclick",
@@ -96,5 +96,5 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
 
         dots
       }
-    }
+    })
 }

packages/dioxus/src/lib.rs

@@ -7,7 +7,7 @@ pub use dioxus_hooks as hooks;
 
 pub mod events {
     #[cfg(feature = "html")]
-    pub use dioxus_html::{AnimationEvent, FormData, FormEvent, KeyCode, KeyboardEvent, MouseData};
+    pub use dioxus_html::prelude::*;
 }
 
 #[cfg(feature = "html")]
@@ -32,5 +32,5 @@ pub mod prelude {
     pub use dioxus_html as dioxus_elements;
 
     #[cfg(feature = "html")]
-    pub use dioxus_elements::{FormEvent, GlobalAttributes, SvgAttributes};
+    pub use dioxus_elements::{prelude::*, GlobalAttributes, SvgAttributes};
 }

packages/html/src/events/mouse.rs

@@ -2,7 +2,7 @@ use crate::geometry::{ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenP
 use crate::input_data::{
     decode_mouse_button_set, encode_mouse_button_set, MouseButton, MouseButtonSet,
 };
-use dioxus_core::{Attribute, ScopeState, UiEvent};
+use dioxus_core::UiEvent;
 use keyboard_types::Modifiers;
 use std::fmt::{Debug, Formatter};
 
@@ -88,6 +88,91 @@ pub struct MouseData {
     pub shift_key: bool,
 }
 
+impl_event! {
+    MouseData;
+
+    /// Execute a callback when a button is clicked.
+    ///
+    /// ## Description
+    ///
+    /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button)
+    /// is both pressed and released while the pointer is located inside the element.
+    ///
+    /// - Bubbles: Yes
+    /// - Cancelable: Yes
+    /// - Interface(InteData): [`MouseEvent`]
+    ///
+    /// If the button is pressed on one element and the pointer is moved outside the element before the button
+    /// is released, the event is fired on the most specific ancestor element that contained both elements.
+    /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order.
+    ///
+    /// ## Example
+    /// ```rust, ignore
+    /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } )
+    /// ```
+    ///
+    /// ## Reference
+    /// - <https://www.w3schools.com/tags/ev_onclick.asp>
+    /// - <https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event>
+    onclick
+
+    /// oncontextmenu
+    oncontextmenu
+
+    /// ondoubleclick
+    ondoubleclick
+
+    /// ondoubleclick
+    ondblclick
+
+    /// ondrag
+    ondrag
+
+    /// ondragend
+    ondragend
+
+    /// ondragenter
+    ondragenter
+
+    /// ondragexit
+    ondragexit
+
+    /// ondragleave
+    ondragleave
+
+    /// ondragover
+    ondragover
+
+    /// ondragstart
+    ondragstart
+
+    /// ondrop
+    ondrop
+
+    /// onmousedown
+    onmousedown
+
+    /// onmouseenter
+    onmouseenter
+
+    /// onmouseleave
+    onmouseleave
+
+    /// onmousemove
+    onmousemove
+
+    /// onmouseout
+    onmouseout
+
+    /// onmouseover
+    ///
+    /// Triggered when the users's mouse hovers over an element.
+    onmouseover
+
+    /// onmouseup
+    onmouseup
+}
+
 impl MouseData {
     /// Construct MouseData with the specified properties
     ///
@@ -217,88 +302,3 @@ impl Debug for MouseData {
             .finish()
     }
 }
-
-impl_event! {
-    MouseData;
-
-    /// Execute a callback when a button is clicked.
-    ///
-    /// ## Description
-    ///
-    /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button)
-    /// is both pressed and released while the pointer is located inside the element.
-    ///
-    /// - Bubbles: Yes
-    /// - Cancelable: Yes
-    /// - Interface(InteData): [`MouseEvent`]
-    ///
-    /// If the button is pressed on one element and the pointer is moved outside the element before the button
-    /// is released, the event is fired on the most specific ancestor element that contained both elements.
-    /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order.
-    ///
-    /// ## Example
-    /// ```rust, ignore
-    /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } )
-    /// ```
-    ///
-    /// ## Reference
-    /// - <https://www.w3schools.com/tags/ev_onclick.asp>
-    /// - <https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event>
-    onclick
-
-    /// oncontextmenu
-    oncontextmenu
-
-    /// ondoubleclick
-    ondoubleclick
-
-    /// ondoubleclick
-    ondblclick
-
-    /// ondrag
-    ondrag
-
-    /// ondragend
-    ondragend
-
-    /// ondragenter
-    ondragenter
-
-    /// ondragexit
-    ondragexit
-
-    /// ondragleave
-    ondragleave
-
-    /// ondragover
-    ondragover
-
-    /// ondragstart
-    ondragstart
-
-    /// ondrop
-    ondrop
-
-    /// onmousedown
-    onmousedown
-
-    /// onmouseenter
-    onmouseenter
-
-    /// onmouseleave
-    onmouseleave
-
-    /// onmousemove
-    onmousemove
-
-    /// onmouseout
-    onmouseout
-
-    /// onmouseover
-    ///
-    /// Triggered when the users's mouse hovers over an element.
-    onmouseover
-
-    /// onmouseup
-    onmouseup
-}

packages/html/src/events/wheel.rs

@@ -0,0 +1,78 @@
+use dioxus_core::UiEvent;
+use euclid::UnknownUnit;
+use std::fmt::{Debug, Formatter};
+
+use crate::geometry::{LinesVector, PagesVector, PixelsVector, WheelDelta};
+
+pub type WheelEvent = UiEvent<WheelData>;
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[derive(Clone)]
+pub struct WheelData {
+    #[deprecated(since = "0.3.0", note = "use delta() instead")]
+    pub delta_mode: u32,
+    #[deprecated(since = "0.3.0", note = "use delta() instead")]
+    pub delta_x: f64,
+    #[deprecated(since = "0.3.0", note = "use delta() instead")]
+    pub delta_y: f64,
+    #[deprecated(since = "0.3.0", note = "use delta() instead")]
+    pub delta_z: f64,
+}
+
+impl_event![
+    WheelData;
+
+    /// Called when the mouse wheel is rotated over an element.
+    onwheel
+];
+
+impl WheelData {
+    /// Construct a new WheelData with the specified wheel movement delta
+    pub fn new(delta: WheelDelta) -> Self {
+        let (delta_mode, vector) = match delta {
+            WheelDelta::Pixels(v) => (0, v.cast_unit::<UnknownUnit>()),
+            WheelDelta::Lines(v) => (1, v.cast_unit::<UnknownUnit>()),
+            WheelDelta::Pages(v) => (2, v.cast_unit::<UnknownUnit>()),
+        };
+
+        #[allow(deprecated)]
+        WheelData {
+            delta_mode,
+            delta_x: vector.x,
+            delta_y: vector.y,
+            delta_z: vector.z,
+        }
+    }
+
+    /// Construct from the attributes of the web wheel event
+    pub fn from_web_attributes(delta_mode: u32, delta_x: f64, delta_y: f64, delta_z: f64) -> Self {
+        #[allow(deprecated)]
+        Self {
+            delta_mode,
+            delta_x,
+            delta_y,
+            delta_z,
+        }
+    }
+
+    /// The amount of wheel movement
+    #[allow(deprecated)]
+    pub fn delta(&self) -> WheelDelta {
+        let x = self.delta_x;
+        let y = self.delta_y;
+        let z = self.delta_z;
+        match self.delta_mode {
+            0 => WheelDelta::Pixels(PixelsVector::new(x, y, z)),
+            1 => WheelDelta::Lines(LinesVector::new(x, y, z)),
+            2 => WheelDelta::Pages(PagesVector::new(x, y, z)),
+            _ => panic!("Invalid delta mode, {:?}", self.delta_mode),
+        }
+    }
+}
+
+impl Debug for WheelData {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("WheelData")
+            .field("delta", &self.delta())
+            .finish()
+    }
+}

packages/html/src/lib.rs

@@ -24,3 +24,7 @@ pub mod input_data;
 pub use elements::*;
 pub use events::*;
 pub use global_attributes::*;
+
+pub mod prelude {
+    pub use crate::events::*;
+}