events.rs 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. use dioxus::html::geometry::euclid::Vector3D;
  2. use dioxus::prelude::*;
  3. use dioxus_desktop::DesktopContext;
  4. pub(crate) fn check_app_exits(app: Component) {
  5. // This is a deadman's switch to ensure that the app exits
  6. let should_panic = std::sync::Arc::new(std::sync::atomic::AtomicBool::new(true));
  7. let should_panic_clone = should_panic.clone();
  8. std::thread::spawn(move || {
  9. std::thread::sleep(std::time::Duration::from_secs(100));
  10. if should_panic_clone.load(std::sync::atomic::Ordering::SeqCst) {
  11. std::process::exit(exitcode::SOFTWARE);
  12. }
  13. });
  14. dioxus_desktop::launch(app);
  15. should_panic.store(false, std::sync::atomic::Ordering::SeqCst);
  16. }
  17. pub fn main() {
  18. check_app_exits(app);
  19. }
  20. fn mock_event(cx: &ScopeState, id: &'static str, value: &'static str) {
  21. use_effect(cx, (), |_| {
  22. let desktop_context: DesktopContext = cx.consume_context().unwrap();
  23. async move {
  24. tokio::time::sleep(std::time::Duration::from_millis(100)).await;
  25. desktop_context.eval(&format!(
  26. r#"let element = document.getElementById('{}');
  27. // Dispatch a synthetic event
  28. const event = {};
  29. console.log(element, event);
  30. element.dispatchEvent(event);
  31. "#,
  32. id, value
  33. ));
  34. }
  35. });
  36. }
  37. #[allow(deprecated)]
  38. fn app(cx: Scope) -> Element {
  39. let desktop_context: DesktopContext = cx.consume_context().unwrap();
  40. let recieved_events = use_state(cx, || 0);
  41. // button
  42. mock_event(
  43. &cx,
  44. "button",
  45. r#"new MouseEvent("click", {
  46. view: window,
  47. bubbles: true,
  48. cancelable: true,
  49. button: 0,
  50. })"#,
  51. );
  52. // mouse_move_div
  53. mock_event(
  54. &cx,
  55. "mouse_move_div",
  56. r#"new MouseEvent("mousemove", {
  57. view: window,
  58. bubbles: true,
  59. cancelable: true,
  60. buttons: 2,
  61. })"#,
  62. );
  63. // mouse_click_div
  64. mock_event(
  65. &cx,
  66. "mouse_click_div",
  67. r#"new MouseEvent("click", {
  68. view: window,
  69. bubbles: true,
  70. cancelable: true,
  71. buttons: 2,
  72. button: 2,
  73. })"#,
  74. );
  75. // mouse_dblclick_div
  76. mock_event(
  77. &cx,
  78. "mouse_dblclick_div",
  79. r#"new MouseEvent("dblclick", {
  80. view: window,
  81. bubbles: true,
  82. cancelable: true,
  83. buttons: 1|2,
  84. button: 2,
  85. })"#,
  86. );
  87. // mouse_down_div
  88. mock_event(
  89. &cx,
  90. "mouse_down_div",
  91. r#"new MouseEvent("mousedown", {
  92. view: window,
  93. bubbles: true,
  94. cancelable: true,
  95. buttons: 2,
  96. button: 2,
  97. })"#,
  98. );
  99. // mouse_up_div
  100. mock_event(
  101. &cx,
  102. "mouse_up_div",
  103. r#"new MouseEvent("mouseup", {
  104. view: window,
  105. bubbles: true,
  106. cancelable: true,
  107. buttons: 0,
  108. button: 0,
  109. })"#,
  110. );
  111. // wheel_div
  112. mock_event(
  113. &cx,
  114. "wheel_div",
  115. r#"new WheelEvent("wheel", {
  116. view: window,
  117. deltaX: 1.0,
  118. deltaY: 2.0,
  119. deltaZ: 3.0,
  120. deltaMode: 0x00,
  121. bubbles: true,
  122. })"#,
  123. );
  124. // key_down_div
  125. mock_event(
  126. &cx,
  127. "key_down_div",
  128. r#"new KeyboardEvent("keydown", {
  129. key: "a",
  130. code: "KeyA",
  131. location: 0,
  132. repeat: true,
  133. keyCode: 65,
  134. charCode: 97,
  135. char: "a",
  136. charCode: 0,
  137. altKey: false,
  138. ctrlKey: false,
  139. metaKey: false,
  140. shiftKey: false,
  141. isComposing: false,
  142. which: 65,
  143. bubbles: true,
  144. })"#,
  145. );
  146. // key_up_div
  147. mock_event(
  148. &cx,
  149. "key_up_div",
  150. r#"new KeyboardEvent("keyup", {
  151. key: "a",
  152. code: "KeyA",
  153. location: 0,
  154. repeat: false,
  155. keyCode: 65,
  156. charCode: 97,
  157. char: "a",
  158. charCode: 0,
  159. altKey: false,
  160. ctrlKey: false,
  161. metaKey: false,
  162. shiftKey: false,
  163. isComposing: false,
  164. which: 65,
  165. bubbles: true,
  166. })"#,
  167. );
  168. // key_press_div
  169. mock_event(
  170. &cx,
  171. "key_press_div",
  172. r#"new KeyboardEvent("keypress", {
  173. key: "a",
  174. code: "KeyA",
  175. location: 0,
  176. repeat: false,
  177. keyCode: 65,
  178. charCode: 97,
  179. char: "a",
  180. charCode: 0,
  181. altKey: false,
  182. ctrlKey: false,
  183. metaKey: false,
  184. shiftKey: false,
  185. isComposing: false,
  186. which: 65,
  187. bubbles: true,
  188. })"#,
  189. );
  190. // focus_in_div
  191. mock_event(
  192. &cx,
  193. "focus_in_div",
  194. r#"new FocusEvent("focusin", {bubbles: true})"#,
  195. );
  196. // focus_out_div
  197. mock_event(
  198. &cx,
  199. "focus_out_div",
  200. r#"new FocusEvent("focusout",{bubbles: true})"#,
  201. );
  202. if **recieved_events == 12 {
  203. println!("all events recieved");
  204. desktop_context.close();
  205. }
  206. cx.render(rsx! {
  207. div {
  208. button {
  209. id: "button",
  210. onclick: move |event| {
  211. println!("{:?}", event.data);
  212. assert!(event.data.modifiers().is_empty());
  213. assert!(event.data.held_buttons().is_empty());
  214. assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary));
  215. recieved_events.modify(|x| *x + 1)
  216. },
  217. }
  218. div {
  219. id: "mouse_move_div",
  220. onmousemove: move |event| {
  221. println!("{:?}", event.data);
  222. assert!(event.data.modifiers().is_empty());
  223. assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
  224. recieved_events.modify(|x| *x + 1)
  225. },
  226. }
  227. div {
  228. id: "mouse_click_div",
  229. onclick: move |event| {
  230. println!("{:?}", event.data);
  231. assert!(event.data.modifiers().is_empty());
  232. assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
  233. assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
  234. recieved_events.modify(|x| *x + 1)
  235. },
  236. }
  237. div{
  238. id: "mouse_dblclick_div",
  239. ondblclick: move |event| {
  240. println!("{:?}", event.data);
  241. assert!(event.data.modifiers().is_empty());
  242. assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Primary));
  243. assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
  244. assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
  245. recieved_events.modify(|x| *x + 1)
  246. }
  247. }
  248. div{
  249. id: "mouse_down_div",
  250. onmousedown: move |event| {
  251. println!("{:?}", event.data);
  252. assert!(event.data.modifiers().is_empty());
  253. assert!(event.data.held_buttons().contains(dioxus_html::input_data::MouseButton::Secondary));
  254. assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Secondary));
  255. recieved_events.modify(|x| *x + 1)
  256. }
  257. }
  258. div{
  259. id: "mouse_up_div",
  260. onmouseup: move |event| {
  261. println!("{:?}", event.data);
  262. assert!(event.data.modifiers().is_empty());
  263. assert!(event.data.held_buttons().is_empty());
  264. assert_eq!(event.data.trigger_button(), Some(dioxus_html::input_data::MouseButton::Primary));
  265. recieved_events.modify(|x| *x + 1)
  266. }
  267. }
  268. div{
  269. id: "wheel_div",
  270. width: "100px",
  271. height: "100px",
  272. background_color: "red",
  273. onwheel: move |event| {
  274. println!("{:?}", event.data);
  275. let dioxus_html::geometry::WheelDelta::Pixels(delta)= event.data.delta()else{
  276. panic!("Expected delta to be in pixels")
  277. };
  278. assert_eq!(delta, Vector3D::new(1.0, 2.0, 3.0));
  279. recieved_events.modify(|x| *x + 1)
  280. }
  281. }
  282. input{
  283. id: "key_down_div",
  284. onkeydown: move |event| {
  285. println!("{:?}", event.data);
  286. assert!(event.data.modifiers().is_empty());
  287. assert_eq!(event.data.key().to_string(), "a");
  288. assert_eq!(event.data.code().to_string(), "KeyA");
  289. assert_eq!(event.data.location, 0);
  290. assert!(event.data.is_auto_repeating());
  291. recieved_events.modify(|x| *x + 1)
  292. }
  293. }
  294. input{
  295. id: "key_up_div",
  296. onkeyup: move |event| {
  297. println!("{:?}", event.data);
  298. assert!(event.data.modifiers().is_empty());
  299. assert_eq!(event.data.key().to_string(), "a");
  300. assert_eq!(event.data.code().to_string(), "KeyA");
  301. assert_eq!(event.data.location, 0);
  302. assert!(!event.data.is_auto_repeating());
  303. recieved_events.modify(|x| *x + 1)
  304. }
  305. }
  306. input{
  307. id: "key_press_div",
  308. onkeypress: move |event| {
  309. println!("{:?}", event.data);
  310. assert!(event.data.modifiers().is_empty());
  311. assert_eq!(event.data.key().to_string(), "a");
  312. assert_eq!(event.data.code().to_string(), "KeyA");
  313. assert_eq!(event.data.location, 0);
  314. assert!(!event.data.is_auto_repeating());
  315. recieved_events.modify(|x| *x + 1)
  316. }
  317. }
  318. input{
  319. id: "focus_in_div",
  320. onfocusin: move |event| {
  321. println!("{:?}", event.data);
  322. recieved_events.modify(|x| *x + 1)
  323. }
  324. }
  325. input{
  326. id: "focus_out_div",
  327. onfocusout: move |event| {
  328. println!("{:?}", event.data);
  329. recieved_events.modify(|x| *x + 1)
  330. }
  331. }
  332. }
  333. })
  334. }