From d9bbd4b1b357792caefcbfc9ff9f279037d9111c Mon Sep 17 00:00:00 2001
From: Vladyslav Nikonov <mail@pacmancoder.xyz>
Date: Mon, 18 Mar 2024 11:10:21 +0200
Subject: [PATCH] feat(web): add API for cursor style override (#416)

---
 .../src/interfaces/UserInteraction.ts         |   2 ++
 .../iron-remote-gui/src/services/PublicAPI.ts |   5 ++++
 .../src/services/wasm-bridge.service.ts       |  27 ++++++++++++++++--
 .../lib/remote-screen/remote-screen.svelte    |  12 ++++++++
 .../iron-svelte-client/static/crosshair.png   | Bin 0 -> 163 bytes
 5 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 web-client/iron-svelte-client/static/crosshair.png

diff --git a/web-client/iron-remote-gui/src/interfaces/UserInteraction.ts b/web-client/iron-remote-gui/src/interfaces/UserInteraction.ts
index ffedf7b1..9e9c1a12 100644
--- a/web-client/iron-remote-gui/src/interfaces/UserInteraction.ts
+++ b/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>;
 }
diff --git a/web-client/iron-remote-gui/src/services/PublicAPI.ts b/web-client/iron-remote-gui/src/services/PublicAPI.ts
index 7df32ad2..d0607558 100644
--- a/web-client/iron-remote-gui/src/services/PublicAPI.ts
+++ b/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),
         };
     }
 }
diff --git a/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts b/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts
index 7bee8ca9..cabaec20 100644
--- a/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts
+++ b/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 {
diff --git a/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte b/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte
index e938cfaa..259b8c3b 100644
--- a/web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte
+++ b/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" />
diff --git a/web-client/iron-svelte-client/static/crosshair.png b/web-client/iron-svelte-client/static/crosshair.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3be01816a2392f3971d26e072428741a2b48e0c
GIT binary patch
literal 163
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~4mJh`2J356y%-o67>k44ofy`glX=O&z`&C3
z=<CS9u(6-}Pa-P=0|RG)M`SSrgP1A^GkON8d|+T;u<&$o46*P}R$%z&oVlif(<_<v
z|NqBVy#;!1^{_dZG3zo!H}<jx?Re@q=?6m`>*9|+Y#ABG%*+gH7usB^G~8d$z`(%Z
M>FVdQ&MBb@00*`#`2YX_

literal 0
HcmV?d00001