events.rs 12 KB

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