GUACAMOLE-288: Allow windows to have different dimensions.

Author: corentin-soriano

guacamole-common-js/src/main/webapp/modules/Client.js

@@ -331,16 +331,19 @@ Guacamole.Client = function(tunnel) {
      * @param {!number} height
      *     The height of the screen.
      * 
-     * @param {!number} monitors
-     *     The count of monitors.
+     * @param {!number} x_position
+     *     The x position of the screen (relative to the main window).
+     *
+     * @param {!number} top_offset
+     *     The top offset of the screen, in pixel.
      */
-    this.sendSize = function sendSize(width, height, monitors) {
+    this.sendSize = function sendSize(width, height, x_position, top_offset) {
 
         // Do not send requests if not connected
         if (!isConnected())
             return;
 
-        tunnel.sendMessage("size", width, height, monitors);
+        tunnel.sendMessage("size", width, height, x_position, top_offset);
 
     };
 
@@ -1679,10 +1682,10 @@ Guacamole.Client = function(tunnel) {
 
         "size": function(parameters) {
 
-            var layer_index = parseInt(parameters[0]);
-            var layer = getLayer(layer_index);
-            var width = parseInt(parameters[1]);
-            var height = parseInt(parameters[2]);
+            const layer_index = parseInt(parameters[0]);
+            const layer = getLayer(layer_index);
+            const width = parseInt(parameters[1]);
+            const height = parseInt(parameters[2]);
 
             display.resize(layer, width, height);
 

guacamole-common-js/src/main/webapp/modules/Display.js

@@ -34,15 +34,16 @@ Guacamole.Display = function() {
      * Reference to this Guacamole.Display.
      * @private
      */
-    var guac_display = this;
+    const guac_display = this;
 
-    var displayWidth = 0;
-    var displayHeight = 0;
-    var displayMonitors = 1;
-    var displayScale = 1;
+    let displayWidth = 0;
+    let displayHeight = 0;
+    let monitorWidth = null;
+    let monitorHeight = null;
+    let displayScale = 1;
 
     // Create display
-    var display = document.createElement("div");
+    const display = document.createElement("div");
     display.style.position = "relative";
     display.style.width = displayWidth + "px";
     display.style.height = displayHeight + "px";
@@ -551,16 +552,6 @@ Guacamole.Display = function() {
         return displayHeight;
     };
 
-    /**
-     * Returns the number of monitors.
-     * 
-     * @return {!number}
-     *     The number of monitors.
-     */
-    this.getMonitors = function getMonitors() {
-        return displayMonitors;
-    };
-
     /**
      * Returns the default layer of this display. Each Guacamole display always
      * has at least one layer. Other layers can optionally be created within
@@ -764,13 +755,16 @@ Guacamole.Display = function() {
     };
 
     /**
-     * Change the number of monitors.
+     * Set the current monitor size.
      * 
-     * @param {!number} monitors
-     *     The number of monitors.
+     * @param {!number} width
+     *     The width of the monitor, in pixels.
+     * @param {!number} height
+     *     The height of the monitor, in pixels.
      */
-    this.updateMonitors = function updateMonitors(monitors) {
-        displayMonitors = monitors;
+    this.setMonitorSize = function setMonitorSize(width, height) {
+        monitorWidth = width;
+        monitorHeight = height;
     }
 
     /**
@@ -791,7 +785,12 @@ Guacamole.Display = function() {
         scheduleTask(function __display_resize() {
 
             // Adjust width when using multiple monitors
-            width = width / displayMonitors;
+            if (monitorWidth)
+                width = monitorWidth;
+
+            // Adjust height when using multiple monitors
+            if (monitorHeight)
+                height = monitorHeight;
 
             layer.resize(width, height);
 

guacamole/src/main/frontend/src/app/client/controllers/secondaryMonitorController.js

@@ -46,7 +46,7 @@ angular.module('client').controller('secondaryMonitorController', ['$scope', '$i
           MENU_KEYS   = angular.extend({}, SHIFT_KEYS, ALT_KEYS, CTRL_KEYS);
 
     guacManageMonitor.init("secondary");
-    guacManageMonitor.monitorAttributes.monitorId = monitorId;
+    guacManageMonitor.monitorId = monitorId;
 
     guacManageMonitor.openConsentButton = function openConsentButton() {
 
@@ -85,15 +85,15 @@ angular.module('client').controller('secondaryMonitorController', ['$scope', '$i
 
         // Ctrl+Alt+Shift has NOT been pressed if any key is currently held
         // down that isn't Ctrl, Alt, or Shift
-        if (_.findKey(keyboard.pressed, (val, keysym) => !MENU_KEYS[keysym]))
+        if (_.findKey(keyboard.pressed, (_, keysym) => !MENU_KEYS[keysym]))
             return false;
 
         // Verify that one of each required key is held, regardless of
         // left/right location on the keyboard
         return !!(
-                _.findKey(SHIFT_KEYS, (val, keysym) => keyboard.pressed[keysym])
-                && _.findKey(ALT_KEYS,   (val, keysym) => keyboard.pressed[keysym])
-                && _.findKey(CTRL_KEYS,  (val, keysym) => keyboard.pressed[keysym])
+                _.findKey(SHIFT_KEYS, (_, keysym) => keyboard.pressed[keysym])
+                && _.findKey(ALT_KEYS,   (_, keysym) => keyboard.pressed[keysym])
+                && _.findKey(CTRL_KEYS,  (_, keysym) => keyboard.pressed[keysym])
         );
 
     };

guacamole/src/main/frontend/src/app/client/directives/guacClient.js

@@ -462,27 +462,22 @@ angular.module('client').directive('guacClient', [function guacClient() {
                 const pixelDensity = $window.devicePixelRatio || 1;
                 const width    = main.offsetWidth  * pixelDensity;
                 const height   = main.offsetHeight * pixelDensity;
-                const monitors = guacManageMonitor.getMonitorCount();
-
-                // Monitor count changed
-                if (display.getMonitors() !== monitors) {
-                    display.updateMonitors(monitors);
-                    client.sendSize(width, height, monitors);
-                }
 
                 // Window resized
-                else if (display.getWidth() !== width || display.getHeight() !== height)
-                    client.sendSize(width, height, monitors);
+                if (display.getWidth() !== width || display.getHeight() !== height)
+                    guacManageMonitor.sendSize({
+                        width: width,
+                        height: height,
+                        monitorId: 0,
+                        top: 0,
+                    });
 
             }
 
             $scope.$evalAsync(updateDisplayScale);
 
         };
 
-        // Launch resize on monitor count change
-        $window.addEventListener('monitor-count', $scope.mainElementResized);
-
         // Scroll client display if absolute mouse is in use (the same drag
         // gesture is needed for moving the mouse pointer with relative mouse)
         $scope.clientDrag = function clientDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {

guacamole/src/main/frontend/src/app/client/directives/guacClientSecondary.js

@@ -47,6 +47,7 @@ angular.module('client').directive('guacClientSecondary', [function guacClient()
 
         // Required services
         const $document         = $injector.get('$document');
+        const $window           = $injector.get('$window');
         const clipboardService  = $injector.get('clipboardService');
         const guacManageMonitor = $injector.get('guacManageMonitor');
 
@@ -79,6 +80,13 @@ angular.module('client').directive('guacClientSecondary', [function guacClient()
          */
         const displayContainer = $element.find('.display')[0];
 
+        /**
+         * The main containing element for the entire directive.
+         * 
+         * @type Element
+         */
+        const main = $element[0];
+
         /**
          * The tracked mouse.
          *
@@ -100,13 +108,6 @@ angular.module('client').directive('guacClientSecondary', [function guacClient()
          */
         const keyboard = new Guacamole.Keyboard($document[0]);
 
-        // Init monitor attributes with default values
-        guacManageMonitor.monitorAttributes.width = 0;
-        guacManageMonitor.monitorAttributes.height = 0;
-        guacManageMonitor.monitorAttributes.position = 0;
-        guacManageMonitor.monitorAttributes.count = 0;
-        guacManageMonitor.monitorAttributes.currentScaling = 1;
-
         // Set client instance on guacManageMonitor service
         guacManageMonitor.setClient(client);
 
@@ -123,10 +124,23 @@ angular.module('client').directive('guacClientSecondary', [function guacClient()
         };
 
         // Adjust the display scaling according to the window size.
-        $scope.mainElementResized = guacManageMonitor.mainElementResized;
+        $scope.mainElementResized = function mainElementResized() {
+
+            const pixelDensity = $window.devicePixelRatio ?? 1;
+            const width  = main.offsetWidth  * pixelDensity;
+            const height = main.offsetHeight * pixelDensity;
+            const top    = 0 // TODO: $window.screenY ?? 0;
+
+            const size = {
+                width: width,
+                height: height,
+                top: top > 0 ? top : 0,
+                monitorId: guacManageMonitor.monitorId,
+            };
 
-        // Ready for resize
-        guacManageMonitor.pushBroadcastMessage('resize', true);
+            // Send resize event to main window
+            guacManageMonitor.pushBroadcastMessage('size', size);
+        }
 
         // Handle any received clipboard data
         client.onclipboard = function clientClipboardReceived(stream, mimetype) {
@@ -176,22 +190,20 @@ angular.module('client').directive('guacClientSecondary', [function guacClient()
             display.showCursor(true);
 
             // Update client-side cursor
-            display.moveCursor(
-                Math.floor(e.state.x / guacManageMonitor.monitorAttributes.currentScaling),
-                Math.floor(e.state.y / guacManageMonitor.monitorAttributes.currentScaling)
-            );
+            display.moveCursor(e.state.x, e.state.y);
 
             // Click on actual display instead of the first
-            const displayOffset = guacManageMonitor.monitorAttributes.width * guacManageMonitor.monitorAttributes.position;
+            const displayOffsetX = guacManageMonitor.getOffsetX();
+            const displayOffsetY = guacManageMonitor.getOffsetY();
 
             // Convert mouse state to serializable object
             mouseState.down = e.state.down;
             mouseState.up = e.state.up;
             mouseState.left = e.state.left;
             mouseState.middle = e.state.middle;
             mouseState.right = e.state.right;
-            mouseState.x = e.state.x / guacManageMonitor.monitorAttributes.currentScaling + displayOffset;
-            mouseState.y = e.state.y / guacManageMonitor.monitorAttributes.currentScaling;
+            mouseState.x = e.state.x + displayOffsetX;
+            mouseState.y = e.state.y + displayOffsetY;
 
             // Send mouse state to main window
             guacManageMonitor.pushBroadcastMessage('mouseState', mouseState);