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
-        socket.on("terminalResize", async (rows : unknown) => {
-
-        });
+        // Resize Terminal
+        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"
     }
 }