Current state

app/ui.js

@@ -2064,11 +2064,14 @@ const UI = {
 
     setScreenPlan() {
         let monitors = UI.monitors
+        let sortedMonitors = UI.sortedMonitors
         const { scale } = UI.multiMonitorSettings()
-        const { top, left, width, height } = UI.getSizes(monitors)
+        const { top, left, width, height } = UI.getSizes(sortedMonitors)
         const screens = []
         for (var i = 0; i < monitors.length; i++) {
-            var a = monitors[i];
+            var monitor = monitors[i];
+            var a = sortedMonitors.find(el => el.id === monitor.id)
+            console.log(a)
             screens.push({
                 screenID: a.id,
                 serverHeight: Math.floor(a.h * scale),
@@ -2082,6 +2085,8 @@ const UI = {
             serverWidth: Math.floor(width * scale),
             screens
         }
+        console.log('setScreenPlan')
+        console.log(screenPlan)
         UI.rfb.applyScreenPlan(screenPlan);
     },
 
@@ -2838,9 +2843,11 @@ const UI = {
     },
 
     screenRegistered(e) {
+        console.log('screen registered')
         // Get the current screen plan
         // When a new display is added, it is defaulted to be placed to the far right relative to existing displays and to the top
         let screenPlan = UI.rfb.getScreenPlan();
+        console.log(screenPlan)
         // Now make adjustments to the screen plan, this is just an example
        // screenPlan.screens[1].y = 0;
         

app/ui_screen.js

@@ -8,6 +8,7 @@ import * as Log from '../core/util/logging.js';
 const UI = {
     connected: false,
     screenID: null,
+    screen: {},
     //Initial Loading of the UI
     prime() {
         this.start();
@@ -102,6 +103,7 @@ const UI = {
                         break;
                     case 'secondarydisconnected':
                         UI.updateVisualState('disconnected');
+                        console.log(UI.screenID)
                         break;
                 }
             };
@@ -111,7 +113,15 @@ const UI = {
 
 
         //attach this secondary display to the primary display
-        UI.screenID = UI.rfb.attachSecondaryDisplay();
+        if (UI.screenID === null) {
+            const screen = UI.rfb.attachSecondaryDisplay();
+            UI.screenID = screen.screenID
+            UI.screen = screen
+        } else {
+            console.log('else reattach screens')
+            console.log(UI.screen)
+            UI.rfb.reattachSecondaryDisplay(UI.screen);
+        }
         document.querySelector('title').textContent = 'Display ' + UI.screenID
 
 
@@ -171,6 +181,8 @@ const UI = {
     },
 
     identify(data) {
+        UI.screens = data.screens
+        console.log('identify')
         const screen = data.screens.find(el => el.id === UI.screenID)
         if (screen) {
             document.getElementById('noVNC_identify_monitor').innerHTML = screen.num

core/rfb.js

@@ -740,11 +740,19 @@ export default class RFB extends EventTargetMixin {
 
     attachSecondaryDisplay() {
         this._updateConnectionState('connecting');
-        const id = this._registerSecondaryDisplay();
+        const screen = this._registerSecondaryDisplay();
         this._updateConnectionState('connected');
-        return id
+        return screen
     }
 
+    reattachSecondaryDisplay(screen) {
+        this._updateConnectionState('connecting');
+        this._registerSecondaryDisplay(screen);
+        this._updateConnectionState('connected');
+        return screen
+    }
+
+
     applyScreenPlan(screenPlan) {
         if (this._isPrimaryDisplay) {
             let fullPlan = this._screenSize();
@@ -1595,7 +1603,7 @@ export default class RFB extends EventTargetMixin {
                 this._sock.off('close');
             }
         }
-
+        
         switch (state) {
             case 'connecting':
                 this._connect();
@@ -1681,6 +1689,13 @@ export default class RFB extends EventTargetMixin {
                     this.dispatchEvent(new CustomEvent("screenregistered", {}));
                     Log.Info(`Secondary monitor (${event.data.screenID}) has been registered.`);
                     break;
+                case 'reattach':
+                    console.log('reattach message')
+                    console.log(event.data)
+                    this._display.addScreen(event.data.screenID, event.data.width, event.data.height, event.data.pixelRatio, event.data.containerHeight, event.data.containerWidth);
+                    this.dispatchEvent(new CustomEvent("screenregistered", {}));
+                    Log.Info(`Secondary monitor (${event.data.screenID}) has been reattached.`);
+                    break;
                 case 'unregister':
                     if (this._display.removeScreen(event.data.screenID)) {
                         this.dispatchEvent(new CustomEvent("screenregistered", {}));
@@ -1740,7 +1755,7 @@ export default class RFB extends EventTargetMixin {
         
     }
 
-    _registerSecondaryDisplay() {
+    _registerSecondaryDisplay(currentScreen = false) {
         if (!this._isPrimaryDisplay) {
             //let screen = this._screenSize().screens[0];
             //
@@ -1749,14 +1764,15 @@ export default class RFB extends EventTargetMixin {
             this._display.autoscale(size.screens[0].containerWidth, size.screens[0].containerHeight, size.screens[0].scale);
             screen = this._screenSize().screens[0];
             
+            const registertype = (currentScreen) ? 'reattach' : 'register'
 
             let message = {
-                eventType: 'register',
+                eventType: registertype,
                 screenID: screen.screenID,
                 width: screen.width,
                 height: screen.height,
-                x: 0,
+                x: currentScreen.x || 0,
-                y: 0,
+                y: currentScreen.y || 0,
                 pixelRatio: screen.pixelRatio,
                 containerWidth: screen.containerWidth,
                 containerHeight: screen.containerHeight,
@@ -1765,7 +1781,8 @@ export default class RFB extends EventTargetMixin {
             this._controlChannel.postMessage(message);
 
             if (!this._viewOnly) { this._keyboard.grab(); }
-            return screen.screenID
+            // return screen.screenID
+            return screen
         }
         
     }