|
@@ -1,5 +1,6 @@
|
|
use dioxus::{events::MouseData, prelude::*};
|
|
use dioxus::{events::MouseData, prelude::*};
|
|
use dioxus_core::Event;
|
|
use dioxus_core::Event;
|
|
|
|
+use dioxus_html::PointInteraction;
|
|
use std::convert::TryInto;
|
|
use std::convert::TryInto;
|
|
use std::fmt::Write;
|
|
use std::fmt::Write;
|
|
use std::rc::Rc;
|
|
use std::rc::Rc;
|
|
@@ -52,15 +53,9 @@ fn app(cx: Scope) -> Element {
|
|
};
|
|
};
|
|
|
|
|
|
cx.render(rsx! {
|
|
cx.render(rsx! {
|
|
- div {
|
|
|
|
- width: "100%",
|
|
|
|
- height: "100%",
|
|
|
|
- flex_direction: "column",
|
|
|
|
|
|
+ div { width: "100%", height: "100%", flex_direction: "column",
|
|
|
|
|
|
- div {
|
|
|
|
- width: "100%",
|
|
|
|
- height: "50%",
|
|
|
|
- flex_direction: "row",
|
|
|
|
|
|
+ div { width: "100%", height: "50%", flex_direction: "row",
|
|
div {
|
|
div {
|
|
border_width: "1px",
|
|
border_width: "1px",
|
|
width: "50%",
|
|
width: "50%",
|
|
@@ -71,7 +66,7 @@ fn app(cx: Scope) -> Element {
|
|
onmouseenter: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
onmouseenter: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
onmousedown: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
onmousedown: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
onmouseup: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
onmouseup: move |m| q1_color.set([get_brightness(m.inner()), 0, 0]),
|
|
- onwheel: move |w| q1_color.set([q1_color[0] + (10.0*w.delta().strip_units().y) as i32, 0, 0]),
|
|
|
|
|
|
+ onwheel: move |w| q1_color.set([q1_color[0] + (10.0 * w.delta().strip_units().y) as i32, 0, 0]),
|
|
onmouseleave: move |_| q1_color.set([200; 3]),
|
|
onmouseleave: move |_| q1_color.set([200; 3]),
|
|
onmousemove: update_data,
|
|
onmousemove: update_data,
|
|
"click me"
|
|
"click me"
|
|
@@ -85,17 +80,14 @@ fn app(cx: Scope) -> Element {
|
|
onmouseenter: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
onmouseenter: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
onmousedown: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
onmousedown: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
onmouseup: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
onmouseup: move |m| q2_color.set([get_brightness(m.inner()); 3]),
|
|
- onwheel: move |w| q2_color.set([q2_color[0] + (10.0*w.delta().strip_units().y) as i32;3]),
|
|
|
|
|
|
+ onwheel: move |w| q2_color.set([q2_color[0] + (10.0 * w.delta().strip_units().y) as i32; 3]),
|
|
onmouseleave: move |_| q2_color.set([200; 3]),
|
|
onmouseleave: move |_| q2_color.set([200; 3]),
|
|
onmousemove: update_data,
|
|
onmousemove: update_data,
|
|
"click me"
|
|
"click me"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- div {
|
|
|
|
- width: "100%",
|
|
|
|
- height: "50%",
|
|
|
|
- flex_direction: "row",
|
|
|
|
|
|
+ div { width: "100%", height: "50%", flex_direction: "row",
|
|
div {
|
|
div {
|
|
width: "50%",
|
|
width: "50%",
|
|
height: "100%",
|
|
height: "100%",
|
|
@@ -105,7 +97,7 @@ fn app(cx: Scope) -> Element {
|
|
onmouseenter: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
onmouseenter: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
onmousedown: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
onmousedown: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
onmouseup: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
onmouseup: move |m| q3_color.set([0, get_brightness(m.inner()), 0]),
|
|
- onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0*w.delta().strip_units().y) as i32, 0]),
|
|
|
|
|
|
+ onwheel: move |w| q3_color.set([0, q3_color[1] + (10.0 * w.delta().strip_units().y) as i32, 0]),
|
|
onmouseleave: move |_| q3_color.set([200; 3]),
|
|
onmouseleave: move |_| q3_color.set([200; 3]),
|
|
onmousemove: update_data,
|
|
onmousemove: update_data,
|
|
"click me"
|
|
"click me"
|
|
@@ -119,16 +111,16 @@ fn app(cx: Scope) -> Element {
|
|
onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
onmouseenter: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
onmousedown: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
onmouseup: move |m| q4_color.set([0, 0, get_brightness(m.inner())]),
|
|
- onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0*w.delta().strip_units().y) as i32]),
|
|
|
|
|
|
+ onwheel: move |w| q4_color.set([0, 0, q4_color[2] + (10.0 * w.delta().strip_units().y) as i32]),
|
|
onmouseleave: move |_| q4_color.set([200; 3]),
|
|
onmouseleave: move |_| q4_color.set([200; 3]),
|
|
onmousemove: update_data,
|
|
onmousemove: update_data,
|
|
"click me"
|
|
"click me"
|
|
}
|
|
}
|
|
- },
|
|
|
|
- div {"Page coordinates: {page_coordinates}"},
|
|
|
|
- div {"Element coordinates: {element_coordinates}"},
|
|
|
|
- div {"Buttons: {buttons}"},
|
|
|
|
- div {"Modifiers: {modifiers}"},
|
|
|
|
|
|
+ }
|
|
|
|
+ div { "Page coordinates: {page_coordinates}" }
|
|
|
|
+ div { "Element coordinates: {element_coordinates}" }
|
|
|
|
+ div { "Buttons: {buttons}" }
|
|
|
|
+ div { "Modifiers: {modifiers}" }
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|