Further resolve the Window resizing problem. Should work better now

ui/app.js

@@ -50,6 +50,7 @@ const mainTemplate = `
   :commands="commands"
   :preset-data="presetData.presets"
   :restricted-to-presets="presetData.restricted"
+  :view-port="viewPort"
   @navigate-to="changeURLHash"
   @tab-opened="tabOpened"
   @tab-closed="tabClosed"
@@ -76,7 +77,7 @@ function startApp(rootEl) {
     components: {
       loading: Loading,
       auth: Auth,
-      home: Home
+      home: Home,
     },
     data() {
       return {
@@ -94,17 +95,32 @@ function startApp(rootEl) {
         key: "",
         presetData: {
           presets: new Presets([]),
-          restricted: false
+          restricted: false,
         },
         authErr: "",
         loadErr: "",
         socket: null,
         controls: new Controls([
           new telnetctl.Telnet(uiControlColor),
-          new sshctl.SSH(uiControlColor)
+          new sshctl.SSH(uiControlColor),
         ]),
         commands: new Commands([new telnet.Command(), new ssh.Command()]),
-        tabUpdateIndicator: null
+        tabUpdateIndicator: null,
+        viewPort: {
+          dim: {
+            width: 0,
+            height: 0,
+            renew(width, height) {
+              this.width = width;
+              this.height = height;
+            },
+          },
+        },
+        viewPortUpdaters: {
+          width: 0,
+          height: 0,
+          dimResizer: null,
+        },
       };
     },
     watch: {
@@ -117,10 +133,29 @@ function startApp(rootEl) {
         this.isErrored()
           ? document.body.classList.add("app-error")
           : document.body.classList.remove("app-error");
-      }
+      },
     },
     mounted() {
-      this.tryInitialAuth();
+      const self = this;
+
+      self.tryInitialAuth();
+
+      self.viewPortUpdaters.dimResizer = () => {
+        self.viewPortUpdaters.height = window.innerHeight;
+        self.viewPortUpdaters.width = window.innerWidth;
+
+        self.$nextTick(() => {
+          self.viewPort.dim.renew(
+            self.viewPortUpdaters.width,
+            self.viewPortUpdaters.height
+          );
+        });
+      };
+
+      window.addEventListener("resize", self.viewPortUpdaters.dimResizer);
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", self.viewPortUpdaters.dimResizer);
     },
     methods: {
       changeTitleInfo(newTitleInfo) {
@@ -169,7 +204,7 @@ function startApp(rootEl) {
       executeHomeApp(authResult, key) {
         this.presetData = {
           presets: new Presets(JSON.parse(authResult.data)),
-          restricted: authResult.onlyAllowPresetRemotes
+          restricted: authResult.onlyAllowPresetRemotes,
         };
         this.socket = this.buildSocket(
           key,
@@ -225,7 +260,7 @@ function startApp(rootEl) {
                   }
 
                   return result.key;
-                }
+                },
               });
               break;
 
@@ -262,7 +297,9 @@ function startApp(rootEl) {
             : await this.getSocketAuthKey(privateKey, this.key);
 
         let h = await xhr.get(socksVerificationInterface, {
-          "X-Key": authKey ? btoa(String.fromCharCode.apply(null, authKey)) : ""
+          "X-Key": authKey
+            ? btoa(String.fromCharCode.apply(null, authKey))
+            : "",
         });
 
         let serverDate = h.getResponseHeader("Date");
@@ -275,7 +312,7 @@ function startApp(rootEl) {
           date: serverDate ? new Date(serverDate) : null,
           data: h.responseText,
           onlyAllowPresetRemotes:
-            h.getResponseHeader("X-OnlyAllowPresetRemotes") === "yes"
+            h.getResponseHeader("X-OnlyAllowPresetRemotes") === "yes",
         };
       },
       async submitAuth(passphrase) {
@@ -290,7 +327,7 @@ function startApp(rootEl) {
                 data: passphrase,
                 fetch() {
                   return this.data;
-                }
+                },
               });
               break;
 
@@ -344,8 +381,8 @@ function startApp(rootEl) {
           this.tabUpdateIndicator = null;
           this.updateTabTitleInfo(tabs, false);
         }, updateIndicatorMaxDisplayTime);
-      }
+      },
-    }
+    },
   });
 }
 
@@ -360,11 +397,11 @@ function initializeClient() {
     console.log("Currently in Development environment");
   }
 
-  window.addEventListener("unhandledrejection", function(e) {
+  window.addEventListener("unhandledrejection", function (e) {
     console.error("Error:", e);
   });
 
-  window.addEventListener("error", function(e) {
+  window.addEventListener("error", function (e) {
     console.error("Error:", e);
   });
 

ui/home.vue

@@ -39,7 +39,7 @@
         href="javascript:;"
         :class="{
           working: connector.inputting,
-          intensify: connector.inputting && !windows.connect
+          intensify: connector.inputting && !windows.connect,
         }"
         @click="showConnectWindow"
       ></a>
@@ -61,6 +61,7 @@
       id="home-content"
       :screen="tab.current"
       :screens="tab.tabs"
+      :view-port="viewPort"
       @stopped="tabStopped"
       @warning="tabWarning"
       @info="tabInfo"
@@ -176,47 +177,41 @@ export default {
     connector: Connector,
     tabs: Tabs,
     "tab-window": TabWindow,
-    screens: Screens
+    screens: Screens,
   },
   props: {
     hostPath: {
       type: String,
-      default: ""
+      default: "",
     },
     query: {
       type: String,
-      default: ""
+      default: "",
     },
     connection: {
       type: Object,
-      default: () => {
+      default: () => null,
-        return null;
-      }
     },
     controls: {
       type: Object,
-      default: () => {
+      default: () => null,
-        return null;
-      }
     },
     commands: {
       type: Object,
-      default: () => {
+      default: () => null,
-        return null;
-      }
     },
     presetData: {
       type: Object,
-      default: () => {
+      default: () => new presets.Presets([]),
-        return new presets.Presets([]);
-      }
     },
     restrictedToPresets: {
       type: Boolean,
-      default: () => {
+      default: () => false,
-        return false;
+    },
-      }
+    viewPort: {
-    }
+      type: Object,
+      default: () => null,
+    },
   },
   data() {
     let history = home_history.build(this);
@@ -226,7 +221,7 @@ export default {
       windows: {
         delay: false,
         connect: false,
-        tabs: false
+        tabs: false,
       },
       socket: home_socket.build(this),
       connector: {
@@ -236,14 +231,14 @@ export default {
         inputting: false,
         acquired: false,
         busy: false,
-        knowns: history.all()
+        knowns: history.all(),
       },
       presets: this.commands.mergePresets(this.presetData),
       tab: {
         current: -1,
         lastID: 0,
-        tabs: []
+        tabs: [],
-      }
+      },
     };
   },
   mounted() {
@@ -252,7 +247,7 @@ export default {
     }, 1000);
 
     if (this.query.length > 1 && this.query.indexOf("+") === 0) {
-      this.connectLaunch(this.query.slice(1, this.query.length), success => {
+      this.connectLaunch(this.query.slice(1, this.query.length), (success) => {
         if (!success) {
           return;
         }
@@ -324,7 +319,7 @@ export default {
       this.connector.busy = true;
 
       this.getStreamThenRun(
-        stream => {
+        (stream) => {
           this.connector.busy = false;
 
           callback(stream);
@@ -338,7 +333,7 @@ export default {
     connectNew(connector) {
       const self = this;
 
-      self.runConnect(stream => {
+      self.runConnect((stream) => {
         self.connector.connector = {
           id: connector.id(),
           name: connector.name(),
@@ -350,7 +345,7 @@ export default {
             presets.emptyPreset(),
             null,
             () => {}
-          )
+          ),
         };
 
         self.connector.inputting = true;
@@ -359,7 +354,7 @@ export default {
     connectPreset(preset) {
       const self = this;
 
-      self.runConnect(stream => {
+      self.runConnect((stream) => {
         self.connector.connector = {
           id: preset.command.id(),
           name: preset.command.name(),
@@ -371,7 +366,7 @@ export default {
             preset.preset,
             null,
             () => {}
-          )
+          ),
         };
 
         self.connector.inputting = true;
@@ -393,7 +388,7 @@ export default {
     connectKnown(known) {
       const self = this;
 
-      self.runConnect(stream => {
+      self.runConnect((stream) => {
         let connector = self.getConnectorByType(known.type);
 
         if (!connector) {
@@ -417,7 +412,7 @@ export default {
             () => {
               self.connector.knowns = self.connector.historyRec.all();
             }
-          )
+          ),
         };
 
         self.connector.inputting = true;
@@ -433,13 +428,13 @@ export default {
 
       return {
         type: ll.slice(0, llSeparatorIdx),
-        query: ll.slice(llSeparatorIdx + 1, ll.length)
+        query: ll.slice(llSeparatorIdx + 1, ll.length),
       };
     },
     connectLaunch(launcher, done) {
       this.showConnectWindow();
 
-      this.runConnect(stream => {
+      this.runConnect((stream) => {
         let ll = this.parseConnectLauncher(launcher),
           connector = this.getConnectorByType(ll.type);
 
@@ -462,12 +457,12 @@ export default {
             this.controls,
             this.connector.historyRec,
             ll.query,
-            n => {
+            (n) => {
               self.connector.knowns = self.connector.historyRec.all();
 
               done(n.data().success);
             }
-          )
+          ),
         };
 
         this.connector.inputting = true;
@@ -525,11 +520,11 @@ export default {
           indicator: {
             level: "",
             message: "",
-            updated: false
+            updated: false,
           },
           status: {
-            closing: false
+            closing: false,
-          }
+          },
         }) - 1
       );
     },
@@ -612,7 +607,7 @@ export default {
       this.$emit("tab-updated", this.tab.tabs);
 
       this.tab.tabs[index].indicator.updated = index !== this.tab.current;
-    }
+    },
-  }
+  },
 };
 </script>

ui/widgets/screen_console.css

@@ -37,6 +37,7 @@
 
 #home-content > .screen > .screen-screen > .screen-console {
   position: relative;
+  min-height: 1px;
 }
 
 #home-content > .screen > .screen-screen > .screen-console > .console-toolbar {
@@ -50,6 +51,7 @@
   background: #222;
   color: #fff;
   box-shadow: 0 0 5px #0006;
+  z-index: 1;
 }
 
 #home-content
@@ -190,11 +192,13 @@
 }
 
 #home-content > .screen > .screen-screen > .screen-console > .console-console {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  justify-items: center;
   color: #fff;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  z-index: 0;
 }
 
 #home-content

ui/widgets/screen_console.vue

@@ -21,7 +21,6 @@
   <div class="screen-console">
     <div
       class="console-console"
-      style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; z-index: 0; position: absolute; overflow: hidden"
       :style="'font-family: ' + typeface + ', inherit'"
     >
       <h2 style="display: none;">Console</h2>
@@ -233,7 +232,6 @@ class Term {
           rows: dim.rows,
           cols: dim.cols,
         });
-
       }, resizeDelayInterval);
     });
   }
@@ -280,16 +278,6 @@ class Term {
       }
     });
 
-    this.term.element.addEventListener("click", () => {
-      if (this.closed) {
-        return;
-      }
-
-      this.term.textarea.blur();
-      this.term.textarea.click();
-      this.term.textarea.focus();
-    });
-
     this.refit();
   }
 
@@ -451,6 +439,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    viewPort: {
+      type: Object,
+      default: () => null,
+    },
   },
   data() {
     return {
@@ -459,7 +451,6 @@ export default {
       typeface: termTypeFace,
       runner: null,
       eventHandlers: {
-        resize: null,
         keydown: null,
         keyup: null,
       },
@@ -479,6 +470,16 @@ export default {
       },
       deep: true,
     },
+    viewPort: {
+      handler() {
+        if (!this.active) {
+          return;
+        }
+
+        this.fit();
+      },
+      deep: true,
+    },
   },
   async mounted() {
     await this.init();
@@ -559,45 +560,42 @@ export default {
       let self = this;
 
       self.eventHandlers = {
-	resize: () => self.fit(),
+        keyup: (e) => self.localKeypress(e),
-	keyup: e => self.localKeypress(e),
+        keydown: (e) => self.localKeypress(e),
-	keydown: e => self.localKeypress(e),
       };
 
       await self.openTerm(
-	self.$el.getElementsByClassName("console-console")[0],
+        self.$el.getElementsByClassName("console-console")[0],
-	{
+        {
-	  focus(e) {
+          focus(e) {
-	    document.addEventListener("keyup", self.eventHandlers.keyup);
+            document.addEventListener("keyup", self.eventHandlers.keyup);
-	    document.addEventListener("keydown", self.eventHandlers.keydown);
+            document.addEventListener("keydown", self.eventHandlers.keydown);
-	  },
+          },
-	  blur(e) {
+          blur(e) {
-	    document.removeEventListener("keyup", self.eventHandlers.keyup);
+            document.removeEventListener("keyup", self.eventHandlers.keyup);
-	    document.removeEventListener("keydown", self.eventHandlers.keydown);
+            document.removeEventListener("keydown", self.eventHandlers.keydown);
-	  },
+          },
-	  warn(msg, toDismiss) {
+          warn(msg, toDismiss) {
-	    self.$emit("warning", {
+            self.$emit("warning", {
-	      text: msg,
+              text: msg,
-	      toDismiss: toDismiss,
+              toDismiss: toDismiss,
-	    });
+            });
-	  },
+          },
-	  info(msg, toDismiss) {
+          info(msg, toDismiss) {
-	    self.$emit("info", {
+            self.$emit("info", {
-	      text: msg,
+              text: msg,
-	      toDismiss: toDismiss,
+              toDismiss: toDismiss,
-	    });
+            });
-	  },
+          },
-	}
+        }
       );
 
       if (self.term.destroyed()) {
-	return;
+        return;
       }
 
       self.triggerActive();
       self.runRunner();
-
-      self.$nextTick(() => self.eventHandlers.resize());
     },
     async deinit() {
       await this.closeRunner();
@@ -615,12 +613,9 @@ export default {
       e.preventDefault();
     },
     activate() {
-      this.eventHandlers.resize();
       this.term.focus();
-      window.addEventListener("resize", this.eventHandlers.resize);
     },
     async deactivate() {
-      window.removeEventListener("resize", this.eventHandlers.resize);
       this.term.blur();
     },
     runRunner() {

ui/widgets/screens.css

@@ -19,11 +19,17 @@
 
 @charset "utf-8";
 
+#home-content.active {
+  min-height: 0;
+}
+
 #home-content > .screen {
   display: flex;
-  justify-content: top;
+  justify-content: start;
   flex-direction: column;
   font-size: 1em;
+  overflow: hidden;
+  flex: auto;
 }
 
 #home-content > .screen > .screen-error {
@@ -49,4 +55,17 @@
 
 #home-content > .screen > .screen-screen {
   flex: auto;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  min-height: 0;
+}
+
+#home-content > .screen > .screen-screen > .screen-content {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
 }

ui/widgets/screens.vue

@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <main style="position: relative">
+  <main :class="{ active: screens.length > 0 }">
     <slot v-if="screens.length <= 0"></slot>
 
     <div
@@ -26,9 +26,8 @@
       :key="screenInfo.id"
       :style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
       class="screen"
-      style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; overflow: auto; position: absolute;"
     >
-      <h1 style="display:none;">Main Interface</h1>
+      <h1 style="display: none;">Main Interface</h1>
 
       <div
         v-if="screenInfo.indicator.message.length > 0"
@@ -38,15 +37,16 @@
         {{ screenInfo.indicator.message }}
       </div>
 
-      <div class="screen-screen" style="position: relative">
+      <div class="screen-screen">
         <component
           :is="getComponent(screenInfo.ui)"
           :active="screen === idx"
           :control="screenInfo.control"
           :change="screenInfo.indicator"
           :toolbar="screenInfo.toolbar"
+          :view-port="viewPort"
           :style="'background-color: ' + screenInfo.control.activeColor()"
-          style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
+          class="screen-content"
           @stopped="stopped(idx, $event)"
           @warning="warning(idx, $event)"
           @info="info(idx, $event)"
@@ -64,17 +64,21 @@ import "./screens.css";
 
 export default {
   components: {
-    ConsoleScreen
+    ConsoleScreen,
   },
   props: {
     screen: {
       type: Number,
-      default: 0
+      default: 0,
     },
     screens: {
       type: Array,
-      default: () => []
+      default: () => [],
-    }
+    },
+    viewPort: {
+      type: Object,
+      default: () => [],
+    },
   },
   methods: {
     getComponent(ui) {
@@ -97,7 +101,7 @@ export default {
     },
     updated(index) {
       this.$emit("updated", index);
-    }
+    },
-  }
+  },
 };
 </script>