several fixes

app/ui_screen.js

@@ -114,6 +114,8 @@ const UI = {
             parent.postMessage({ action: 'connection_state', value: state}, '*' );
         }
 
+        let connect_el = document.getElementById('noVNC_connect_dlg');
+
         switch (state) {
             case 'init':
                 break;
@@ -123,6 +125,9 @@ const UI = {
                 break;
             case 'connected':
                 document.documentElement.classList.add("noVNC_connected");
+                if (!connect_el.classList.contains("noVNC_hidden")) {
+                    connect_el.classList.add('noVNC_hidden');
+                }
                 break;
             case 'disconnecting':
                 transitionElem.textContent = _("Disconnecting...");
@@ -130,6 +135,9 @@ const UI = {
                 break;
             case 'disconnected':
                 document.documentElement.classList.add("noVNC_disconnected");
+                if (connect_el.classList.contains("noVNC_hidden")) {
+                    connect_el.classList.remove('noVNC_hidden');
+                }
                 break;
             case 'reconnecting':
                 transitionElem.textContent = _("Reconnecting...");

core/display.js

@@ -12,7 +12,6 @@ import Base64 from "./base64.js";
 import { toSigned32bit } from './util/int.js';
 import { isWindows } from './util/browser.js';
 import { uuidv4 } from './util/strings.js';
-import base64 from './base64.js';
 
 export default class Display {
     constructor(target, isPrimaryDisplay) {
@@ -203,8 +202,10 @@ export default class Display {
         //recalculate primary display container size
         this._screens[0].containerHeight = this._target.parentNode.offsetHeight;
         this._screens[0].containerWidth = this._target.parentNode.offsetWidth;
-        this._screens[0].width = this._target.width;
+        this._screens[0].width = this._target.parentNode.offsetWidth;
-        this._screens[0].height = this._target.height;
+        this._screens[0].height = this._target.parentNode.offsetHeight;
+        //this._screens[0].width = this._target.width;
+        //this._screens[0].height = this._target.height;
 
         //calculate server-side resolution of each screen
         for (let i=0; i<this._screens.length; i++) {
@@ -244,6 +245,8 @@ export default class Display {
             this._screens[i].serverWidth = width;
             this._screens[i].serverHeight = height;
             this._screens[i].scale = scale;
+            this._screens[i].x2 = this._screens[i].x + this._screens[i].width;
+            this._screens[i].y2 = this._screens[i].y + this._screens[i].height;
         }
 
         for (let i = 0; i < this._screens.length; i++) {
@@ -268,8 +271,29 @@ export default class Display {
     }
 
     addScreen(screenID, width, height, pixelRatio, containerHeight, containerWidth) {
-        if (this._isPrimaryDisplay) {
+        if (!this._isPrimaryDisplay) {
-            //for now, place new screen to the far right, until the user repositions it
+            throw new Error("Cannot add a screen to a secondary display.");
+        }
+        let screenIdx = -1;
+
+        //Does the screen already exist?
+        for (let i = 0; i < this._screens.length; i++) {
+            if (this._screens[i].screenID === screenID) {
+                screenIdx = i;
+            }
+        }
+
+        if (screenIdx > 0) {
+            //existing screen, update
+            const screen = this._screens[screenIdx];
+            screen.width = width;
+            screen.height = height;
+            screen.containerHeight = containerHeight;
+            screen.containerWidth = containerWidth;
+            screen.pixelRatio = pixelRatio;
+
+        } else {
+            //New Screen, add to far right until user repositions it
             let x = 0;
             for (let i = 0; i < this._screens.length; i++) {
                 x = Math.max(x, this._screens[i].x + this._screens[i].width);
@@ -296,10 +320,7 @@ export default class Display {
 
             this._screens.push(new_screen);
             new_screen.channel.postMessage({ eventType: "registered", screenIndex: new_screen.screenIndex });
-        } else {
-            throw new Error("Cannot add a screen to a secondary display.")
         }
-        
     }
 
     removeScreen(screenID) {
@@ -1017,11 +1038,9 @@ export default class Display {
         rect.inSecondary = false;
         for (let i=0; i < this._screens.length; i++) {
             let screen = this._screens[i];
-            if ( 
+            
-                ((rect.x >= screen.x && rect.x < screen.x + screen.width) && 
+            if (
-                (rect.y >= screen.y && rect.y < screen.y + screen.height)) ||
+                !((rect.x > screen.x2 || screen.x > (rect.x + rect.width)) && (rect.y > screen.y2 || screen.y > (rect.y + rect.height)))
-                ((rect.x+rect.width >= screen.x && rect.x+rect.width < screen.x + screen.width) && 
-                (rect.y+rect.height >= screen.y && rect.y+rect.height < screen.y + screen.height)) 
             ) {
                 let screenPosition = { 
                     x: 0 - (screen.x - rect.x), //rect.x - screen.x,

core/rfb.js

@@ -828,6 +828,7 @@ export default class RFB extends EventTargetMixin {
             this._sock.off('error');
             this._sock.off('message');
             this._sock.off('open');
+            this._proxyRFBMessage('disconnect');
         } else {
             this._updateConnectionState('disconnecting');
             this._unregisterSecondaryDisplay();
@@ -1467,60 +1468,25 @@ export default class RFB extends EventTargetMixin {
         clearTimeout(this._resizeTimeout);
         this._resizeTimeout = null;
 
-        if (!this._resizeSession || this._viewOnly ||
+        if (this._isPrimaryDisplay) {
-            !this._supportsSetDesktopSize) {
+            if (!this._resizeSession || this._viewOnly ||
-            return;
+                !this._supportsSetDesktopSize) {
-        }
+                return;
-        const size = this._screenSize();
+            }
-        RFB.messages.setDesktopSize(this._sock, size, this._screenFlags);
+            const size = this._screenSize();
+            RFB.messages.setDesktopSize(this._sock, size, this._screenFlags);
 
-        Log.Debug('Requested new desktop size: ' +
+            Log.Debug('Requested new desktop size: ' +
                    size.serverWidth + 'x' + size.serverHeight);
+        } else if (this._display.screenIndex > 0) {
+            //re-register the secondary display with new resolution
+            this._registerSecondaryDisplay();
+        }
     }
 
     // Gets the the size of the available screen
     _screenSize (limited) {
         return this._display.getScreenSize(this.videoQuality, this.forcedResolutionX, this.forcedResolutionY, this._hiDpi, limited);
-
-        if (limited === undefined) {
-            limited = true;
-        }
-        var x = this.forcedResolutionX || this._screen.offsetWidth;
-        var y = this.forcedResolutionY || this._screen.offsetHeight;
-        var scale = 0; // 0=auto
-        try {
-            if (x > 1280 && limited && this.videoQuality == 1) {
-                var ratio = y / x;
-                Log.Debug(ratio);
-                x = 1280;
-                y = x * ratio;
-            }
-            else if (limited && this.videoQuality == 0){
-                x = 1280;
-                y = 720;
-            } else if (this._hiDpi == true) {
-                x = x * window.devicePixelRatio;
-                y = y * window.devicePixelRatio;
-                scale = 1 / window.devicePixelRatio;
-            } else if (this._display.antiAliasing === 0 && window.devicePixelRatio > 1 && x < 1000 && x > 0) {
-                // small device with high resolution, browser is essentially zooming greater than 200%
-                Log.Info('Device Pixel ratio: ' + window.devicePixelRatio + ' Reported Resolution: ' + x + 'x' + y); 
-                let targetDevicePixelRatio = 1.5;
-                if (window.devicePixelRatio > 2) { targetDevicePixelRatio = 2; }
-                let scaledWidth = (x * window.devicePixelRatio) * (1 / targetDevicePixelRatio);
-                let scaleRatio = scaledWidth / x;
-                x = x * scaleRatio;
-                y = y * scaleRatio;
-                scale = 1 / scaleRatio;
-                Log.Info('Small device with hDPI screen detected, auto scaling at ' + scaleRatio + ' to ' + x + 'x' + y);
-            }
-        } catch (err) {
-            Log.Debug(err);
-        }
-        
-        return { w: x,
-                 h: y,
-                 scale: scale };
     }
 
     _fixScrollbars() {
@@ -1611,7 +1577,7 @@ export default class RFB extends EventTargetMixin {
             this._disconnTimer = null;
 
             // make sure we don't get a double event
-            if (this._rfbConnectionState !== 'proxied') {
+            if (this._isPrimaryDisplay) {
                 this._sock.off('close');
             }
         }
@@ -1714,7 +1680,6 @@ export default class RFB extends EventTargetMixin {
                     this._mouseLastScreenIndex = event.data.screenIndex;
                     event.data.args[0] = coords[0];
                     event.data.args[1] = coords[1];
-                    console.log(`screenIndex ${event.data.screenIndex}, x: ${coords[0]}, y: ${coords[1]}`);
                     RFB.messages.pointerEvent(this._sock, ...event.data.args);
                     break;
                 case 'keyEvent':
@@ -1737,6 +1702,8 @@ export default class RFB extends EventTargetMixin {
                         this._updateCursor(...event.data.args);
                     }
                     break;
+                case 'disconnect':
+                    this.disconnect();
             }
         }
         
@@ -4312,6 +4279,7 @@ RFB.messages = {
     },
 
     setDesktopSize(sock, size, flags) {
+        console.log(size);
         const buff = sock._sQ;
         const offset = sock._sQlen;