Merge remote-tracking branch 'upstream/master' into pr/Demonthos/390

examples/coordinates.rs

@@ -0,0 +1,48 @@
+use dioxus::prelude::*;
+use dioxus_core::UiEvent;
+use dioxus_html::on::MouseData;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let page_coordinates = use_state(&cx, || "".to_string());
+    let screen_coordinates = use_state(&cx, || "".to_string());
+    let offset_coordinates = use_state(&cx, || "".to_string());
+
+    let container_style = r#"
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    "#;
+    let rect_style = r#"
+        background: deepskyblue;
+        height: 50vh;
+        width: 50vw;
+    "#;
+
+    let update_mouse_position = move |event: UiEvent<MouseData>| {
+        let mouse_data = event.data;
+
+        page_coordinates.set(format!("{:?}", (mouse_data.page_x, mouse_data.page_y)));
+        screen_coordinates.set(format!("{:?}", (mouse_data.screen_x, mouse_data.screen_y)));
+        offset_coordinates.set(format!("{:?}", (mouse_data.offset_x, mouse_data.offset_y)));
+
+        // Note: client coordinates are also available, but they would be the same as the page coordinates in this example, because there is no scrolling.
+    };
+
+    cx.render(rsx! (
+        div {
+            style: "{container_style}",
+            "Hover over to display coordinates:",
+            div {
+                style: "{rect_style}",
+                onmousemove: update_mouse_position,
+            }
+            div {"Page coordinates: {page_coordinates}"},
+            div {"Screen coordinates: {screen_coordinates}"},
+            div {"Offset coordinates: {offset_coordinates}"},
+        }
+    ))
+}

packages/html/src/events.rs

@@ -497,17 +497,49 @@ pub mod on {
     #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
     #[derive(Debug, Clone)]
     pub struct MouseData {
+        /// True if the alt key was down when the mouse event was fired.
         pub alt_key: bool,
+        /// The button number that was pressed (if applicable) when the mouse event was fired.
         pub button: i16,
+        /// Indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
+        ///
+        /// Each button that can be pressed is represented by a given number (see below). If more than one button is pressed, the button values are added together to produce a new number. For example, if the secondary (2) and auxiliary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).
+        ///
+        /// - 1: Primary button (usually the left button)
+        /// - 2: Secondary button (usually the right button)
+        /// - 4: Auxiliary button (usually the mouse wheel button or middle button)
+        /// - 8: 4th button (typically the "Browser Back" button)
+        /// - 16 : 5th button (typically the "Browser Forward" button)
         pub buttons: u16,
+        /// The horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+        ///
+        /// For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.
         pub client_x: i32,
+        /// The vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+        ///
+        /// For example, clicking on the top edge of the viewport will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.
         pub client_y: i32,
+        /// True if the control key was down when the mouse event was fired.
         pub ctrl_key: bool,
+        /// True if the meta key was down when the mouse event was fired.
         pub meta_key: bool,
+        /// The offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
+        pub offset_x: i32,
+        /// The offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
+        pub offset_y: i32,
+        /// The X (horizontal) coordinate (in pixels) of the mouse, relative to the left edge of the entire document. This includes any portion of the document not currently visible.
+        ///
+        /// Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.
         pub page_x: i32,
+        /// The Y (vertical) coordinate in pixels of the event relative to the whole document.
+        ///
+        /// See `page_x`.
         pub page_y: i32,
+        /// The X coordinate of the mouse pointer in global (screen) coordinates.
         pub screen_x: i32,
+        /// The Y coordinate of the mouse pointer in global (screen) coordinates.
         pub screen_y: i32,
+        /// True if the shift key was down when the mouse event was fired.
         pub shift_key: bool,
         // fn get_modifier_state(&self, key_code: &str) -> bool;
     }

packages/html/src/web_sys_bind/events.rs

@@ -79,6 +79,8 @@ impl From<&MouseEvent> for MouseData {
             client_y: e.client_y(),
             ctrl_key: e.ctrl_key(),
             meta_key: e.meta_key(),
+            offset_x: e.offset_x(),
+            offset_y: e.offset_y(),
             screen_x: e.screen_x(),
             screen_y: e.screen_y(),
             shift_key: e.shift_key(),

packages/interpreter/src/interpreter.js

@@ -409,6 +409,8 @@ export function serialize_event(event) {
         clientY,
         ctrlKey,
         metaKey,
+        offsetX,
+        offsetY,
         pageX,
         pageY,
         screenX,
@@ -423,6 +425,8 @@ export function serialize_event(event) {
         client_y: clientY,
         ctrl_key: ctrlKey,
         meta_key: metaKey,
+        offset_x: offsetX,
+        offset_y: offsetY,
         page_x: pageX,
         page_y: pageY,
         screen_x: screenX,

packages/liveview/src/interpreter.js

@@ -418,6 +418,8 @@ function serialize_event(event) {
         clientY,
         ctrlKey,
         metaKey,
+        offsetX,
+        offsetY,
         pageX,
         pageY,
         screenX,
@@ -432,6 +434,8 @@ function serialize_event(event) {
         client_y: clientY,
         ctrl_key: ctrlKey,
         meta_key: metaKey,
+        offset_x: offsetX,
+        offset_y: offsetY,
         page_x: pageX,
         page_y: pageY,
         screen_x: screenX,

packages/tui/src/hooks.rs

@@ -655,6 +655,10 @@ fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> {
                     Some(MouseButton::Right) => 2,
                 };
                 // from https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+
+                // The `offset`, `page` and `screen` coordinates are inconsistent with the MDN definition, as they are relative to the viewport (client), not the target element/page/screen, respectively.
+                // todo?
+                // But then, MDN defines them in terms of pixels, yet crossterm provides only row/column, and it might not be possible to get pixels. So we can't get 100% consistency anyway.
                 EventData::Mouse(MouseData {
                     alt_key: alt,
                     button: button_state,
@@ -663,6 +667,8 @@ fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> {
                     client_y: y,
                     ctrl_key: ctrl,
                     meta_key: meta,
+                    offset_x: x,
+                    offset_y: y,
                     page_x: x,
                     page_y: y,
                     screen_x: x,