Add placeholder terminal widget

This commit is contained in:
Quinten Kock 2025-11-17 03:30:22 +01:00
parent 50ba297473
commit bf697bd98e
5 changed files with 86 additions and 2 deletions

View File

@ -5,6 +5,7 @@
<title>Miller code editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/app/index.css" rel="stylesheet" />
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
</head>
<body>
<script type="module" src="/src/app/renderer.ts"></script>

23
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "miller",
"version": "1.0.0",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "miller",
"version": "1.0.0",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"electron-squirrel-startup": "^1.0.1"
@ -30,6 +30,8 @@
"@types/electron-squirrel-startup": "^1.0.2",
"@typescript-eslint/eslint-plugin": "^8.46.3",
"@typescript-eslint/parser": "^8.46.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"codemirror": "^6.0.2",
"electron": "39.1.1",
"eslint": "^9.39.1",
@ -3904,6 +3906,23 @@
"node": ">=10.0.0"
}
},
"node_modules/@xterm/addon-fit": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@xterm/xterm": "^5.0.0"
}
},
"node_modules/@xterm/xterm": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
"dev": true,
"license": "MIT"
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

View File

@ -37,6 +37,8 @@
"@types/electron-squirrel-startup": "^1.0.2",
"@typescript-eslint/eslint-plugin": "^8.46.3",
"@typescript-eslint/parser": "^8.46.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"codemirror": "^6.0.2",
"electron": "39.1.1",
"eslint": "^9.39.1",

View File

@ -5,6 +5,7 @@ const v = van.tags;
import { OpenFile } from "./filestate";
import * as u from "./utils";
import { Editor } from "./editor";
import { Terminal } from "./terminal";
export interface Displayable {
setDeleteFunction(del: () => void): void;
@ -51,6 +52,13 @@ export function addTab(file?: OpenFile) {
editors.push(file ? [file] : []);
}
export function addTerminal() {
console.log("Adding terminal");
const term = new Terminal();
editors[currentTab.val].push(vanX.noreactive(term));
term.focus();
}
const TabHeader = (tab: State<Editor[]>, del: () => void, k: number) =>
v.div(
{
@ -83,3 +91,10 @@ export const EditorTabs = v.div(
vanX.list(TabBar, editors, TabHeader);
vanX.list(EditorTabs, editors, EditorGrid);
document.addEventListener("keyup", (e) => {
if (e.key === "t" && e.altKey) {
console.log("Opening terminal");
addTerminal();
}
});

47
src/app/terminal.ts Normal file
View File

@ -0,0 +1,47 @@
import { Displayable } from "./editorgrid";
import * as xterm from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import van from "vanjs-core";
const v = van.tags;
export class Terminal implements Displayable {
term: xterm.Terminal;
currentTitle: string = "Terminal";
del: () => void;
dom: HTMLElement;
setDeleteFunction(del: () => void): void {
this.del = del;
}
title(): string {
return this.currentTitle;
}
constructor() {
this.term = new xterm.Terminal();
const fitAddon = new FitAddon();
this.term.loadAddon(fitAddon);
this.dom = v.div({ class: "h-full w-full" });
const loaded = van.state(false);
van.derive(() => {
if (loaded.val) {
this.term.open(this.dom);
fitAddon.fit();
this.term.writeln("Welcome to the terminal!");
}
});
loaded.val = true;
}
focus() {
this.term.focus();
}
close() {
this.term.dispose();
this.del();
}
}