2024-05-14 08:45:41 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
2024-05-21 20:09:22 +02:00
|
|
|
import { BlockService } from "@/bindings/blockservice";
|
2024-05-15 01:53:03 +02:00
|
|
|
import { getBlockSubject } from "@/store/global";
|
|
|
|
import { base64ToArray } from "@/util/util";
|
2024-05-28 21:12:28 +02:00
|
|
|
import { FitAddon } from "@xterm/addon-fit";
|
|
|
|
import type { ITheme } from "@xterm/xterm";
|
|
|
|
import { Terminal } from "@xterm/xterm";
|
|
|
|
import * as React from "react";
|
2024-06-05 08:47:18 +02:00
|
|
|
import { debounce } from "throttle-debounce";
|
2024-05-14 08:45:41 +02:00
|
|
|
|
|
|
|
import "./view.less";
|
|
|
|
import "/public/xterm.css";
|
|
|
|
|
|
|
|
function getThemeFromCSSVars(el: Element): ITheme {
|
|
|
|
const theme: ITheme = {};
|
|
|
|
const elemStyle = getComputedStyle(el);
|
|
|
|
theme.foreground = elemStyle.getPropertyValue("--term-foreground");
|
|
|
|
theme.background = elemStyle.getPropertyValue("--term-background");
|
|
|
|
theme.black = elemStyle.getPropertyValue("--term-black");
|
|
|
|
theme.red = elemStyle.getPropertyValue("--term-red");
|
|
|
|
theme.green = elemStyle.getPropertyValue("--term-green");
|
|
|
|
theme.yellow = elemStyle.getPropertyValue("--term-yellow");
|
|
|
|
theme.blue = elemStyle.getPropertyValue("--term-blue");
|
|
|
|
theme.magenta = elemStyle.getPropertyValue("--term-magenta");
|
|
|
|
theme.cyan = elemStyle.getPropertyValue("--term-cyan");
|
|
|
|
theme.white = elemStyle.getPropertyValue("--term-white");
|
|
|
|
theme.brightBlack = elemStyle.getPropertyValue("--term-bright-black");
|
|
|
|
theme.brightRed = elemStyle.getPropertyValue("--term-bright-red");
|
|
|
|
theme.brightGreen = elemStyle.getPropertyValue("--term-bright-green");
|
|
|
|
theme.brightYellow = elemStyle.getPropertyValue("--term-bright-yellow");
|
|
|
|
theme.brightBlue = elemStyle.getPropertyValue("--term-bright-blue");
|
|
|
|
theme.brightMagenta = elemStyle.getPropertyValue("--term-bright-magenta");
|
|
|
|
theme.brightCyan = elemStyle.getPropertyValue("--term-bright-cyan");
|
|
|
|
theme.brightWhite = elemStyle.getPropertyValue("--term-bright-white");
|
|
|
|
theme.selectionBackground = elemStyle.getPropertyValue("--term-selection-background");
|
|
|
|
theme.selectionInactiveBackground = elemStyle.getPropertyValue("--term-selection-background");
|
|
|
|
theme.cursor = elemStyle.getPropertyValue("--term-selection-background");
|
|
|
|
theme.cursorAccent = elemStyle.getPropertyValue("--term-cursor-accent");
|
|
|
|
return theme;
|
|
|
|
}
|
|
|
|
|
2024-06-05 08:47:18 +02:00
|
|
|
function handleResize(fitAddon: FitAddon, blockId: string, term: Terminal) {
|
|
|
|
const oldRows = term.rows;
|
|
|
|
const oldCols = term.cols;
|
|
|
|
fitAddon.fit();
|
|
|
|
if (oldRows !== term.rows || oldCols !== term.cols) {
|
|
|
|
const resizeCommand = { command: "controller:input", termsize: { rows: term.rows, cols: term.cols } };
|
|
|
|
BlockService.SendCommand(blockId, resizeCommand);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-29 09:28:25 +02:00
|
|
|
type InitialLoadDataType = {
|
|
|
|
loaded: boolean;
|
|
|
|
heldData: Uint8Array[];
|
|
|
|
};
|
|
|
|
|
2024-05-14 08:45:41 +02:00
|
|
|
const TerminalView = ({ blockId }: { blockId: string }) => {
|
|
|
|
const connectElemRef = React.useRef<HTMLDivElement>(null);
|
2024-05-16 09:29:58 +02:00
|
|
|
const termRef = React.useRef<Terminal>(null);
|
2024-05-29 09:28:25 +02:00
|
|
|
const initialLoadRef = React.useRef<InitialLoadDataType>({ loaded: false, heldData: [] });
|
2024-05-14 08:45:41 +02:00
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (!connectElemRef.current) {
|
|
|
|
return;
|
|
|
|
}
|
2024-05-29 09:28:25 +02:00
|
|
|
console.log("terminal created");
|
2024-05-14 08:45:41 +02:00
|
|
|
const term = new Terminal({
|
|
|
|
theme: getThemeFromCSSVars(connectElemRef.current),
|
|
|
|
fontSize: 12,
|
|
|
|
fontFamily: "Hack",
|
|
|
|
drawBoldTextInBrightColors: false,
|
|
|
|
fontWeight: "normal",
|
|
|
|
fontWeightBold: "bold",
|
|
|
|
});
|
2024-05-16 09:29:58 +02:00
|
|
|
termRef.current = term;
|
2024-05-14 08:45:41 +02:00
|
|
|
const fitAddon = new FitAddon();
|
|
|
|
term.loadAddon(fitAddon);
|
|
|
|
term.open(connectElemRef.current);
|
|
|
|
fitAddon.fit();
|
2024-05-16 09:29:58 +02:00
|
|
|
BlockService.SendCommand(blockId, {
|
|
|
|
command: "controller:input",
|
|
|
|
termsize: { rows: term.rows, cols: term.cols },
|
|
|
|
});
|
2024-05-15 08:25:21 +02:00
|
|
|
term.onData((data) => {
|
|
|
|
const b64data = btoa(data);
|
2024-05-16 09:29:58 +02:00
|
|
|
const inputCmd = { command: "controller:input", blockid: blockId, inputdata64: b64data };
|
2024-05-15 08:25:21 +02:00
|
|
|
BlockService.SendCommand(blockId, inputCmd);
|
|
|
|
});
|
2024-05-15 07:37:04 +02:00
|
|
|
// resize observer
|
2024-06-05 08:47:18 +02:00
|
|
|
const handleResize_debounced = debounce(50, handleResize);
|
2024-05-15 07:37:04 +02:00
|
|
|
const rszObs = new ResizeObserver(() => {
|
2024-06-05 08:47:18 +02:00
|
|
|
handleResize_debounced(fitAddon, blockId, term);
|
2024-05-15 07:37:04 +02:00
|
|
|
});
|
|
|
|
rszObs.observe(connectElemRef.current);
|
|
|
|
|
|
|
|
// block subject
|
2024-05-15 01:53:03 +02:00
|
|
|
const blockSubject = getBlockSubject(blockId);
|
|
|
|
blockSubject.subscribe((data) => {
|
|
|
|
// base64 decode
|
|
|
|
const decodedData = base64ToArray(data.ptydata);
|
2024-05-29 09:28:25 +02:00
|
|
|
if (initialLoadRef.current.loaded) {
|
|
|
|
term.write(decodedData);
|
|
|
|
} else {
|
|
|
|
initialLoadRef.current.heldData.push(decodedData);
|
|
|
|
}
|
2024-05-15 01:53:03 +02:00
|
|
|
});
|
2024-05-15 07:37:04 +02:00
|
|
|
|
2024-05-15 01:53:03 +02:00
|
|
|
return () => {
|
2024-05-15 07:37:04 +02:00
|
|
|
term.dispose();
|
|
|
|
rszObs.disconnect();
|
2024-05-15 01:53:03 +02:00
|
|
|
blockSubject.release();
|
|
|
|
};
|
2024-06-05 08:47:18 +02:00
|
|
|
}, []);
|
2024-05-15 01:53:03 +02:00
|
|
|
|
2024-05-29 09:28:25 +02:00
|
|
|
React.useEffect(() => {
|
|
|
|
if (!termRef.current) {
|
|
|
|
return;
|
|
|
|
}
|
2024-06-03 22:22:44 +02:00
|
|
|
// load data from filestore
|
2024-05-29 09:28:25 +02:00
|
|
|
const startTs = Date.now();
|
|
|
|
let loadedBytes = 0;
|
|
|
|
const localTerm = termRef.current; // avoids devmode double effect running issue (terminal gets created twice)
|
|
|
|
const usp = new URLSearchParams();
|
2024-06-03 22:22:44 +02:00
|
|
|
usp.set("zoneid", blockId);
|
2024-05-29 09:28:25 +02:00
|
|
|
usp.set("name", "main");
|
2024-06-03 22:22:44 +02:00
|
|
|
fetch("/wave/file?" + usp.toString())
|
2024-05-29 09:28:25 +02:00
|
|
|
.then((resp) => {
|
|
|
|
if (resp.ok) {
|
|
|
|
return resp.arrayBuffer();
|
|
|
|
}
|
2024-06-03 22:22:44 +02:00
|
|
|
console.log("error loading file", resp.status, resp.statusText);
|
2024-05-29 09:28:25 +02:00
|
|
|
})
|
|
|
|
.then((data: ArrayBuffer) => {
|
|
|
|
const uint8View = new Uint8Array(data);
|
|
|
|
localTerm.write(uint8View);
|
|
|
|
loadedBytes = uint8View.byteLength;
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
initialLoadRef.current.heldData.forEach((data) => {
|
|
|
|
localTerm.write(data);
|
|
|
|
});
|
|
|
|
initialLoadRef.current.loaded = true;
|
|
|
|
initialLoadRef.current.heldData = [];
|
2024-06-03 22:22:44 +02:00
|
|
|
console.log(`terminal loaded file ${loadedBytes} bytes, ${Date.now() - startTs}ms`);
|
2024-05-29 09:28:25 +02:00
|
|
|
});
|
2024-06-05 08:47:18 +02:00
|
|
|
}, []);
|
2024-05-29 09:28:25 +02:00
|
|
|
|
2024-05-15 01:53:03 +02:00
|
|
|
return (
|
|
|
|
<div className="view-term">
|
|
|
|
<div key="conntectElem" className="term-connectelem" ref={connectElemRef}></div>
|
|
|
|
</div>
|
|
|
|
);
|
2024-05-14 08:45:41 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
export { TerminalView };
|