Merge https://github.com/DioxusLabs/dioxus into tui_focus

examples/mouse_event.rs

@@ -9,7 +9,9 @@ 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 buttons = use_state(&cx, || "".to_string());
+    let modifiers = use_state(&cx, || "".to_string());
 
     let container_style = r#"
         display: flex;
@@ -25,11 +27,14 @@ fn app(cx: Scope) -> Element {
     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)));
+        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.
+
+        buttons.set(format!("{:?}", mouse_data.held_buttons()));
+        modifiers.set(format!("{:?}", mouse_data.modifiers()));
     };
 
     cx.render(rsx! (
@@ -39,10 +44,13 @@ fn app(cx: Scope) -> Element {
             div {
                 style: "{rect_style}",
                 onmousemove: update_mouse_position,
+                prevent_default: "mousedown",
             }
             div {"Page coordinates: {page_coordinates}"},
             div {"Screen coordinates: {screen_coordinates}"},
-            div {"Offset coordinates: {offset_coordinates}"},
+            div {"Element coordinates: {element_coordinates}"},
+            div {"Buttons: {buttons}"},
+            div {"Modifiers: {modifiers}"},
         }
     ))
 }

examples/tui_hover.rs

@@ -1,6 +1,7 @@
 use std::{convert::TryInto, sync::Arc};
 
 use dioxus::{events::MouseData, prelude::*};
+use dioxus_core::UiEvent;
 
 fn main() {
     dioxus::tui::launch(app);
@@ -12,7 +13,7 @@ fn app(cx: Scope) -> Element {
     }
 
     fn get_brightness(m: Arc<MouseData>) -> i32 {
-        let b: i32 = m.buttons.count_ones().try_into().unwrap();
+        let b: i32 = m.held_buttons().len().try_into().unwrap();
         127 * b
     }
 
@@ -26,6 +27,24 @@ fn app(cx: Scope) -> Element {
     let q3_color_str = to_str(q3_color);
     let q4_color_str = to_str(q4_color);
 
+    let page_coordinates = use_state(&cx, || "".to_string());
+    let element_coordinates = use_state(&cx, || "".to_string());
+    let buttons = use_state(&cx, || "".to_string());
+    let modifiers = use_state(&cx, || "".to_string());
+
+    let update_data = move |event: UiEvent<MouseData>| {
+        let mouse_data = event.data;
+
+        page_coordinates.set(format!("{:?}", mouse_data.page_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.
+        // There are also screen coordinates, but they are currently the same as client coordinates due to technical limitations
+
+        buttons.set(format!("{:?}", mouse_data.held_buttons()));
+        modifiers.set(format!("{:?}", mouse_data.modifiers()));
+    };
+
     cx.render(rsx! {
         div {
             width: "100%",
@@ -48,6 +67,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q1_color.set([get_brightness(m.data), 0, 0]),
                     onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta_y) as i32, 0, 0]),
                     onmouseleave: move |_| q1_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
                 div {
@@ -61,6 +81,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q2_color.set([get_brightness(m.data); 3]),
                     onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta_y) as i32;3]),
                     onmouseleave: move |_| q2_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
             }
@@ -80,6 +101,7 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q3_color.set([0, get_brightness(m.data), 0]),
                     onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta_y) as i32, 0]),
                     onmouseleave: move |_| q3_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
                 div {
@@ -93,9 +115,14 @@ fn app(cx: Scope) -> Element {
                     onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.data)]),
                     onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta_y) as i32]),
                     onmouseleave: move |_| q4_color.set([200; 3]),
+                    onmousemove: update_data,
                     "click me"
                 }
-            }
+            },
+            div {"Page coordinates: {page_coordinates}"},
+            div {"Element coordinates: {element_coordinates}"},
+            div {"Buttons: {buttons}"},
+            div {"Modifiers: {modifiers}"},
         }
     })
 }

examples/tui_keys.rs

@@ -1,5 +1,7 @@
 use dioxus::events::WheelEvent;
 use dioxus::prelude::*;
+use dioxus_html::geometry::ScreenPoint;
+use dioxus_html::input_data::MouseButtonSet;
 use dioxus_html::on::{KeyboardEvent, MouseEvent};
 use dioxus_html::KeyCode;
 
@@ -9,9 +11,9 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     let key = use_state(&cx, || "".to_string());
-    let mouse = use_state(&cx, || (0, 0));
+    let mouse = use_state(&cx, || ScreenPoint::zero());
     let count = use_state(&cx, || 0);
-    let buttons = use_state(&cx, || 0);
+    let buttons = use_state(&cx, || MouseButtonSet::empty());
     let mouse_clicked = use_state(&cx, || false);
 
     cx.render(rsx! {
@@ -36,21 +38,21 @@ fn app(cx: Scope) -> Element {
                 count.set(count + evt.data.delta_y as i64);
             },
             ondrag: move |evt: MouseEvent| {
-                mouse.set((evt.data.screen_x, evt.data.screen_y));
+                mouse.set(evt.data.screen_coordinates());
             },
             onmousedown: move |evt: MouseEvent| {
-                mouse.set((evt.data.screen_x, evt.data.screen_y));
-                buttons.set(evt.data.buttons);
+                mouse.set(evt.data.screen_coordinates());
+                buttons.set(evt.data.held_buttons());
                 mouse_clicked.set(true);
             },
             onmouseup: move |evt: MouseEvent| {
-                buttons.set(evt.data.buttons);
+                buttons.set(evt.data.held_buttons());
                 mouse_clicked.set(false);
             },
 
             "count: {count:?}",
             "key: {key}",
-            "mouse buttons: {buttons:b}",
+            "mouse buttons: {buttons:?}",
             "mouse pos: {mouse:?}",
             "mouse button pressed: {mouse_clicked}"
         }

examples/window_zoom.rs

@@ -0,0 +1,23 @@
+use dioxus::desktop::use_window;
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let window = use_window(&cx);
+
+    let level = use_state(&cx, || 1.0);
+    cx.render(rsx! {
+        input {
+            r#type: "number",
+            value: "{level}",
+            oninput: |e| {
+                let num = e.value.parse::<f64>().unwrap_or(1.0);
+                level.set(num);
+                window.set_zoom_level(num);
+            }
+        }
+    })
+}