Terminal text cols adjusts to terminal container. (#285)

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

backend/socket-handlers/terminal-socket-handler.ts

@@ -162,9 +162,44 @@ export class TerminalSocketHandler extends SocketHandler {
             }
         });
 
-        // TODO: Resize Terminal
+        // Resize Terminal
-        socket.on("terminalResize", async (rows : unknown) => {
+        socket.on(
+            "terminalResize",
+            async (terminalName: unknown, rows: unknown, cols: unknown) => {
+                log.info("terminalResize", `Terminal: ${terminalName}`);
+                try {
+                    checkLogin(socket);
+                    if (typeof terminalName !== "string") {
+                        throw new Error("Terminal name must be a string.");
+                    }
 
-        });
+                    if (typeof rows !== "number") {
+                        throw new Error("Command must be a number.");
+                    }
+                    if (typeof cols !== "number") {
+                        throw new Error("Command must be a number.");
+                    }
+
+                    let terminal = Terminal.getTerminal(terminalName);
+
+                    // log.info("terminal", terminal);
+                    if (terminal instanceof Terminal) {
+                        //log.debug("terminalInput", "Terminal found, writing to terminal.");
+                        terminal.rows = rows;
+                        terminal.cols = cols;
+                    } else {
+                        throw new Error(`${terminalName} Terminal not found.`);
+                    }
+                } catch (e) {
+                    log.debug(
+                        "terminalResize",
+                        // Added to prevent the lint error when adding the type
+                        // and ts type checker saying type is unknown.
+                        // @ts-ignore
+                        `Error on ${terminalName}: ${e.message}`
+                    );
+                }
+            }
+        );
     }
 }

backend/terminal.ts

@@ -67,6 +67,7 @@ export class Terminal {
 
     set cols(cols : number) {
         this._cols = cols;
+        log.debug("Terminal", `Terminal cols: ${this._cols}`); // Added to check if cols is being set when changing terminal size.
         try {
             this.ptyProcess?.resize(this.cols, this.rows);
         } catch (e) {

frontend/src/components/Terminal.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script>
-import { Terminal } from "xterm";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "xterm-addon-web-links";
 import { TERMINAL_COLS, TERMINAL_ROWS } from "../../../backend/util-common";
 
@@ -122,10 +123,12 @@ export default {
                 }
             });
         }
-
+        // Fit the terminal width to the div container size after terminal is created.
+        this.updateTerminalSize();
     },
 
     unmounted() {
+        window.removeEventListener("resize", this.onResizeEvent); // Remove the resize event listener from the window object.
         this.$root.unbindTerminal(this.name);
         this.terminal.dispose();
     },
@@ -208,6 +211,30 @@ export default {
                     }
                 });
             });
+        },
+
+        /**
+         * Update the terminal size to fit the container size.
+         *
+         * If the terminalFitAddOn is not created, creates it, loads it and then fits the terminal to the appropriate size.
+         * It then addes an event listener to the window object to listen for resize events and calls the fit method of the terminalFitAddOn.
+         */
+        updateTerminalSize() {
+            if (!Object.hasOwn(this, "terminalFitAddOn")) {
+                this.terminalFitAddOn = new FitAddon();
+                this.terminal.loadAddon(this.terminalFitAddOn);
+                window.addEventListener("resize", this.onResizeEvent);
+            }
+            this.terminalFitAddOn.fit();
+        },
+        /**
+         * Handles the resize event of the terminal component.
+         */
+        onResizeEvent() {
+            this.terminalFitAddOn.fit();
+            let rows = this.terminal.rows;
+            let cols = this.terminal.cols;
+            this.$root.getSocket().emit("terminalResize", this.name, rows, cols);
         }
     }
 };

frontend/src/main.ts

@@ -10,12 +10,12 @@ import { i18n } from "./i18n";
 // Dependencies
 import "bootstrap";
 import Toast, { POSITION, useToast } from "vue-toastification";
-import "xterm/lib/xterm.js";
+import "@xterm/xterm/lib/xterm.js";
 
 // CSS
 import "@fontsource/jetbrains-mono";
 import "vue-toastification/dist/index.css";
-import "xterm/css/xterm.css";
+import "@xterm/xterm/css/xterm.css";
 import "./styles/main.scss";
 
 // Minxins

frontend/src/mixins/socket.ts

@@ -2,7 +2,7 @@ import { io } from "socket.io-client";
 import { Socket } from "socket.io-client";
 import { defineComponent } from "vue";
 import jwtDecode from "jwt-decode";
