Add resize functionality to xterm

bleeptrack · bleeptrack · commit 4dbbace6e743 · 2024-02-13T14:30:03.000+01:00
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -4,11 +4,12 @@
         <meta charset="utf-8" />
         <script src="script.js" type="module"></script>
         <link rel="stylesheet" href="xterm.css" />
+        <link rel="stylesheet" href="style.css" />
     </head>
     <body>
         <div id="screen"></div>
-        <div id="terminal0"></div>
-        <div id="terminal1"></div>
+        <div id="terminal0" class="my-terminal"></div>
+        <div id="terminal1" class="my-terminal"></div>
 
         <button id="save">Save state</button>
     </body>
diff --git a/examples/simple/style.css b/examples/simple/style.css
@@ -0,0 +1,3 @@
+.my-terminal{
+	width: 50%;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
         "test": "vitest"
     },
     "dependencies": {
+        "@xterm/addon-fit": "^0.9.0-beta.1",
         "async-mutex": "^0.4.0",
         "xterm": "^5.3.0"
     },
diff --git a/src/index.ts b/src/index.ts
@@ -3,6 +3,7 @@ import V86Starter from "../v86/libv86.js"
 
 import {Mutex} from "async-mutex"
 import {Terminal as XTerm} from "xterm"
+import { FitAddon } from '@xterm/addon-fit';
 
 export class Terminal {
     private prompt = "# "
@@ -19,6 +20,8 @@ export class Terminal {
         let term = new XTerm({
             fontFamily: this.options.font || "monospace",
         })
+        const fitAddon = new FitAddon()
+        term.loadAddon(fitAddon)
         term.open(div)
         term.onKey((key) => {
             this.send(key.key)
@@ -29,6 +32,12 @@ export class Terminal {
                 term.write(char)
             },
         )
+        
+        function outputsize() {
+            fitAddon.fit()
+            //ToDo: set number of colums as well
+        }
+        new ResizeObserver(outputsize).observe(div)
     }
 
     async send(chars: string): Promise<void> {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.my-terminal{`
	`2`	`+ width: 50%;`
	`3`	`+}`