Support changing the mouse pointer

lib/srv/desktop/rdp/rdpclient/src/client.rs

@@ -1101,7 +1101,7 @@ fn create_config(width: u16, height: u16, pin: String) -> Config {
         // https://github.com/FreeRDP/FreeRDP/blob/4e24b966c86fdf494a782f0dfcfc43a057a2ea60/libfreerdp/core/settings.c#LL49C34-L49C70
         client_dir: "C:\\Windows\\System32\\mstscax.dll".to_string(),
         platform: MajorPlatformType::UNSPECIFIED,
-        no_server_pointer: true,
+        no_server_pointer: false,
         autologon: true,
         pointer_software_rendering: false,
     }

web/packages/teleport/src/components/TdpClientCanvas/TdpClientCanvas.tsx

@@ -97,6 +97,47 @@ function TdpClientCanvas(props: Props) {
     }
   }, [client, clientOnPngFrame]);
 
+  let previousCursor = 'auto';
+
+  useEffect(() => {
+    if (client) {
+      const canvas = canvasRef.current;
+      const updatePointer = (pointer: {
+        data: ImageData | boolean;
+        hotspot_x?: number;
+        hotspot_y?: number;
+      }) => {
+        if (typeof pointer.data === 'boolean') {
+          if (pointer.data) {
+            canvas.style.cursor = previousCursor;
+          } else {
+            previousCursor = canvas.style.cursor;
+            canvas.style.cursor = 'none';
+          }
+          return;
+        }
+        const cursor = document.createElement('canvas');
+        cursor.width = pointer.data.width;
+        cursor.height = pointer.data.height;
+        cursor.getContext('2d').putImageData(pointer.data, 0, 0);
+        canvas.style.cursor =
+          'url(' +
+          cursor.toDataURL() +
+          ') ' +
+          pointer.hotspot_x +
+          ' ' +
+          pointer.hotspot_y +
+          ', auto';
+      };
+
+      client.on(TdpClientEvent.POINTER, updatePointer);
+
+      return () => {
+        client.removeListener(TdpClientEvent.POINTER, updatePointer);
+      };
+    }
+  }, [client]);
+
   useEffect(() => {
     if (client && clientOnBmpFrame) {
       const canvas = canvasRef.current;

web/packages/teleport/src/ironrdp/src/lib.rs

@@ -162,7 +162,7 @@ impl FastPathProcessor {
                 user_channel_id,
                 // These should be set to the same values as they're set to in the
                 // `Config` object in lib/srv/desktop/rdp/rdpclient/src/client.rs.
-                no_server_pointer: true,
+                no_server_pointer: false,
                 pointer_software_rendering: false,
             }
             .build(),
@@ -184,6 +184,7 @@ impl FastPathProcessor {
         cb_context: &JsValue,
         draw_cb: &js_sys::Function,
         respond_cb: &js_sys::Function,
+        update_pointer_cb: &js_sys::Function,
     ) -> Result<(), JsValue> {
         self.check_remote_fx(tdp_fast_path_frame)?;
 
@@ -211,13 +212,19 @@ impl FastPathProcessor {
                     UpdateKind::Region(region) => {
                         outputs.push(ActiveStageOutput::GraphicsUpdate(region));
                     }
-                    UpdateKind::PointerDefault
-                    | UpdateKind::PointerHidden
-                    | UpdateKind::PointerPosition { .. }
-                    | UpdateKind::PointerBitmap(_) => {
-                        warn!("Pointer updates are not supported");
+                    UpdateKind::PointerDefault => {
+                        outputs.push(ActiveStageOutput::PointerDefault);
+                    }
+                    UpdateKind::PointerHidden => {
+                        outputs.push(ActiveStageOutput::PointerHidden);
+                    }
+                    UpdateKind::PointerPosition { .. } => {
+                        warn!("Pointer position updates are not supported");
                         continue;
                     }
+                    UpdateKind::PointerBitmap(pointer) => {
+                        outputs.push(ActiveStageOutput::PointerBitmap(pointer))
+                    }
                 }
             }
 
@@ -240,6 +247,30 @@ impl FastPathProcessor {
                 ActiveStageOutput::Terminate => {
                     return Err(JsValue::from_str("Terminate should never be returned"));
                 }
+                ActiveStageOutput::PointerBitmap(pointer) => {
+                    let data = &pointer.bitmap_data;
+                    let image_data = create_image_data_from_image_and_region(
+                        data,
+                        InclusiveRectangle {
+                            left: 0,
+                            top: 0,
+                            right: pointer.width - 1,
+                            bottom: pointer.height - 1,
+                        },
+                    )?;
+                    update_pointer_cb.call3(
+                        cb_context,
+                        &JsValue::from(image_data),
+                        &JsValue::from(pointer.hotspot_x),
+                        &JsValue::from(pointer.hotspot_y),
+                    )?;
+                }
+                ActiveStageOutput::PointerDefault => {
+                    update_pointer_cb.call1(cb_context, &JsValue::from(true))?;
+                }
+                ActiveStageOutput::PointerHidden => {
+                    update_pointer_cb.call1(cb_context, &JsValue::from(false))?;
+                }
                 _ => {
                     debug!("Unhandled ActiveStageOutput: {:?}", output);
                 }

web/packages/teleport/src/lib/tdp/client.ts

@@ -74,6 +74,7 @@ export enum TdpClientEvent {
   WS_OPEN = 'ws open',
   WS_CLOSE = 'ws close',
   RESET = 'reset',
+  POINTER = 'pointer',
 }
 
 export enum LogType {
@@ -348,6 +349,9 @@ export default class Client extends EventEmitterWebAuthnSender {
         },
         (responseFrame: ArrayBuffer) => {
           this.sendRDPResponsePDU(responseFrame);
+        },
+        (data: ImageData | boolean, hotspot_x?: number, hotspot_y?: number) => {
+          this.emit(TdpClientEvent.POINTER, { data, hotspot_x, hotspot_y });
         }
       );
     } catch (e) {