Skip to content

Commit 4dbbace

Browse files
author
bleeptrack
committed
Add resize functionality to xterm
1 parent d6ef70e commit 4dbbace

File tree

5 files changed

+25
-2
lines changed

5 files changed

+25
-2
lines changed

examples/simple/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
<meta charset="utf-8" />
55
<script src="script.js" type="module"></script>
66
<link rel="stylesheet" href="xterm.css" />
7+
<link rel="stylesheet" href="style.css" />
78
</head>
89
<body>
910
<div id="screen"></div>
10-
<div id="terminal0"></div>
11-
<div id="terminal1"></div>
11+
<div id="terminal0" class="my-terminal"></div>
12+
<div id="terminal1" class="my-terminal"></div>
1213

1314
<button id="save">Save state</button>
1415
</body>

examples/simple/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.my-terminal{
2+
width: 50%;
3+
}

package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"test": "vitest"
2828
},
2929
"dependencies": {
30+
"@xterm/addon-fit": "^0.9.0-beta.1",
3031
"async-mutex": "^0.4.0",
3132
"xterm": "^5.3.0"
3233
},

src/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import V86Starter from "../v86/libv86.js"
33

44
import {Mutex} from "async-mutex"
55
import {Terminal as XTerm} from "xterm"
6+
import { FitAddon } from '@xterm/addon-fit';
67

78
export class Terminal {
89
private prompt = "# "
@@ -19,6 +20,8 @@ export class Terminal {
1920
let term = new XTerm({
2021
fontFamily: this.options.font || "monospace",
2122
})
23+
const fitAddon = new FitAddon()
24+
term.loadAddon(fitAddon)
2225
term.open(div)
2326
term.onKey((key) => {
2427
this.send(key.key)
@@ -29,6 +32,12 @@ export class Terminal {
2932
term.write(char)
3033
},
3134
)
35+
36+
function outputsize() {
37+
fitAddon.fit()
38+
//ToDo: set number of colums as well
39+
}
40+
new ResizeObserver(outputsize).observe(div)
3241
}
3342

3443
async send(chars: string): Promise<void> {

0 commit comments

Comments
 (0)