feat(webapp): allow dynamically adjust wheel_speed_factor for VNC and ARD sessions (#1369)

The wheel speed factor setting is moved to the toolbar.

Co-authored-by: Benoît CORTIER <git.divisible626@passmail.com>

Author: RRRadicalEdward

webapp/package-lock.json

@@ -28,9 +28,9 @@
     "@angular/platform-browser-dynamic": "18.2.1",
     "@angular/router": "18.2.1",
     "@devolutions/icons": "4.0.8",
-    "@devolutions/iron-remote-desktop": "^0.2.0",
-    "@devolutions/iron-remote-desktop-rdp": "^0.1.1",
-    "@devolutions/iron-remote-desktop-vnc": "^0.2.1",
+    "@devolutions/iron-remote-desktop": "^0.4.0",
+    "@devolutions/iron-remote-desktop-rdp": "^0.2.0",
+    "@devolutions/iron-remote-desktop-vnc": "^0.3.0",
     "@devolutions/web-ssh-gui": "0.3.1",
     "@devolutions/web-telnet-gui": "0.2.19",
     "primeflex": "3.3.1",

webapp/package.json

@@ -11,7 +11,8 @@
     [sessionContainerParent]="sessionContainerElement"
     [middleButtons]="middleToolbarButtons"
     [middleToggleButtons]="middleToolbarToggleButtons"
-    [rightButtons]="rightToolbarButtons">
+    [rightButtons]="rightToolbarButtons"
+    [sliders]="sliders">
   </session-toolbar>
 
   <div class="loading-info-container" *ngIf="loading">

webapp/src/client/app/modules/web-client/ard/web-client-ard.component.html

@@ -97,6 +97,17 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
     },
   ];
 
+  sliders = [
+    {
+      label: 'Wheel Speed',
+      value: 1,
+      onChange: (value: number) => this.setWheelSpeedFactor(value),
+      min: 0.1,
+      max: 3,
+      step: 0.1,
+    },
+  ];
+
   protected removeElement = new Subject();
   private remoteClientEventListener: (event: Event) => void;
   private remoteClient: UserInteraction;
@@ -168,6 +179,10 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
     this.cursorOverrideActive = !this.cursorOverrideActive;
   }
 
+  setWheelSpeedFactor(factor: number): void {
+    this.remoteClient.invokeExtension(wheelSpeedFactor(factor));
+  }
+
   removeWebClientGuiElement(): void {
     this.removeElement.pipe(takeUntil(this.destroyed$)).subscribe({
       next: (): void => {
@@ -331,8 +346,7 @@ export class WebClientArdComponent extends WebClientBaseComponent implements OnI
       .withPassword(connectionParameters.password)
       .withDestination(connectionParameters.host)
       .withProxyAddress(connectionParameters.gatewayAddress)
-      .withAuthToken(connectionParameters.token)
-      .withExtension(wheelSpeedFactor(connectionParameters.wheelSpeedFactor));
+      .withAuthToken(connectionParameters.token);
 
     if (connectionParameters.resolutionQuality != null) {
       configBuilder.withExtension(resolutionQuality(connectionParameters.resolutionQuality));

webapp/src/client/app/modules/web-client/ard/web-client-ard.component.ts

@@ -28,11 +28,6 @@
                                              [inputFormData]="inputFormData"></web-client-ard-quality-mode-control>
       </div>
 
-      <div class="col-12 gateway-form-group">
-        <web-client-wheel-speed-factor-control [parentForm]="form"
-                                               [inputFormData]="inputFormData"></web-client-wheel-speed-factor-control>
-      </div>
-
     </div>
 
 </div>

webapp/src/client/app/modules/web-client/form/form-components/ard/ard-form.component.html

@@ -44,11 +44,6 @@
                                             [inputFormData]="inputFormData"></web-client-enabled-encodings-control>
     </div>
 
-    <div class="col-12 gateway-form-group">
-      <web-client-wheel-speed-factor-control [parentForm]="form"
-                                             [inputFormData]="inputFormData"></web-client-wheel-speed-factor-control>
-    </div>
-
     <div class="col-12 gateway-form-group">
       <web-client-enable-cursor-control [parentForm]="form"
                                          [inputFormData]="inputFormData"></web-client-enable-cursor-control>

webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.html

@@ -113,11 +113,11 @@ export class WebClientRdpComponent extends WebClientBaseComponent implements OnI
   checkboxes = [
     {
       label: 'Unicode Keyboard Mode',
-      action: () => {
+      default: this.useUnicodeKeyboard,
+      onChange: () => {
         this.useUnicodeKeyboard = !this.useUnicodeKeyboard;
         this.setKeyboardUnicodeMode(this.useUnicodeKeyboard);
       },
-      isChecked: () => this.useUnicodeKeyboard,
     },
   ];