Add placeholder terminal widget
This commit is contained in:
parent
50ba297473
commit
bf697bd98e
|
|
@ -5,6 +5,7 @@
|
||||||
<title>Miller code editor</title>
|
<title>Miller code editor</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link href="/src/app/index.css" rel="stylesheet" />
|
<link href="/src/app/index.css" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module" src="/src/app/renderer.ts"></script>
|
<script type="module" src="/src/app/renderer.ts"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "miller",
|
"name": "miller",
|
||||||
"version": "1.0.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "miller",
|
"name": "miller",
|
||||||
"version": "1.0.0",
|
"version": "0.1.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"electron-squirrel-startup": "^1.0.1"
|
"electron-squirrel-startup": "^1.0.1"
|
||||||
|
|
@ -30,6 +30,8 @@
|
||||||
"@types/electron-squirrel-startup": "^1.0.2",
|
"@types/electron-squirrel-startup": "^1.0.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
||||||
"@typescript-eslint/parser": "^8.46.3",
|
"@typescript-eslint/parser": "^8.46.3",
|
||||||
|
"@xterm/addon-fit": "^0.10.0",
|
||||||
|
"@xterm/xterm": "^5.5.0",
|
||||||
"codemirror": "^6.0.2",
|
"codemirror": "^6.0.2",
|
||||||
"electron": "39.1.1",
|
"electron": "39.1.1",
|
||||||
"eslint": "^9.39.1",
|
"eslint": "^9.39.1",
|
||||||
|
|
@ -3904,6 +3906,23 @@
|
||||||
"node": ">=10.0.0"
|
"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": {
|
"node_modules/@xtuc/ieee754": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
"@types/electron-squirrel-startup": "^1.0.2",
|
"@types/electron-squirrel-startup": "^1.0.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
||||||
"@typescript-eslint/parser": "^8.46.3",
|
"@typescript-eslint/parser": "^8.46.3",
|
||||||
|
"@xterm/addon-fit": "^0.10.0",
|
||||||
|
"@xterm/xterm": "^5.5.0",
|
||||||
"codemirror": "^6.0.2",
|
"codemirror": "^6.0.2",
|
||||||
"electron": "39.1.1",
|
"electron": "39.1.1",
|
||||||
"eslint": "^9.39.1",
|
"eslint": "^9.39.1",
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ const v = van.tags;
|
||||||
import { OpenFile } from "./filestate";
|
import { OpenFile } from "./filestate";
|
||||||
import * as u from "./utils";
|
import * as u from "./utils";
|
||||||
import { Editor } from "./editor";
|
import { Editor } from "./editor";
|
||||||
|
import { Terminal } from "./terminal";
|
||||||
|
|
||||||
export interface Displayable {
|
export interface Displayable {
|
||||||
setDeleteFunction(del: () => void): void;
|
setDeleteFunction(del: () => void): void;
|
||||||
|
|
@ -51,6 +52,13 @@ export function addTab(file?: OpenFile) {
|
||||||
editors.push(file ? [file] : []);
|
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) =>
|
const TabHeader = (tab: State<Editor[]>, del: () => void, k: number) =>
|
||||||
v.div(
|
v.div(
|
||||||
{
|
{
|
||||||
|
|
@ -83,3 +91,10 @@ export const EditorTabs = v.div(
|
||||||
|
|
||||||
vanX.list(TabBar, editors, TabHeader);
|
vanX.list(TabBar, editors, TabHeader);
|
||||||
vanX.list(EditorTabs, editors, EditorGrid);
|
vanX.list(EditorTabs, editors, EditorGrid);
|
||||||
|
|
||||||
|
document.addEventListener("keyup", (e) => {
|
||||||
|
if (e.key === "t" && e.altKey) {
|
||||||
|
console.log("Opening terminal");
|
||||||
|
addTerminal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue