sketch for key code transfer

crates/cursor-move-webapp/src/components/mouse_area.rs

@@ -1,6 +1,9 @@
 use dioxus::{
     fullstack::{CborEncoding, WebSocketOptions, Websocket, extract::State, use_websocket},
-    html::geometry::{ElementSpace, euclid::Point2D},
+    html::{
+        geometry::{ElementSpace, euclid::Point2D},
+        input_data::MouseButton,
+    },
     logger::tracing,
     prelude::*,
 };
@@ -28,27 +31,70 @@ pub fn MouseArea() -> Element {
         }
     });
 
+    let pointer_move_handler = use_callback(move |evt: Event<PointerData>| {
+        if evt.held_buttons().contains(MouseButton::Primary) {
+            evt.prevent_default();
+            let point = evt.element_coordinates();
+            let last_position = last_cursor_position.write().replace(point);
+
+            if let Some(last_position) = last_position {
+                let delta = point - last_position;
+
+                spawn(async move {
+                    _ = socket
+                        .send(ClientEvent::MouseMove {
+                            dx: delta.x,
+                            dy: delta.y,
+                        })
+                        .await;
+                });
+            }
+        }
+    });
+
+    let pointer_down_handler = use_callback(move |evt: Event<PointerData>| {
+        let point = evt.element_coordinates();
+        *last_cursor_position.write() = Some(point);
+    });
+
+    let pointer_click_handler = use_callback(move |evt: Event<MouseData>| {
+        spawn(async move {
+            _ = socket.send(ClientEvent::Click).await;
+        });
+    });
+
+    let key_down_handler = use_callback(move |evt: Event<KeyboardData>| {
+        tracing::info!("Keydown");
+        spawn(async move {
+            _ = socket
+                .send(ClientEvent::KeyEvent {
+                    key: evt.key().to_string(),
+                    is_pressed: true,
+                })
+                .await;
+        });
+    });
+
+    let key_up_handler = use_callback(move |evt: Event<KeyboardData>| {
+        spawn(async move {
+            _ = socket
+                .send(ClientEvent::KeyEvent {
+                    key: evt.key().to_string(),
+                    is_pressed: false,
+                })
+                .await;
+        });
+    });
+
     rsx! {
         div {
-            class: Styles::mouse_area,
+            input { onkeydown: key_down_handler, onkeyup: key_up_handler}
+            div {
+                class: Styles::mouse_area,
 
-            onpointermove: move |evt| {
-                evt.prevent_default();
-                let point = evt.element_coordinates();
-                let last_position = last_cursor_position.write().replace(point);
-
-                if let Some(last_position) = last_position {
-                    let delta = point - last_position;
-
-                    spawn(async move {
-                        _ = socket.send(ClientEvent::MouseMove { dx: delta.x, dy: delta.y }).await;
-                    });
-                }
-            },
-
-            onpointerdown: move |evt| {
-                let point = evt.element_coordinates();
-                *last_cursor_position.write() = Some(point);
+                onpointermove: pointer_move_handler,
+                onpointerdown: pointer_down_handler,
+                onclick: pointer_click_handler
             }
         }
     }
@@ -57,6 +103,8 @@ pub fn MouseArea() -> Element {
 #[derive(Serialize, Deserialize, Debug)]
 enum ClientEvent {
     MouseMove { dx: f64, dy: f64 },
+    Click,
+    KeyEvent { key: String, is_pressed: bool },
 }
 
 #[derive(Serialize, Deserialize, Debug)]
@@ -65,15 +113,25 @@ enum ServerEvent {
 }
 
 #[expect(clippy::unused_async)]
-#[get("/api/mouse_move_ws", mouse_service: State<crate::server::mouse_service::MouseService>)]
+#[get("/api/mouse_move_ws", mouse_service: State<crate::server::input_proxy_service::InputProxyService>)]
 async fn mouse_move(
     options: WebSocketOptions
 ) -> Result<Websocket<ClientEvent, ServerEvent, CborEncoding>> {
     Ok(options.on_upgrade(move |mut socket| async move {
         _ = socket.send(ServerEvent::Ping).await;
 
-        while let Ok(ClientEvent::MouseMove { dx, dy }) = socket.recv().await {
-            mouse_service.move_mouse(dx, dy).await;
+        while let Ok(event) = socket.recv().await {
+            match event {
+                ClientEvent::MouseMove { dx, dy } => {
+                    mouse_service.move_mouse(dx, dy).await;
+                },
+                ClientEvent::Click => {
+                    mouse_service.click().await;
+                },
+                ClientEvent::KeyEvent { key, is_pressed } => {
+                    mouse_service.key_event(key, is_pressed).await;
+                },
+            }
         }
     }))
 }