Merge branch 'master' into jk/form-ma

examples/svg.rs

@@ -0,0 +1,101 @@
+// Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
+
+use dioxus::{events::MouseEvent, prelude::*};
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let (val, set_val) = use_state(&cx, || 5);
+
+    cx.render(rsx! {
+        div {
+            user_select: "none",
+            webkit_user_select: "none",
+            margin_left: "10%",
+            margin_right: "10%",
+            h1 { "Click die to generate a new value" }
+            div {
+                cursor: "pointer",
+                height: "80%",
+                width: "80%",
+                Die {
+                    value: *val,
+                    keep: true,
+                    onclick: move |_| {
+                        use rand::Rng;
+                        let mut rng = rand::thread_rng();
+                        set_val(rng.gen_range(1..6));
+                    }
+                }
+            }
+        }
+    })
+}
+
+#[derive(Props)]
+pub struct DieProps<'a> {
+    pub value: u64,
+    pub keep: bool,
+    pub onclick: EventHandler<'a, MouseEvent>,
+}
+
+const DOTS: [(i64, i64); 7] = [(-1, -1), (-1, -0), (-1, 1), (1, -1), (1, 0), (1, 1), (0, 0)];
+const DOTS_FOR_VALUE: [[bool; 7]; 6] = [
+    [false, false, false, false, false, false, true],
+    [false, false, true, true, false, false, false],
+    [false, false, true, true, false, false, true],
+    [true, false, true, true, false, true, false],
+    [true, false, true, true, false, true, true],
+    [true, true, true, true, true, true, false],
+];
+
+const OFFSET: i64 = 600;
+const DOT_RADIUS: &str = "200";
+const HELD_COLOR: &str = "#aaa";
+const UNHELD_COLOR: &str = "#ddd";
+
+// A six-sided die (D6) with dots.
+#[allow(non_snake_case)]
+pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
+    let &DieProps { value, keep, .. } = cx.props;
+
+    let active_dots = &DOTS_FOR_VALUE[(value - 1) as usize];
+    let fill = if keep { HELD_COLOR } else { UNHELD_COLOR };
+    let dots = DOTS
+        .iter()
+        .zip(active_dots.iter())
+        .filter(|(_, &active)| active)
+        .map(|((x, y), _)| {
+            let dcx = x * OFFSET;
+            let dcy = y * OFFSET;
+            rsx!(circle {
+                cx: "{dcx}",
+                cy: "{dcy}",
+                r: "{DOT_RADIUS}",
+                fill: "#333"
+            })
+        });
+
+    rsx!(cx,
+      svg {
+        onclick: move |e| cx.props.onclick.call(e),
+        prevent_default: "onclick",
+        "dioxus-prevent-default": "onclick",
+        class: "die",
+        view_box: "-1000 -1000 2000 2000",
+
+        rect {
+          x: "-1000",
+          y: "-1000",
+          width: "2000",
+          height: "2000",
+          rx: "{DOT_RADIUS}",
+          fill: "{fill}",
+        }
+
+        dots
+      }
+    )
+}

examples/todomvc.rs

@@ -120,15 +120,18 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
 
     rsx!(cx, li {
         class: "{completed} {editing}",
-        onclick: move |_| set_is_editing(true),
-        onfocusout: move |_| set_is_editing(false),
         div { class: "view",
             input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
                 onchange: move |evt| {
                     cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
                 }
             }
-            label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
+            label {
+                r#for: "cbg-{todo.id}",
+                onclick: move |_| set_is_editing(true),
+                onfocusout: move |_| set_is_editing(false),
+                "{todo.contents}"
+            }
         }
         is_editing.then(|| rsx!{
             input {