-import { Terminal } from "xterm";
+import { Terminal } from "@xterm/xterm";
 
 let socket : Socket;
 

package.json

@@ -55,8 +55,6 @@
         "yaml": "~2.3.4"
     },
     "devDependencies": {
-        "concurrently": "^8.2.2",
-        "wait-on": "^7.2.0",
         "@actions/github": "^6.0.0",
         "@fontsource/jetbrains-mono": "^5.0.18",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
@@ -71,8 +69,11 @@
         "@typescript-eslint/eslint-plugin": "~6.8.0",
         "@typescript-eslint/parser": "~6.8.0",
         "@vitejs/plugin-vue": "~4.5.2",
+        "@xterm/addon-fit": "beta",
+        "@xterm/xterm": "beta",
         "bootstrap": "5.3.2",
         "bootstrap-vue-next": "~0.14.10",
+        "concurrently": "^8.2.2",
         "cross-env": "~7.0.3",
         "eslint": "~8.50.0",
         "eslint-plugin-jsdoc": "~46.8.2",
@@ -90,7 +91,7 @@
         "vue-qrcode": "~2.2.0",
         "vue-router": "~4.2.5",
         "vue-toastification": "2.0.0-rc.5",
-        "xterm": "5.4.0-beta.37",
+        "wait-on": "^7.2.0",
         "xterm-addon-web-links": "~0.9.0"
     }
 }

pnpm-lock.yaml

@@ -133,6 +133,12 @@ devDependencies:
   '@vitejs/plugin-vue':
     specifier: ~4.5.2
     version: 4.5.2(vite@5.0.7)(vue@3.3.11)
+  '@xterm/addon-fit':
+    specifier: beta
+    version: 0.9.0-beta.17(@xterm/xterm@5.4.0-beta.17)
+  '@xterm/xterm':
+    specifier: beta
+    version: 5.4.0-beta.17
   bootstrap:
     specifier: 5.3.2
     version: 5.3.2(@popperjs/core@2.11.8)
@@ -196,12 +202,9 @@ devDependencies:
   wait-on:
     specifier: ^7.2.0
     version: 7.2.0
-  xterm:
-    specifier: 5.4.0-beta.37
-    version: 5.4.0-beta.37
   xterm-addon-web-links:
     specifier: ~0.9.0
-    version: 0.9.0(xterm@5.4.0-beta.37)
+    version: 0.9.0(xterm@5.3.0)
 
 packages:
 
@@ -1569,6 +1572,18 @@ packages:
       - vue
     dev: true
 
+  /@xterm/addon-fit@0.9.0-beta.17(@xterm/xterm@5.4.0-beta.17):
+    resolution: {integrity: sha512-4jYMsbyferF29hF0vCaQj6CQlT2A6ML6DhLZdi6cCZI5qn60mGUXZfDeO/Qoq2nmyK/PBrPyFYSOzWapSy45Zg==}
+    peerDependencies:
+      '@xterm/xterm': ^5.0.0
+    dependencies:
+      '@xterm/xterm': 5.4.0-beta.17
+    dev: true
+
+  /@xterm/xterm@5.4.0-beta.17:
+    resolution: {integrity: sha512-EhQsTHeO7VhCOnYLdrowWAqEbmZKf6k6Z/Rd3GriikB394jivux6OBcJbt7QdewIOAKqFah53d4rNXfz3/6mwQ==}
+    dev: true
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     requiresBuild: true
@@ -5524,16 +5539,16 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
-  /xterm-addon-web-links@0.9.0(xterm@5.4.0-beta.37):
+  /xterm-addon-web-links@0.9.0(xterm@5.3.0):
     resolution: {integrity: sha512-LIzi4jBbPlrKMZF3ihoyqayWyTXAwGfu4yprz1aK2p71e9UKXN6RRzVONR0L+Zd+Ik5tPVI9bwp9e8fDTQh49Q==}
     peerDependencies:
       xterm: ^5.0.0
     dependencies:
-      xterm: 5.4.0-beta.37
+      xterm: 5.3.0
     dev: true
 
-  /xterm@5.4.0-beta.37:
+  /xterm@5.3.0:
-    resolution: {integrity: sha512-ys+mXqLFrJc7khmYN/MgBnfLv38NgXfkwkEXsCZKHGqn3h2xUBvTvsrSEWO3NQeDPLj4zMr1RwqTblMK9St3BA==}
+    resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==}
     dev: true
 
   /y18n@4.0.3: