Skip to content

Commit

Permalink
html: upgrade to xterm 5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsl0922
tsl0922 committed Oct 18, 2022
1 parent 896e07e commit 2f7e0e0
Show file tree
Hide file tree
Showing 6 changed files with 12,116 additions and 12,362 deletions.
11 changes: 6 additions & 5 deletions html/package.json
View file
Expand Up @@ -50,11 +50,12 @@
"file-saver": "^2.0.5",
"preact": "^10.11.2",
"whatwg-fetch": "^3.6.2",
"xterm": "^4.19.0",
"xterm-addon-fit": "^0.5.0",
"xterm-addon-image": "^0.1.3",
"xterm-addon-web-links": "^0.6.0",
"xterm-addon-webgl": "^0.12.0",
"xterm": "^5.0.0",
"xterm-addon-canvas": "^0.2.0",
"xterm-addon-fit": "^0.6.0",
"xterm-addon-image": "^0.2.0",
"xterm-addon-web-links": "^0.7.0",
"xterm-addon-webgl": "^0.13.0",
"zmodem.js": "^0.1.10"
}
}
1 change: 1 addition & 0 deletions html/src/components/app.tsx
View file
Expand Up @@ -42,6 +42,7 @@ const termOptions = {
brightCyan: '#37e6e8',
brightWhite: '#f1f1f0',
} as ITheme,
allowProposedApi: true,
} as ITerminalOptions;

