hwy
1681f9e4ef
Some checks failed
backend / cross (aarch64) (pull_request) Failing after 6m40s
backend / cross (arm) (pull_request) Failing after 1m32s
backend / cross (armhf) (pull_request) Failing after 31s
backend / cross (i686) (pull_request) Failing after 31s
backend / cross (mips) (pull_request) Failing after 31s
backend / cross (mips64) (pull_request) Failing after 4m49s
backend / cross (mips64el) (pull_request) Failing after 1m31s
backend / cross (mipsel) (pull_request) Failing after 30s
backend / cross (s390x) (pull_request) Failing after 30s
backend / cross (win32) (pull_request) Failing after 31s
backend / cross (x86_64) (pull_request) Failing after 10m17s
762 lines
28 KiB
TypeScript
762 lines
28 KiB
TypeScript
import { bind } from 'decko';
|
||
import type { IDisposable, ITerminalOptions } from '@xterm/xterm';
|
||
import { Terminal } from '@xterm/xterm';
|
||
import { CanvasAddon } from '@xterm/addon-canvas';
|
||
import { ClipboardAddon } from '@xterm/addon-clipboard';
|
||
import { WebglAddon } from '@xterm/addon-webgl';
|
||
import { FitAddon } from '@xterm/addon-fit';
|
||
import { WebLinksAddon } from '@xterm/addon-web-links';
|
||
import { ImageAddon } from '@xterm/addon-image';
|
||
import { Unicode11Addon } from '@xterm/addon-unicode11';
|
||
import { OverlayAddon } from './addons/overlay';
|
||
import { ZmodemAddon } from './addons/zmodem';
|
||
|
||
import '@xterm/xterm/css/xterm.css';
|
||
|
||
interface TtydTerminal extends Terminal {
|
||
fit(): void;
|
||
}
|
||
|
||
declare global {
|
||
interface Window {
|
||
term: TtydTerminal;
|
||
}
|
||
}
|
||
|
||
enum Command {
|
||
// server side
|
||
OUTPUT = '0',
|
||
SET_WINDOW_TITLE = '1',
|
||
SET_PREFERENCES = '2',
|
||
|
||
// client side
|
||
INPUT = '0',
|
||
RESIZE_TERMINAL = '1',
|
||
PAUSE = '2',
|
||
RESUME = '3',
|
||
}
|
||
type Preferences = ITerminalOptions & ClientOptions;
|
||
|
||
export type RendererType = 'dom' | 'canvas' | 'webgl';
|
||
|
||
export interface ClientOptions {
|
||
rendererType: RendererType;
|
||
disableLeaveAlert: boolean;
|
||
disableResizeOverlay: boolean;
|
||
enableZmodem: boolean;
|
||
enableTrzsz: boolean;
|
||
enableSixel: boolean;
|
||
titleFixed?: string;
|
||
isWindows: boolean;
|
||
trzszDragInitTimeout: number;
|
||
unicodeVersion: string;
|
||
closeOnDisconnect: boolean;
|
||
}
|
||
|
||
export interface FlowControl {
|
||
limit: number;
|
||
highWater: number;
|
||
lowWater: number;
|
||
}
|
||
|
||
export interface XtermOptions {
|
||
wsUrl: string;
|
||
tokenUrl: string;
|
||
flowControl: FlowControl;
|
||
clientOptions: ClientOptions;
|
||
termOptions: ITerminalOptions;
|
||
}
|
||
|
||
function toDisposable(f: () => void): IDisposable {
|
||
return { dispose: f };
|
||
}
|
||
|
||
function addEventListener(target: EventTarget, type: string, listener: EventListener): IDisposable {
|
||
target.addEventListener(type, listener);
|
||
return toDisposable(() => target.removeEventListener(type, listener));
|
||
}
|
||
|
||
export class Xterm {
|
||
private disposables: IDisposable[] = [];
|
||
private textEncoder = new TextEncoder();
|
||
private textDecoder = new TextDecoder();
|
||
private written = 0;
|
||
private pending = 0;
|
||
|
||
private terminal: Terminal;
|
||
private fitAddon = new FitAddon();
|
||
private overlayAddon = new OverlayAddon();
|
||
private clipboardAddon = new ClipboardAddon();
|
||
private webLinksAddon = new WebLinksAddon();
|
||
private webglAddon?: WebglAddon;
|
||
private canvasAddon?: CanvasAddon;
|
||
private zmodemAddon?: ZmodemAddon;
|
||
|
||
private socket?: WebSocket;
|
||
private token: string;
|
||
private opened = false;
|
||
private title?: string;
|
||
private titleFixed?: string;
|
||
private resizeOverlay = true;
|
||
private reconnect = true;
|
||
private doReconnect = true;
|
||
private closeOnDisconnect = false;
|
||
private intervalID: NodeJS.Timeout;
|
||
private writeFunc = (data: ArrayBuffer) => this.writeData(new Uint8Array(data));
|
||
private connectStatus = false;
|
||
private connectionMessageBuffer = "";
|
||
private hostTitle = "";
|
||
private postAttachCommand = [];
|
||
private postAttachCommandStatus = false;
|
||
private workdir = "";
|
||
private containerStatus = "";
|
||
private attachCommandSent = false;
|
||
private attachCommandSentAt?: number;
|
||
private ptyOutputReceived = false;
|
||
constructor(
|
||
private options: XtermOptions,
|
||
private sendCb: () => void
|
||
) {}
|
||
|
||
dispose() {
|
||
for (const d of this.disposables) {
|
||
d.dispose();
|
||
}
|
||
this.disposables.length = 0;
|
||
}
|
||
|
||
@bind
|
||
private register<T extends IDisposable>(d: T): T {
|
||
this.disposables.push(d);
|
||
return d;
|
||
}
|
||
|
||
@bind
|
||
public sendFile(files: FileList) {
|
||
this.zmodemAddon?.sendFile(files);
|
||
}
|
||
|
||
@bind
|
||
public async refreshToken() {
|
||
try {
|
||
const resp = await fetch(this.options.tokenUrl);
|
||
if (resp.ok) {
|
||
const json = await resp.json();
|
||
this.token = json.token;
|
||
}
|
||
} catch (e) {
|
||
console.error(`[ttyd] fetch ${this.options.tokenUrl}: `, e);
|
||
}
|
||
}
|
||
|
||
@bind
|
||
private onWindowUnload(event: BeforeUnloadEvent) {
|
||
event.preventDefault();
|
||
if (this.socket?.readyState === WebSocket.OPEN) {
|
||
const message = 'Close terminal? this will also terminate the command.';
|
||
event.returnValue = message;
|
||
return message;
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
@bind
|
||
public open(parent: HTMLElement) {
|
||
this.terminal = new Terminal(this.options.termOptions);
|
||
const { terminal, fitAddon, overlayAddon, clipboardAddon, webLinksAddon } = this;
|
||
window.term = terminal as TtydTerminal;
|
||
window.term.fit = () => {
|
||
this.fitAddon.fit();
|
||
};
|
||
|
||
terminal.loadAddon(fitAddon);
|
||
terminal.loadAddon(overlayAddon);
|
||
terminal.loadAddon(clipboardAddon);
|
||
terminal.loadAddon(webLinksAddon);
|
||
|
||
terminal.open(parent);
|
||
fitAddon.fit();
|
||
}
|
||
|
||
@bind
|
||
private initListeners() {
|
||
const { terminal, fitAddon, overlayAddon, register, sendData } = this;
|
||
register(
|
||
terminal.onTitleChange(data => {
|
||
if (data && data !== '' && !this.titleFixed) {
|
||
document.title = data + ' | ' + this.title;
|
||
}
|
||
})
|
||
);
|
||
register(
|
||
terminal.onData(data =>
|
||
{
|
||
if (this.connectStatus) {
|
||
sendData(data);
|
||
} else {
|
||
this.writeData('\b \b');
|
||
}
|
||
})
|
||
);
|
||
register(terminal.onBinary(data => sendData(Uint8Array.from(data, v => v.charCodeAt(0)))));
|
||
register(
|
||
terminal.onResize(({ cols, rows }) => {
|
||
const msg = JSON.stringify({ columns: cols, rows: rows });
|
||
this.socket?.send(this.textEncoder.encode(Command.RESIZE_TERMINAL + msg));
|
||
if (this.resizeOverlay) overlayAddon.showOverlay(`${cols}x${rows}`, 300);
|
||
})
|
||
);
|
||
register(
|
||
terminal.onSelectionChange(() => {
|
||
if (this.terminal.getSelection() === '') return;
|
||
try {
|
||
document.execCommand('copy');
|
||
} catch (e) {
|
||
return;
|
||
}
|
||
this.overlayAddon?.showOverlay('\u2702', 200);
|
||
})
|
||
);
|
||
register(addEventListener(window, 'resize', () => fitAddon.fit()));
|
||
register(addEventListener(window, 'beforeunload', this.onWindowUnload));
|
||
}
|
||
|
||
@bind
|
||
public writeData(data: string | Uint8Array) {
|
||
const { terminal, textEncoder } = this;
|
||
const { limit, highWater, lowWater } = this.options.flowControl;
|
||
|
||
this.written += data.length;
|
||
if (this.written > limit) {
|
||
terminal.write(data, () => {
|
||
this.pending = Math.max(this.pending - 1, 0);
|
||
if (this.pending < lowWater) {
|
||
this.socket?.send(textEncoder.encode(Command.RESUME));
|
||
}
|
||
});
|
||
this.pending++;
|
||
this.written = 0;
|
||
if (this.pending > highWater) {
|
||
this.socket?.send(textEncoder.encode(Command.PAUSE));
|
||
}
|
||
} else {
|
||
terminal.write(data);
|
||
}
|
||
}
|
||
|
||
@bind
|
||
public sendData(data: string | Uint8Array) {
|
||
const { socket, textEncoder } = this;
|
||
if (socket?.readyState !== WebSocket.OPEN) return;
|
||
|
||
if (typeof data === 'string') {
|
||
const payload = new Uint8Array(data.length * 3 + 1);
|
||
payload[0] = Command.INPUT.charCodeAt(0);
|
||
const stats = textEncoder.encodeInto(data, payload.subarray(1));
|
||
socket.send(payload.subarray(0, (stats.written as number) + 1));
|
||
} else {
|
||
const payload = new Uint8Array(data.length + 1);
|
||
payload[0] = Command.INPUT.charCodeAt(0);
|
||
payload.set(data, 1);
|
||
socket.send(payload);
|
||
}
|
||
}
|
||
|
||
@bind
|
||
public changeUrl(ip: string, port: string) {
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
this.options.wsUrl = [protocol, '//' + ip + ':' + port +'/ws', window.location.search].join('');
|
||
this.options.tokenUrl = [window.location.protocol, '//' + ip + ':' + port +'/token'].join('');
|
||
}
|
||
|
||
@bind
|
||
public changeStatus(v: boolean){
|
||
this.connectStatus = v;
|
||
}
|
||
|
||
@bind
|
||
public connect() {
|
||
this.socket = new WebSocket(this.options.wsUrl, ['tty']);
|
||
this.ptyOutputReceived = false;
|
||
const { socket, register } = this;
|
||
|
||
socket.binaryType = 'arraybuffer';
|
||
register(addEventListener(socket, 'open', this.onSocketOpen));
|
||
register(addEventListener(socket, 'message', this.onSocketData as EventListener));
|
||
register(addEventListener(socket, 'close', this.onSocketClose as EventListener));
|
||
register(addEventListener(socket, 'error', () => (this.doReconnect = false)));
|
||
}
|
||
|
||
@bind
|
||
private onSocketOpen() {
|
||
console.log('[webTerminal] WebSocket opened, containerStatus:', this.containerStatus, 'connectStatus:', this.connectStatus, 'attachCommandSent:', this.attachCommandSent);
|
||
|
||
const { textEncoder, terminal, overlayAddon } = this;
|
||
const msg = JSON.stringify({ AuthToken: this.token, columns: terminal.cols, rows: terminal.rows });
|
||
this.socket?.send(textEncoder.encode(msg));
|
||
|
||
if (this.opened) {
|
||
terminal.reset();
|
||
terminal.options.disableStdin = false;
|
||
overlayAddon.showOverlay('Reconnected', 300);
|
||
// 重新连接后，如果状态是5且未连接，重置连接状态以便重新发送连接命令
|
||
if (this.containerStatus === '5' && !this.connectStatus) {
|
||
console.log('[webTerminal] Reconnected, resetting attach command state');
|
||
this.attachCommandSent = false;
|
||
this.attachCommandSentAt = undefined;
|
||
}
|
||
} else {
|
||
this.opened = true;
|
||
}
|
||
|
||
this.doReconnect = this.reconnect;
|
||
this.initListeners();
|
||
terminal.focus();
|
||
this.tryExecuteAttachCommand();
|
||
}
|
||
|
||
@bind
|
||
private onSocketClose(event: CloseEvent) {
|
||
console.log(`[ttyd] websocket connection closed with code: ${event.code}`);
|
||
|
||
const { refreshToken, connect, doReconnect, overlayAddon } = this;
|
||
overlayAddon.showOverlay('Connection Closed');
|
||
this.dispose();
|
||
|
||
// 1000: CLOSE_NORMAL
|
||
if (event.code !== 1000 && doReconnect) {
|
||
overlayAddon.showOverlay('Reconnecting...');
|
||
refreshToken().then(connect);
|
||
} else if (this.closeOnDisconnect) {
|
||
window.close();
|
||
} else {
|
||
const { terminal } = this;
|
||
const keyDispose = terminal.onKey(e => {
|
||
const event = e.domEvent;
|
||
if (event.key === 'Enter') {
|
||
keyDispose.dispose();
|
||
overlayAddon.showOverlay('Reconnecting...');
|
||
refreshToken().then(connect);
|
||
}
|
||
});
|
||
overlayAddon.showOverlay('Press ⏎ to Reconnect');
|
||
}
|
||
}
|
||
|
||
@bind
|
||
private tryExecuteAttachCommand() {
|
||
console.log('[Xterm] tryExecuteAttachCommand called:', {
|
||
attachCommandSent: this.attachCommandSent,
|
||
connectStatus: this.connectStatus,
|
||
hasCommand: !!(this.postAttachCommand && this.postAttachCommand.length > 0),
|
||
socketReady: this.socket?.readyState === WebSocket.OPEN,
|
||
ptyOutputReceived: this.ptyOutputReceived
|
||
});
|
||
|
||
if (this.attachCommandSent || this.connectStatus) {
|
||
console.log('[Xterm] Skipping: command already sent or connected');
|
||
return;
|
||
}
|
||
if (!this.postAttachCommand || this.postAttachCommand.length === 0) {
|
||
console.log('[Xterm] Skipping: no command available');
|
||
return;
|
||
}
|
||
if (this.socket?.readyState !== WebSocket.OPEN) {
|
||
console.log('[Xterm] Skipping: WebSocket not ready, state:', this.socket?.readyState);
|
||
return;
|
||
}
|
||
if (!this.ptyOutputReceived) {
|
||
console.log('[Xterm] Skipping: ttyd not ready yet (waiting for first output)');
|
||
return; // Wait for TTY readiness confirm via output
|
||
}
|
||
|
||
const cmd = this.postAttachCommand[0];
|
||
if (cmd) {
|
||
console.log('[Xterm] ✅ All conditions met, executing attach command...');
|
||
this.sendData(cmd + "\n");
|
||
this.attachCommandSent = true;
|
||
this.attachCommandSentAt = Date.now();
|
||
console.log('[Xterm] Command sent at:', new Date(this.attachCommandSentAt).toISOString());
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取 URL 查询参数
|
||
*/
|
||
private getUrlParams(): { options: URLSearchParams; params: URLSearchParams; baseUrl: string } {
|
||
const options = new URLSearchParams(decodeURIComponent(window.location.search));
|
||
const params = new URLSearchParams({
|
||
repo: options.get('repoid') as string,
|
||
user: options.get('userid') as string,
|
||
});
|
||
const baseUrl = `http://${options.get('domain')}:${options.get('port')}/${options.get('user')}/${options.get('repo')}`;
|
||
return { options, params, baseUrl };
|
||
}
|
||
|
||
/**
|
||
* 获取并执行连接容器的命令（带重试机制）
|
||
*
|
||
* 重试机制：
|
||
* - 最多重试 5 次
|
||
* - 每次重试间隔递增（1s, 2s, 3s, 4s, 5s）
|
||
* - 如果成功获取命令，立即执行并停止重试
|
||
*/
|
||
@bind
|
||
public loadCommandOnce() {
|
||
this.loadCommandWithRetry(0);
|
||
}
|
||
|
||
/**
|
||
* 带重试的命令获取
|
||
* @param retryCount 当前重试次数
|
||
*/
|
||
@bind
|
||
private loadCommandWithRetry(retryCount: number = 0) {
|
||
const maxRetries = 5;
|
||
const { params, baseUrl } = this.getUrlParams();
|
||
|
||
fetch(`${baseUrl}/devcontainer/command?${params}`)
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
// 验证数据有效性
|
||
if (!data || !data.command) {
|
||
throw new Error('Invalid command data received');
|
||
}
|
||
|
||
if (this.workdir === ''){
|
||
this.workdir = data.workdir;
|
||
}
|
||
|
||
// 执行连接容器的命令（只执行一次）
|
||
this.postAttachCommand = data.command.split('\n');
|
||
this.tryExecuteAttachCommand();
|
||
})
|
||
.catch(error => {
|
||
console.error(`[Xterm] Error loading command (attempt ${retryCount + 1}/${maxRetries}):`, error);
|
||
|
||
// 如果还有重试次数，继续重试
|
||
if (retryCount < maxRetries - 1) {
|
||
const delay = (retryCount + 1) * 1000; // 递增延迟：1s, 2s, 3s, 4s, 5s
|
||
console.log(`[Xterm] Retrying command load in ${delay}ms...`);
|
||
setTimeout(() => {
|
||
this.loadCommandWithRetry(retryCount + 1);
|
||
}, delay);
|
||
} else {
|
||
console.error('[Xterm] Failed to load command after all retries');
|
||
// 可以在这里显示错误提示给用户
|
||
}
|
||
});
|
||
}
|
||
@bind
|
||
public changeContainerStatus(v: string){
|
||
this.containerStatus = v;
|
||
}
|
||
|
||
@bind
|
||
private parseOptsFromUrlQuery(query: string): Preferences {
|
||
const { terminal } = this;
|
||
const { clientOptions } = this.options;
|
||
const prefs = {} as Preferences;
|
||
const queryObj = Array.from(new URLSearchParams(query) as unknown as Iterable<[string, string]>);
|
||
|
||
for (const [k, queryVal] of queryObj) {
|
||
let v = clientOptions[k];
|
||
if (v === undefined) v = terminal.options[k];
|
||
switch (typeof v) {
|
||
case 'boolean':
|
||
prefs[k] = queryVal === 'true' || queryVal === '1';
|
||
break;
|
||
case 'number':
|
||
case 'bigint':
|
||
prefs[k] = Number.parseInt(queryVal, 10);
|
||
break;
|
||
case 'string':
|
||
prefs[k] = queryVal;
|
||
break;
|
||
case 'object':
|
||
prefs[k] = JSON.parse(queryVal);
|
||
break;
|
||
default:
|
||
console.warn(`[ttyd] maybe unknown option: ${k}=${queryVal}, treating as string`);
|
||
prefs[k] = queryVal;
|
||
break;
|
||
}
|
||
}
|
||
|
||
return prefs;
|
||
}
|
||
|
||
@bind
|
||
private onSocketData(event: MessageEvent) {
|
||
const { textDecoder } = this;
|
||
const rawData = event.data as ArrayBuffer;
|
||
const cmd = String.fromCharCode(new Uint8Array(rawData)[0]);
|
||
const data = rawData.slice(1);
|
||
switch (cmd) {
|
||
case Command.OUTPUT:
|
||
if (!this.ptyOutputReceived) {
|
||
this.ptyOutputReceived = true;
|
||
console.log('[Xterm] ✅ ttyd is now ready (received first output), attempting to execute attach command');
|
||
this.tryExecuteAttachCommand();
|
||
}
|
||
|
||
const decodedData = textDecoder.decode(data);
|
||
console.log('[ttyd] output:', decodedData);
|
||
const compactOutput = decodedData.replace(/\s/g, '');
|
||
const { options } = this.getUrlParams();
|
||
if (options.get('type') === 'docker') {
|
||
// 保存host的标题
|
||
const pureContent = decodedData.replace(/\u001B\[[0-9;?]*[ -\/]*[@-~]/g, '').replace(/\u0007/g, '').trim();
|
||
if (this.hostTitle === '' && pureContent.length > 0){
|
||
this.hostTitle = compactOutput;
|
||
console.log('[Xterm] Host title captured:', this.hostTitle);
|
||
}
|
||
|
||
// 检测是否退出devcontainer，标题等于host的标题
|
||
if (this.connectStatus && this.hostTitle && compactOutput.includes(this.hostTitle)){
|
||
console.log('[Xterm] Detected exit to host shell');
|
||
this.connectStatus = false;
|
||
this.connectionMessageBuffer = '';
|
||
this.attachCommandSent = false;
|
||
this.attachCommandSentAt = undefined;
|
||
this.postAttachCommandStatus = false;
|
||
this.ptyOutputReceived = false; // 重置 PTY 状态
|
||
}
|
||
|
||
if (this.connectStatus) {
|
||
try {
|
||
this.writeFunc(data);
|
||
} catch (e) {
|
||
console.error('[Xterm] writeFunc error:', e);
|
||
}
|
||
} else {
|
||
// 未连接状态：缓冲所有输出
|
||
this.connectionMessageBuffer += decodedData;
|
||
|
||
const successMarker = 'Successfully connected to the devcontainer';
|
||
// 尝试在 buffer 中查找成功标记
|
||
const markerIndex = this.connectionMessageBuffer.indexOf(successMarker);
|
||
|
||
if (markerIndex !== -1) {
|
||
console.log('[Xterm] Connection established, flushing buffer.');
|
||
this.connectStatus = true;
|
||
this.terminal.options.disableStdin = false;
|
||
|
||
const validOutput = this.connectionMessageBuffer.substring(markerIndex);
|
||
this.writeData(validOutput);
|
||
this.connectionMessageBuffer = '';
|
||
}
|
||
|
||
if (this.connectionMessageBuffer.length > 20000) {
|
||
console.warn('[Xterm] Buffer overflow protection. Flushing all.');
|
||
this.writeData(this.connectionMessageBuffer);
|
||
this.connectionMessageBuffer = '';
|
||
}
|
||
}
|
||
|
||
// 连接完成且出现容器的标题，且没有执行过postAttach命令
|
||
if (this.connectStatus && compactOutput.includes(this.workdir) && !this.postAttachCommandStatus){
|
||
console.log('[Xterm] Detected workdir in output, executing postAttachCommand');
|
||
for (let i = 1; i < this.postAttachCommand.length; i++){
|
||
this.sendData(this.postAttachCommand[i]+'\n');
|
||
}
|
||
this.postAttachCommandStatus = true;
|
||
}
|
||
|
||
} else {
|
||
this.writeFunc(data);
|
||
}
|
||
break;
|
||
case Command.SET_WINDOW_TITLE:
|
||
this.title = textDecoder.decode(data);
|
||
document.title = this.title;
|
||
break;
|
||
case Command.SET_PREFERENCES:
|
||
this.applyPreferences({
|
||
...this.options.clientOptions,
|
||
...JSON.parse(textDecoder.decode(data)),
|
||
...this.parseOptsFromUrlQuery(window.location.search),
|
||
} as Preferences);
|
||
break;
|
||
default:
|
||
console.warn(`[ttyd] unknown command: ${cmd}`);
|
||
break;
|
||
}
|
||
}
|
||
|
||
@bind
|
||
private applyPreferences(prefs: Preferences) {
|
||
const { terminal, fitAddon, register } = this;
|
||
if (prefs.enableZmodem || prefs.enableTrzsz) {
|
||
this.zmodemAddon = new ZmodemAddon({
|
||
zmodem: prefs.enableZmodem,
|
||
trzsz: prefs.enableTrzsz,
|
||
windows: prefs.isWindows,
|
||
trzszDragInitTimeout: prefs.trzszDragInitTimeout,
|
||
onSend: this.sendCb,
|
||
sender: this.sendData,
|
||
writer: this.writeData,
|
||
});
|
||
this.writeFunc = data => this.zmodemAddon?.consume(data);
|
||
terminal.loadAddon(register(this.zmodemAddon));
|
||
}
|
||
|
||
for (const [key, value] of Object.entries(prefs)) {
|
||
switch (key) {
|
||
case 'rendererType':
|
||
this.setRendererType(value);
|
||
break;
|
||
case 'disableLeaveAlert':
|
||
if (value) {
|
||
window.removeEventListener('beforeunload', this.onWindowUnload);
|
||
console.log('[ttyd] Leave site alert disabled');
|
||
}
|
||
break;
|
||
case 'disableResizeOverlay':
|
||
if (value) {
|
||
console.log('[ttyd] Resize overlay disabled');
|
||
this.resizeOverlay = false;
|
||
}
|
||
break;
|
||
case 'disableReconnect':
|
||
if (value) {
|
||
console.log('[ttyd] Reconnect disabled');
|
||
this.reconnect = false;
|
||
this.doReconnect = false;
|
||
}
|
||
break;
|
||
case 'enableZmodem':
|
||
if (value) console.log('[ttyd] Zmodem enabled');
|
||
break;
|
||
case 'enableTrzsz':
|
||
if (value) console.log('[ttyd] trzsz enabled');
|
||
break;
|
||
case 'trzszDragInitTimeout':
|
||
if (value) console.log(`[ttyd] trzsz drag init timeout: ${value}`);
|
||
break;
|
||
case 'enableSixel':
|
||
if (value) {
|
||
terminal.loadAddon(register(new ImageAddon()));
|
||
console.log('[ttyd] Sixel enabled');
|
||
}
|
||
break;
|
||
case 'closeOnDisconnect':
|
||
if (value) {
|
||
console.log('[ttyd] close on disconnect enabled (Reconnect disabled)');
|
||
this.closeOnDisconnect = true;
|
||
this.reconnect = false;
|
||
this.doReconnect = false;
|
||
}
|
||
break;
|
||
case 'titleFixed':
|
||
if (!value || value === '') return;
|
||
console.log(`[ttyd] setting fixed title: ${value}`);
|
||
this.titleFixed = value;
|
||
document.title = value;
|
||
break;
|
||
case 'isWindows':
|
||
if (value) console.log('[ttyd] is windows');
|
||
break;
|
||
case 'unicodeVersion':
|
||
switch (value) {
|
||
case 6:
|
||
case '6':
|
||
console.log('[ttyd] setting Unicode version: 6');
|
||
break;
|
||
case 11:
|
||
case '11':
|
||
default:
|
||
console.log('[ttyd] setting Unicode version: 11');
|
||
terminal.loadAddon(new Unicode11Addon());
|
||
terminal.unicode.activeVersion = '11';
|
||
break;
|
||
}
|
||
break;
|
||
default:
|
||
console.log(`[ttyd] option: ${key}=${JSON.stringify(value)}`);
|
||
if (terminal.options[key] instanceof Object) {
|
||
terminal.options[key] = Object.assign({}, terminal.options[key], value);
|
||
} else {
|
||
terminal.options[key] = value;
|
||
}
|
||
if (key.indexOf('font') === 0) fitAddon.fit();
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
@bind
|
||
private setRendererType(value: RendererType) {
|
||
const { terminal } = this;
|
||
const disposeCanvasRenderer = () => {
|
||
try {
|
||
this.canvasAddon?.dispose();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
this.canvasAddon = undefined;
|
||
};
|
||
const disposeWebglRenderer = () => {
|
||
try {
|
||
this.webglAddon?.dispose();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
this.webglAddon = undefined;
|
||
};
|
||
const enableCanvasRenderer = () => {
|
||
if (this.canvasAddon) return;
|
||
this.canvasAddon = new CanvasAddon();
|
||
disposeWebglRenderer();
|
||
try {
|
||
this.terminal.loadAddon(this.canvasAddon);
|
||
console.log('[ttyd] canvas renderer loaded');
|
||
} catch (e) {
|
||
console.log('[ttyd] canvas renderer could not be loaded, falling back to dom renderer', e);
|
||
disposeCanvasRenderer();
|
||
}
|
||
};
|
||
const enableWebglRenderer = () => {
|
||
if (this.webglAddon) return;
|
||
this.webglAddon = new WebglAddon();
|
||
disposeCanvasRenderer();
|
||
try {
|
||
this.webglAddon.onContextLoss(() => {
|
||
this.webglAddon?.dispose();
|
||
});
|
||
terminal.loadAddon(this.webglAddon);
|
||
console.log('[ttyd] WebGL renderer loaded');
|
||
} catch (e) {
|
||
console.log('[ttyd] WebGL renderer could not be loaded, falling back to canvas renderer', e);
|
||
disposeWebglRenderer();
|
||
enableCanvasRenderer();
|
||
}
|
||
};
|
||
|
||
switch (value) {
|
||
case 'canvas':
|
||
enableCanvasRenderer();
|
||
break;
|
||
case 'webgl':
|
||
enableWebglRenderer();
|
||
break;
|
||
case 'dom':
|
||
disposeWebglRenderer();
|
||
disposeCanvasRenderer();
|
||
console.log('[ttyd] dom renderer loaded');
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
private stripAnsi(input: string): string {
|
||
return input.replace(/\u001B\[[0-9;?]*[ -\/]*[@-~]/g, '').replace(/\u0007/g, '');
|
||
}
|
||
}
|