diff --git a/examples/coordinates.rs b/examples/coordinates.rs index 0c45c2e3d..24ee5da62 100644 --- a/examples/coordinates.rs +++ b/examples/coordinates.rs @@ -9,7 +9,7 @@ fn main() { 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 element_coordinates = use_state(&cx, || "".to_string()); let container_style = r#" display: flex; @@ -25,9 +25,9 @@ fn app(cx: Scope) -> Element { let update_mouse_position = move |event: UiEvent| { 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))); + page_coordinates.set(format!("{:?}", mouse_data.page_coordinates())); + screen_coordinates.set(format!("{:?}", mouse_data.screen_coordinates())); + element_coordinates.set(format!("{:?}", mouse_data.element_coordinates())); // Note: client coordinates are also available, but they would be the same as the page coordinates in this example, because there is no scrolling. }; @@ -42,7 +42,7 @@ fn app(cx: Scope) -> Element { } div {"Page coordinates: {page_coordinates}"}, div {"Screen coordinates: {screen_coordinates}"}, - div {"Offset coordinates: {offset_coordinates}"}, + div {"Element coordinates: {element_coordinates}"}, } )) } diff --git a/packages/html/Cargo.toml b/packages/html/Cargo.toml index 5daaa1407..fd1df29da 100644 --- a/packages/html/Cargo.toml +++ b/packages/html/Cargo.toml @@ -15,6 +15,7 @@ dioxus-core = { path = "../core", version = "^0.2.1" } serde = { version = "1", features = ["derive"], optional = true } serde_repr = { version = "0.1", optional = true } wasm-bindgen = { version = "0.2.79", optional = true } +euclid = "0.22.7" [dependencies.web-sys] optional = true diff --git a/packages/html/src/events.rs b/packages/html/src/events.rs index cfa901a2e..dfa0b49da 100644 --- a/packages/html/src/events.rs +++ b/packages/html/src/events.rs @@ -3,6 +3,7 @@ use dioxus_core::exports::bumpalo; use dioxus_core::*; pub mod on { + use crate::geometry::{ClientPoint, ElementPoint, PagePoint, ScreenPoint}; use std::collections::HashMap; use super::*; @@ -498,8 +499,10 @@ pub mod on { #[derive(Debug, Clone)] pub struct MouseData { /// True if the alt key was down when the mouse event was fired. + #[deprecated(since = "0.3.0", note = "use modifiers() instead")] pub alt_key: bool, /// The button number that was pressed (if applicable) when the mouse event was fired. + #[deprecated(since = "0.3.0", note = "use trigger_button() instead")] pub button: i16, /// Indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered. /// @@ -510,40 +513,188 @@ pub mod on { /// - 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) + #[deprecated(since = "0.3.0", note = "use held_buttons() instead")] 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. + #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")] 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. + #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")] pub client_y: i32, /// True if the control key was down when the mouse event was fired. + #[deprecated(since = "0.3.0", note = "use modifiers() instead")] pub ctrl_key: bool, /// True if the meta key was down when the mouse event was fired. + #[deprecated(since = "0.3.0", note = "use modifiers() instead")] 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. + #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")] 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. + #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")] 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. + #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")] pub page_x: i32, /// The Y (vertical) coordinate in pixels of the event relative to the whole document. /// /// See `page_x`. + #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")] pub page_y: i32, /// The X coordinate of the mouse pointer in global (screen) coordinates. + #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")] pub screen_x: i32, /// The Y coordinate of the mouse pointer in global (screen) coordinates. + #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")] pub screen_y: i32, /// True if the shift key was down when the mouse event was fired. + #[deprecated(since = "0.3.0", note = "use modifiers() instead")] pub shift_key: bool, // fn get_modifier_state(&self, key_code: &str) -> bool; } + impl MouseData { + /// The event's coordinates relative to the application's viewport (as opposed to the coordinate within the page). + // + // For example, clicking in the top left corner of the viewport will always result in a mouse event with client coordinates (0., 0.), regardless of whether the page is scrolled horizontally. + pub fn client_coordinates(&self) -> ClientPoint { + #[allow(deprecated)] + ClientPoint::new(self.client_x.into(), self.client_y.into()) + } + + /// The event's coordinates relative to the padding edge of the target element + /// + /// For example, clicking in the top left corner of an element will result in element coordinates (0., 0.) + pub fn element_coordinates(&self) -> ElementPoint { + #[allow(deprecated)] + ElementPoint::new(self.offset_x.into(), self.offset_y.into()) + } + + /// The event's coordinates relative to the entire document. This includes any portion of the document not currently visible. + /// + /// For example, if the page is scrolled 200 pixels to the right and 300 pixels down, clicking in the top left corner of the viewport would result in page coordinates (200., 300.) + pub fn page_coordinates(&self) -> PagePoint { + #[allow(deprecated)] + PagePoint::new(self.page_x.into(), self.page_y.into()) + } + + /// The event's coordinates relative to the entire screen. This takes into account the window's offset. + pub fn screen_coordinates(&self) -> ScreenPoint { + #[allow(deprecated)] + ScreenPoint::new(self.screen_x.into(), self.screen_y.into()) + } + + /// The set of modifier keys which were pressed when the event occurred + pub fn modifiers(&self) -> ModifierSet { + #[allow(deprecated)] + ModifierSet { + has_alt: self.alt_key, + has_ctrl: self.ctrl_key, + has_meta: self.meta_key, + has_shift: self.shift_key, + } + } + + /// The set of mouse buttons which were held when the event occurred. + pub fn held_buttons(&self) -> MouseButtonSet { + #[allow(deprecated)] + MouseButtonSet { + has_primary: self.buttons & 0b1 != 0, + has_secondary: self.buttons & 0b10 != 0, + has_auxiliary: self.buttons & 0b100 != 0, + has_fourth: self.buttons & 0b1000 != 0, + has_fifth: self.buttons & 0b10000 != 0, + } + } + + /// The mouse button that triggered the event + /// + // todo the following is kind of bad; should we just return None when the trigger_button is unreliable (and frankly irrelevant)? i guess we would need the event_type here + /// This is only guaranteed to indicate which button was pressed during events caused by pressing or releasing a button. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. For example, a value of MouseButton::Primary may also indicate that no button was pressed. + pub fn trigger_button(&self) -> MouseButton { + #[allow(deprecated)] + let button_code = self.button; + + match button_code { + 0 => MouseButton::Primary, + // not a typo; auxiliary and secondary are swapped unlike in the `buttons` field. + // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + 1 => MouseButton::Auxiliary, + 2 => MouseButton::Secondary, + 3 => MouseButton::Fourth, + 4 => MouseButton::Fifth, + other => MouseButton::Other(other), + } + } + } + + pub struct ModifierSet { + has_alt: bool, + has_ctrl: bool, + has_meta: bool, + has_shift: bool, + } + + impl ModifierSet { + pub fn has_alt(&self) -> bool { + self.has_alt + } + pub fn has_ctrl(&self) -> bool { + self.has_ctrl + } + pub fn has_meta(&self) -> bool { + self.has_meta + } + pub fn has_shift(&self) -> bool { + self.has_shift + } + + pub fn is_empty(&self) -> bool { + !(self.has_alt || self.has_ctrl || self.has_meta || self.has_shift) + } + } + + pub struct MouseButtonSet { + has_primary: bool, + has_secondary: bool, + has_auxiliary: bool, + has_fourth: bool, + has_fifth: bool, + } + + impl MouseButtonSet { + pub fn has_primary(&self) -> bool { + self.has_primary + } + pub fn has_secondary(&self) -> bool { + self.has_secondary + } + pub fn has_auxiliary(&self) -> bool { + self.has_auxiliary + } + pub fn has_fourth(&self) -> bool { + self.has_fourth + } + pub fn has_fifth(&self) -> bool { + self.has_fifth + } + } + + pub enum MouseButton { + Primary, + Secondary, + Auxiliary, + Fourth, + Fifth, + Other(i16), + } + pub type PointerEvent = UiEvent; #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))] #[derive(Debug, Clone)] diff --git a/packages/html/src/geometry.rs b/packages/html/src/geometry.rs new file mode 100644 index 000000000..9260c12ae --- /dev/null +++ b/packages/html/src/geometry.rs @@ -0,0 +1,13 @@ +pub use euclid::*; + +pub struct ScreenSpace; +pub type ScreenPoint = Point2D; + +pub struct ClientSpace; +pub type ClientPoint = Point2D; + +pub struct ElementSpace; +pub type ElementPoint = Point2D; + +pub struct PageSpace; +pub type PagePoint = Point2D; \ No newline at end of file diff --git a/packages/html/src/lib.rs b/packages/html/src/lib.rs index 1440fd9ae..4247bf39b 100644 --- a/packages/html/src/lib.rs +++ b/packages/html/src/lib.rs @@ -18,6 +18,7 @@ mod events; mod global_attributes; #[cfg(feature = "wasm-bind")] mod web_sys_bind; +mod geometry; pub use elements::*; pub use events::*; diff --git a/packages/tui/src/hooks.rs b/packages/tui/src/hooks.rs index 04d320fcb..29ce634be 100644 --- a/packages/tui/src/hooks.rs +++ b/packages/tui/src/hooks.rs @@ -94,6 +94,7 @@ impl InnerInputState { // stores current input state and transforms events based on that state fn apply_event(&mut self, evt: &mut EventCore) { + #[allow(deprecated)] match evt.1 { // limitations: only two buttons may be held at once EventData::Mouse(ref mut m) => match &mut self.mouse { @@ -606,6 +607,7 @@ fn get_event(evt: TermEvent) -> Option<(&'static str, EventData)> { // 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. + #[allow(deprecated)] EventData::Mouse(MouseData { alt_key: alt, button: button_state,