feat(web): add canvasResizedCallback method to SessionBuilder (#842)

Co-authored-by: Benoît Cortier <3809077+CBenoit@users.noreply.github.com>

Author: RRRadicalEdward

crates/iron-remote-desktop/src/lib.rs

@@ -287,6 +287,11 @@ macro_rules! make_bridge {
                 ))
             }
 
+            #[wasm_bindgen(js_name = canvasResizedCallback)]
+            pub fn canvas_resized_callback(&self, callback: $crate::internal::web_sys::js_sys::Function) -> Self {
+                Self($crate::SessionBuilder::canvas_resized_callback(&self.0, callback))
+            }
+
             pub fn extension(&self, ext: $crate::Extension) -> Self {
                 Self($crate::SessionBuilder::extension(&self.0, ext))
             }

crates/iron-remote-desktop/src/session.rs

@@ -51,6 +51,9 @@ pub trait SessionBuilder {
     #[must_use]
     fn force_clipboard_update_callback(&self, callback: js_sys::Function) -> Self;
 
+    #[must_use]
+    fn canvas_resized_callback(&self, callback: js_sys::Function) -> Self;
+
     #[must_use]
     fn extension(&self, ext: Extension) -> Self;
 

crates/ironrdp-web/src/session.rs

@@ -205,6 +205,11 @@ impl iron_remote_desktop::SessionBuilder for SessionBuilder {
         self.clone()
     }
 
+    /// Because the server does not resize the framebuffer in the RDP protocol, this feature is unused in IronRDP.
+    fn canvas_resized_callback(&self, _callback: js_sys::Function) -> Self {
+        self.clone()
+    }
+
     fn extension(&self, ext: Extension) -> Self {
         iron_remote_desktop::extension_match! {
             match ext;

web-client/iron-remote-desktop/src/interfaces/SessionBuilder.ts

@@ -61,6 +61,10 @@ export interface SessionBuilder {
      * Optional
      */
     forceClipboardUpdateCallback(callback: ForceClipboardUpdateCallback): SessionBuilder;
+    /**
+     * Optional
+     */
+    canvasResizedCallback(callback: CanvasResizedCallback): SessionBuilder;
     extension(value: unknown): SessionBuilder;
     connect(): Promise<Session>;
 }
@@ -85,3 +89,7 @@ interface RemoteReceiveForwardListCallback {
 interface ForceClipboardUpdateCallback {
     (): void;
 }
+
+interface CanvasResizedCallback {
+    (): void;
+}

web-client/iron-remote-desktop/src/iron-remote-desktop.svelte

@@ -54,6 +54,8 @@
     let remoteDesktopService = new RemoteDesktopService(module);
     let publicAPI = new PublicAPI(remoteDesktopService);
 
+    let currentScreenScale = ScreenScale.Fit;
+
     // Firefox's clipboard API is very limited, and doesn't support reading from the clipboard
     // without changing browser settings via `about:config`.
     //
@@ -491,25 +493,32 @@
         });
     }
 
-    function scaleSession(currentSize: ScreenScale | string) {
+    function canvasResized() {
+        scaleSession(currentScreenScale);
+    }
+
+    function scaleSession(screenScale: ScreenScale | string) {
         resetHostStyle();
         if (isVisible) {
-            switch (currentSize) {
+            switch (screenScale) {
                 case 'fit':
                 case ScreenScale.Fit:
                     loggingService.info('Size to fit');
+                    currentScreenScale = ScreenScale.Fit;
                     scale = 'fit';
                     fitResize();
                     break;
                 case 'full':
                 case ScreenScale.Full:
                     loggingService.info('Size to full');
+                    currentScreenScale = ScreenScale.Full;
                     fullResize();
                     scale = 'full';
                     break;
                 case 'real':
                 case ScreenScale.Real:
                     loggingService.info('Size to real');
+                    currentScreenScale = ScreenScale.Real;
                     realResize();
                     scale = 'real';
                     break;
@@ -666,6 +675,7 @@
         canvas.height = 600;
 
         remoteDesktopService.setCanvas(canvas);
+        remoteDesktopService.setOnCanvasResized(canvasResized);
 
         initListeners();
 

web-client/iron-remote-desktop/src/services/remote-desktop.service.ts

@@ -23,6 +23,7 @@ import type { SessionTerminationInfo } from '../interfaces/SessionTerminationInf
 type OnRemoteClipboardChanged = (data: ClipboardData) => void;
 type OnRemoteReceivedFormatsList = () => void;
 type OnForceClipboardUpdate = () => void;
+type OnCanvasResized = () => void;
 
 export class RemoteDesktopService {
     private module: RemoteDesktopModule;
@@ -32,6 +33,7 @@ export class RemoteDesktopService {
     private onRemoteClipboardChanged?: OnRemoteClipboardChanged;
     private onRemoteReceivedFormatList?: OnRemoteReceivedFormatsList;
     private onForceClipboardUpdate?: OnForceClipboardUpdate;
+    private onCanvasResized?: OnCanvasResized;
     private cursorHasOverride: boolean = false;
     private lastCursorStyle: string = 'default';
     private enableClipboard: boolean = true;
@@ -74,6 +76,11 @@ export class RemoteDesktopService {
         this.onForceClipboardUpdate = callback;
     }
 
+    /// Callback which is called when the canvas is resized.
+    setOnCanvasResized(callback: OnCanvasResized) {
+        this.onCanvasResized = callback;
+    }
+
     mouseIn(event: MouseEvent) {
         this.syncModifier(event);
     }
@@ -135,6 +142,9 @@ export class RemoteDesktopService {
         if (this.onForceClipboardUpdate != null && this.enableClipboard) {
             sessionBuilder.forceClipboardUpdateCallback(this.onForceClipboardUpdate);
         }
+        if (this.onCanvasResized != null) {
+            sessionBuilder.canvasResizedCallback(this.onCanvasResized);
+        }
 
         if (config.desktopSize != null) {
             sessionBuilder.desktopSize(