Merge remote-tracking branch 'origin/master' into jk/rsx-refactor

examples/custom_element.rs

@@ -0,0 +1,30 @@
+//! This example shows to wrap a webcomponent / custom element with a component.
+//!
+//! Oftentimes, a third party library will provide a webcomponent that you want
+//! to use in your application. This example shows how to create that custom element
+//! directly with the raw_element method on NodeFactory.
+
+use dioxus::prelude::*;
+
+fn main() {
+    let mut dom = VirtualDom::new(app);
+    let _ = dom.rebuild();
+
+    let output = dioxus::ssr::render_vdom(&dom);
+
+    println!("{}", output);
+}
+
+fn app(cx: Scope) -> Element {
+    let nf = NodeFactory::new(&cx);
+
+    let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump());
+
+    attrs.push(nf.attr("client-id", format_args!("abc123"), None, false));
+
+    attrs.push(nf.attr("name", format_args!("bob"), None, false));
+
+    attrs.push(nf.attr("age", format_args!("47"), None, false));
+
+    Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None))
+}

examples/fermi.rs

@@ -14,6 +14,7 @@ fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div { "hello {name}!" }
         Child {}
+        ChildWithRef{}
     })
 }
 
@@ -27,3 +28,28 @@ fn Child(cx: Scope) -> Element {
         }
     })
 }
+
+static NAMES: AtomRef<Vec<String>> = |_| vec!["world".to_string()];
+
+fn ChildWithRef(cx: Scope) -> Element {
+    let names = use_atom_ref(&cx, NAMES);
+
+    cx.render(rsx! {
+        div {
+            ul {
+                names.read().iter().map(|f| rsx!{
+                    li { "hello: {f}" }
+                })
+            }
+            button {
+                onclick: move |_| {
+                    let names = names.clone();
+                    cx.spawn(async move {
+                        names.write().push("asd".to_string());
+                    })
+                },
+                "Add name"
+            }
+        }
+    })
+}

examples/mouse_event.rs

@@ -0,0 +1,56 @@
+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 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;
+        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_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! (
+        div {
+            style: "{container_style}",
+            "Hover over to display coordinates:",
+            div {
+                style: "{rect_style}",
+                onmousemove: update_mouse_position,
+                prevent_default: "mousedown",
+            }
+            div {"Page coordinates: {page_coordinates}"},
+            div {"Screen coordinates: {screen_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);
+            }
+        }
+    })
+}