export class App extends Component {
Expand Down
75 changes: 52 additions & 23 deletions html/src/components/terminal/index.tsx
View file
@@ -1,8 +1,9 @@
import { bind } from 'decko';
import { Component, h } from 'preact';
import { ITerminalOptions, RendererType, Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { ITerminalOptions, Terminal } from 'xterm';
import { CanvasAddon } from 'xterm-addon-canvas';
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 { OverlayAddon } from './overlay';
Expand Down Expand Up @@ -36,8 +37,10 @@ const enum Command {
RESUME = '3',
}

export type RendererType = 'dom' | 'canvas' | 'webgl';

export interface ClientOptions {
rendererType: 'dom' | 'canvas' | 'webgl';
rendererType: RendererType;
disableLeaveAlert: boolean;
disableResizeOverlay: boolean;
titleFixed: string;
Expand All @@ -61,6 +64,7 @@ export class Xterm extends Component<Props> {
private overlayAddon: OverlayAddon;
private zmodemAddon: ZmodemAddon;
private webglAddon: WebglAddon;
private canvasAddon: CanvasAddon;

private socket: WebSocket;
private token: string;
Expand Down Expand Up @@ -212,9 +216,16 @@ export class Xterm extends Component<Props> {
}

@bind
private setRendererType(value: 'webgl' | RendererType) {
private setRendererType(value: RendererType) {
const { terminal } = this;

const disposeCanvasRenderer = () => {
try {
this.canvasAddon?.dispose();
} catch {
// ignore
}
this.canvasAddon = undefined;
};
const disposeWebglRenderer = () => {
try {
this.webglAddon?.dispose();
Expand All @@ -223,33 +234,50 @@ export class Xterm extends Component<Props> {
}
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':
if (this.webglAddon) return;
try {
if (window.WebGL2RenderingContext && document.createElement('canvas').getContext('webgl2')) {
this.webglAddon = new WebglAddon();
this.webglAddon.onContextLoss(() => {
disposeWebglRenderer();
});
terminal.loadAddon(this.webglAddon);
console.log(`[ttyd] WebGL renderer enabled`);
}
} catch (e) {
console.warn(`[ttyd] webgl2 init error`, e);
}
enableWebglRenderer();
break;
case 'dom':
default:
disposeWebglRenderer();
console.log(`[ttyd] option: rendererType=${value}`);
terminal.options.rendererType = value;
break;
}
}

@bind
private applyOptions(options: any) {
private applyOptions(options: ITerminalOptions) {
const { terminal, fitAddon } = this;

Object.keys(options).forEach(key => {
Expand Down Expand Up @@ -373,7 +401,8 @@ export class Xterm extends Component<Props> {
break;
case Command.SET_PREFERENCES:
const prefs = JSON.parse(textDecoder.decode(data));
this.applyOptions(Object.assign({}, this.props.clientOptions, prefs));
const options = Object.assign({}, this.props.clientOptions, prefs) as ITerminalOptions;
this.applyOptions(options);
break;
default:
console.warn(`[ttyd] unknown command: ${cmd}`);
Expand Down
4 changes: 2 additions & 2 deletions html/src/components/zmodem/index.tsx
View file
Expand Up @@ -84,7 +84,7 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd

@bind
private zmodemReset() {
this.terminal.setOption('disableStdin', false);
this.terminal.options.disableStdin = false;

if (this.keyDispose) {
this.keyDispose.dispose();
Expand Down Expand Up @@ -127,7 +127,7 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
@bind
private zmodemDetect(detection: Zmodem.Detection): void {
const { terminal, receiveFile, zmodemReset } = this;
terminal.setOption('disableStdin', true);
terminal.options.disableStdin = true;

this.keyDispose = terminal.onKey(e => {
const event = e.domEvent;
Expand Down
45 changes: 25 additions & 20 deletions html/yarn.lock
View file
Expand Up @@ -7246,30 +7246,35 @@ xtend@~4.0.0, xtend@~4.0.1:
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

xterm-addon-fit@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==

xterm-addon-image@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/xterm-addon-image/-/xterm-addon-image-0.1.3.tgz#20593d93b51ab3408debb31f66f8700a2e60ed2d"
integrity sha512-9J+DnI/MlanAv+gaaTcTXcqXK8fU/FYiWbaL0C5+YY2lbflpGSk7XV4K95txbix4AdV85RfIDByUm7VJZRWs8g==
xterm-addon-canvas@^0.2.0:
version "0.2.0"
resolved "https://registry.npmmirror.com/xterm-addon-canvas/-/xterm-addon-canvas-0.2.0.tgz#ba0080d4071f172f94e8c0b5e6151dd7e386f1a1"
integrity sha512-b4tMT05US9Rlqv6R0XZTHsfq8MRKzwxITwpvckuod/l4lokcCokHPbgpYAytOgrzqkzWjYI+Ol8en6cMGf8ncg==

xterm-addon-web-links@^0.6.0:
xterm-addon-fit@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.6.0.tgz#0296cb6c99588847894670d998c9ea6a6aeb26ee"
integrity sha512-H6XzjWWZu8FBo+fnYpxdPk9w5M6drbsvwPEJZGRS38MihiQaVFpKlCMKdfRgDbKGE530tw1yH54rhpZfHgt2/A==
resolved "https://registry.npmmirror.com/xterm-addon-fit/-/xterm-addon-fit-0.6.0.tgz#142e1ce181da48763668332593fc440349c88c34"
integrity sha512-9/7A+1KEjkFam0yxTaHfuk9LEvvTSBi0PZmEkzJqgafXPEXL9pCMAVV7rB09sX6ATRDXAdBpQhZkhKj7CGvYeg==

xterm-addon-webgl@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0.tgz#2fba8d31890a122adafa1c2fb945482e2ae12973"
integrity sha512-3P5ihdjPnxH6Wrvqjki9UD+duoVrp1fvnO/pSpXP2F1L2GwY6TDNExgj8Yg141vMCNgQbcVqmsTLYEYZxjY92A==
xterm-addon-image@^0.2.0:
version "0.2.0"
resolved "https://registry.npmmirror.com/xterm-addon-image/-/xterm-addon-image-0.2.0.tgz#47f58a522c7d21c7b2fc7a2d18aff324461974f1"
integrity sha512-rGbwUcwnJQqN1LTdEhqUS83xtBpApUWOJISjN/Efbg8TplqdXsHOVDmEcnLvhBn5cCzAZIqD2OZaan1+cI7mWA==

xterm@^4.19.0:
version "4.19.0"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
xterm-addon-web-links@^0.7.0:
version "0.7.0"
resolved "https://registry.npmmirror.com/xterm-addon-web-links/-/xterm-addon-web-links-0.7.0.tgz#dceac36170605f9db10a01d716bd83ee38f65c17"
integrity sha512-6PqoqzzPwaeSq22skzbvyboDvSnYk5teUYEoKBwMYvhbkwOQkemZccjWHT5FnNA8o1aInTc4PRYAl4jjPucCKA==

xterm-addon-webgl@^0.13.0:
version "0.13.0"
resolved "https://registry.npmmirror.com/xterm-addon-webgl/-/xterm-addon-webgl-0.13.0.tgz#b1d42ec454390ad8595aa8c8dde714b98a5eb896"
integrity sha512-xL4qBQWUHjFR620/8VHCtrTMVQsnZaAtd1IxFoiKPhC63wKp6b+73a45s97lb34yeo57PoqZhE9Jq5pB++ksPQ==

xterm@^5.0.0:
version "5.0.0"
resolved "https://registry.npmmirror.com/xterm/-/xterm-5.0.0.tgz#0af50509b33d0dc62fde7a4ec17750b8e453cc5c"
integrity sha512-tmVsKzZovAYNDIaUinfz+VDclraQpPUnAME+JawosgWRMphInDded/PuY0xmU5dOhyeYZsI0nz5yd8dPYsdLTA==

y18n@^3.2.1:
version "3.2.2"
Expand Down

0 comments on commit 2f7e0e0

Please sign in to comment.