feat(web): add API for cursor style override (#416)

web-client/iron-remote-gui/src/interfaces/UserInteraction.ts

@@ -29,5 +29,7 @@ export interface UserInteraction {
 
     shutdown(): void;
 
+    setCursorStyleOverride(style: string | null): void;
+
     sessionListener: Observable<SessionEvent>;
 }

web-client/iron-remote-gui/src/services/PublicAPI.ts

@@ -64,6 +64,10 @@ export class PublicAPI {
         this.wasmService.setKeyboardUnicodeMode(use_unicode);
     }
 
+    private setCursorStyleOverride(style: string | null) {
+        this.wasmService.setCursorStyleOverride(style);
+    }
+
     getExposedFunctions(): UserInteraction {
         return {
             setVisibility: this.setVisibility.bind(this),
@@ -74,6 +78,7 @@ export class PublicAPI {
             metaKey: this.metaKey.bind(this),
             shutdown: this.shutdown.bind(this),
             setKeyboardUnicodeMode: this.setKeyboardUnicodeMode.bind(this),
+            setCursorStyleOverride: this.setCursorStyleOverride.bind(this),
         };
     }
 }

web-client/iron-remote-gui/src/services/wasm-bridge.service.ts

@@ -46,6 +46,8 @@ export class WasmBridgeService {
     private onRemoteClipboardChanged?: OnRemoteClipboardChanged;
     private onRemoteReceivedFormatList?: OnRemoteReceivedFormatsList;
     private onForceClipboardUpdate?: OnForceClipboardUpdate;
+    private cursorHasOverride: boolean = false;
+    private lastCursorStyle: string = 'default';
 
     resize: Observable<ResizeEvent>;
     session?: Session;
@@ -264,6 +266,16 @@ export class WasmBridgeService {
         this.keyboardUnicodeMode = use_unicode;
     }
 
+    setCursorStyleOverride(style: string | null) {
+        if (style == null) {
+            this.canvas!.style.cursor = this.lastCursorStyle;
+            this.cursorHasOverride = false;
+        } else {
+            this.canvas!.style.cursor = style;
+            this.cursorHasOverride = true;
+        }
+    }
+
     private releaseAllInputs() {
         this.session?.release_all_inputs();
     }
@@ -354,13 +366,15 @@ export class WasmBridgeService {
         hotspot_x: number | undefined,
         hotspot_y: number | undefined,
     ) {
+        let cssStyle;
+
         switch (style) {
             case 'hidden': {
-                this.canvas!.style.cursor = 'none';
+                cssStyle = 'none';
                 break;
             }
             case 'default': {
-                this.canvas!.style.cursor = 'default';
+                cssStyle = 'default';
                 break;
             }
             case 'url': {
@@ -377,14 +391,21 @@ export class WasmBridgeService {
                 const rounded_hotspot_x = Math.round(hotspot_x);
                 const rounded_hotspot_y = Math.round(hotspot_y);
 
-                this.canvas!.style.cursor = `url(${data}) ${rounded_hotspot_x} ${rounded_hotspot_y}, default`;
+                cssStyle = `url(${data}) ${rounded_hotspot_x} ${rounded_hotspot_y}, default`;
 
                 break;
             }
             default: {
                 console.error(`Unsupported cursor style: ${style}.`);
+                return;
             }
         }
+
+        this.lastCursorStyle = cssStyle;
+
+        if (!this.cursorHasOverride) {
+            this.canvas!.style.cursor = cssStyle;
+        }
     }
 
     private syncModifier(evt: KeyboardEvent | MouseEvent): void {

web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte

@@ -5,6 +5,7 @@
     import type { UserInteraction } from '../../../static/iron-remote-gui';
 
     let uiService: UserInteraction;
+    let cursorOverrideActive = false;
 
     userInteractionService.subscribe((uis) => {
         if (uis != null) {
@@ -34,6 +35,16 @@
         uiService.setKeyboardUnicodeMode(element.checked);
     }
 
+    function toggleCursorKind() {
+        if (cursorOverrideActive) {
+            uiService.setCursorStyleOverride(null);
+        } else {
+            uiService.setCursorStyleOverride('url("crosshair.png") 7 7, default');
+        }
+
+        cursorOverrideActive = !cursorOverrideActive;
+    }
+
     onMount(async () => {
         let el = document.querySelector('iron-remote-gui');
 
@@ -64,6 +75,7 @@
                 <path d="M216,69.7,32,96V249H216V69.7Z" />
             </svg>
         </button>
+        <button on:click={() => toggleCursorKind()}>Toggle cursor kind</button>
         <button on:click={() => uiService.shutdown()}>Terminate Session</button>
         <label style="color: white;">
             <input on:click={(e) => onUnicodeModeChange(e)} type="checkbox" />