diff --git a/.eslintrc.json b/.eslintrc.json index 6031c195e..427c7a16d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ "project": [ "src/browser/tsconfig.json", "src/common/tsconfig.json", + "src/headless/tsconfig.json", "test/api/tsconfig.json", "test/benchmark/tsconfig.json", "addons/xterm-addon-attach/src/tsconfig.json", diff --git a/.mocha.env b/.mocha.env new file mode 100644 index 000000000..78a9f9302 --- /dev/null +++ b/.mocha.env @@ -0,0 +1 @@ +NODE_PATH=./out diff --git a/.mocharc.yml b/.mocharc.yml new file mode 100644 index 000000000..c19fe15ab --- /dev/null +++ b/.mocharc.yml @@ -0,0 +1,11 @@ +require: + - source-map-support/register +spec: + - out/**/*.test.js + - addons/**/out/*.test.js +watch-files: + - out/**/*.js + - addons/**/out/*.js +reporter: spec +color: true +check-leaks: true diff --git a/.vscode/settings.json b/.vscode/settings.json index f07ca5457..9fa94d5f7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { "typescript.preferences.importModuleSpecifier": "non-relative", - "typescript.preferences.quoteStyle": "single" + "typescript.preferences.quoteStyle": "single", + "mochaExplorer.envPath": ".mocha.env" } diff --git a/README.md b/README.md index 0ac211ed3..e6d8f9a9a 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,10 @@ We also partially support *Internet Explorer 11*, meaning xterm.js should work f Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers. These are the versions we strive to keep working. +### Node.js Support + +We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the serialize addon so it can get all state restored upon reconnection. + ## API The full API for xterm.js is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API. @@ -162,20 +166,24 @@ Xterm.js is used in several world-class applications to provide great terminal e - [**CoCalc**](https://cocalc.com/): Lots of free software pre-installed, to chat, collaborate, develop, program, publish, research, share, teach, in C++, HTML, Julia, Jupyter, LaTeX, Markdown, Python, R, SageMath, Scala, ... - [**Dank Domain**](https://www.DDgame.us/): Open source multiuser medieval game supporting old & new terminal emulation. - [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio -- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash. +- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash. - [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js - [**Repl.it**](https://repl.it): Collaborative browser based IDE with support for 50+ different languages. - [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot. - [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js. -- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services. +- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services. - [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner. -- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes. +- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes. - [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH. - [**gifcast**](https://dstein64.github.io/gifcast/): Converts an asciinema cast to an animated GIF. - [**WizardWebssh**](https://gitlab.com/mikeramsey/wizardwebssh): A terminal with Pyqt5 Widget for embedding, which can be used as an ssh client to connect to your ssh servers. It is written in Python, based on tornado, paramiko, and xterm.js. -- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease. +- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease. - [**ucli**](https://github.com/tsadarsh/ucli): Command Line for everyone :family_man_woman_girl_boy: at [www.ucli.tech](https://www.ucli.tech). - [**Tess**](https://github.com/SquitchYT/Tess/): Simple Terminal Fully Customizable for Everyone. +- [**HashiCorp Nomad**](https://www.nomadproject.io/): A container orchestrator with the ability to connect to remote tasks via a web interface using websockets and xterm.js. +- [**TermPair**](https://github.com/cs01/termpair): View and control terminals from your browser with end-to-end encryption +- [**gdbgui**](https://github.com/cs01/gdbgui): Browser-based frontend to gdb (gnu debugger) +- [**goormIDE**](https://ide.goorm.io/): Run almost every programming languages with real-time collaboration, live pair programming, and built-in messenger. - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents) Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Note: Please add any new contributions to the end of the list only. diff --git a/addons/xterm-addon-attach/test/AttachAddon.api.ts b/addons/xterm-addon-attach/test/AttachAddon.api.ts index ef26cfd23..8335cf0f3 100644 --- a/addons/xterm-addon-attach/test/AttachAddon.api.ts +++ b/addons/xterm-addon-attach/test/AttachAddon.api.ts @@ -4,7 +4,7 @@ */ import WebSocket = require('ws'); -import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('AttachAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-fit/test/FitAddon.api.ts b/addons/xterm-addon-fit/test/FitAddon.api.ts index 8859b5a66..987092adc 100644 --- a/addons/xterm-addon-fit/test/FitAddon.api.ts +++ b/addons/xterm-addon-fit/test/FitAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 768; describe('FitAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/addons/xterm-addon-ligatures/package.json b/addons/xterm-addon-ligatures/package.json index 64d8eed7d..b1688772a 100644 --- a/addons/xterm-addon-ligatures/package.json +++ b/addons/xterm-addon-ligatures/package.json @@ -1,6 +1,6 @@ { "name": "xterm-addon-ligatures", - "version": "0.5.0", + "version": "0.5.1", "description": "Add support for programming ligatures to xterm.js", "author": { "name": "The xterm.js authors", @@ -36,7 +36,7 @@ }, "devDependencies": { "@types/sinon": "^5.0.1", - "axios": "^0.18.0", + "axios": "^0.21.2", "mkdirp": "0.5.5", "sinon": "6.3.5", "yauzl": "^2.10.0" diff --git a/addons/xterm-addon-ligatures/src/font.ts b/addons/xterm-addon-ligatures/src/font.ts index 72872a0b6..abdbbc045 100644 --- a/addons/xterm-addon-ligatures/src/font.ts +++ b/addons/xterm-addon-ligatures/src/font.ts @@ -37,7 +37,7 @@ export default async function load(fontFamily: string, cacheSize: number): Promi // Web environment that supports font access API if (typeof navigator !== 'undefined' && 'fonts' in navigator) { try { - const status = await (navigator as IFontAccessNavigator).permissions.request?.({ + const status = await (navigator as unknown as IFontAccessNavigator).permissions.request?.({ name: 'local-fonts' }); if (status && status.state !== 'granted') { @@ -53,7 +53,7 @@ export default async function load(fontFamily: string, cacheSize: number): Promi } const fonts: Record = {}; try { - const fontsIterator = await (navigator as IFontAccessNavigator).fonts.query(); + const fontsIterator = await (navigator as unknown as IFontAccessNavigator).fonts.query(); for (const metadata of fontsIterator) { if (!fonts.hasOwnProperty(metadata.family)) { fonts[metadata.family] = []; diff --git a/addons/xterm-addon-ligatures/yarn.lock b/addons/xterm-addon-ligatures/yarn.lock index 2aac858b1..f6ce913b5 100644 --- a/addons/xterm-addon-ligatures/yarn.lock +++ b/addons/xterm-addon-ligatures/yarn.lock @@ -45,23 +45,17 @@ array-from@^2.1.1: resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195" integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU= -axios@^0.18.0: - version "0.18.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3" +axios@^0.21.2: + version "0.21.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.2.tgz#21297d5084b2aeeb422f5d38e7be4fbb82239017" + integrity sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg== dependencies: - follow-redirects "1.5.10" - is-buffer "^2.0.2" + follow-redirects "^1.14.0" buffer-crc32@~0.2.3: version "0.2.13" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" -debug@=3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - dependencies: - ms "2.0.0" - diff@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" @@ -72,11 +66,10 @@ fd-slicer@~1.1.0: dependencies: pend "~1.2.0" -follow-redirects@1.5.10: - version "1.5.10" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" - dependencies: - debug "=3.1.0" +follow-redirects@^1.14.0: + version "1.14.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.3.tgz#6ada78118d8d24caee595595accdc0ac6abd022e" + integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw== font-finder@^1.0.3: version "1.0.4" @@ -110,10 +103,6 @@ has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" -is-buffer@^2.0.2: - version "2.0.3" - resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725" - isarray@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" @@ -163,10 +152,6 @@ mkdirp@0.5.5: dependencies: minimist "^1.2.5" -ms@2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" - nise@^1.4.5: version "1.5.3" resolved "https://registry.yarnpkg.com/nise/-/nise-1.5.3.tgz#9d2cfe37d44f57317766c6e9408a359c5d3ac1f7" diff --git a/addons/xterm-addon-search/package.json b/addons/xterm-addon-search/package.json index 659bd834e..08fe195fe 100644 --- a/addons/xterm-addon-search/package.json +++ b/addons/xterm-addon-search/package.json @@ -1,6 +1,6 @@ { "name": "xterm-addon-search", - "version": "0.8.0", + "version": "0.8.1", "author": { "name": "The xterm.js authors", "url": "https://xtermjs.org/" diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 4a73d9980..1409328d3 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -23,7 +23,7 @@ export interface ISearchResult { row: number; } -const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\;:"\',./<>?'; +const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?'; const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs export class SearchAddon implements ITerminalAddon { diff --git a/addons/xterm-addon-search/test/SearchAddon.api.ts b/addons/xterm-addon-search/test/SearchAddon.api.ts index 3c94d416b..8bdf61cf1 100644 --- a/addons/xterm-addon-search/test/SearchAddon.api.ts +++ b/addons/xterm-addon-search/test/SearchAddon.api.ts @@ -6,7 +6,7 @@ import { assert } from 'chai'; import { readFile } from 'fs'; import { resolve } from 'path'; -import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -18,10 +18,7 @@ const height = 600; describe('Search Tests', function(): void { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/addons/xterm-addon-serialize/package.json b/addons/xterm-addon-serialize/package.json index 770771c4c..77a54dbf9 100644 --- a/addons/xterm-addon-serialize/package.json +++ b/addons/xterm-addon-serialize/package.json @@ -1,12 +1,13 @@ { "name": "xterm-addon-serialize", - "version": "0.5.0", + "version": "0.6.0", "author": { "name": "The xterm.js authors", "url": "https://xtermjs.org/" }, "main": "lib/xterm-addon-serialize.js", "types": "typings/xterm-addon-serialize.d.ts", + "repository": "https://github.com/xtermjs/xterm.js", "license": "MIT", "scripts": { "build": "../../node_modules/.bin/tsc -p .", diff --git a/addons/xterm-addon-serialize/src/SerializeAddon.ts b/addons/xterm-addon-serialize/src/SerializeAddon.ts index 0caaaa039..24020b74e 100644 --- a/addons/xterm-addon-serialize/src/SerializeAddon.ts +++ b/addons/xterm-addon-serialize/src/SerializeAddon.ts @@ -7,13 +7,17 @@ import { Terminal, ITerminalAddon, IBuffer, IBufferCell } from 'xterm'; + function constrain(value: number, low: number, high: number): number { return Math.max(low, Math.min(value, high)); } // TODO: Refine this template class later abstract class BaseSerializeHandler { - constructor(private _buffer: IBuffer) { } + constructor( + protected readonly _buffer: IBuffer + ) { + } public serialize(startRow: number, endRow: number): string { // we need two of them to flip between old and new cell @@ -68,11 +72,10 @@ function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean { && cell1.isBlink() === cell2.isBlink() && cell1.isInvisible() === cell2.isInvisible() && cell1.isItalic() === cell2.isItalic() - && cell1.isDim() === cell2.isDim(); + && cell1.isDim() === cell2.isDim() + && cell1.isStrikethrough() === cell2.isStrikethrough(); } - - class StringSerializeHandler extends BaseSerializeHandler { private _rowIndex: number = 0; private _allRows: string[] = new Array(); @@ -83,7 +86,7 @@ class StringSerializeHandler extends BaseSerializeHandler { // we can see a full colored cell and a null cell that only have background the same style // but the information isn't preserved by null cell itself // so wee need to record it when required. - private _cursorStyle: IBufferCell = this._buffer1.getNullCell(); + private _cursorStyle: IBufferCell = this._buffer.getNullCell(); // where exact the cursor styles comes from // because we can't copy the cell directly @@ -92,7 +95,7 @@ class StringSerializeHandler extends BaseSerializeHandler { private _cursorStyleCol: number = 0; // this is a null cell for reference for checking whether background is empty or not - private _backgroundCell: IBufferCell = this._buffer1.getNullCell(); + private _backgroundCell: IBufferCell = this._buffer.getNullCell(); private _firstRow: number = 0; private _lastCursorRow: number = 0; @@ -100,8 +103,11 @@ class StringSerializeHandler extends BaseSerializeHandler { private _lastContentCursorRow: number = 0; private _lastContentCursorCol: number = 0; - constructor(private _buffer1: IBuffer, private _terminal: Terminal) { - super(_buffer1); + constructor( + buffer: IBuffer, + private readonly _terminal: Terminal + ) { + super(buffer); } protected _beforeSerialize(rows: number, start: number, end: number): void { @@ -111,14 +117,14 @@ class StringSerializeHandler extends BaseSerializeHandler { this._firstRow = start; } - private _thisRowLastChar: IBufferCell = this._buffer1.getNullCell(); - private _thisRowLastSecondChar: IBufferCell = this._buffer1.getNullCell(); - private _nextRowFirstChar: IBufferCell = this._buffer1.getNullCell(); + private _thisRowLastChar: IBufferCell = this._buffer.getNullCell(); + private _thisRowLastSecondChar: IBufferCell = this._buffer.getNullCell(); + private _nextRowFirstChar: IBufferCell = this._buffer.getNullCell(); protected _rowEnd(row: number, isLastRow: boolean): void { // if there is colorful empty cell at line end, whe must pad it back, or the the color block will missing if (this._nullCellCount > 0 && !equalBg(this._cursorStyle, this._backgroundCell)) { // use clear right to set background. - this._currentRow += `\x1b[${this._nullCellCount}X`; + this._currentRow += `\u001b[${this._nullCellCount}X`; } let rowSeparator = ''; @@ -127,13 +133,13 @@ class StringSerializeHandler extends BaseSerializeHandler { if (!isLastRow) { // Enable BCE if (row - this._firstRow >= this._terminal.rows) { - this._buffer1.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell); + this._buffer.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell); } // Fetch current line - const currentLine = this._buffer1.getLine(row)!; + const currentLine = this._buffer.getLine(row)!; // Fetch next line - const nextLine = this._buffer1.getLine(row + 1)!; + const nextLine = this._buffer.getLine(row + 1)!; if (!nextLine.isWrapped) { // just insert the line break @@ -155,7 +161,7 @@ class StringSerializeHandler extends BaseSerializeHandler { if ( // you must output character to cause overflow, control sequence can't do this nextRowFirstChar.getChars() && - isNextRowFirstCharDoubleWidth ? this._nullCellCount <= 1 : this._nullCellCount <= 0 + isNextRowFirstCharDoubleWidth ? this._nullCellCount <= 1 : this._nullCellCount <= 0 ) { if ( // the last character can't be null, @@ -187,15 +193,15 @@ class StringSerializeHandler extends BaseSerializeHandler { // insert enough character to force the wrap rowSeparator = '-'.repeat(this._nullCellCount + 1); // move back and erase next line head - rowSeparator += '\x1b[1D\x1b[1X'; + rowSeparator += '\u001b[1D\u001b[1X'; if (this._nullCellCount > 0) { // do these because we filled the last several null slot, which we shouldn't - rowSeparator += '\x1b[A'; - rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}C`; - rowSeparator += `\x1b[${this._nullCellCount}X`; - rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}D`; - rowSeparator += '\x1b[B'; + rowSeparator += '\u001b[A'; + rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}C`; + rowSeparator += `\u001b[${this._nullCellCount}X`; + rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}D`; + rowSeparator += '\u001b[B'; } // This is content and need the be serialized even it is invisible. @@ -254,6 +260,7 @@ class StringSerializeHandler extends BaseSerializeHandler { if (cell.isInvisible() !== oldCell.isInvisible()) { sgrSeq.push(cell.isInvisible() ? 8 : 28); } if (cell.isItalic() !== oldCell.isItalic()) { sgrSeq.push(cell.isItalic() ? 3 : 23); } if (cell.isDim() !== oldCell.isDim()) { sgrSeq.push(cell.isDim() ? 2 : 22); } + if (cell.isStrikethrough() !== oldCell.isStrikethrough()) { sgrSeq.push(cell.isStrikethrough() ? 9 : 29); } } } } @@ -285,20 +292,20 @@ class StringSerializeHandler extends BaseSerializeHandler { if (this._nullCellCount > 0) { // use clear right to set background. if (!equalBg(this._cursorStyle, this._backgroundCell)) { - this._currentRow += `\x1b[${this._nullCellCount}X`; + this._currentRow += `\u001b[${this._nullCellCount}X`; } // use move right to move cursor. - this._currentRow += `\x1b[${this._nullCellCount}C`; + this._currentRow += `\u001b[${this._nullCellCount}C`; this._nullCellCount = 0; } this._lastContentCursorRow = this._lastCursorRow = row; this._lastContentCursorCol = this._lastCursorCol = col; - this._currentRow += `\x1b[${sgrSeq.join(';')}m`; + this._currentRow += `\u001b[${sgrSeq.join(';')}m`; // update the last cursor style - const line = this._buffer1.getLine(row); + const line = this._buffer.getLine(row); if (line !== undefined) { line.getCell(col, this._cursorStyle); this._cursorStyleRow = row; @@ -317,10 +324,10 @@ class StringSerializeHandler extends BaseSerializeHandler { // because style change is handled by previous stage // use move right when background is empty, use clear right when there is background. if (equalBg(this._cursorStyle, this._backgroundCell)) { - this._currentRow += `\x1b[${this._nullCellCount}C`; + this._currentRow += `\u001b[${this._nullCellCount}C`; } else { - this._currentRow += `\x1b[${this._nullCellCount}X`; - this._currentRow += `\x1b[${this._nullCellCount}C`; + this._currentRow += `\u001b[${this._nullCellCount}X`; + this._currentRow += `\u001b[${this._nullCellCount}C`; } this._nullCellCount = 0; } @@ -338,7 +345,7 @@ class StringSerializeHandler extends BaseSerializeHandler { // the fixup is only required for data without scrollback // because it will always be placed at last line otherwise - if (this._buffer1.length - this._firstRow <= this._terminal.rows) { + if (this._buffer.length - this._firstRow <= this._terminal.rows) { rowEnd = this._lastContentCursorRow + 1 - this._firstRow; this._lastCursorCol = this._lastContentCursorCol; this._lastCursorRow = this._lastContentCursorRow; @@ -354,8 +361,8 @@ class StringSerializeHandler extends BaseSerializeHandler { } // restore the cursor - const realCursorRow = this._buffer1.baseY + this._buffer1.cursorY; - const realCursorCol = this._buffer1.cursorX; + const realCursorRow = this._buffer.baseY + this._buffer.cursorY; + const realCursorCol = this._buffer.cursorX; const cursorMoved = (realCursorRow !== this._lastCursorRow || realCursorCol !== this._lastCursorCol); @@ -379,7 +386,6 @@ class StringSerializeHandler extends BaseSerializeHandler { moveRight(realCursorCol - this._lastCursorCol); } - return content; } } @@ -393,34 +399,73 @@ export class SerializeAddon implements ITerminalAddon { this._terminal = terminal; } - private _getString(buffer: IBuffer, scrollback?: number): string { + private _serializeBuffer(terminal: Terminal, buffer: IBuffer, scrollback?: number): string { const maxRows = buffer.length; - const handler = new StringSerializeHandler(buffer, this._terminal!); - - const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + this!._terminal!.rows, 0, maxRows); - const result = handler.serialize(maxRows - correctRows, maxRows); - - return result; + const handler = new StringSerializeHandler(buffer, terminal); + const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + terminal.rows, 0, maxRows); + return handler.serialize(maxRows - correctRows, maxRows); } - public serialize(scrollback?: number): string { + private _serializeModes(terminal: Terminal): string { + let content = ''; + const modes = terminal.modes; + + // Default: false + if (modes.applicationCursorKeysMode) content += '\x1b[?1h'; + if (modes.applicationKeypadMode) content += '\x1b[?66h'; + if (modes.bracketedPasteMode) content += '\x1b[?2004h'; + if (modes.insertMode) content += '\x1b[4h'; + if (modes.originMode) content += '\x1b[?6h'; + if (modes.reverseWraparoundMode) content += '\x1b[?45h'; + if (modes.sendFocusMode) content += '\x1b[?1004h'; + + // Default: true + if (modes.wraparoundMode === false) content += '\x1b[?7l'; + + // Default: 'none' + if (modes.mouseTrackingMode !== 'none') { + switch (modes.mouseTrackingMode) { + case 'x10': content += '\x1b[?9h'; break; + case 'vt200': content += '\x1b[?1000h'; break; + case 'drag': content += '\x1b[?1002h'; break; + case 'any': content += '\x1b[?1003h'; break; + } + } + + return content; + } + + public serialize(options?: ISerializeOptions): string { // TODO: Add combinedData support if (!this._terminal) { throw new Error('Cannot use addon until it has been loaded'); } - if (this._terminal.buffer.active.type === 'normal') { - return this._getString(this._terminal.buffer.active, scrollback); + // Normal buffer + let content = this._serializeBuffer(this._terminal, this._terminal.buffer.normal, options?.scrollback); + + // Alternate buffer + if (!options?.excludeAltBuffer) { + if (this._terminal.buffer.active.type === 'alternate') { + const alternativeScreenContent = this._serializeBuffer(this._terminal, this._terminal.buffer.alternate, undefined); + content += `\u001b[?1049h\u001b[H${alternativeScreenContent}`; + } } - const normalScreenContent = this._getString(this._terminal.buffer.normal, scrollback); - // alt screen don't have scrollback - const alternativeScreenContent = this._getString(this._terminal.buffer.alternate, undefined); + // Modes + if (!options?.excludeModes) { + content += this._serializeModes(this._terminal); + } - return normalScreenContent - + '\u001b[?1049h\u001b[H' - + alternativeScreenContent; + return content; } public dispose(): void { } } + + +interface ISerializeOptions { + scrollback?: number; + excludeModes?: boolean; + excludeAltBuffer?: boolean; +} diff --git a/addons/xterm-addon-serialize/test/SerializeAddon.api.ts b/addons/xterm-addon-serialize/test/SerializeAddon.api.ts index c46b3815c..334016e6b 100644 --- a/addons/xterm-addon-serialize/test/SerializeAddon.api.ts +++ b/addons/xterm-addon-serialize/test/SerializeAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -30,12 +30,15 @@ const testNormalScreenEqual = async (page: any, str: string): Promise => { assert.equal(JSON.stringify(originalBuffer), JSON.stringify(newBuffer)); }; +async function testSerializeEquals(writeContent: string, expectedSerialized: string): Promise { + await writeRawSync(page, writeContent); + const result = await page.evaluate(`serializeAddon.serialize();`) as string; + assert.strictEqual(result, expectedSerialized); +} + describe('SerializeAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); @@ -89,8 +92,6 @@ describe('SerializeAddon', () => { }); it('empty content', async function(): Promise { - const rows = 10; - const cols = 10; assert.equal(await page.evaluate(`serializeAddon.serialize();`), ''); }); @@ -145,7 +146,7 @@ describe('SerializeAddon', () => { const cols = 10; const lines = newArray((index: number) => digitsString(cols, index), rows); await writeSync(page, lines.join('\\r\\n')); - assert.equal(await page.evaluate(`serializeAddon.serialize(${halfScrollback});`), lines.slice(halfScrollback, rows).join('\r\n')); + assert.equal(await page.evaluate(`serializeAddon.serialize({ scrollback: ${halfScrollback} });`), lines.slice(halfScrollback, rows).join('\r\n')); }); it('serialize 0 rows of scrollback', async function(): Promise { @@ -153,7 +154,19 @@ describe('SerializeAddon', () => { const cols = 10; const lines = newArray((index: number) => digitsString(cols, index), rows); await writeSync(page, lines.join('\\r\\n')); - assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), lines.slice(rows - 10, rows).join('\r\n')); + assert.equal(await page.evaluate(`serializeAddon.serialize({ scrollback: 0 });`), lines.slice(rows - 10, rows).join('\r\n')); + }); + + it('serialize exclude modes', async () => { + await writeSync(page, 'before\\x1b[?1hafter'); + assert.equal(await page.evaluate(`serializeAddon.serialize();`), 'beforeafter\x1b[?1h'); + assert.equal(await page.evaluate(`serializeAddon.serialize({ excludeModes: true });`), 'beforeafter'); + }); + + it('serialize exclude alt buffer', async () => { + await writeSync(page, 'normal\\x1b[?1049h\\x1b[Halt'); + assert.equal(await page.evaluate(`serializeAddon.serialize();`), 'normal\x1b[?1049h\x1b[Halt'); + assert.equal(await page.evaluate(`serializeAddon.serialize({ excludeAltBuffer: true });`), 'normal'); }); it('serialize all rows of content with color16', async function(): Promise { @@ -177,17 +190,19 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_P16_GREEN) + line, // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence - mkSGR(INVERSE) + line, - mkSGR(BOLD) + line, - mkSGR(UNDERLINED) + line, - mkSGR(BLINK) + line, - mkSGR(INVISIBLE) + line, - mkSGR(NO_INVERSE) + line, - mkSGR(NO_BOLD) + line, - mkSGR(NO_UNDERLINED) + line, - mkSGR(NO_BLINK) + line, - mkSGR(NO_INVISIBLE) + line + sgr(FG_P16_GREEN) + line, // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence + sgr(INVERSE) + line, + sgr(BOLD) + line, + sgr(UNDERLINED) + line, + sgr(BLINK) + line, + sgr(INVISIBLE) + line, + sgr(STRIKETHROUGH) + line, + sgr(NO_INVERSE) + line, + sgr(NO_BOLD) + line, + sgr(NO_UNDERLINED) + line, + sgr(NO_BLINK) + line, + sgr(NO_INVISIBLE) + line, + sgr(NO_STRIKETHROUGH) + line ]; const rows = lines.length; await writeSync(page, lines.join('\\r\\n')); @@ -209,16 +224,16 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_P16_RED) + line, // fg Red, - mkSGR(UNDERLINED) + line, // fg Red, Underlined - mkSGR(FG_P16_GREEN) + line, // fg Green, Underlined - mkSGR(INVERSE) + line, // fg Green, Underlined, Inverse - mkSGR(NO_INVERSE) + line, // fg Green, Underlined - mkSGR(INVERSE) + line, // fg Green, Underlined, Inverse - mkSGR(BG_P16_YELLOW) + line, // fg Green, bg Yellow, Underlined, Inverse - mkSGR(FG_RESET) + line, // bg Yellow, Underlined, Inverse - mkSGR(BG_RESET) + line, // Underlined, Inverse - mkSGR(NORMAL) + line // Back to normal + sgr(FG_P16_RED) + line, // fg Red, + sgr(UNDERLINED) + line, // fg Red, Underlined + sgr(FG_P16_GREEN) + line, // fg Green, Underlined + sgr(INVERSE) + line, // fg Green, Underlined, Inverse + sgr(NO_INVERSE) + line, // fg Green, Underlined + sgr(INVERSE) + line, // fg Green, Underlined, Inverse + sgr(BG_P16_YELLOW) + line, // fg Green, bg Yellow, Underlined, Inverse + sgr(FG_RESET) + line, // bg Yellow, Underlined, Inverse + sgr(BG_RESET) + line, // Underlined, Inverse + sgr(NORMAL) + line // Back to normal ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -228,19 +243,19 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_P16_RED) + line, // fg Red - mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line, // fg Green, bg Yellow - mkSGR(UNDERLINED, ITALIC) + line, // fg Green, bg Yellow, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green, bg Yellow - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow, Italic - mkSGR(BG_RESET) + line, // Italic - mkSGR(NORMAL) + line, // Back to normal - mkSGR(FG_P16_RED) + line, // fg Red - mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line, // fg Green, bg Yellow - mkSGR(UNDERLINED, ITALIC) + line, // fg Green, bg Yellow, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green, bg Yellow - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow, Italic - mkSGR(BG_RESET) + line // Italic + sgr(FG_P16_RED) + line, // fg Red + sgr(FG_P16_GREEN, BG_P16_YELLOW) + line, // fg Green, bg Yellow + sgr(UNDERLINED, ITALIC) + line, // fg Green, bg Yellow, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green, bg Yellow + sgr(FG_RESET, ITALIC) + line, // bg Yellow, Italic + sgr(BG_RESET) + line, // Italic + sgr(NORMAL) + line, // Back to normal + sgr(FG_P16_RED) + line, // fg Red + sgr(FG_P16_GREEN, BG_P16_YELLOW) + line, // fg Green, bg Yellow + sgr(UNDERLINED, ITALIC) + line, // fg Green, bg Yellow, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green, bg Yellow + sgr(FG_RESET, ITALIC) + line, // bg Yellow, Italic + sgr(BG_RESET) + line // Italic ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -250,16 +265,16 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_P256_RED) + line, // fg Red 256, - mkSGR(UNDERLINED) + line, // fg Red 256, Underlined - mkSGR(FG_P256_GREEN) + line, // fg Green 256, Underlined - mkSGR(INVERSE) + line, // fg Green 256, Underlined, Inverse - mkSGR(NO_INVERSE) + line, // fg Green 256, Underlined - mkSGR(INVERSE) + line, // fg Green 256, Underlined, Inverse - mkSGR(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse - mkSGR(FG_RESET) + line, // bg Yellow 256, Underlined, Inverse - mkSGR(BG_RESET) + line, // Underlined, Inverse - mkSGR(NORMAL) + line // Back to normal + sgr(FG_P256_RED) + line, // fg Red 256, + sgr(UNDERLINED) + line, // fg Red 256, Underlined + sgr(FG_P256_GREEN) + line, // fg Green 256, Underlined + sgr(INVERSE) + line, // fg Green 256, Underlined, Inverse + sgr(NO_INVERSE) + line, // fg Green 256, Underlined + sgr(INVERSE) + line, // fg Green 256, Underlined, Inverse + sgr(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse + sgr(FG_RESET) + line, // bg Yellow 256, Underlined, Inverse + sgr(BG_RESET) + line, // Underlined, Inverse + sgr(NORMAL) + line // Back to normal ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -269,19 +284,19 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_P256_RED) + line, // fg Red 256 - mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256 - mkSGR(UNDERLINED, ITALIC) + line, // fg Green 256, bg Yellow 256, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green 256, bg Yellow 256 - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow 256, Italic - mkSGR(BG_RESET) + line, // Italic - mkSGR(NORMAL) + line, // Back to normal - mkSGR(FG_P256_RED) + line, // fg Red 256 - mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256 - mkSGR(UNDERLINED, ITALIC) + line, // fg Green 256, bg Yellow 256, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green 256, bg Yellow 256 - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow 256, Italic - mkSGR(BG_RESET) + line // Italic + sgr(FG_P256_RED) + line, // fg Red 256 + sgr(FG_P256_GREEN, BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256 + sgr(UNDERLINED, ITALIC) + line, // fg Green 256, bg Yellow 256, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green 256, bg Yellow 256 + sgr(FG_RESET, ITALIC) + line, // bg Yellow 256, Italic + sgr(BG_RESET) + line, // Italic + sgr(NORMAL) + line, // Back to normal + sgr(FG_P256_RED) + line, // fg Red 256 + sgr(FG_P256_GREEN, BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256 + sgr(UNDERLINED, ITALIC) + line, // fg Green 256, bg Yellow 256, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green 256, bg Yellow 256 + sgr(FG_RESET, ITALIC) + line, // bg Yellow 256, Italic + sgr(BG_RESET) + line // Italic ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -291,16 +306,16 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_RGB_RED) + line, // fg Red RGB, - mkSGR(UNDERLINED) + line, // fg Red RGB, Underlined - mkSGR(FG_RGB_GREEN) + line, // fg Green RGB, Underlined - mkSGR(INVERSE) + line, // fg Green RGB, Underlined, Inverse - mkSGR(NO_INVERSE) + line, // fg Green RGB, Underlined - mkSGR(INVERSE) + line, // fg Green RGB, Underlined, Inverse - mkSGR(BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB, Underlined, Inverse - mkSGR(FG_RESET) + line, // bg Yellow RGB, Underlined, Inverse - mkSGR(BG_RESET) + line, // Underlined, Inverse - mkSGR(NORMAL) + line // Back to normal + sgr(FG_RGB_RED) + line, // fg Red RGB, + sgr(UNDERLINED) + line, // fg Red RGB, Underlined + sgr(FG_RGB_GREEN) + line, // fg Green RGB, Underlined + sgr(INVERSE) + line, // fg Green RGB, Underlined, Inverse + sgr(NO_INVERSE) + line, // fg Green RGB, Underlined + sgr(INVERSE) + line, // fg Green RGB, Underlined, Inverse + sgr(BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB, Underlined, Inverse + sgr(FG_RESET) + line, // bg Yellow RGB, Underlined, Inverse + sgr(BG_RESET) + line, // Underlined, Inverse + sgr(NORMAL) + line // Back to normal ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -310,19 +325,19 @@ describe('SerializeAddon', () => { const cols = 10; const line = '+'.repeat(cols); const lines: string[] = [ - mkSGR(FG_RGB_RED) + line, // fg Red RGB - mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB - mkSGR(UNDERLINED, ITALIC) + line, // fg Green RGB, bg Yellow RGB, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green RGB, bg Yellow RGB - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow RGB, Italic - mkSGR(BG_RESET) + line, // Italic - mkSGR(NORMAL) + line, // Back to normal - mkSGR(FG_RGB_RED) + line, // fg Red RGB - mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB - mkSGR(UNDERLINED, ITALIC) + line, // fg Green RGB, bg Yellow RGB, Underlined, Italic - mkSGR(NO_UNDERLINED, NO_ITALIC) + line, // fg Green RGB, bg Yellow RGB - mkSGR(FG_RESET, ITALIC) + line, // bg Yellow RGB, Italic - mkSGR(BG_RESET) + line // Italic + sgr(FG_RGB_RED) + line, // fg Red RGB + sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB + sgr(UNDERLINED, ITALIC) + line, // fg Green RGB, bg Yellow RGB, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green RGB, bg Yellow RGB + sgr(FG_RESET, ITALIC) + line, // bg Yellow RGB, Italic + sgr(BG_RESET) + line, // Italic + sgr(NORMAL) + line, // Back to normal + sgr(FG_RGB_RED) + line, // fg Red RGB + sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line, // fg Green RGB, bg Yellow RGB + sgr(UNDERLINED, ITALIC) + line, // fg Green RGB, bg Yellow RGB, Underlined, Italic + sgr(NO_UNDERLINED, NO_ITALIC) + line, // fg Green RGB, bg Yellow RGB + sgr(FG_RESET, ITALIC) + line, // bg Yellow RGB, Italic + sgr(BG_RESET) + line // Italic ]; await writeSync(page, lines.join('\\r\\n')); assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n')); @@ -481,6 +496,52 @@ describe('SerializeAddon', () => { await testNormalScreenEqual(page, lines.join('')); }); + + describe('handle modes', () => { + it('applicationCursorKeysMode', async () => { + await testSerializeEquals('test\u001b[?1h', 'test\u001b[?1h'); + await testSerializeEquals('\u001b[?1l', 'test'); + }); + it('applicationKeypadMode', async () => { + await testSerializeEquals('test\u001b[?66h', 'test\u001b[?66h'); + await testSerializeEquals('\u001b[?66l', 'test'); + }); + it('bracketedPasteMode', async () => { + await testSerializeEquals('test\u001b[?2004h', 'test\u001b[?2004h'); + await testSerializeEquals('\u001b[?2004l', 'test'); + }); + it('insertMode', async () => { + await testSerializeEquals('test\u001b[4h', 'test\u001b[4h'); + await testSerializeEquals('\u001b[4l', 'test'); + }); + it('mouseTrackingMode', async () => { + await testSerializeEquals('test\u001b[?9h', 'test\u001b[?9h'); + await testSerializeEquals('\u001b[?9l', 'test'); + await testSerializeEquals('\u001b[?1000h', 'test\u001b[?1000h'); + await testSerializeEquals('\u001b[?1000l', 'test'); + await testSerializeEquals('\u001b[?1002h', 'test\u001b[?1002h'); + await testSerializeEquals('\u001b[?1002l', 'test'); + await testSerializeEquals('\u001b[?1003h', 'test\u001b[?1003h'); + await testSerializeEquals('\u001b[?1003l', 'test'); + }); + it('originMode', async () => { + // origin mode moves cursor to (0,0) + await testSerializeEquals('test\u001b[?6h', 'test\u001b[4D\u001b[?6h'); + await testSerializeEquals('\u001b[?6l', 'test\u001b[4D'); + }); + it('reverseWraparoundMode', async () => { + await testSerializeEquals('test\u001b[?45h', 'test\u001b[?45h'); + await testSerializeEquals('\u001b[?45l', 'test'); + }); + it('sendFocusMode', async () => { + await testSerializeEquals('test\u001b[?1004h', 'test\u001b[?1004h'); + await testSerializeEquals('\u001b[?1004l', 'test'); + }); + it('wraparoundMode', async () => { + await testSerializeEquals('test\u001b[?7l', 'test\u001b[?7l'); + await testSerializeEquals('\u001b[?7h', 'test'); + }); + }); }); function newArray(initial: T | ((index: number) => T), count: number): T[] { @@ -503,7 +564,7 @@ function digitsString(length: number, from: number = 0, sgr: string = ''): strin return s; } -function mkSGR(...seq: string[]): string { +function sgr(...seq: string[]): string { return `\x1b[${seq.join(';')}m`; } @@ -532,20 +593,20 @@ const BG_RGB_GREEN = '48;2;0;255;0'; const BG_RGB_YELLOW = '48;2;255;255;0'; const BG_RESET = '49'; -const INVERSE = '7'; const BOLD = '1'; +const DIM = '2'; +const ITALIC = '3'; const UNDERLINED = '4'; const BLINK = '5'; +const INVERSE = '7'; const INVISIBLE = '8'; +const STRIKETHROUGH = '9'; -const NO_INVERSE = '27'; const NO_BOLD = '22'; +const NO_DIM = '22'; +const NO_ITALIC = '23'; const NO_UNDERLINED = '24'; const NO_BLINK = '25'; +const NO_INVERSE = '27'; const NO_INVISIBLE = '28'; - -const ITALIC = '3'; -const DIM = '2'; - -const NO_ITALIC = '23'; -const NO_DIM = '22'; +const NO_STRIKETHROUGH = '29'; diff --git a/addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts b/addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts index 58be9a973..f50fc4deb 100644 --- a/addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts +++ b/addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts @@ -3,36 +3,57 @@ * @license MIT */ - import { Terminal, ITerminalAddon } from 'xterm'; declare module 'xterm-addon-serialize' { /** - * An xterm.js addon that enables web links. + * An xterm.js addon that enables serialization of terminal contents. */ export class SerializeAddon implements ITerminalAddon { constructor(); /** - * Activates the addon + * Activates the addon. * @param terminal The terminal the addon is being loaded in. */ public activate(terminal: Terminal): void; /** - * Serializes terminal rows into a string that can be written back to the terminal - * to restore the state. The cursor will also be positioned to the correct cell. - * When restoring a terminal it is best to do before `Terminal.open` is called - * to avoid wasting CPU cycles rendering incomplete frames. - * @param scrollback The number of rows in scrollback buffer to serialize, starting from the bottom of the - * scrollback buffer. This defaults to the all available rows in the scrollback buffer. + * Serializes terminal rows into a string that can be written back to the terminal to restore + * the state. The cursor will also be positioned to the correct cell. When restoring a terminal + * it is best to do before `Terminal.open` is called to avoid wasting CPU cycles rendering + * incomplete frames. + * + * It's recommended that you write the serialized data into a terminal of the same size in which + * it originated from and then resize it after if needed. + * + * @param options Custom options to allow control over what gets serialized. */ - public serialize(scrollback?: number): string; + public serialize(options?: ISerializeOptions): string; /** * Disposes the addon. */ public dispose(): void; } + + export interface ISerializeOptions { + /** + * The number of rows in the scrollback buffer to serialize, starting from the bottom of the + * scrollback buffer. When not specified, all available rows in the scrollback buffer will be + * serialized. + */ + scrollback?: number; + + /** + * Whether to exclude the terminal modes from the serialization. False by default. + */ + excludeModes?: boolean; + + /** + * Whether to exclude the alt buffer from the serialization. False by default. + */ + excludeAltBuffer?: boolean; + } } diff --git a/addons/xterm-addon-serialize/webpack.config.js b/addons/xterm-addon-serialize/webpack.config.js index 4cabbad91..7c0ccd016 100644 --- a/addons/xterm-addon-serialize/webpack.config.js +++ b/addons/xterm-addon-serialize/webpack.config.js @@ -25,7 +25,8 @@ module.exports = { filename: mainFile, path: path.resolve('./lib'), library: addonName, - libraryTarget: 'umd' + libraryTarget: 'umd', + globalObject: 'this' }, mode: 'production' }; diff --git a/addons/xterm-addon-unicode11/package.json b/addons/xterm-addon-unicode11/package.json index 397bf2b9c..9fc69416e 100644 --- a/addons/xterm-addon-unicode11/package.json +++ b/addons/xterm-addon-unicode11/package.json @@ -1,6 +1,6 @@ { "name": "xterm-addon-unicode11", - "version": "0.2.0", + "version": "0.3.0", "author": { "name": "The xterm.js authors", "url": "https://xtermjs.org/" diff --git a/addons/xterm-addon-unicode11/src/Unicode11Addon.ts b/addons/xterm-addon-unicode11/src/Unicode11Addon.ts index cb8c9c563..d4ddf77ee 100644 --- a/addons/xterm-addon-unicode11/src/Unicode11Addon.ts +++ b/addons/xterm-addon-unicode11/src/Unicode11Addon.ts @@ -8,6 +8,7 @@ import { Terminal, ITerminalAddon } from 'xterm'; import { UnicodeV11 } from './UnicodeV11'; + export class Unicode11Addon implements ITerminalAddon { public activate(terminal: Terminal): void { terminal.unicode.register(new UnicodeV11()); diff --git a/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts b/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts index ba536e904..4c695b001 100644 --- a/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts +++ b/addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('Unicode11Addon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-unicode11/webpack.config.js b/addons/xterm-addon-unicode11/webpack.config.js index 66a83a2fb..10c0adc3c 100644 --- a/addons/xterm-addon-unicode11/webpack.config.js +++ b/addons/xterm-addon-unicode11/webpack.config.js @@ -32,7 +32,8 @@ module.exports = { filename: mainFile, path: path.resolve('./lib'), library: addonName, - libraryTarget: 'umd' + libraryTarget: 'umd', + globalObject: 'this' }, mode: 'production' }; diff --git a/addons/xterm-addon-web-links/src/WebLinksAddon.ts b/addons/xterm-addon-web-links/src/WebLinksAddon.ts index 46ddcf7b2..dd1c1f174 100644 --- a/addons/xterm-addon-web-links/src/WebLinksAddon.ts +++ b/addons/xterm-addon-web-links/src/WebLinksAddon.ts @@ -29,7 +29,11 @@ const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end); function handleLink(event: MouseEvent, uri: string): void { const newWindow = window.open(); if (newWindow) { - newWindow.opener = null; + try { + newWindow.opener = null; + } catch { + // no-op, Electron can throw + } newWindow.location.href = uri; } else { console.warn('Opening link blocked as opener could not be cleared'); diff --git a/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts b/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts index 54650f1f9..fe44dc31e 100644 --- a/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts +++ b/addons/xterm-addon-web-links/test/WebLinksAddon.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; +import { openTerminal, pollFor, writeSync, launchBrowser } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('WebLinksAddon', () => { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/addons/xterm-addon-webgl/package.json b/addons/xterm-addon-webgl/package.json index 421f6092f..226f34ba4 100644 --- a/addons/xterm-addon-webgl/package.json +++ b/addons/xterm-addon-webgl/package.json @@ -1,6 +1,6 @@ { "name": "xterm-addon-webgl", - "version": "0.11.1", + "version": "0.11.2", "author": { "name": "The xterm.js authors", "url": "https://xtermjs.org/" diff --git a/addons/xterm-addon-webgl/src/GlyphRenderer.ts b/addons/xterm-addon-webgl/src/GlyphRenderer.ts index b09fe5404..71b3659ee 100644 --- a/addons/xterm-addon-webgl/src/GlyphRenderer.ts +++ b/addons/xterm-addon-webgl/src/GlyphRenderer.ts @@ -176,8 +176,9 @@ export class GlyphRenderer { const i = (y * terminal.cols + x) * INDICES_PER_CELL; - // Exit early if this is a null/space character - if (code === NULL_CELL_CODE || code === WHITESPACE_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) { + // Exit early if this is a null character, allow space character to continue as it may have + // underline/strikethrough styles + if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) { fill(array, 0, i, i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES); return; } diff --git a/addons/xterm-addon-webgl/src/WebglAddon.ts b/addons/xterm-addon-webgl/src/WebglAddon.ts index ad2393d83..b8bcf5b1d 100644 --- a/addons/xterm-addon-webgl/src/WebglAddon.ts +++ b/addons/xterm-addon-webgl/src/WebglAddon.ts @@ -8,6 +8,7 @@ import { WebglRenderer } from './WebglRenderer'; import { ICharacterJoinerService, IRenderService } from 'browser/services/Services'; import { IColorSet } from 'browser/Types'; import { EventEmitter } from 'common/EventEmitter'; +import { isSafari } from 'common/Platform'; export class WebglAddon implements ITerminalAddon { private _terminal?: Terminal; @@ -23,6 +24,9 @@ export class WebglAddon implements ITerminalAddon { if (!terminal.element) { throw new Error('Cannot activate WebglAddon before Terminal.open'); } + if (isSafari) { + throw new Error('Webgl is not currently supported on Safari'); + } this._terminal = terminal; const renderService: IRenderService = (terminal as any)._core._renderService; const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService; diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index 8c59cd8aa..4b80cc6cb 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -108,7 +108,7 @@ export class WebglRenderer extends Disposable implements IRenderer { for (const l of this._renderLayers) { l.dispose(); } - this._core.screenElement!.removeChild(this._canvas); + this._canvas.parentElement?.removeChild(this._canvas); super.dispose(); } @@ -230,7 +230,7 @@ export class WebglRenderer extends Disposable implements IRenderer { return; } - const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight); + const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight); if (!('getRasterizedGlyph' in atlas)) { throw new Error('The webgl renderer only works with the webgl char atlas'); } diff --git a/addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts b/addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts index 5046006f2..41114de0f 100644 --- a/addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts +++ b/addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts @@ -28,10 +28,12 @@ const charAtlasCache: ICharAtlasCacheEntry[] = []; export function acquireCharAtlas( terminal: Terminal, colors: IColorSet, + scaledCellWidth: number, + scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number ): WebglCharAtlas { - const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors); + const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors); // Check to see if the terminal already owns this config for (let i = 0; i < charAtlasCache.length; i++) { diff --git a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts index 5496a500b..962eb7b34 100644 --- a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts +++ b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts @@ -13,7 +13,7 @@ const NULL_COLOR: IColor = { rgba: 0 }; -export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig { +export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig { // null out some fields that don't matter const clonedColors: IColorSet = { foreground: colors.foreground, @@ -28,7 +28,12 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number contrastCache: colors.contrastCache }; return { + customGlyphs: terminal.getOption('customGlyphs'), devicePixelRatio: window.devicePixelRatio, + letterSpacing: terminal.getOption('letterSpacing'), + lineHeight: terminal.getOption('lineHeight'), + scaledCellWidth, + scaledCellHeight, scaledCharWidth, scaledCharHeight, fontFamily: terminal.getOption('fontFamily'), @@ -49,6 +54,9 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean } } return a.devicePixelRatio === b.devicePixelRatio && + a.customGlyphs === b.customGlyphs && + a.lineHeight === b.lineHeight && + a.letterSpacing === b.letterSpacing && a.fontFamily === b.fontFamily && a.fontSize === b.fontSize && a.fontWeight === b.fontWeight && diff --git a/addons/xterm-addon-webgl/src/atlas/Types.d.ts b/addons/xterm-addon-webgl/src/atlas/Types.d.ts index cd73393ce..8d2870cde 100644 --- a/addons/xterm-addon-webgl/src/atlas/Types.d.ts +++ b/addons/xterm-addon-webgl/src/atlas/Types.d.ts @@ -17,11 +17,16 @@ export interface IGlyphIdentifier { } export interface ICharAtlasConfig { + customGlyphs: boolean; devicePixelRatio: number; + letterSpacing: number; + lineHeight: number; fontSize: number; fontFamily: string; fontWeight: FontWeight; fontWeightBold: FontWeight; + scaledCellWidth: number; + scaledCellHeight: number; scaledCharWidth: number; scaledCharHeight: number; allowTransparency: boolean; diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 5e1ad195c..6128c8369 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -12,6 +12,7 @@ import { IColor } from 'browser/Types'; import { IDisposable } from 'xterm'; import { AttributeData } from 'common/buffer/AttributeData'; import { channels, rgba } from 'browser/Color'; +import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs'; // In practice we're probably never going to exhaust a texture this large. For debugging purposes, // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works. @@ -83,8 +84,8 @@ export class WebglCharAtlas implements IDisposable { this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true })); this._tmpCanvas = document.createElement('canvas'); - this._tmpCanvas.width = this._config.scaledCharWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; - this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2; + this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; + this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency })); } @@ -338,6 +339,8 @@ export class WebglCharAtlas implements IDisposable { const inverse = !!this._workAttributeData.isInverse(); const dim = !!this._workAttributeData.isDim(); const italic = !!this._workAttributeData.isItalic(); + const underline = !!this._workAttributeData.isUnderline(); + const strikethrough = !!this._workAttributeData.isStrikethrough(); let fgColor = this._workAttributeData.getFgColor(); let fgColorMode = this._workAttributeData.getFgColorMode(); let bgColor = this._workAttributeData.getBgColor(); @@ -388,8 +391,52 @@ export class WebglCharAtlas implements IDisposable { // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129) const padding = isPowerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING; + // Draw custom characters if applicable + let drawSuccess = false; + if (this._config.customGlyphs !== false) { + drawSuccess = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight); + } + // Draw the character - this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight); + if (!drawSuccess) { + this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight); + } + + // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible, + // try for a maximum of 5 pixels. + if (chars === '_' && !this._config.allowTransparency) { + let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor); + if (isBeyondCellBounds) { + for (let offset = 1; offset <= 5; offset++) { + this._tmpCtx.clearRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height); + this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset); + isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor); + if (!isBeyondCellBounds) { + break; + } + } + } + } + + // Draw underline and strikethrough + if (underline || strikethrough) { + const lineWidth = Math.max(1, Math.floor(this._config.fontSize / 10)); + const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position + this._tmpCtx.lineWidth = lineWidth; + this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle; + this._tmpCtx.beginPath(); + if (underline) { + this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset); + this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset); + } + if (strikethrough) { + this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset); + this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset); + } + this._tmpCtx.stroke(); + this._tmpCtx.closePath(); + } + this._tmpCtx.restore(); // clear the background from the character to avoid issues with drawing over the previous @@ -412,7 +459,7 @@ export class WebglCharAtlas implements IDisposable { return NULL_RASTERIZED_GLYPH; } - const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph); + const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph, drawSuccess); const clippedImageData = this._clipImageData(imageData, this._workBoundingBox); // Check if there is enough room in the current row and go to next if needed @@ -445,7 +492,7 @@ export class WebglCharAtlas implements IDisposable { * @param imageData The image data to read. * @param boundingBox An IBoundingBox to put the clipped bounding box values. */ - private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean): IRasterizedGlyph { + private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean): IRasterizedGlyph { boundingBox.top = 0; const height = restrictedGlyph ? this._config.scaledCharHeight : this._tmpCanvas.height; const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth; @@ -520,8 +567,8 @@ export class WebglCharAtlas implements IDisposable { y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT }, offset: { - x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING), - y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? Math.floor(this._config.letterSpacing / 2) : 0), + y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0) } }; } diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts index cc210fd32..532836eef 100644 --- a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts +++ b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts @@ -92,7 +92,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) { return; } - this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight); + this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight); this._charAtlas.warmUp(); } diff --git a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts index 8bad1be9d..4199b7e15 100644 --- a/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts +++ b/addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts @@ -7,7 +7,7 @@ import { Terminal } from 'xterm'; import { BaseRenderLayer } from './BaseRenderLayer'; import { ICellData } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; -import { IColorSet } from 'browser/Types'; +import { IColorSet, ITerminal } from 'browser/Types'; import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types'; import { IEventEmitter } from 'common/EventEmitter'; @@ -35,6 +35,7 @@ export class CursorRenderLayer extends BaseRenderLayer { container: HTMLElement, zIndex: number, colors: IColorSet, + private readonly _terminal: ITerminal, private _onRequestRefreshRowsEvent: IEventEmitter ) { super(container, 'cursor', zIndex, true, colors); @@ -112,7 +113,7 @@ export class CursorRenderLayer extends BaseRenderLayer { private _render(terminal: Terminal, triggeredByAnimationFrame: boolean): void { // Don't draw the cursor if it's hidden // TODO: Need to expose API for this - if (!(terminal as any)._core._coreService.isCursorInitialized || (terminal as any)._core._coreService.isCursorHidden) { + if (!this._terminal.coreService.isCursorInitialized || this._terminal.coreService.isCursorHidden) { this._clearCursor(); return; } @@ -185,7 +186,12 @@ export class CursorRenderLayer extends BaseRenderLayer { private _clearCursor(): void { if (this._state) { - this._clearCells(this._state.x, this._state.y, this._state.width, 1); + // Avoid potential rounding errors when device pixel ratio is less than 1 + if (window.devicePixelRatio < 1) { + this._clearAll(); + } else { + this._clearCells(this._state.x, this._state.y, this._state.width, 1); + } this._state = { x: 0, y: 0, diff --git a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts index 1722e5705..e6942d1cb 100644 --- a/addons/xterm-addon-webgl/test/WebglRenderer.api.ts +++ b/addons/xterm-addon-webgl/test/WebglRenderer.api.ts @@ -3,11 +3,11 @@ * @license MIT */ -import { ITerminalOptions } from '../../../src/common/Types'; -import { ITheme } from 'xterm'; import { assert } from 'chai'; -import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils'; import { Browser, Page } from 'playwright'; +import { ITheme } from 'xterm'; +import { getBrowserType, launchBrowser, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils'; +import { ITerminalOptions } from '../../../src/common/Types'; const APP = 'http://127.0.0.1:3001/test'; @@ -890,11 +890,22 @@ async function getCellColor(col: number, row: number): Promise { return await page.evaluate(`Array.from(window.result)`); } +async function getCellPixels(col: number, row: number): Promise { + await page.evaluate(` + window.gl = window.term._core._renderService._renderer._gl; + window.result = new Uint8Array(window.d.scaledCellWidth * window.d.scaledCellHeight * 4); + window.d = window.term._core._renderService.dimensions; + window.gl.readPixels( + Math.floor(${col - 1} * window.d.scaledCellWidth), + Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.scaledCellHeight), + window.d.scaledCellWidth, window.d.scaledCellHeight, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result + ); + `); + return await page.evaluate(`Array.from(window.result)`); +} + async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.includes('--headless') - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/azure-pipelines.yml b/azure-pipelines.yml index f4220176e..5d4e99180 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -164,5 +164,9 @@ jobs: displayName: Cache node modules - script: yarn --frozen-lockfile displayName: 'Install dependencies and build' + - script: | + yarn package-headless + node ./bin/package_headless.js + displayName: 'Package xterm-headless' - script: NPM_AUTH_TOKEN="$(NPM_AUTH_TOKEN)" node ./bin/publish.js displayName: 'Package and publish to npm' diff --git a/bin/package_headless.js b/bin/package_headless.js new file mode 100644 index 000000000..d002a95ec --- /dev/null +++ b/bin/package_headless.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +const { exec } = require('child_process'); +const fs = require('fs'); +const { join } = require('path'); + +const repoRoot = join(__dirname, '..'); +const headlessRoot = join(repoRoot, 'headless'); + +console.log('> headless/package.json'); +const xtermPackageJson = require('../package.json'); +const xtermHeadlessPackageJson = { + ...xtermPackageJson, + name: 'xterm-headless', + description: 'A headless terminal component that runs in Node.js', + main: 'lib-headless/xterm-headless.js', + types: 'typings/xterm-headless.d.ts', +}; +delete xtermHeadlessPackageJson['scripts']; +delete xtermHeadlessPackageJson['devDependencies']; +delete xtermHeadlessPackageJson['style']; +fs.writeFileSync(join(headlessRoot, 'package.json'), JSON.stringify(xtermHeadlessPackageJson, null, 1)); +console.log(fs.readFileSync(join(headlessRoot, 'package.json')).toString()); + +console.log('> headless/typings/'); +mkdirF(join(headlessRoot, 'typings')); +fs.copyFileSync( + join(repoRoot, 'typings/xterm-headless.d.ts'), + join(headlessRoot, 'typings/xterm-headless.d.ts') +); + +console.log('> headless/logo-full.png'); +fs.copyFileSync( + join(repoRoot, 'logo-full.png'), + join(headlessRoot, 'logo-full.png') +); + +function mkdirF(p) { + if (!fs.existsSync(p)) { + fs.mkdirSync(p); + } +} + +console.log('> Publish dry run'); +exec('npm publish --dry-run', { cwd: headlessRoot }, (error, stdout, stderr) => { + if (error) { + console.log(`error: ${error.message}`); + return; + } + if (stderr) { + console.error(`stderr:\n${stderr}`); + } + console.log(`stdout:\n${stdout}`); +}); diff --git a/bin/publish.js b/bin/publish.js index 64336fdc7..3c729f6c1 100644 --- a/bin/publish.js +++ b/bin/publish.js @@ -22,6 +22,7 @@ const changedFiles = getChangedFilesInCommit('HEAD'); let isStableRelease = false; if (changedFiles.some(e => e.search(/^addons\//) === -1)) { isStableRelease = checkAndPublishPackage(path.resolve(__dirname, '..')); + checkAndPublishPackage(path.resolve(__dirname, '../headless')); } // Publish addons if any files were changed inside of the addon diff --git a/bin/test_api.js b/bin/test_api.js index 9fe4659a8..f173b4175 100644 --- a/bin/test_api.js +++ b/bin/test_api.js @@ -59,6 +59,12 @@ server.stdout.on('data', (data) => { `${script}.cmd` : script)); } + server.kill(); + process.exit(run.status); } }); + +server.stderr.on('data', (data) => { + console.error(data.toString()); +}); diff --git a/css/xterm.css b/css/xterm.css index 831a89c67..3fab18bd4 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -168,3 +168,7 @@ .xterm-underline { text-decoration: underline; } + +.xterm-strikethrough { + text-decoration: line-through; +} diff --git a/demo/client.ts b/demo/client.ts index 0bb124cd4..a5ac8bb51 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -147,6 +147,8 @@ if (document.location.pathname === '/test') { createTerminal(); document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler); document.getElementById('serialize').addEventListener('click', serializeButtonHandler); + document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler); + document.getElementById('load-test').addEventListener('click', loadTest); } function createTerminal(): void { @@ -348,6 +350,9 @@ function initOptions(term: TerminalType): void { } else if (o === 'lineHeight' || o === 'scrollSensitivity') { term.setOption(o, parseFloat(input.value)); updateTerminalSize(); + } else if(o === 'scrollback') { + term.setOption(o, parseInt(input.value)); + setTimeout(() => updateTerminalSize(), 5); } else { term.setOption(o, parseInt(input.value)); } @@ -372,6 +377,9 @@ function initAddons(term: TerminalType): void { if (!addon.canChange) { checkbox.disabled = true; } + if(name === 'unicode11' && checkbox.checked) { + term.unicode.activeVersion = '11'; + } addDomListener(checkbox, 'change', () => { if (checkbox.checked) { addon.instance = new addon.ctor(); @@ -380,10 +388,14 @@ function initAddons(term: TerminalType): void { setTimeout(() => { document.body.appendChild((addon.instance as WebglAddon).textureAtlas); }, 0); + } else if (name === 'unicode11') { + term.unicode.activeVersion = '11'; } } else { if (name === 'webgl') { document.body.removeChild((addon.instance as WebglAddon).textureAtlas); + } else if (name === 'unicode11') { + term.unicode.activeVersion = '6'; } addon.instance!.dispose(); addon.instance = undefined; @@ -431,3 +443,82 @@ function serializeButtonHandler(): void { term.write(output); } } + + +function writeCustomGlyphHandler() { + term.write('\n\r'); + term.write('\n\r'); + term.write('Box styles: ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐\n\r'); + term.write('┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤\n\r'); + term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘\n\r'); + term.write('├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐\n\r'); + term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤\n\r'); + term.write('└─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘\n\r'); + term.write('\n\r'); + term.write('Other:\n\r'); + term.write('╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈\n\r'); + term.write('│ │ ╳ ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉\n\r'); + term.write('╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋\n\r'); + term.write('\n\r'); + term.write('All box drawing characters:\n\r'); + term.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\n\r'); + term.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\n\r'); + term.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\n\r'); + term.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\n\r'); + term.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\n\r'); + term.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\n\r'); + term.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\n\r'); + term.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\n\r'); + term.write('Box drawing alignment tests:\x1b[31m █\n\r'); + term.write(' ▉\n\r'); + term.write(' ╔══╦══╗ ┌──┬──┐ ╭──┬──╮ ╭──┬──╮ ┏━━┳━━┓ ┎┒┏┑ ╷ ╻ ┏┯┓ ┌┰┐ ▊ ╱╲╱╲╳╳╳\n\r'); + term.write(' ║┌─╨─┐║ │╔═╧═╗│ │╒═╪═╕│ │╓─╁─╖│ ┃┌─╂─┐┃ ┗╃╄┙ ╶┼╴╺╋╸┠┼┨ ┝╋┥ ▋ ╲╱╲╱╳╳╳\n\r'); + term.write(' ║│╲ ╱│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╿ │┃ ┍╅╆┓ ╵ ╹ ┗┷┛ └┸┘ ▌ ╱╲╱╲╳╳╳\n\r'); + term.write(' ╠╡ ╳ ╞╣ ├╢ ╟┤ ├┼─┼─┼┤ ├╫─╂─╫┤ ┣┿╾┼╼┿┫ ┕┛┖┚ ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r'); + term.write(' ║│╱ ╲│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╽ │┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▎\n\r'); + term.write(' ║└─╥─┘║ │╚═╤═╝│ │╘═╪═╛│ │╙─╀─╜│ ┃└─╂─┘┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▏\n\r'); + term.write(' ╚══╩══╝ └──┴──┘ ╰──┴──╯ ╰──┴──╯ ┗━━┻━━┛ └╌╌┘ ╎ ┗╍╍┛ ┋ ▁▂▃▄▅▆▇█\n\r'); + term.write('Box drawing alignment tests:\x1b[32m █\n\r'); + term.write(' ▉\n\r'); + term.write(' ╔══╦══╗ ┌──┬──┐ ╭──┬──╮ ╭──┬──╮ ┏━━┳━━┓ ┎┒┏┑ ╷ ╻ ┏┯┓ ┌┰┐ ▊ ╱╲╱╲╳╳╳\n\r'); + term.write(' ║┌─╨─┐║ │╔═╧═╗│ │╒═╪═╕│ │╓─╁─╖│ ┃┌─╂─┐┃ ┗╃╄┙ ╶┼╴╺╋╸┠┼┨ ┝╋┥ ▋ ╲╱╲╱╳╳╳\n\r'); + term.write(' ║│╲ ╱│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╿ │┃ ┍╅╆┓ ╵ ╹ ┗┷┛ └┸┘ ▌ ╱╲╱╲╳╳╳\n\r'); + term.write(' ╠╡ ╳ ╞╣ ├╢ ╟┤ ├┼─┼─┼┤ ├╫─╂─╫┤ ┣┿╾┼╼┿┫ ┕┛┖┚ ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r'); + term.write(' ║│╱ ╲│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╽ │┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▎\n\r'); + term.write(' ║└─╥─┘║ │╚═╤═╝│ │╘═╪═╛│ │╙─╀─╜│ ┃└─╂─┘┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▏\n\r'); + term.write(' ╚══╩══╝ └──┴──┘ ╰──┴──╯ ╰──┴──╯ ┗━━┻━━┛ └╌╌┘ ╎ ┗╍╍┛ ┋ ▁▂▃▄▅▆▇█\n\r'); + window.scrollTo(0, 0); +} + +function loadTest() { + const isWebglEnabled = !!addons.webgl.instance; + const testData = []; + let byteCount = 0; + for (let i = 0; i < 50; i++) { + const count = 1 + Math.floor(Math.random() * 79); + byteCount += count + 2; + const data = new Uint8Array(count + 2); + data[0] = 0x0A; // \n + for (let i = 1; i < count + 1; i++) { + data[i] = 0x61 + Math.floor(Math.random() * (0x7A - 0x61)); + } + // End each line with \r so the cursor remains constant, this is what ls/tree do and improves + // performance significantly due to the cursor DOM element not needing to change + data[data.length - 1] = 0x0D; // \r + testData.push(data); + } + const start = performance.now(); + for (let i = 0; i < 1024; i++) { + for (const d of testData) { + term.write(d); + } + } + // Wait for all data to be parsed before evaluating time + term.write('', () => { + const time = Math.round(performance.now() - start); + const mbs = ((byteCount / 1024) * (1 / (time / 1000))).toFixed(2); + term.write(`\n\r\nWrote ${byteCount}kB in ${time}ms (${mbs}MB/s) using the (${isWebglEnabled ? 'webgl' : 'canvas'} renderer)`); + // Send ^C to get a new prompt + term._core._onData.fire('\x03'); + }); +} diff --git a/demo/index.html b/demo/index.html index ab5b20406..9c86783b5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -15,41 +15,91 @@

xterm.js: A terminal for the web

-
-
-

Options

-

These options can be set in the Terminal constructor or by using the Terminal.setOption function.

-
-
-
-

Addons

-

Addons can be loaded and unloaded on a particular terminal to extend its functionality.

-
-

Addons Control

-

SearchAddon

-

- - - - - -

-

SerializeAddon

-

- - -

-

-
-
-

Style

-
- - +
+
+
+
+
+
+ + + + +
+
+

Options

+

These options can be set in the Terminal constructor or by using the Terminal.setOption function.

+
+
+
+

Addons

+

Addons can be loaded and unloaded on a particular terminal to extend its functionality.

+
+

Addons Control

+

SearchAddon

+
+ + + + + +
+

SerializeAddon

+
+ + +
+
+
+
+

Style

+
+ + +
+
+
+

Test

+
+ + + +
+
-
- - - + + + diff --git a/demo/style.css b/demo/style.css index 9c5fd0bd6..cebd08e01 100644 --- a/demo/style.css +++ b/demo/style.css @@ -41,3 +41,52 @@ pre { word-wrap: break-word; white-space: pre-wrap; } + + +#container { + display: flex; + height: 75vh; +} +#grid { + flex: 1; + /* max-height: 80vh; + overflow-y: auto; */ + width: 100%; +} +.tab { + overflow: hidden; + border: 1px solid #ccc; + background-color: #f1f1f1; +} + +/* Style the buttons inside the tab */ +.tab button { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; +} + +/* Change background color of buttons on hover */ +.tab button:hover { + background-color: #ddd; +} + +/* Create an active/current tablink class */ +.tab button.active { + background-color: #ccc; + } + +/* Style the tab content */ +.tabContent { + display: none; + padding: 6px 12px; + border: 1px solid #ccc; + border-top: none; + max-height: 100vh; + overflow-y: auto; +} diff --git a/headless/.gitignore b/headless/.gitignore new file mode 100644 index 000000000..f1cf6c8d8 --- /dev/null +++ b/headless/.gitignore @@ -0,0 +1,4 @@ +lib-headless/ +typings/ +logo-full.png +./package.json diff --git a/headless/.npmignore b/headless/.npmignore new file mode 100644 index 000000000..83e9f2019 --- /dev/null +++ b/headless/.npmignore @@ -0,0 +1,6 @@ +# Include +!typings/*.d.ts +!lib-headless/ + +# Exclude +test/ diff --git a/headless/README.md b/headless/README.md new file mode 100644 index 000000000..1d2d61568 --- /dev/null +++ b/headless/README.md @@ -0,0 +1,31 @@ +# [![xterm.js logo](logo-full.png)](https://xtermjs.org) + +⚠ This package is experimental + +`xterm-headless` is a headless terminal that can be run in node.js. This is useful in combination with the frontend [`xterm`](https://www.npmjs.com/package/xterm) for example to keep track of a terminal's state on a remote server where the process is hosted. + +## Getting Started + +First, you need to install the module, we ship exclusively through npm, so you need that installed and then add xterm.js as a dependency by running: + +```sh +npm install xterm-headless +``` + +Then import as you would a regular node package. The recommended way to load `xterm-headless` is with TypeScript and the ES6 module syntax: + +```javascript +import { Terminal } from 'xterm-headless'; +``` + +## API + +The full API for `xterm-headless` is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm-headless.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API. + +Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs. + +### Addons + +Addons in `xterm-headless` work the [same as in `xterm`](https://github.com/xtermjs/xterm.js/blob/master/README.md#addons) with the one caveat being that the addon needs to be packaged for node.js and not use any DOM APIs. + +Currently no official addons are packaged on npm. diff --git a/package.json b/package.json index 1b290c6e1..ad288f494 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "xterm", "description": "Full xterm terminal, in your browser", - "version": "4.12.0", + "version": "4.14.1", "main": "lib/xterm.js", "style": "css/xterm.css", "types": "typings/xterm.d.ts", @@ -10,6 +10,8 @@ "scripts": { "prepackage": "npm run build", "package": "webpack", + "package-headless": "webpack --config ./webpack.config.headless.js", + "postpackage-headless": "node ./bin/package_headless.js", "start": "node demo/start", "start-debug": "node --inspect-brk demo/start", "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/", @@ -21,6 +23,7 @@ "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000", "test-unit": "node ./bin/test.js", "test-unit-coverage": "node ./bin/test.js --coverage", + "test-unit-dev": "cross-env NODE_PATH='./out' mocha", "build": "tsc -b ./tsconfig.all.json", "prepare": "npm run setup", "setup": "npm run build", @@ -47,6 +50,7 @@ "@typescript-eslint/eslint-plugin": "^4.23.0", "@typescript-eslint/parser": "^4.23.0", "chai": "^4.3.4", + "cross-env": "^7.0.3", "deep-equal": "^2.0.5", "eslint": "^7.26.0", "express": "^4.17.1", @@ -59,6 +63,7 @@ "nyc": "^15.1.0", "playwright": "^1.11.0", "source-map-loader": "^2.0.1", + "source-map-support": "^0.5.19", "ts-loader": "^9.1.2", "typescript": "^4.2.4", "utf8": "^3.0.0", diff --git a/src/browser/AccessibilityManager.ts b/src/browser/AccessibilityManager.ts index c1ffc39a6..800922022 100644 --- a/src/browser/AccessibilityManager.ts +++ b/src/browser/AccessibilityManager.ts @@ -4,10 +4,10 @@ */ import * as Strings from 'browser/LocalizableStrings'; -import { ITerminal } from 'browser/Types'; +import { ITerminal, IRenderDebouncer } from 'browser/Types'; import { IBuffer } from 'common/buffer/Types'; import { isMac } from 'common/Platform'; -import { RenderDebouncer } from 'browser/RenderDebouncer'; +import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer'; import { addDisposableDomListener } from 'browser/Lifecycle'; import { Disposable } from 'common/Lifecycle'; import { ScreenDprMonitor } from 'browser/ScreenDprMonitor'; @@ -28,7 +28,7 @@ export class AccessibilityManager extends Disposable { private _liveRegion: HTMLElement; private _liveRegionLineCount: number = 0; - private _renderRowsDebouncer: RenderDebouncer; + private _renderRowsDebouncer: IRenderDebouncer; private _screenDprMonitor: ScreenDprMonitor; private _topBoundaryFocusListener: (e: FocusEvent) => void; @@ -53,6 +53,7 @@ export class AccessibilityManager extends Disposable { ) { super(); this._accessibilityTreeRoot = document.createElement('div'); + this._accessibilityTreeRoot.setAttribute('role', 'document'); this._accessibilityTreeRoot.classList.add('xterm-accessibility'); this._rowContainer = document.createElement('div'); @@ -72,7 +73,7 @@ export class AccessibilityManager extends Disposable { this._refreshRowsDimensions(); this._accessibilityTreeRoot.appendChild(this._rowContainer); - this._renderRowsDebouncer = new RenderDebouncer(this._renderRows.bind(this)); + this._renderRowsDebouncer = new TimeBasedDebouncer(this._renderRows.bind(this)); this._refreshRows(); this._liveRegion = document.createElement('div'); diff --git a/src/browser/RenderDebouncer.ts b/src/browser/RenderDebouncer.ts index 2a06fdd66..025210707 100644 --- a/src/browser/RenderDebouncer.ts +++ b/src/browser/RenderDebouncer.ts @@ -3,12 +3,12 @@ * @license MIT */ -import { IDisposable } from 'common/Types'; +import { IRenderDebouncer } from 'browser/Types'; /** * Debounces calls to render terminal rows using animation frames. */ -export class RenderDebouncer implements IDisposable { +export class RenderDebouncer implements IRenderDebouncer { private _rowStart: number | undefined; private _rowEnd: number | undefined; private _rowCount: number | undefined; diff --git a/src/browser/Terminal.test.ts b/src/browser/Terminal.test.ts index 84e6a87eb..a102d93f1 100644 --- a/src/browser/Terminal.test.ts +++ b/src/browser/Terminal.test.ts @@ -732,80 +732,78 @@ describe('Terminal', () => { }); describe('unicode - surrogates', () => { - it('2 characters per cell', async function (): Promise { - this.timeout(10000); // This is needed because istanbul patches code and slows it down - const high = String.fromCharCode(0xD800); - const cell = new CellData(); - for (let i = 0xDC00; i <= 0xDCFF; ++i) { - await term.writeP(high + String.fromCharCode(i)); - const tchar = term.buffer.lines.get(0)!.loadCell(0, cell); - assert.equal(tchar.getChars(), high + String.fromCharCode(i)); - assert.equal(tchar.getChars().length, 2); - assert.equal(tchar.getWidth(), 1); - assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), ''); - term.reset(); - } - }); - it('2 characters at last cell', async () => { - const high = String.fromCharCode(0xD800); - const cell = new CellData(); - for (let i = 0xDC00; i <= 0xDCFF; ++i) { - term.buffer.x = term.cols - 1; - await term.writeP(high + String.fromCharCode(i)); - assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars(), high + String.fromCharCode(i)); - assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars().length, 2); - assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), ''); - term.reset(); - } - }); - it('2 characters per cell over line end with autowrap', async function (): Promise { - this.timeout(10000); - const high = String.fromCharCode(0xD800); - const cell = new CellData(); - for (let i = 0xDC00; i <= 0xDCFF; ++i) { - term.buffer.x = term.cols - 1; - - await term.writeP('a' + high + String.fromCharCode(i)); - assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), 'a'); - assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), high + String.fromCharCode(i)); - assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars().length, 2); - assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), ''); - term.reset(); - } - }); - it('2 characters per cell over line end without autowrap', async function (): Promise { - this.timeout(10000); - const high = String.fromCharCode(0xD800); - const cell = new CellData(); - for (let i = 0xDC00; i <= 0xDCFF; ++i) { - term.buffer.x = term.cols - 1; - await term.writeP('\x1b[?7l'); // Disable wraparound mode - const width = wcwidth((0xD800 - 0xD800) * 0x400 + i - 0xDC00 + 0x10000); - if (width !== 1) { - continue; + for (let i = 0xDC00; i <= 0xDCF0; i += 0x10) { + const range = `0x${i.toString(16).toUpperCase()}-0x${(i + 0xF).toString(16).toUpperCase()}`; + it(`${range}: 2 characters per cell`, async function (): Promise { + const high = String.fromCharCode(0xD800); + const cell = new CellData(); + for (let j = i; j <= i + 0xF; j++) { + await term.writeP(high + String.fromCharCode(j)); + const tchar = term.buffer.lines.get(0)!.loadCell(0, cell); + assert.equal(tchar.getChars(), high + String.fromCharCode(j)); + assert.equal(tchar.getChars().length, 2); + assert.equal(tchar.getWidth(), 1); + assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), ''); + term.reset(); } - await term.writeP('a' + high + String.fromCharCode(i)); - // auto wraparound mode should cut off the rest of the line - assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), high + String.fromCharCode(i)); - assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars().length, 2); - assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), ''); - term.reset(); - } - }); - it('splitted surrogates', async function (): Promise { - this.timeout(10000); - const high = String.fromCharCode(0xD800); - const cell = new CellData(); - for (let i = 0xDC00; i <= 0xDCFF; ++i) { - await term.writeP(high + String.fromCharCode(i)); - const tchar = term.buffer.lines.get(0)!.loadCell(0, cell); - assert.equal(tchar.getChars(), high + String.fromCharCode(i)); - assert.equal(tchar.getChars().length, 2); - assert.equal(tchar.getWidth(), 1); - assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), ''); - term.reset(); - } - }); + }); + it(`${range}: 2 characters at last cell`, async () => { + const high = String.fromCharCode(0xD800); + const cell = new CellData(); + term.buffer.x = term.cols - 1; + for (let j = i; j <= i + 0xF; j++) { + await term.writeP(high + String.fromCharCode(j)); + assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars(), high + String.fromCharCode(j)); + assert.equal(term.buffer.lines.get(0)!.loadCell(term.buffer.x - 1, cell).getChars().length, 2); + assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), ''); + term.reset(); + } + }); + it(`${range}: 2 characters per cell over line end with autowrap`, async function (): Promise { + const high = String.fromCharCode(0xD800); + const cell = new CellData(); + for (let j = i; j <= i + 0xF; j++) { + term.buffer.x = term.cols - 1; + await term.writeP('a' + high + String.fromCharCode(j)); + assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), 'a'); + assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars(), high + String.fromCharCode(j)); + assert.equal(term.buffer.lines.get(1)!.loadCell(0, cell).getChars().length, 2); + assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), ''); + term.reset(); + } + }); + it(`${range}: 2 characters per cell over line end without autowrap`, async function (): Promise { + const high = String.fromCharCode(0xD800); + const cell = new CellData(); + for (let j = i; j <= i + 0xF; j++) { + term.buffer.x = term.cols - 1; + await term.writeP('\x1b[?7l'); // Disable wraparound mode + const width = wcwidth((0xD800 - 0xD800) * 0x400 + j - 0xDC00 + 0x10000); + if (width !== 1) { + continue; + } + await term.writeP('a' + high + String.fromCharCode(j)); + // auto wraparound mode should cut off the rest of the line + assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars(), high + String.fromCharCode(j)); + assert.equal(term.buffer.lines.get(0)!.loadCell(term.cols - 1, cell).getChars().length, 2); + assert.equal(term.buffer.lines.get(1)!.loadCell(1, cell).getChars(), ''); + term.reset(); + } + }); + it(`${range}: splitted surrogates`, async function (): Promise { + const high = String.fromCharCode(0xD800); + const cell = new CellData(); + for (let j = i; j <= i + 0xF; j++) { + await term.writeP(high + String.fromCharCode(j)); + const tchar = term.buffer.lines.get(0)!.loadCell(0, cell); + assert.equal(tchar.getChars(), high + String.fromCharCode(j)); + assert.equal(tchar.getChars().length, 2); + assert.equal(tchar.getWidth(), 1); + assert.equal(term.buffer.lines.get(0)!.loadCell(1, cell).getChars(), ''); + term.reset(); + } + }); + } }); describe('unicode - combining characters', () => { diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index 5aed701ad..4afca04c4 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -94,6 +94,20 @@ export class Terminal extends CoreTerminal implements ITerminal { */ private _keyDownHandled: boolean = false; + /** + * Records whether the keypress event has already been handled and triggered a data event, if so + * the input event should not trigger a data event but should still print to the textarea so + * screen readers will announce it. + */ + private _keyPressHandled: boolean = false; + + /** + * Records whether there has been a keydown event for a dead key without a corresponding keydown + * event for the composed/alternative character. If we cancel the keydown event for the dead key, + * no events will be emitted for the final character. + */ + private _unprocessedDeadKey: boolean = false; + public linkifier: ILinkifier; public linkifier2: ILinkifier2; public viewport: IViewport | undefined; @@ -113,8 +127,8 @@ export class Terminal extends CoreTerminal implements ITerminal { public get onSelectionChange(): IEvent { return this._onSelectionChange.event; } private _onTitleChange = new EventEmitter(); public get onTitleChange(): IEvent { return this._onTitleChange.event; } - private _onBell = new EventEmitter(); - public get onBell (): IEvent { return this._onBell.event; } + private _onBell = new EventEmitter(); + public get onBell(): IEvent { return this._onBell.event; } private _onFocus = new EventEmitter(); public get onFocus(): IEvent { return this._onFocus.event; } @@ -150,6 +164,7 @@ export class Terminal extends CoreTerminal implements ITerminal { // Setup InputHandler listeners this.register(this._inputHandler.onRequestBell(() => this.bell())); this.register(this._inputHandler.onRequestRefreshRows((start, end) => this.refresh(start, end))); + this.register(this._inputHandler.onRequestSendFocus(() => this._reportFocus())); this.register(this._inputHandler.onRequestReset(() => this.reset())); this.register(this._inputHandler.onRequestWindowsOptionsReport(type => this._reportWindowsOptions(type))); this.register(this._inputHandler.onAnsiColorChange((event) => this._changeAnsiColor(event))); @@ -224,6 +239,7 @@ export class Terminal extends CoreTerminal implements ITerminal { // The DOM renderer needs a row refresh to update the cursor styles this.refresh(this.buffer.y, this.buffer.y); break; + case 'customGlyphs': case 'drawBoldTextInBrightColors': case 'letterSpacing': case 'lineHeight': @@ -267,8 +283,8 @@ export class Terminal extends CoreTerminal implements ITerminal { * Binds the desired focus behavior on a given terminal object. */ private _onTextAreaFocus(ev: KeyboardEvent): void { - if (this._coreService.decPrivateModes.sendFocus) { - this._coreService.triggerDataEvent(C0.ESC + '[I'); + if (this.coreService.decPrivateModes.sendFocus) { + this.coreService.triggerDataEvent(C0.ESC + '[I'); } this.updateCursorStyle(ev); this.element!.classList.add('focus'); @@ -292,8 +308,8 @@ export class Terminal extends CoreTerminal implements ITerminal { // screen readers reading it out. this.textarea!.value = ''; this.refresh(this.buffer.y, this.buffer.y); - if (this._coreService.decPrivateModes.sendFocus) { - this._coreService.triggerDataEvent(C0.ESC + '[O'); + if (this.coreService.decPrivateModes.sendFocus) { + this.coreService.triggerDataEvent(C0.ESC + '[O'); } this.element!.classList.remove('focus'); this._onBlur.fire(); @@ -340,7 +356,7 @@ export class Terminal extends CoreTerminal implements ITerminal { } copyHandler(event, this._selectionService!); })); - const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this._coreService); + const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this.coreService); this.register(addDisposableDomListener(this.textarea!, 'paste', pasteHandlerWrapper)); this.register(addDisposableDomListener(this.element!, 'paste', pasteHandlerWrapper)); @@ -382,6 +398,7 @@ export class Terminal extends CoreTerminal implements ITerminal { this.register(addDisposableDomListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart())); this.register(addDisposableDomListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e))); this.register(addDisposableDomListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend())); + this.register(addDisposableDomListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true)); this.register(this.onRender(() => this._compositionHelper!.updateCompositionElements())); this.register(this.onRender(e => this._queueLinkification(e.start, e.end))); } @@ -408,7 +425,6 @@ export class Terminal extends CoreTerminal implements ITerminal { this.element.classList.add('terminal'); this.element.classList.add('xterm'); this.element.setAttribute('tabindex', '0'); - this.element.setAttribute('role', 'document'); parent.appendChild(this.element); // Performance: Use a document fragment to build the terminal @@ -526,7 +542,7 @@ export class Terminal extends CoreTerminal implements ITerminal { this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.onMouseDown(e))); // apply mouse event classes set by escape codes before terminal was attached - if (this._coreMouseService.areMouseEventsActive) { + if (this.coreMouseService.areMouseEventsActive) { this._selectionService.disable(); this.element.classList.add('enable-mouse-events'); } else { @@ -644,7 +660,7 @@ export class Terminal extends CoreTerminal implements ITerminal { return false; } - return self._coreMouseService.triggerMouseEvent({ + return self.coreMouseService.triggerMouseEvent({ col: pos.x - 33, // FIXME: why -33 here? row: pos.y - 33, button: but, @@ -699,11 +715,11 @@ export class Terminal extends CoreTerminal implements ITerminal { } } }; - this.register(this._coreMouseService.onProtocolChange(events => { + this.register(this.coreMouseService.onProtocolChange(events => { // apply global changes on events if (events) { if (this.optionsService.options.logLevel === 'debug') { - this._logService.debug('Binding to mouse events:', this._coreMouseService.explainEvents(events)); + this._logService.debug('Binding to mouse events:', this.coreMouseService.explainEvents(events)); } this.element!.classList.add('enable-mouse-events'); this._selectionService!.disable(); @@ -746,7 +762,7 @@ export class Terminal extends CoreTerminal implements ITerminal { } })); // force initial onProtocolChange so we dont miss early mouse requests - this._coreMouseService.activeProtocol = this._coreMouseService.activeProtocol; + this.coreMouseService.activeProtocol = this.coreMouseService.activeProtocol; /** * "Always on" event listeners. @@ -758,7 +774,7 @@ export class Terminal extends CoreTerminal implements ITerminal { // Don't send the mouse button to the pty if mouse events are disabled or // if the selection manager is having selection forced (ie. a modifier is // held). - if (!this._coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) { + if (!this.coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) { return; } @@ -791,12 +807,12 @@ export class Terminal extends CoreTerminal implements ITerminal { } // Construct and send sequences - const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B'); + const sequence = C0.ESC + (this.coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B'); let data = ''; for (let i = 0; i < Math.abs(amount); i++) { data += sequence; } - this._coreService.triggerDataEvent(data, true); + this.coreService.triggerDataEvent(data, true); } return; } @@ -812,13 +828,13 @@ export class Terminal extends CoreTerminal implements ITerminal { }, { passive: false })); this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => { - if (this._coreMouseService.areMouseEventsActive) return; + if (this.coreMouseService.areMouseEventsActive) return; this.viewport!.onTouchStart(ev); return this.cancel(ev); }, { passive: true })); this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => { - if (this._coreMouseService.areMouseEventsActive) return; + if (this.coreMouseService.areMouseEventsActive) return; if (!this.viewport!.onTouchMove(ev)) { return this.cancel(ev); } @@ -860,8 +876,8 @@ export class Terminal extends CoreTerminal implements ITerminal { * Display the cursor element */ private _showCursor(): void { - if (!this._coreService.isCursorInitialized) { - this._coreService.isCursorInitialized = true; + if (!this.coreService.isCursorInitialized) { + this.coreService.isCursorInitialized = true; this.refresh(this.buffer.y, this.buffer.y); } } @@ -872,7 +888,7 @@ export class Terminal extends CoreTerminal implements ITerminal { } public paste(data: string): void { - paste(data, this.textarea!, this._coreService); + paste(data, this.textarea!, this.coreService); } /** @@ -1025,7 +1041,11 @@ export class Terminal extends CoreTerminal implements ITerminal { return false; } - const result = evaluateKeyboardEvent(event, this._coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta); + if (event.key === 'Dead' || event.key === 'AltGraph') { + this._unprocessedDeadKey = true; + } + + const result = evaluateKeyboardEvent(event, this.coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta); this.updateCursorStyle(event); @@ -1052,6 +1072,11 @@ export class Terminal extends CoreTerminal implements ITerminal { return true; } + if (this._unprocessedDeadKey) { + this._unprocessedDeadKey = false; + return true; + } + // If ctrl+c or enter is being sent, clear out the textarea. This is done so that screen readers // will announce deleted characters. This will not work 100% of the time but it should cover // most scenarios. @@ -1061,7 +1086,7 @@ export class Terminal extends CoreTerminal implements ITerminal { this._onKey.fire({ key: result.key, domEvent: event }); this._showCursor(); - this._coreService.triggerDataEvent(result.key, true); + this.coreService.triggerDataEvent(result.key, true); // Cancel events when not in screen reader mode so events don't get bubbled up and handled by // other listeners. When screen reader mode is enabled, this could cause issues if the event @@ -1074,10 +1099,11 @@ export class Terminal extends CoreTerminal implements ITerminal { this._keyDownHandled = true; } - private _isThirdLevelShift(browser: IBrowser, ev: IKeyboardEvent): boolean { + private _isThirdLevelShift(browser: IBrowser, ev: KeyboardEvent): boolean { const thirdLevelKey = (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) || - (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey); + (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey) || + (browser.isWindows && ev.getModifierState('AltGraph')); if (ev.type === 'keypress') { return thirdLevelKey; @@ -1097,6 +1123,7 @@ export class Terminal extends CoreTerminal implements ITerminal { } this.updateCursorStyle(ev); + this._keyPressHandled = false; } /** @@ -1108,6 +1135,8 @@ export class Terminal extends CoreTerminal implements ITerminal { protected _keyPress(ev: KeyboardEvent): boolean { let key; + this._keyPressHandled = false; + if (this._keyDownHandled) { return false; } @@ -1138,11 +1167,37 @@ export class Terminal extends CoreTerminal implements ITerminal { this._onKey.fire({ key, domEvent: ev }); this._showCursor(); - this._coreService.triggerDataEvent(key, true); + this.coreService.triggerDataEvent(key, true); + + this._keyPressHandled = true; return true; } + /** + * Handle an input event. + * Key Resources: + * - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent + * @param ev The input event to be handled. + */ + protected _inputEvent(ev: InputEvent): boolean { + // Only support emoji IMEs when screen reader mode is disabled as the event must bubble up to + // support reading out character input which can doubling up input characters + if (ev.data && ev.inputType === 'insertText' && !this.optionsService.options.screenReaderMode) { + if (this._keyPressHandled) { + return false; + } + + const text = ev.data; + this.coreService.triggerDataEvent(text, true); + + this.cancel(ev); + return true; + } + + return false; + } + /** * Ring the bell. * Note: We could do sweet things with webaudio here @@ -1238,6 +1293,18 @@ export class Terminal extends CoreTerminal implements ITerminal { this.viewport?.syncScrollArea(); } + public clearTextureAtlas(): void { + this._renderService?.clearTextureAtlas(); + } + + private _reportFocus(): void { + if (this.element?.classList.contains('focus')) { + this.coreService.triggerDataEvent(C0.ESC + '[I'); + } else { + this.coreService.triggerDataEvent(C0.ESC + '[O'); + } + } + private _reportWindowsOptions(type: WindowsOptionsReportType): void { if (!this._renderService) { return; @@ -1247,12 +1314,12 @@ export class Terminal extends CoreTerminal implements ITerminal { case WindowsOptionsReportType.GET_WIN_SIZE_PIXELS: const canvasWidth = this._renderService.dimensions.scaledCanvasWidth.toFixed(0); const canvasHeight = this._renderService.dimensions.scaledCanvasHeight.toFixed(0); - this._coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`); + this.coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`); break; case WindowsOptionsReportType.GET_CELL_SIZE_PIXELS: const cellWidth = this._renderService.dimensions.scaledCellWidth.toFixed(0); const cellHeight = this._renderService.dimensions.scaledCellHeight.toFixed(0); - this._coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`); + this.coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`); break; } } diff --git a/src/browser/TestUtils.test.ts b/src/browser/TestUtils.test.ts index 9d5373c8a..8fdf458e6 100644 --- a/src/browser/TestUtils.test.ts +++ b/src/browser/TestUtils.test.ts @@ -13,7 +13,7 @@ import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, I import { Buffer } from 'common/buffer/Buffer'; import * as Browser from 'common/Platform'; import { Terminal } from 'browser/Terminal'; -import { IUnicodeService, IOptionsService } from 'common/services/Services'; +import { IUnicodeService, IOptionsService, ICoreService, ICoreMouseService } from 'common/services/Services'; import { IFunctionIdentifier, IParams } from 'common/parser/Types'; import { AttributeData } from 'common/buffer/AttributeData'; @@ -43,6 +43,8 @@ export class MockTerminal implements ITerminal { public onRender!: IEvent<{ start: number, end: number }>; public onResize!: IEvent<{ cols: number, rows: number }>; public markers!: IMarker[]; + public coreMouseService!: ICoreMouseService; + public coreService!: ICoreService; public optionsService!: IOptionsService; public unicodeService!: IUnicodeService; public addMarker(cursorYOffset: number): IMarker { @@ -193,6 +195,9 @@ export class MockTerminal implements ITerminal { public reset(): void { throw new Error('Method not implemented.'); } + public clearTextureAtlas(): void { + throw new Error('Method not implemented.'); + } public refresh(start: number, end: number): void { throw new Error('Method not implemented.'); } @@ -372,6 +377,9 @@ export class MockRenderService implements IRenderService { public refreshRows(start: number, end: number): void { throw new Error('Method not implemented.'); } + public clearTextureAtlas(): void { + throw new Error('Method not implemented.'); + } public resize(cols: number, rows: number): void { throw new Error('Method not implemented.'); } diff --git a/src/browser/TimeBasedDebouncer.ts b/src/browser/TimeBasedDebouncer.ts new file mode 100644 index 000000000..707e25cbb --- /dev/null +++ b/src/browser/TimeBasedDebouncer.ts @@ -0,0 +1,86 @@ +/** + * Copyright (c) 2018 The xterm.js authors. All rights reserved. + * @license MIT + */ + +const RENDER_DEBOUNCE_THRESHOLD_MS = 1000; // 1 Second + +import { IRenderDebouncer } from 'browser/Types'; + +/** + * Debounces calls to update screen readers to update at most once configurable interval of time. + */ +export class TimeBasedDebouncer implements IRenderDebouncer { + private _rowStart: number | undefined; + private _rowEnd: number | undefined; + private _rowCount: number | undefined; + + // The last moment that the Terminal was refreshed at + private _lastRefreshMs = 0; + // Whether a trailing refresh should be triggered due to a refresh request that was throttled + private _additionalRefreshRequested = false; + + private _refreshTimeoutID: number | undefined; + + constructor( + private _renderCallback: (start: number, end: number) => void, + private readonly _debounceThresholdMS = RENDER_DEBOUNCE_THRESHOLD_MS + ) { + } + + public dispose(): void { + if (this._refreshTimeoutID) { + clearTimeout(this._refreshTimeoutID); + } + } + + public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void { + this._rowCount = rowCount; + // Get the min/max row start/end for the arg values + rowStart = rowStart !== undefined ? rowStart : 0; + rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1; + // Set the properties to the updated values + this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart; + this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd; + + // Only refresh if the time since last refresh is above a threshold, otherwise wait for + // enough time to pass before refreshing again. + const refreshRequestTime: number = Date.now(); + if (refreshRequestTime - this._lastRefreshMs >= this._debounceThresholdMS) { + // Enough time has lapsed since the last refresh; refresh immediately + this._lastRefreshMs = refreshRequestTime; + this._innerRefresh(); + } else if (!this._additionalRefreshRequested) { + // This is the first additional request throttled; set up trailing refresh + const elapsed = refreshRequestTime - this._lastRefreshMs; + const waitPeriodBeforeTrailingRefresh = this._debounceThresholdMS - elapsed; + this._additionalRefreshRequested = true; + + this._refreshTimeoutID = window.setTimeout(() => { + this._lastRefreshMs = Date.now(); + this._innerRefresh(); + this._additionalRefreshRequested = false; + this._refreshTimeoutID = undefined; // No longer need to clear the timeout + }, waitPeriodBeforeTrailingRefresh); + } + } + + private _innerRefresh(): void { + // Make sure values are set + if (this._rowStart === undefined || this._rowEnd === undefined || this._rowCount === undefined) { + return; + } + + // Clamp values + const start = Math.max(this._rowStart, 0); + const end = Math.min(this._rowEnd, this._rowCount - 1); + + // Reset debouncer (this happens before render callback as the render could trigger it again) + this._rowStart = undefined; + this._rowEnd = undefined; + + // Run render callback + this._renderCallback(start, end); + } +} + diff --git a/src/browser/Types.d.ts b/src/browser/Types.d.ts index b2ff29d75..bafeff77c 100644 --- a/src/browser/Types.d.ts +++ b/src/browser/Types.d.ts @@ -15,7 +15,6 @@ export interface ITerminal extends IPublicTerminal, ICoreTerminal { screenElement: HTMLElement | undefined; browser: IBrowser; buffer: IBuffer; - buffers: IBufferSet; viewport: IViewport | undefined; // TODO: We should remove options once components adopt optionsService options: ITerminalOptions; @@ -80,6 +79,7 @@ export interface IPublicTerminal extends IDisposable { write(data: string | Uint8Array, callback?: () => void): void; paste(data: string): void; refresh(start: number, end: number): void; + clearTextureAtlas(): void; reset(): void; } @@ -310,3 +310,7 @@ export interface ICharacterJoiner { id: number; handler: CharacterJoinerHandler; } + +export interface IRenderDebouncer extends IDisposable { + refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void; +} diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index 162ed174c..3c9bea4c3 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -8,6 +8,8 @@ import { addDisposableDomListener } from 'browser/Lifecycle'; import { IColorSet, IViewport } from 'browser/Types'; import { ICharSizeService, IRenderService } from 'browser/services/Services'; import { IBufferService, IOptionsService } from 'common/services/Services'; +import { IBuffer } from 'common/buffer/Types'; +import { IRenderDimensions } from 'browser/renderer/Types'; const FALLBACK_SCROLL_BAR_WIDTH = 15; @@ -18,11 +20,15 @@ const FALLBACK_SCROLL_BAR_WIDTH = 15; export class Viewport extends Disposable implements IViewport { public scrollBarWidth: number = 0; private _currentRowHeight: number = 0; + private _currentScaledCellHeight: number = 0; private _lastRecordedBufferLength: number = 0; private _lastRecordedViewportHeight: number = 0; private _lastRecordedBufferHeight: number = 0; private _lastTouchY: number = 0; private _lastScrollTop: number = 0; + private _lastHadScrollBar: boolean = false; + private _activeBuffer: IBuffer; + private _renderDimensions: IRenderDimensions; // Stores a partial line amount when scrolling, this is used to keep track of how much of a line // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a @@ -47,8 +53,15 @@ export class Viewport extends Disposable implements IViewport { // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that case, // therefore we account for a standard amount to make it visible this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; + this._lastHadScrollBar = true; this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._onScroll.bind(this))); + // Track properties used in performance critical code manually to avoid using slow getters + this._activeBuffer = this._bufferService.buffer; + this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer)); + this._renderDimensions = this._renderService.dimensions; + this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e)); + // Perform this async to ensure the ICharSizeService is ready. setTimeout(() => this.syncScrollArea(), 0); } @@ -77,6 +90,7 @@ export class Viewport extends Disposable implements IViewport { private _innerRefresh(): void { if (this._charSizeService.height > 0) { this._currentRowHeight = this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio; + this._currentScaledCellHeight = this._renderService.dimensions.scaledCellHeight; this._lastRecordedViewportHeight = this._viewportElement.offsetHeight; const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderService.dimensions.canvasHeight); if (this._lastRecordedBufferHeight !== newBufferHeight) { @@ -94,8 +108,18 @@ export class Viewport extends Disposable implements IViewport { this._viewportElement.scrollTop = scrollTop; } + // Update scroll bar width + if (this._optionsService.options.scrollback === 0) { + this.scrollBarWidth = 0; + } else { + this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH; + } + this._lastHadScrollBar = this.scrollBarWidth > 0; + + this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px'; this._refreshAnimationFrame = null; } + /** * Updates dimensions and synchronizes the scroll area if necessary. */ @@ -114,23 +138,21 @@ export class Viewport extends Disposable implements IViewport { } // If the buffer position doesn't match last scroll top - const newScrollTop = this._bufferService.buffer.ydisp * this._currentRowHeight; - if (this._lastScrollTop !== newScrollTop) { - this._refresh(immediate); - return; - } - - // If element's scroll top changed, this can happen when hiding the element - if (this._lastScrollTop !== this._viewportElement.scrollTop) { + if (this._lastScrollTop !== this._activeBuffer.ydisp * this._currentRowHeight) { this._refresh(immediate); return; } // If row height changed - if (this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) { + if (this._renderDimensions.scaledCellHeight !== this._currentScaledCellHeight) { this._refresh(immediate); return; } + + // If the scroll bar visibility changed + if (this._lastHadScrollBar !== (this._optionsService.options.scrollback > 0)) { + this._refresh(immediate); + } } /** diff --git a/src/browser/public/Terminal.ts b/src/browser/public/Terminal.ts index 90153a6ec..26cf27288 100644 --- a/src/browser/public/Terminal.ts +++ b/src/browser/public/Terminal.ts @@ -3,17 +3,15 @@ * @license MIT */ -import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBuffer as IBufferApi, IBufferNamespace as IBufferNamespaceApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi, IParser, IFunctionIdentifier, ILinkProvider, IUnicodeHandling, IUnicodeVersionProvider, FontWeight } from 'xterm'; +import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBufferNamespace as IBufferNamespaceApi, IParser, ILinkProvider, IUnicodeHandling, FontWeight, IModes } from 'xterm'; import { ITerminal } from 'browser/Types'; -import { IBufferLine, ICellData } from 'common/Types'; -import { IBuffer, IBufferSet } from 'common/buffer/Types'; -import { CellData } from 'common/buffer/CellData'; -import { Terminal as TerminalCore } from '../Terminal'; -import * as Strings from '../LocalizableStrings'; -import { IEvent, EventEmitter } from 'common/EventEmitter'; -import { AddonManager } from './AddonManager'; -import { IParams } from 'common/parser/Types'; -import { BufferSet } from 'common/buffer/BufferSet'; +import { Terminal as TerminalCore } from 'browser/Terminal'; +import * as Strings from 'browser/LocalizableStrings'; +import { IEvent } from 'common/EventEmitter'; +import { ParserApi } from 'common/public/ParserApi'; +import { UnicodeApi } from 'common/public/UnicodeApi'; +import { AddonManager } from 'common/public/AddonManager'; +import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi'; export class Terminal implements ITerminalApi { private _core: ITerminal; @@ -32,17 +30,17 @@ export class Terminal implements ITerminalApi { } } - public get onCursorMove(): IEvent { return this._core.onCursorMove; } - public get onLineFeed(): IEvent { return this._core.onLineFeed; } - public get onSelectionChange(): IEvent { return this._core.onSelectionChange; } - public get onData(): IEvent { return this._core.onData; } - public get onBinary(): IEvent { return this._core.onBinary; } - public get onTitleChange(): IEvent { return this._core.onTitleChange; } public get onBell(): IEvent { return this._core.onBell; } - public get onScroll(): IEvent { return this._core.onScroll; } + public get onBinary(): IEvent { return this._core.onBinary; } + public get onCursorMove(): IEvent { return this._core.onCursorMove; } + public get onData(): IEvent { return this._core.onData; } public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; } + public get onLineFeed(): IEvent { return this._core.onLineFeed; } public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; } public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; } + public get onScroll(): IEvent { return this._core.onScroll; } + public get onSelectionChange(): IEvent { return this._core.onSelectionChange; } + public get onTitleChange(): IEvent { return this._core.onTitleChange; } public get element(): HTMLElement | undefined { return this._core.element; } public get parser(): IParser { @@ -70,6 +68,27 @@ export class Terminal implements ITerminalApi { this._checkProposedApi(); return this._core.markers; } + public get modes(): IModes { + const m = this._core.coreService.decPrivateModes; + let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none'; + switch (this._core.coreMouseService.activeProtocol) { + case 'X10': mouseTrackingMode = 'x10'; break; + case 'VT200': mouseTrackingMode = 'vt200'; break; + case 'DRAG': mouseTrackingMode = 'drag'; break; + case 'ANY': mouseTrackingMode = 'any'; break; + } + return { + applicationCursorKeysMode: m.applicationCursorKeys, + applicationKeypadMode: m.applicationKeypad, + bracketedPasteMode: m.bracketedPasteMode, + insertMode: this._core.coreService.modes.insertMode, + mouseTrackingMode: mouseTrackingMode, + originMode: m.origin, + reverseWraparoundMode: m.reverseWraparound, + sendFocusMode: m.sendFocus, + wraparoundMode: m.wraparound + }; + } public blur(): void { this._core.blur(); } @@ -203,6 +222,9 @@ export class Terminal implements ITerminalApi { public reset(): void { this._core.reset(); } + public clearTextureAtlas(): void { + this._core.clearTextureAtlas(); + } public loadAddon(addon: ITerminalAddon): void { return this._addonManager.loadAddon(this, addon); } @@ -218,123 +240,3 @@ export class Terminal implements ITerminalApi { } } } - -class BufferApiView implements IBufferApi { - constructor( - private _buffer: IBuffer, - public readonly type: 'normal' | 'alternate' - ) { } - - public init(buffer: IBuffer): BufferApiView { - this._buffer = buffer; - return this; - } - - public get cursorY(): number { return this._buffer.y; } - public get cursorX(): number { return this._buffer.x; } - public get viewportY(): number { return this._buffer.ydisp; } - public get baseY(): number { return this._buffer.ybase; } - public get length(): number { return this._buffer.lines.length; } - public getLine(y: number): IBufferLineApi | undefined { - const line = this._buffer.lines.get(y); - if (!line) { - return undefined; - } - return new BufferLineApiView(line); - } - public getNullCell(): IBufferCellApi { return new CellData(); } -} - -class BufferNamespaceApi implements IBufferNamespaceApi { - private _normal: BufferApiView; - private _alternate: BufferApiView; - private _onBufferChange = new EventEmitter(); - public get onBufferChange(): IEvent { return this._onBufferChange.event; } - - constructor(private _core: ITerminal) { - this._normal = new BufferApiView(this._core.buffers.normal, 'normal'); - this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate'); - this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active)); - } - public get active(): IBufferApi { - if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; } - if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; } - throw new Error('Active buffer is neither normal nor alternate'); - } - public get normal(): IBufferApi { - return this._normal.init(this._core.buffers.normal); - } - public get alternate(): IBufferApi { - return this._alternate.init(this._core.buffers.alt); - } -} - -class BufferLineApiView implements IBufferLineApi { - constructor(private _line: IBufferLine) { } - - public get isWrapped(): boolean { return this._line.isWrapped; } - public get length(): number { return this._line.length; } - public getCell(x: number, cell?: IBufferCellApi): IBufferCellApi | undefined { - if (x < 0 || x >= this._line.length) { - return undefined; - } - - if (cell) { - this._line.loadCell(x, cell as ICellData); - return cell; - } - return this._line.loadCell(x, new CellData()); - } - public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string { - return this._line.translateToString(trimRight, startColumn, endColumn); - } -} - -class ParserApi implements IParser { - constructor(private _core: ITerminal) { } - - public registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise): IDisposable { - return this._core.registerCsiHandler(id, (params: IParams) => callback(params.toArray())); - } - public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise): IDisposable { - return this.registerCsiHandler(id, callback); - } - public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise): IDisposable { - return this._core.registerDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray())); - } - public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise): IDisposable { - return this.registerDcsHandler(id, callback); - } - public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise): IDisposable { - return this._core.registerEscHandler(id, handler); - } - public addEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise): IDisposable { - return this.registerEscHandler(id, handler); - } - public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise): IDisposable { - return this._core.registerOscHandler(ident, callback); - } - public addOscHandler(ident: number, callback: (data: string) => boolean | Promise): IDisposable { - return this.registerOscHandler(ident, callback); - } -} - -class UnicodeApi implements IUnicodeHandling { - constructor(private _core: ITerminal) { } - - public register(provider: IUnicodeVersionProvider): void { - this._core.unicodeService.register(provider); - } - - public get versions(): string[] { - return this._core.unicodeService.versions; - } - - public get activeVersion(): string { - return this._core.unicodeService.activeVersion; - } - - public set activeVersion(version: string) { - this._core.unicodeService.activeVersion = version; - } -} diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index ef869ef3f..68f83a75f 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -17,6 +17,7 @@ import { IBufferService, IOptionsService } from 'common/services/Services'; import { throwIfFalsy } from 'browser/renderer/RendererUtils'; import { channels, color, rgba } from 'browser/Color'; import { removeElementFromParent } from 'browser/Dom'; +import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs'; export abstract class BaseRenderLayer implements IRenderLayer { private _canvas: HTMLCanvasElement; @@ -137,6 +138,10 @@ export abstract class BaseRenderLayer implements IRenderLayer { public abstract reset(): void; + public clearTextureAtlas(): void { + this._charAtlas?.clear(); + } + /** * Fills 1+ cells completely. This uses the existing fillStyle on the context. * @param x The column to start at. @@ -152,6 +157,21 @@ export abstract class BaseRenderLayer implements IRenderLayer { height * this._scaledCellHeight); } + /** + * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the + * existing fillStyle on the context. + * @param x The column to fill. + * @param y The row to fill. + */ + protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void { + const cellOffset = Math.ceil(this._scaledCellHeight * 0.5); + this._ctx.fillRect( + x * this._scaledCellWidth, + (y + 1) * this._scaledCellHeight - cellOffset - window.devicePixelRatio, + width * this._scaledCellWidth, + window.devicePixelRatio); + } + /** * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the * existing fillStyle on the context. @@ -244,10 +264,20 @@ export abstract class BaseRenderLayer implements IRenderLayer { this._ctx.font = this._getFont(false, false); this._ctx.textBaseline = 'ideographic'; this._clipRow(y); - this._ctx.fillText( - cell.getChars(), - x * this._scaledCellWidth + this._scaledCharLeft, - y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight); + + // Draw custom characters if applicable + let drawSuccess = false; + if (this._optionsService.options.customGlyphs !== false) { + drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight); + } + + // Draw the character + if (!drawSuccess) { + this._ctx.fillText( + cell.getChars(), + x * this._scaledCellWidth + this._scaledCharLeft, + y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight); + } } /** @@ -358,14 +388,25 @@ export abstract class BaseRenderLayer implements IRenderLayer { if (cell.isDim()) { this._ctx.globalAlpha = DIM_OPACITY; } + + // Draw custom characters if applicable + let drawSuccess = false; + if (this._optionsService.options.customGlyphs !== false) { + drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight); + } + // Draw the character - this._ctx.fillText( - cell.getChars(), - x * this._scaledCellWidth + this._scaledCharLeft, - y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight); + if (!drawSuccess) { + this._ctx.fillText( + cell.getChars(), + x * this._scaledCellWidth + this._scaledCharLeft, + y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight); + } + this._ctx.restore(); } + /** * Clips a row to ensure no pixels will be drawn outside the cells in the row. * @param y The row to clip. diff --git a/src/browser/renderer/CursorRenderLayer.ts b/src/browser/renderer/CursorRenderLayer.ts index b30a09ddd..c267f476c 100644 --- a/src/browser/renderer/CursorRenderLayer.ts +++ b/src/browser/renderer/CursorRenderLayer.ts @@ -57,6 +57,14 @@ export class CursorRenderLayer extends BaseRenderLayer { }; } + public dispose(): void { + if (this._cursorBlinkStateManager) { + this._cursorBlinkStateManager.dispose(); + this._cursorBlinkStateManager = undefined; + } + super.dispose(); + } + public resize(dim: IRenderDimensions): void { super.resize(dim); // Resizing the canvas discards the contents of the canvas so clear state @@ -186,7 +194,12 @@ export class CursorRenderLayer extends BaseRenderLayer { private _clearCursor(): void { if (this._state) { - this._clearCells(this._state.x, this._state.y, this._state.width, 1); + // Avoid potential rounding errors when device pixel ratio is less than 1 + if (window.devicePixelRatio < 1) { + this._clearAll(); + } else { + this._clearCells(this._state.x, this._state.y, this._state.width, 1); + } this._state = { x: 0, y: 0, diff --git a/src/browser/renderer/CustomGlyphs.ts b/src/browser/renderer/CustomGlyphs.ts new file mode 100644 index 000000000..775627900 --- /dev/null +++ b/src/browser/renderer/CustomGlyphs.ts @@ -0,0 +1,563 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { throwIfFalsy } from 'browser/renderer/RendererUtils'; + +interface IBlockVector { + x: number; + y: number; + w: number; + h: number; +} + +export const blockElementDefinitions: { [index: string]: IBlockVector[] | undefined } = { + // Block elements (0x2580-0x2590) + '▀': [{ x: 0, y: 0, w: 8, h: 4 }], // UPPER HALF BLOCK + '▁': [{ x: 0, y: 7, w: 8, h: 1 }], // LOWER ONE EIGHTH BLOCK + '▂': [{ x: 0, y: 6, w: 8, h: 2 }], // LOWER ONE QUARTER BLOCK + '▃': [{ x: 0, y: 5, w: 8, h: 3 }], // LOWER THREE EIGHTHS BLOCK + '▄': [{ x: 0, y: 4, w: 8, h: 4 }], // LOWER HALF BLOCK + '▅': [{ x: 0, y: 3, w: 8, h: 5 }], // LOWER FIVE EIGHTHS BLOCK + '▆': [{ x: 0, y: 2, w: 8, h: 6 }], // LOWER THREE QUARTERS BLOCK + '▇': [{ x: 0, y: 1, w: 8, h: 7 }], // LOWER SEVEN EIGHTHS BLOCK + '█': [{ x: 0, y: 0, w: 8, h: 8 }], // FULL BLOCK + '▉': [{ x: 0, y: 0, w: 7, h: 8 }], // LEFT SEVEN EIGHTHS BLOCK + '▊': [{ x: 0, y: 0, w: 6, h: 8 }], // LEFT THREE QUARTERS BLOCK + '▋': [{ x: 0, y: 0, w: 5, h: 8 }], // LEFT FIVE EIGHTHS BLOCK + '▌': [{ x: 0, y: 0, w: 4, h: 8 }], // LEFT HALF BLOCK + '▍': [{ x: 0, y: 0, w: 3, h: 8 }], // LEFT THREE EIGHTHS BLOCK + '▎': [{ x: 0, y: 0, w: 2, h: 8 }], // LEFT ONE QUARTER BLOCK + '▏': [{ x: 0, y: 0, w: 1, h: 8 }], // LEFT ONE EIGHTH BLOCK + '▐': [{ x: 4, y: 0, w: 4, h: 8 }], // RIGHT HALF BLOCK + + // Block elements (0x2594-0x2595) + '▔': [{ x: 0, y: 0, w: 9, h: 1 }], // UPPER ONE EIGHTH BLOCK + '▕': [{ x: 7, y: 0, w: 1, h: 8 }], // RIGHT ONE EIGHTH BLOCK + + // Terminal graphic characters (0x2596-0x259F) + '▖': [{ x: 0, y: 4, w: 4, h: 4 }], // QUADRANT LOWER LEFT + '▗': [{ x: 4, y: 4, w: 4, h: 4 }], // QUADRANT LOWER RIGHT + '▘': [{ x: 0, y: 0, w: 4, h: 4 }], // QUADRANT UPPER LEFT + '▙': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER LEFT AND LOWER LEFT AND LOWER RIGHT + '▚': [{ x: 0, y: 0, w: 4, h: 4 }, { x: 4, y: 4, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND LOWER RIGHT + '▛': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER LEFT + '▜': [{ x: 0, y: 0, w: 8, h: 4 }, { x: 4, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER RIGHT + '▝': [{ x: 4, y: 0, w: 4, h: 4 }], // QUADRANT UPPER RIGHT + '▞': [{ x: 4, y: 0, w: 4, h: 4 }, { x: 0, y: 4, w: 4, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT + '▟': [{ x: 4, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT AND LOWER RIGHT + + // VERTICAL ONE EIGHTH BLOCK-2 through VERTICAL ONE EIGHTH BLOCK-7 + '\u{1FB70}': [{ x: 1, y: 0, w: 1, h: 8 }], + '\u{1FB71}': [{ x: 2, y: 0, w: 1, h: 8 }], + '\u{1FB72}': [{ x: 3, y: 0, w: 1, h: 8 }], + '\u{1FB73}': [{ x: 4, y: 0, w: 1, h: 8 }], + '\u{1FB74}': [{ x: 5, y: 0, w: 1, h: 8 }], + '\u{1FB75}': [{ x: 6, y: 0, w: 1, h: 8 }], + + // HORIZONTAL ONE EIGHTH BLOCK-2 through HORIZONTAL ONE EIGHTH BLOCK-7 + '\u{1FB76}': [{ x: 0, y: 1, w: 8, h: 1 }], + '\u{1FB77}': [{ x: 0, y: 2, w: 8, h: 1 }], + '\u{1FB78}': [{ x: 0, y: 3, w: 8, h: 1 }], + '\u{1FB79}': [{ x: 0, y: 4, w: 8, h: 1 }], + '\u{1FB7A}': [{ x: 0, y: 5, w: 8, h: 1 }], + '\u{1FB7B}': [{ x: 0, y: 6, w: 8, h: 1 }], + + // LEFT AND LOWER ONE EIGHTH BLOCK + '\u{1FB7C}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }], + // LEFT AND UPPER ONE EIGHTH BLOCK + '\u{1FB7D}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }], + // RIGHT AND UPPER ONE EIGHTH BLOCK + '\u{1FB7E}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }], + // RIGHT AND LOWER ONE EIGHTH BLOCK + '\u{1FB7F}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }], + // UPPER AND LOWER ONE EIGHTH BLOCK + '\u{1FB80}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }], + // HORIZONTAL ONE EIGHTH BLOCK-1358 + '\u{1FB81}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 2, w: 8, h: 1 }, { x: 0, y: 4, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }], + + // UPPER ONE QUARTER BLOCK + '\u{1FB82}': [{ x: 0, y: 0, w: 8, h: 2 }], + // UPPER THREE EIGHTHS BLOCK + '\u{1FB83}': [{ x: 0, y: 0, w: 8, h: 3 }], + // UPPER FIVE EIGHTHS BLOCK + '\u{1FB84}': [{ x: 0, y: 0, w: 8, h: 5 }], + // UPPER THREE QUARTERS BLOCK + '\u{1FB85}': [{ x: 0, y: 0, w: 8, h: 6 }], + // UPPER SEVEN EIGHTHS BLOCK + '\u{1FB86}': [{ x: 0, y: 0, w: 8, h: 7 }], + + // RIGHT ONE QUARTER BLOCK + '\u{1FB87}': [{ x: 6, y: 0, w: 2, h: 8 }], + // RIGHT THREE EIGHTHS B0OCK + '\u{1FB88}': [{ x: 5, y: 0, w: 3, h: 8 }], + // RIGHT FIVE EIGHTHS BL0CK + '\u{1FB89}': [{ x: 3, y: 0, w: 5, h: 8 }], + // RIGHT THREE QUARTERS 0LOCK + '\u{1FB8A}': [{ x: 2, y: 0, w: 6, h: 8 }], + // RIGHT SEVEN EIGHTHS B0OCK + '\u{1FB8B}': [{ x: 1, y: 0, w: 7, h: 8 }], + + // CHECKER BOARD FILL + '\u{1FB95}': [ + { x: 0, y: 0, w: 2, h: 2 }, { x: 4, y: 0, w: 2, h: 2 }, + { x: 2, y: 2, w: 2, h: 2 }, { x: 6, y: 2, w: 2, h: 2 }, + { x: 0, y: 4, w: 2, h: 2 }, { x: 4, y: 4, w: 2, h: 2 }, + { x: 2, y: 6, w: 2, h: 2 }, { x: 6, y: 6, w: 2, h: 2 } + ], + // INVERSE CHECKER BOARD FILL + '\u{1FB96}': [ + { x: 2, y: 0, w: 2, h: 2 }, { x: 6, y: 0, w: 2, h: 2 }, + { x: 0, y: 2, w: 2, h: 2 }, { x: 4, y: 2, w: 2, h: 2 }, + { x: 2, y: 4, w: 2, h: 2 }, { x: 6, y: 4, w: 2, h: 2 }, + { x: 0, y: 6, w: 2, h: 2 }, { x: 4, y: 6, w: 2, h: 2 } + ], + // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block) + '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }] +}; + +type PatternDefinition = number[][]; + +/** + * Defines the repeating pattern used by special characters, the pattern is made up of a 2d array of + * pixel values to be filled (1) or not filled (0). + */ +const patternCharacterDefinitions: { [key: string]: PatternDefinition | undefined } = { + // Shade characters (0x2591-0x2593) + '░': [ // LIGHT SHADE (25%) + [1, 0, 0, 0], + [0, 0, 0, 0], + [0, 0, 1, 0], + [0, 0, 0, 0] + ], + '▒': [ // MEDIUM SHADE (50%) + [1, 0], + [0, 0], + [0, 1], + [0, 0] + ], + '▓': [ // DARK SHADE (75%) + [0, 1], + [1, 1], + [1, 0], + [1, 1] + ] +}; + +const enum Shapes { + /** │ */ TOP_TO_BOTTOM = 'M.5,0 L.5,1', + /** ─ */ LEFT_TO_RIGHT = 'M0,.5 L1,.5', + + /** └ */ TOP_TO_RIGHT = 'M.5,0 L.5,.5 L1,.5', + /** ┘ */ TOP_TO_LEFT = 'M.5,0 L.5,.5 L0,.5', + /** ┐ */ LEFT_TO_BOTTOM = 'M0,.5 L.5,.5 L.5,1', + /** ┌ */ RIGHT_TO_BOTTOM = 'M0.5,1 L.5,.5 L1,.5', + + /** ╵ */ MIDDLE_TO_TOP = 'M.5,.5 L.5,0', + /** ╴ */ MIDDLE_TO_LEFT = 'M.5,.5 L0,.5', + /** ╶ */ MIDDLE_TO_RIGHT = 'M.5,.5 L1,.5', + /** ╷ */ MIDDLE_TO_BOTTOM = 'M.5,.5 L.5,1', + + /** ┴ */ T_TOP = 'M0,.5 L1,.5 M.5,.5 L.5,0', + /** ┤ */ T_LEFT = 'M.5,0 L.5,1 M.5,.5 L0,.5', + /** ├ */ T_RIGHT = 'M.5,0 L.5,1 M.5,.5 L1,.5', + /** ┬ */ T_BOTTOM = 'M0,.5 L1,.5 M.5,.5 L.5,1', + + /** ┼ */ CROSS = 'M0,.5 L1,.5 M.5,0 L.5,1', + + /** ╌ */ TWO_DASHES_HORIZONTAL = 'M.1,.5 L.4,.5 M.6,.5 L.9,.5', // .2 empty, .3 filled + /** ┄ */ THREE_DASHES_HORIZONTAL = 'M.0667,.5 L.2667,.5 M.4,.5 L.6,.5 M.7333,.5 L.9333,.5', // .1333 empty, .2 filled + /** ┉ */ FOUR_DASHES_HORIZONTAL = 'M.05,.5 L.2,.5 M.3,.5 L.45,.5 M.55,.5 L.7,.5 M.8,.5 L.95,.5', // .1 empty, .15 filled + /** ╎ */ TWO_DASHES_VERTICAL = 'M.5,.1 L.5,.4 M.5,.6 L.5,.9', + /** ┆ */ THREE_DASHES_VERTICAL = 'M.5,.0667 L.5,.2667 M.5,.4 L.5,.6 M.5,.7333 L.5,.9333', + /** ┊ */ FOUR_DASHES_VERTICAL = 'M.5,.05 L.5,.2 M.5,.3 L.5,.45 L.5,.55 M.5,.7 L.5,.95', +} + +const enum Style { + NORMAL = 1, + BOLD = 3 +} + +/** + * This contains the definitions of all box drawing characters in the format of SVG paths (ie. the + * svg d attribute). + */ +export const boxDrawingDefinitions: { [character: string]: { [fontWeight: number]: string | ((xp: number, yp: number) => string) } | undefined } = { + // Uniform normal and bold + '─': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT }, + '━': { [Style.BOLD]: Shapes.LEFT_TO_RIGHT }, + '│': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM }, + '┃': { [Style.BOLD]: Shapes.TOP_TO_BOTTOM }, + '┌': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM }, + '┏': { [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM }, + '┐': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM }, + '┓': { [Style.BOLD]: Shapes.LEFT_TO_BOTTOM }, + '└': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT }, + '┗': { [Style.BOLD]: Shapes.TOP_TO_RIGHT }, + '┘': { [Style.NORMAL]: Shapes.TOP_TO_LEFT }, + '┛': { [Style.BOLD]: Shapes.TOP_TO_LEFT }, + '├': { [Style.NORMAL]: Shapes.T_RIGHT }, + '┣': { [Style.BOLD]: Shapes.T_RIGHT }, + '┤': { [Style.NORMAL]: Shapes.T_LEFT }, + '┫': { [Style.BOLD]: Shapes.T_LEFT }, + '┬': { [Style.NORMAL]: Shapes.T_BOTTOM }, + '┳': { [Style.BOLD]: Shapes.T_BOTTOM }, + '┴': { [Style.NORMAL]: Shapes.T_TOP }, + '┻': { [Style.BOLD]: Shapes.T_TOP }, + '┼': { [Style.NORMAL]: Shapes.CROSS }, + '╋': { [Style.BOLD]: Shapes.CROSS }, + '╴': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT }, + '╸': { [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '╵': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP }, + '╹': { [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '╶': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT }, + '╺': { [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '╷': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM }, + '╻': { [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + + // Double border + '═': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` }, + '║': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` }, + '╒': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` }, + '╓': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},1 L${.5 - xp},.5 L1,.5 M${.5 + xp},.5 L${.5 + xp},1` }, + '╔': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` }, + '╕': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L.5,${.5 - yp} L.5,1 M0,${.5 + yp} L.5,${.5 + yp}` }, + '╖': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},1 L${.5 + xp},.5 L0,.5 M${.5 - xp},.5 L${.5 - xp},1` }, + '╗': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},1` }, + '╘': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 + yp} L1,${.5 + yp} M.5,${.5 - yp} L1,${.5 - yp}` }, + '╙': { [Style.NORMAL]: (xp, yp) => `M1,.5 L${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` }, + '╚': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0 M1,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},0` }, + '╛': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L.5,${.5 + yp} L.5,0 M0,${.5 - yp} L.5,${.5 - yp}` }, + '╜': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 + xp},.5 L${.5 + xp},0 M${.5 - xp},.5 L${.5 - xp},0` }, + '╝': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M0,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},0` }, + '╞': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` }, + '╟': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1 M${.5 + xp},.5 L1,.5` }, + '╠': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` }, + '╡': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L.5,${.5 - yp} M0,${.5 + yp} L.5,${.5 + yp}` }, + '╢': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 - xp},.5 M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` }, + '╣': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},0 L${.5 + xp},1 M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0` }, + '╤': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp} M.5,${.5 + yp} L.5,1` }, + '╥': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},1 M${.5 + xp},.5 L${.5 + xp},1` }, + '╦': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` }, + '╧': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - yp} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` }, + '╨': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` }, + '╩': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L1,${.5 + yp} M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` }, + '╪': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` }, + '╫': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` }, + '╬': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` }, + + // Diagonal + '╱': { [Style.NORMAL]: 'M1,0 L0,1' }, + '╲': { [Style.NORMAL]: 'M0,0 L1,1' }, + '╳': { [Style.NORMAL]: 'M1,0 L0,1 M0,0 L1,1' }, + + // Mixed weight + '╼': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '╽': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '╾': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '╿': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┍': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┎': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '┑': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┒': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '┕': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┖': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┙': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┚': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┝': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┞': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┟': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '┠': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.TOP_TO_BOTTOM }, + '┡': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.TOP_TO_RIGHT }, + '┢': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM }, + '┥': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┦': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┧': { [Style.NORMAL]: Shapes.TOP_TO_LEFT, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '┨': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.TOP_TO_BOTTOM }, + '┩': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.TOP_TO_LEFT }, + '┪': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.LEFT_TO_BOTTOM }, + '┭': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┮': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┯': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: Shapes.LEFT_TO_RIGHT }, + '┰': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '┱': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.LEFT_TO_BOTTOM }, + '┲': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM }, + '┵': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┶': { [Style.NORMAL]: Shapes.TOP_TO_LEFT, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┷': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: Shapes.LEFT_TO_RIGHT }, + '┸': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '┹': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: Shapes.TOP_TO_LEFT }, + '┺': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: Shapes.TOP_TO_RIGHT }, + '┽': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}`, [Style.BOLD]: Shapes.MIDDLE_TO_LEFT }, + '┾': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}`, [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT }, + '┿': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM, [Style.BOLD]: Shapes.LEFT_TO_RIGHT }, + '╀': { [Style.NORMAL]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}`, [Style.BOLD]: Shapes.MIDDLE_TO_TOP }, + '╁': { [Style.NORMAL]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}`, [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM }, + '╂': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT, [Style.BOLD]: Shapes.TOP_TO_BOTTOM }, + '╃': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM, [Style.BOLD]: Shapes.TOP_TO_LEFT }, + '╄': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM, [Style.BOLD]: Shapes.TOP_TO_RIGHT }, + '╅': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT, [Style.BOLD]: Shapes.LEFT_TO_BOTTOM }, + '╆': { [Style.NORMAL]: Shapes.TOP_TO_LEFT, [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM }, + '╇': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM, [Style.BOLD]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}` }, + '╈': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP, [Style.BOLD]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}` }, + '╉': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT, [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}` }, + '╊': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT, [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}` }, + + // Dashed + '╌': { [Style.NORMAL]: Shapes.TWO_DASHES_HORIZONTAL }, + '╍': { [Style.BOLD]: Shapes.TWO_DASHES_HORIZONTAL }, + '┄': { [Style.NORMAL]: Shapes.THREE_DASHES_HORIZONTAL }, + '┅': { [Style.BOLD]: Shapes.THREE_DASHES_HORIZONTAL }, + '┈': { [Style.NORMAL]: Shapes.FOUR_DASHES_HORIZONTAL }, + '┉': { [Style.BOLD]: Shapes.FOUR_DASHES_HORIZONTAL }, + '╎': { [Style.NORMAL]: Shapes.TWO_DASHES_VERTICAL }, + '╏': { [Style.BOLD]: Shapes.TWO_DASHES_VERTICAL }, + '┆': { [Style.NORMAL]: Shapes.THREE_DASHES_VERTICAL }, + '┇': { [Style.BOLD]: Shapes.THREE_DASHES_VERTICAL }, + '┊': { [Style.NORMAL]: Shapes.FOUR_DASHES_VERTICAL }, + '┋': { [Style.BOLD]: Shapes.FOUR_DASHES_VERTICAL }, + + // Curved + '╭': { [Style.NORMAL]: 'C.5,1,.5,.5,1,.5' }, + '╮': { [Style.NORMAL]: 'C.5,1,.5,.5,0,.5' }, + '╯': { [Style.NORMAL]: 'C.5,0,.5,.5,0,.5' }, + '╰': { [Style.NORMAL]: 'C.5,0,.5,.5,1,.5' } +}; + +/** + * Try drawing a custom block element or box drawing character, returning whether it was + * successfully drawn. + */ +export function tryDrawCustomChar( + ctx: CanvasRenderingContext2D, + c: string, + xOffset: number, + yOffset: number, + scaledCellWidth: number, + scaledCellHeight: number +): boolean { + const blockElementDefinition = blockElementDefinitions[c]; + if (blockElementDefinition) { + drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight); + return true; + } + + const patternDefinition = patternCharacterDefinitions[c]; + if (patternDefinition) { + drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight); + return true; + } + + const boxDrawingDefinition = boxDrawingDefinitions[c]; + if (boxDrawingDefinition) { + drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight); + return true; + } + + return false; +} + +function drawBlockElementChar( + ctx: CanvasRenderingContext2D, + charDefinition: IBlockVector[], + xOffset: number, + yOffset: number, + scaledCellWidth: number, + scaledCellHeight: number +): void { + for (let i = 0; i < charDefinition.length; i++) { + const box = charDefinition[i]; + const xEighth = scaledCellWidth / 8; + const yEighth = scaledCellHeight / 8; + ctx.fillRect( + xOffset + box.x * xEighth, + yOffset + box.y * yEighth, + box.w * xEighth, + box.h * yEighth + ); + } +} + +const cachedPatterns: Map> = new Map(); + +function drawPatternChar( + ctx: CanvasRenderingContext2D, + charDefinition: number[][], + xOffset: number, + yOffset: number, + scaledCellWidth: number, + scaledCellHeight: number +): void { + let patternSet = cachedPatterns.get(charDefinition); + if (!patternSet) { + patternSet = new Map(); + cachedPatterns.set(charDefinition, patternSet); + } + const fillStyle = ctx.fillStyle; + if (typeof fillStyle !== 'string') { + throw new Error(`Unexpected fillStyle type "${fillStyle}"`); + } + let pattern = patternSet.get(fillStyle); + if (!pattern) { + const width = charDefinition[0].length; + const height = charDefinition.length; + const tmpCanvas = document.createElement('canvas'); + tmpCanvas.width = width; + tmpCanvas.height = height; + const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d')); + const imageData = new ImageData(width, height); + + // Extract rgba from fillStyle + let r: number; + let g: number; + let b: number; + let a: number; + if (fillStyle.startsWith('#')) { + r = parseInt(fillStyle.substr(1, 2), 16); + g = parseInt(fillStyle.substr(3, 2), 16); + b = parseInt(fillStyle.substr(5, 2), 16); + a = fillStyle.length > 7 && parseInt(fillStyle.substr(7, 2), 16) || 1; + } else if (fillStyle.startsWith('rgba')) { + ([r, g, b, a] = fillStyle.substring(5, fillStyle.length - 1).split(',').map(e => parseFloat(e))); + } else { + throw new Error(`Unexpected fillStyle color format "${fillStyle}" when drawing pattern glyph`); + } + + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + imageData.data[(y * width + x) * 4 ] = r; + imageData.data[(y * width + x) * 4 + 1] = g; + imageData.data[(y * width + x) * 4 + 2] = b; + imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a * 255); + } + } + tmpCtx.putImageData(imageData, 0, 0); + pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null)); + patternSet.set(fillStyle, pattern); + } + ctx.fillStyle = pattern; + ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight); +} + +/** + * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to + * canvas draw calls. + * + * Box styles: ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐ + * ┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤ + * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘ + * ├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐ + * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤ + * └─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘ + * + * Other: + * ╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈ + * │ │ ╳ ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉ + * ╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋ + * + * All box drawing characters: + * ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ + * ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ + * ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ + * ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ + * ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏ + * ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟ + * ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯ + * ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿ + * + * --- + * + * Box drawing alignment tests: █ + * ▉ + * ╔══╦══╗ ┌──┬──┐ ╭──┬──╮ ╭──┬──╮ ┏━━┳━━┓ ┎┒┏┑ ╷ ╻ ┏┯┓ ┌┰┐ ▊ ╱╲╱╲╳╳╳ + * ║┌─╨─┐║ │╔═╧═╗│ │╒═╪═╕│ │╓─╁─╖│ ┃┌─╂─┐┃ ┗╃╄┙ ╶┼╴╺╋╸┠┼┨ ┝╋┥ ▋ ╲╱╲╱╳╳╳ + * ║│╲ ╱│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╿ │┃ ┍╅╆┓ ╵ ╹ ┗┷┛ └┸┘ ▌ ╱╲╱╲╳╳╳ + * ╠╡ ╳ ╞╣ ├╢ ╟┤ ├┼─┼─┼┤ ├╫─╂─╫┤ ┣┿╾┼╼┿┫ ┕┛┖┚ ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳ + * ║│╱ ╲│║ │║ ║│ ││ │ ││ │║ ┃ ║│ ┃│ ╽ │┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▎ + * ║└─╥─┘║ │╚═╤═╝│ │╘═╪═╛│ │╙─╀─╜│ ┃└─╂─┘┃ ░░▒▒▓▓██ ┊ ┆ ╎ ╏ ┇ ┋ ▏ + * ╚══╩══╝ └──┴──┘ ╰──┴──╯ ╰──┴──╯ ┗━━┻━━┛ └╌╌┘ ╎ ┗╍╍┛ ┋ ▁▂▃▄▅▆▇█ + * + * Source: https://www.w3.org/2001/06/utf-8-test/UTF-8-demo.html + */ +function drawBoxDrawingChar( + ctx: CanvasRenderingContext2D, + charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) }, + xOffset: number, + yOffset: number, + scaledCellWidth: number, + scaledCellHeight: number +): void { + ctx.strokeStyle = ctx.fillStyle; + for (const [fontWeight, instructions] of Object.entries(charDefinition)) { + ctx.beginPath(); + ctx.lineWidth = window.devicePixelRatio * Number.parseInt(fontWeight); + let actualInstructions: string; + if (typeof instructions === 'function') { + const xp = .15; + const yp = .15 / scaledCellHeight * scaledCellWidth; + actualInstructions = instructions(xp, yp); + } else { + actualInstructions = instructions; + } + for (const instruction of actualInstructions.split(' ')) { + const type = instruction[0]; + const f = svgToCanvasInstructionMap[type]; + if (!f) { + console.error(`Could not find drawing instructions for "${type}"`); + continue; + } + const args: string[] = instruction.substring(1).split(','); + if (!args[0] || !args[1]) { + continue; + } + f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset)); + } + ctx.stroke(); + ctx.closePath(); + } +} + +function clamp(value: number, max: number, min: number = 0): number { + return Math.max(Math.min(value, max), min); +} + +const svgToCanvasInstructionMap: { [index: string]: any } = { + 'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]), + 'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]), + 'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1]) +}; + +function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number): number[] { + const result = args.map(e => parseFloat(e) || parseInt(e)); + + if (result.length < 2) { + throw new Error('Too few arguments for instruction'); + } + + for (let x = 0; x < result.length; x += 2) { + // Translate from 0-1 to 0-cellWidth + result[x] *= cellWidth; + // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp + // line at 100% devicePixelRatio + if (result[x] !== 0) { + result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0); + } + // Apply the cell's offset (ie. x*cellWidth) + result[x] += xOffset; + } + + for (let y = 1; y < result.length; y += 2) { + // Translate from 0-1 to 0-cellHeight + result[y] *= cellHeight; + // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp + // line at 100% devicePixelRatio + if (result[y] !== 0) { + result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0); + } + // Apply the cell's offset (ie. x*cellHeight) + result[y] += yOffset; + } + + return result; +} diff --git a/src/browser/renderer/Renderer.ts b/src/browser/renderer/Renderer.ts index d5de40db8..162a7ed3b 100644 --- a/src/browser/renderer/Renderer.ts +++ b/src/browser/renderer/Renderer.ts @@ -149,6 +149,12 @@ export class Renderer extends Disposable implements IRenderer { } } + public clearTextureAtlas(): void { + for (const layer of this._renderLayers) { + layer.clearTextureAtlas(); + } + } + /** * Recalculates the character and canvas dimensions. */ diff --git a/src/browser/renderer/TextRenderLayer.ts b/src/browser/renderer/TextRenderLayer.ts index ded6c9c62..59fbb7b11 100644 --- a/src/browser/renderer/TextRenderLayer.ts +++ b/src/browser/renderer/TextRenderLayer.ts @@ -215,7 +215,7 @@ export class TextRenderLayer extends BaseRenderLayer { return; } this._drawChars(cell, x, y); - if (cell.isUnderline()) { + if (cell.isUnderline() || cell.isStrikethrough()) { this._ctx.save(); if (cell.isInverse()) { @@ -244,7 +244,12 @@ export class TextRenderLayer extends BaseRenderLayer { } } - this._fillBottomLineAtCells(x, y, cell.getWidth()); + if (cell.isStrikethrough()) { + this._fillMiddleLineAtCells(x, y, cell.getWidth()); + } + if (cell.isUnderline()) { + this._fillBottomLineAtCells(x, y, cell.getWidth()); + } this._ctx.restore(); } }); diff --git a/src/browser/renderer/Types.d.ts b/src/browser/renderer/Types.d.ts index fc137bc8f..6818a9267 100644 --- a/src/browser/renderer/Types.d.ts +++ b/src/browser/renderer/Types.d.ts @@ -52,6 +52,7 @@ export interface IRenderer extends IDisposable { onOptionsChanged(): void; clear(): void; renderRows(start: number, end: number): void; + clearTextureAtlas?(): void; } export interface IRenderLayer extends IDisposable { @@ -100,4 +101,9 @@ export interface IRenderLayer extends IDisposable { * Clear the state of the render layer. */ reset(): void; + + /** + * Clears the texture atlas. + */ + clearTextureAtlas(): void; } diff --git a/src/browser/renderer/atlas/BaseCharAtlas.ts b/src/browser/renderer/atlas/BaseCharAtlas.ts index 4ebaaa471..83c30d2f0 100644 --- a/src/browser/renderer/atlas/BaseCharAtlas.ts +++ b/src/browser/renderer/atlas/BaseCharAtlas.ts @@ -28,6 +28,8 @@ export abstract class BaseCharAtlas implements IDisposable { */ private _doWarmUp(): void { } + public clear(): void { } + /** * Called when we start drawing a new frame. * diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/src/browser/renderer/atlas/DynamicCharAtlas.ts index 883ebe785..666324ad5 100644 --- a/src/browser/renderer/atlas/DynamicCharAtlas.ts +++ b/src/browser/renderer/atlas/DynamicCharAtlas.ts @@ -119,6 +119,16 @@ export class DynamicCharAtlas extends BaseCharAtlas { this._drawToCacheCount = 0; } + public clear(): void { + if (this._cacheMap.size > 0) { + const capacity = this._width * this._height; + this._cacheMap = new LRUMap(capacity); + this._cacheMap.prealloc(capacity); + } + this._cacheCtx.clearRect(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT); + this._tmpCtx.clearRect(0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight); + } + public draw( ctx: CanvasRenderingContext2D, glyph: IGlyphIdentifier, @@ -266,11 +276,10 @@ export class DynamicCharAtlas extends BaseCharAtlas { } // Draw the character this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight); - this._tmpCtx.restore(); // clear the background from the character to avoid issues with drawing over the previous // character if it extends past it's bounds - const imageData = this._tmpCtx.getImageData( + let imageData = this._tmpCtx.getImageData( 0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight ); let isEmpty = false; @@ -278,6 +287,27 @@ export class DynamicCharAtlas extends BaseCharAtlas { isEmpty = clearColor(imageData, backgroundColor); } + // If this charcater is underscore and empty, shift it up until it is visible, try for a maximum + // of 5 pixels. + if (isEmpty && glyph.chars === '_' && !this._config.allowTransparency) { + for (let offset = 1; offset <= 5; offset++) { + // Draw the character + this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight - offset); + + // clear the background from the character to avoid issues with drawing over the previous + // character if it extends past it's bounds + imageData = this._tmpCtx.getImageData( + 0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight + ); + isEmpty = clearColor(imageData, backgroundColor); + if (!isEmpty) { + break; + } + } + } + + this._tmpCtx.restore(); + // copy the data from imageData to _cacheCanvas const x = this._toCoordinateX(index); const y = this._toCoordinateY(index); diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts index 9eacb97ae..f41e5d44c 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts @@ -10,7 +10,7 @@ import { NULL_CELL_CODE, NULL_CELL_WIDTH, NULL_CELL_CHAR, DEFAULT_ATTR, FgFlags, import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine'; import { IBufferLine } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; -import { MockOptionsService } from 'common/TestUtils.test'; +import { MockCoreService, MockOptionsService } from 'common/TestUtils.test'; import { css } from 'browser/Color'; import { MockCharacterJoinerService } from 'browser/TestUtils.test'; @@ -21,30 +21,36 @@ describe('DomRendererRowFactory', () => { beforeEach(() => { dom = new jsdom.JSDOM(''); - rowFactory = new DomRendererRowFactory(dom.window.document, { - background: css.toColor('#010101'), - foreground: css.toColor('#020202'), - ansi: [ - // dark: - css.toColor('#2e3436'), - css.toColor('#cc0000'), - css.toColor('#4e9a06'), - css.toColor('#c4a000'), - css.toColor('#3465a4'), - css.toColor('#75507b'), - css.toColor('#06989a'), - css.toColor('#d3d7cf'), - // bright: - css.toColor('#555753'), - css.toColor('#ef2929'), - css.toColor('#8ae234'), - css.toColor('#fce94f'), - css.toColor('#729fcf'), - css.toColor('#ad7fa8'), - css.toColor('#34e2e2'), - css.toColor('#eeeeec') - ] - } as any, new MockCharacterJoinerService(), new MockOptionsService({ drawBoldTextInBrightColors: true })); + rowFactory = new DomRendererRowFactory( + dom.window.document, + { + background: css.toColor('#010101'), + foreground: css.toColor('#020202'), + ansi: [ + // dark: + css.toColor('#2e3436'), + css.toColor('#cc0000'), + css.toColor('#4e9a06'), + css.toColor('#c4a000'), + css.toColor('#3465a4'), + css.toColor('#75507b'), + css.toColor('#06989a'), + css.toColor('#d3d7cf'), + // bright: + css.toColor('#555753'), + css.toColor('#ef2929'), + css.toColor('#8ae234'), + css.toColor('#fce94f'), + css.toColor('#729fcf'), + css.toColor('#ad7fa8'), + css.toColor('#34e2e2'), + css.toColor('#eeeeec') + ] + } as any, + new MockCharacterJoinerService(), + new MockOptionsService({ drawBoldTextInBrightColors: true }), + new MockCoreService() + ); lineData = createEmptyLineData(2); }); @@ -132,6 +138,16 @@ describe('DomRendererRowFactory', () => { ); }); + it('should add class for strikethrough', () => { + const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); + cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH; + lineData.setCell(0, cell); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); + assert.equal(getFragmentHtml(fragment), + 'a' + ); + }); + it('should add classes for 256 foreground colors', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.fg |= Attributes.CM_P256; diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index eb2dd1fcd..a24f3e463 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -7,7 +7,7 @@ import { IBufferLine } from 'common/Types'; import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants'; import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants'; import { CellData } from 'common/buffer/CellData'; -import { IOptionsService } from 'common/services/Services'; +import { ICoreService, IOptionsService } from 'common/services/Services'; import { color, rgba } from 'browser/Color'; import { IColorSet, IColor } from 'browser/Types'; import { ICharacterJoinerService } from 'browser/services/Services'; @@ -17,6 +17,7 @@ export const BOLD_CLASS = 'xterm-bold'; export const DIM_CLASS = 'xterm-dim'; export const ITALIC_CLASS = 'xterm-italic'; export const UNDERLINE_CLASS = 'xterm-underline'; +export const STRIKETHROUGH_CLASS = 'xterm-strikethrough'; export const CURSOR_CLASS = 'xterm-cursor'; export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink'; export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block'; @@ -30,7 +31,8 @@ export class DomRendererRowFactory { private readonly _document: Document, private _colors: IColorSet, @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService, - @IOptionsService private readonly _optionsService: IOptionsService + @IOptionsService private readonly _optionsService: IOptionsService, + @ICoreService private readonly _coreService: ICoreService ) { } @@ -109,7 +111,7 @@ export class DomRendererRowFactory { } } - if (isCursorRow && x === cursorX) { + if (!this._coreService.isCursorHidden && isCursorRow && x === cursorX) { charElement.classList.add(CURSOR_CLASS); if (cursorBlink) { @@ -151,6 +153,10 @@ export class DomRendererRowFactory { charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR; } + if (cell.isStrikethrough()) { + charElement.classList.add(STRIKETHROUGH_CLASS); + } + let fg = cell.getFgColor(); let fgColorMode = cell.getFgColorMode(); let bg = cell.getBgColor(); diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index fc2eb4354..b8283e0e6 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -9,7 +9,7 @@ import { EventEmitter, IEvent } from 'common/EventEmitter'; import { Disposable } from 'common/Lifecycle'; import { ScreenDprMonitor } from 'browser/ScreenDprMonitor'; import { addDisposableDomListener } from 'browser/Lifecycle'; -import { IColorSet } from 'browser/Types'; +import { IColorSet, IRenderDebouncer } from 'browser/Types'; import { IOptionsService, IBufferService } from 'common/services/Services'; import { ICharSizeService, IRenderService } from 'browser/services/Services'; @@ -22,7 +22,7 @@ interface ISelectionState { export class RenderService extends Disposable implements IRenderService { public serviceBrand: undefined; - private _renderDebouncer: RenderDebouncer; + private _renderDebouncer: IRenderDebouncer; private _screenDprMonitor: ScreenDprMonitor; private _isPaused: boolean = false; @@ -168,6 +168,11 @@ export class RenderService extends Disposable implements IRenderService { } } + public clearTextureAtlas(): void { + this._renderer?.clearTextureAtlas?.(); + this._fullRefresh(); + } + public setColors(colors: IColorSet): void { this._renderer.setColors(colors); this._fullRefresh(); diff --git a/src/browser/services/Services.ts b/src/browser/services/Services.ts index 8c8a7bd9b..4928fa28e 100644 --- a/src/browser/services/Services.ts +++ b/src/browser/services/Services.ts @@ -53,6 +53,7 @@ export interface IRenderService extends IDisposable { dimensions: IRenderDimensions; refreshRows(start: number, end: number): void; + clearTextureAtlas(): void; resize(cols: number, rows: number): void; changeOptions(): void; setRenderer(renderer: IRenderer): void; diff --git a/src/common/CoreTerminal.ts b/src/common/CoreTerminal.ts index 815326d68..96a4b53dd 100644 --- a/src/common/CoreTerminal.ts +++ b/src/common/CoreTerminal.ts @@ -47,11 +47,11 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { protected readonly _instantiationService: IInstantiationService; protected readonly _bufferService: IBufferService; protected readonly _logService: ILogService; - protected readonly _coreService: ICoreService; protected readonly _charsetService: ICharsetService; - protected readonly _coreMouseService: ICoreMouseService; protected readonly _dirtyRowService: IDirtyRowService; + public readonly coreMouseService: ICoreMouseService; + public readonly coreService: ICoreService; public readonly unicodeService: IUnicodeService; public readonly optionsService: IOptionsService; @@ -100,10 +100,10 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { this._instantiationService.setService(IBufferService, this._bufferService); this._logService = this._instantiationService.createInstance(LogService); this._instantiationService.setService(ILogService, this._logService); - this._coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom())); - this._instantiationService.setService(ICoreService, this._coreService); - this._coreMouseService = this._instantiationService.createInstance(CoreMouseService); - this._instantiationService.setService(ICoreMouseService, this._coreMouseService); + this.coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom())); + this._instantiationService.setService(ICoreService, this.coreService); + this.coreMouseService = this._instantiationService.createInstance(CoreMouseService); + this._instantiationService.setService(ICoreMouseService, this.coreMouseService); this._dirtyRowService = this._instantiationService.createInstance(DirtyRowService); this._instantiationService.setService(IDirtyRowService, this._dirtyRowService); this.unicodeService = this._instantiationService.createInstance(UnicodeService); @@ -112,19 +112,23 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { this._instantiationService.setService(ICharsetService, this._charsetService); // Register input handler and handle/forward events - this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this._coreService, this._dirtyRowService, this._logService, this.optionsService, this._coreMouseService, this.unicodeService); + this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this.coreService, this._dirtyRowService, this._logService, this.optionsService, this.coreMouseService, this.unicodeService); this.register(forwardEvent(this._inputHandler.onLineFeed, this._onLineFeed)); this.register(this._inputHandler); // Setup listeners this.register(forwardEvent(this._bufferService.onResize, this._onResize)); - this.register(forwardEvent(this._coreService.onData, this._onData)); - this.register(forwardEvent(this._coreService.onBinary, this._onBinary)); + this.register(forwardEvent(this.coreService.onData, this._onData)); + this.register(forwardEvent(this.coreService.onBinary, this._onBinary)); this.register(this.optionsService.onOptionChange(key => this._updateOptions(key))); this.register(this._bufferService.onScroll(event => { this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL }); this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom); })); + this.register(this._inputHandler.onScroll(event => { + this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL }); + this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom); + })); // Setup WriteBuffer this._writeBuffer = new WriteBuffer((data, promiseResult) => this._inputHandler.parse(data, promiseResult)); @@ -246,8 +250,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { this._inputHandler.reset(); this._bufferService.reset(); this._charsetService.reset(); - this._coreService.reset(); - this._coreMouseService.reset(); + this.coreService.reset(); + this.coreMouseService.reset(); } protected _updateOptions(key: string): void { diff --git a/src/common/InputHandler.test.ts b/src/common/InputHandler.test.ts index 902640f90..92162d9a3 100644 --- a/src/common/InputHandler.test.ts +++ b/src/common/InputHandler.test.ts @@ -636,6 +636,12 @@ describe('InputHandler', () => { await inputHandler.parseP('\x1b[28m'); assert.equal(!!inputHandler.curAttrData.isInvisible(), false); }); + it('strikethrough', async () => { + await inputHandler.parseP('\x1b[9m'); + assert.equal(!!inputHandler.curAttrData.isStrikethrough(), true); + await inputHandler.parseP('\x1b[29m'); + assert.equal(!!inputHandler.curAttrData.isStrikethrough(), false); + }); it('colormode palette 16', async () => { assert.equal(inputHandler.curAttrData.getFgColorMode(), 0); // DEFAULT assert.equal(inputHandler.curAttrData.getBgColorMode(), 0); // DEFAULT diff --git a/src/common/InputHandler.ts b/src/common/InputHandler.ts index d3b29a702..9371e5f52 100644 --- a/src/common/InputHandler.ts +++ b/src/common/InputHandler.ts @@ -20,6 +20,7 @@ import { AttributeData } from 'common/buffer/AttributeData'; import { ICoreService, IBufferService, IOptionsService, ILogService, IDirtyRowService, ICoreMouseService, ICharsetService, IUnicodeService, LogLevelEnum } from 'common/services/Services'; import { OscHandler } from 'common/parser/OscParser'; import { DcsHandler } from 'common/parser/DcsParser'; +import { IBuffer } from 'common/buffer/Types'; /** * Map collect to glevel. Used in `selectCharset`. @@ -234,12 +235,16 @@ export class InputHandler extends Disposable implements IInputHandler { private _curAttrData: IAttributeData = DEFAULT_ATTR_DATA.clone(); private _eraseAttrDataInternal: IAttributeData = DEFAULT_ATTR_DATA.clone(); + private _activeBuffer: IBuffer; + private _onRequestBell = new EventEmitter(); public get onRequestBell(): IEvent { return this._onRequestBell.event; } private _onRequestRefreshRows = new EventEmitter(); public get onRequestRefreshRows(): IEvent { return this._onRequestRefreshRows.event; } private _onRequestReset = new EventEmitter(); public get onRequestReset(): IEvent { return this._onRequestReset.event; } + private _onRequestSendFocus = new EventEmitter(); + public get onRequestSendFocus(): IEvent { return this._onRequestSendFocus.event; } private _onRequestSyncScrollBar = new EventEmitter(); public get onRequestSyncScrollBar(): IEvent { return this._onRequestSyncScrollBar.event; } private _onRequestWindowsOptionsReport = new EventEmitter(); @@ -282,6 +287,10 @@ export class InputHandler extends Disposable implements IInputHandler { super(); this.register(this._parser); + // Track properties used in performance critical code manually to avoid using slow getters + this._activeBuffer = this._bufferService.buffer; + this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer)); + /** * custom fallback handlers */ @@ -508,9 +517,8 @@ export class InputHandler extends Disposable implements IInputHandler { */ public parse(data: string | Uint8Array, promiseResult?: boolean): void | Promise { let result: void | Promise; - let buffer = this._bufferService.buffer; - let cursorStartX = buffer.x; - let cursorStartY = buffer.y; + let cursorStartX = this._activeBuffer.x; + let cursorStartY = this._activeBuffer.y; let start = 0; const wasPaused = this._parseStack.paused; @@ -569,8 +577,7 @@ export class InputHandler extends Disposable implements IInputHandler { } } - buffer = this._bufferService.buffer; - if (buffer.x !== cursorStartX || buffer.y !== cursorStartY) { + if (this._activeBuffer.x !== cursorStartX || this._activeBuffer.y !== cursorStartY) { this._onCursorMove.fire(); } @@ -581,20 +588,19 @@ export class InputHandler extends Disposable implements IInputHandler { public print(data: Uint32Array, start: number, end: number): void { let code: number; let chWidth: number; - const buffer = this._bufferService.buffer; const charset = this._charsetService.charset; const screenReaderMode = this._optionsService.options.screenReaderMode; const cols = this._bufferService.cols; const wraparoundMode = this._coreService.decPrivateModes.wraparound; const insertMode = this._coreService.modes.insertMode; const curAttr = this._curAttrData; - let bufferRow = buffer.lines.get(buffer.ybase + buffer.y)!; + let bufferRow = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!; - this._dirtyRowService.markDirty(buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); // handle wide chars: reset start_cell-1 if we would overwrite the second cell of a wide char - if (buffer.x && end - start > 0 && bufferRow.getWidth(buffer.x - 1) === 2) { - bufferRow.setCellFromCodePoint(buffer.x - 1, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); + if (this._activeBuffer.x && end - start > 0 && bufferRow.getWidth(this._activeBuffer.x - 1) === 2) { + bufferRow.setCellFromCodePoint(this._activeBuffer.x - 1, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); } for (let pos = start; pos < end; ++pos) { @@ -619,17 +625,17 @@ export class InputHandler extends Disposable implements IInputHandler { } // insert combining char at last cursor position - // buffer.x should never be 0 for a combining char + // this._activeBuffer.x should never be 0 for a combining char // since they always follow a cell consuming char - // therefore we can test for buffer.x to avoid overflow left - if (!chWidth && buffer.x) { - if (!bufferRow.getWidth(buffer.x - 1)) { + // therefore we can test for this._activeBuffer.x to avoid overflow left + if (!chWidth && this._activeBuffer.x) { + if (!bufferRow.getWidth(this._activeBuffer.x - 1)) { // found empty cell after fullwidth, need to go 2 cells back // it is save to step 2 cells back here // since an empty cell is only set by fullwidth chars - bufferRow.addCodepointToCell(buffer.x - 2, code); + bufferRow.addCodepointToCell(this._activeBuffer.x - 2, code); } else { - bufferRow.addCodepointToCell(buffer.x - 1, code); + bufferRow.addCodepointToCell(this._activeBuffer.x - 1, code); } continue; } @@ -637,31 +643,31 @@ export class InputHandler extends Disposable implements IInputHandler { // goto next line if ch would overflow // NOTE: To avoid costly width checks here, // the terminal does not allow a cols < 2. - if (buffer.x + chWidth - 1 >= cols) { + if (this._activeBuffer.x + chWidth - 1 >= cols) { // autowrap - DECAWM // automatically wraps to the beginning of the next line if (wraparoundMode) { // clear left over cells to the right - while (buffer.x < cols) { - bufferRow.setCellFromCodePoint(buffer.x++, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); + while (this._activeBuffer.x < cols) { + bufferRow.setCellFromCodePoint(this._activeBuffer.x++, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); } - buffer.x = 0; - buffer.y++; - if (buffer.y === buffer.scrollBottom + 1) { - buffer.y--; + this._activeBuffer.x = 0; + this._activeBuffer.y++; + if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) { + this._activeBuffer.y--; this._bufferService.scroll(this._eraseAttrData(), true); } else { - if (buffer.y >= this._bufferService.rows) { - buffer.y = this._bufferService.rows - 1; + if (this._activeBuffer.y >= this._bufferService.rows) { + this._activeBuffer.y = this._bufferService.rows - 1; } // The line already exists (eg. the initial viewport), mark it as a // wrapped line - buffer.lines.get(buffer.ybase + buffer.y)!.isWrapped = true; + this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!.isWrapped = true; } // row changed, get it again - bufferRow = buffer.lines.get(buffer.ybase + buffer.y)!; + bufferRow = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!; } else { - buffer.x = cols - 1; + this._activeBuffer.x = cols - 1; if (chWidth === 2) { // FIXME: check for xterm behavior // What to do here? We got a wide char that does not fit into last cell @@ -673,7 +679,7 @@ export class InputHandler extends Disposable implements IInputHandler { // insert mode: move characters to right if (insertMode) { // right shift cells according to the width - bufferRow.insertCells(buffer.x, chWidth, buffer.getNullCell(curAttr), curAttr); + bufferRow.insertCells(this._activeBuffer.x, chWidth, this._activeBuffer.getNullCell(curAttr), curAttr); // test last cell - since the last cell has only room for // a halfwidth char any fullwidth shifted there is lost // and will be set to empty cell @@ -683,15 +689,15 @@ export class InputHandler extends Disposable implements IInputHandler { } // write current char to buffer and advance cursor - bufferRow.setCellFromCodePoint(buffer.x++, code, chWidth, curAttr.fg, curAttr.bg, curAttr.extended); + bufferRow.setCellFromCodePoint(this._activeBuffer.x++, code, chWidth, curAttr.fg, curAttr.bg, curAttr.extended); // fullwidth char - also set next cell to placeholder stub and advance cursor // for graphemes bigger than fullwidth we can simply loop to zero - // we already made sure above, that buffer.x + chWidth will not overflow right + // we already made sure above, that this._activeBuffer.x + chWidth will not overflow right if (chWidth > 0) { while (--chWidth) { // other than a regular empty cell a cell following a wide char has no width - bufferRow.setCellFromCodePoint(buffer.x++, 0, 0, curAttr.fg, curAttr.bg, curAttr.extended); + bufferRow.setCellFromCodePoint(this._activeBuffer.x++, 0, 0, curAttr.fg, curAttr.bg, curAttr.extended); } } } @@ -700,7 +706,7 @@ export class InputHandler extends Disposable implements IInputHandler { // - fullwidth + surrogates: reset // - combining: only base char gets carried on (bug in xterm?) if (end - start > 0) { - bufferRow.loadCell(buffer.x - 1, this._workCell); + bufferRow.loadCell(this._activeBuffer.x - 1, this._workCell); if (this._workCell.getWidth() === 2 || this._workCell.getCode() > 0xFFFF) { this._parser.precedingCodepoint = 0; } else if (this._workCell.isCombined()) { @@ -711,11 +717,11 @@ export class InputHandler extends Disposable implements IInputHandler { } // handle wide chars: reset cell to the right if it is second cell of a wide char - if (buffer.x < cols && end - start > 0 && bufferRow.getWidth(buffer.x) === 0 && !bufferRow.hasContent(buffer.x)) { - bufferRow.setCellFromCodePoint(buffer.x, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); + if (this._activeBuffer.x < cols && end - start > 0 && bufferRow.getWidth(this._activeBuffer.x) === 0 && !bufferRow.hasContent(this._activeBuffer.x)) { + bufferRow.setCellFromCodePoint(this._activeBuffer.x, 0, 1, curAttr.fg, curAttr.bg, curAttr.extended); } - this._dirtyRowService.markDirty(buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); } /** @@ -779,25 +785,22 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y C0 FF "Form Feed" "\f, \x0C" "Treated as LF." */ public lineFeed(): boolean { - // make buffer local for faster access - const buffer = this._bufferService.buffer; - - this._dirtyRowService.markDirty(buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); if (this._optionsService.options.convertEol) { - buffer.x = 0; + this._activeBuffer.x = 0; } - buffer.y++; - if (buffer.y === buffer.scrollBottom + 1) { - buffer.y--; + this._activeBuffer.y++; + if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) { + this._activeBuffer.y--; this._bufferService.scroll(this._eraseAttrData()); - } else if (buffer.y >= this._bufferService.rows) { - buffer.y = this._bufferService.rows - 1; + } else if (this._activeBuffer.y >= this._bufferService.rows) { + this._activeBuffer.y = this._bufferService.rows - 1; } // If the end of the line is hit, prevent this action from wrapping around to the next line. - if (buffer.x >= this._bufferService.cols) { - buffer.x--; + if (this._activeBuffer.x >= this._bufferService.cols) { + this._activeBuffer.x--; } - this._dirtyRowService.markDirty(buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); this._onLineFeed.fire(); return true; @@ -810,7 +813,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y C0 CR "Carriage Return" "\r, \x0D" "Move the cursor to the beginning of the row." */ public carriageReturn(): boolean { - this._bufferService.buffer.x = 0; + this._activeBuffer.x = 0; return true; } @@ -826,13 +829,11 @@ export class InputHandler extends Disposable implements IInputHandler { * with the cursor, thus at the home position (top-leftmost cell) this has no effect. */ public backspace(): boolean { - const buffer = this._bufferService.buffer; - // reverse wrap-around is disabled if (!this._coreService.decPrivateModes.reverseWraparound) { this._restrictCursor(); - if (buffer.x > 0) { - buffer.x--; + if (this._activeBuffer.x > 0) { + this._activeBuffer.x--; } return true; } @@ -842,8 +843,8 @@ export class InputHandler extends Disposable implements IInputHandler { // to be at x=cols to be able to address the last cell of a row by BS this._restrictCursor(this._bufferService.cols); - if (buffer.x > 0) { - buffer.x--; + if (this._activeBuffer.x > 0) { + this._activeBuffer.x--; } else { /** * reverse wrap-around handling: @@ -853,21 +854,21 @@ export class InputHandler extends Disposable implements IInputHandler { * - cannot peek into scrollbuffer * - any cursor movement sequence keeps working as expected */ - if (buffer.x === 0 - && buffer.y > buffer.scrollTop - && buffer.y <= buffer.scrollBottom - && buffer.lines.get(buffer.ybase + buffer.y)?.isWrapped) + if (this._activeBuffer.x === 0 + && this._activeBuffer.y > this._activeBuffer.scrollTop + && this._activeBuffer.y <= this._activeBuffer.scrollBottom + && this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)?.isWrapped) { - buffer.lines.get(buffer.ybase + buffer.y)!.isWrapped = false; - buffer.y--; - buffer.x = this._bufferService.cols - 1; + this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!.isWrapped = false; + this._activeBuffer.y--; + this._activeBuffer.x = this._bufferService.cols - 1; // find last taken cell - last cell can have 3 different states: // - hasContent(true) + hasWidth(1): narrow char - we are done // - hasWidth(0): second part of wide char - we are done // - hasContent(false) + hasWidth(1): empty cell due to early wrapping wide char, go one cell further back - const line = buffer.lines.get(buffer.ybase + buffer.y)!; - if (line.hasWidth(buffer.x) && !line.hasContent(buffer.x)) { - buffer.x--; + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y)!; + if (line.hasWidth(this._activeBuffer.x) && !line.hasContent(this._activeBuffer.x)) { + this._activeBuffer.x--; // We do this only once, since width=1 + hasContent=false currently happens only once before // early wrapping of a wide char. // This needs to be fixed once we support graphemes taking more than 2 cells. @@ -885,13 +886,13 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y C0 HT "Horizontal Tabulation" "\t, \x09" "Move the cursor to the next character tab stop." */ public tab(): boolean { - if (this._bufferService.buffer.x >= this._bufferService.cols) { + if (this._activeBuffer.x >= this._bufferService.cols) { return true; } - const originalX = this._bufferService.buffer.x; - this._bufferService.buffer.x = this._bufferService.buffer.nextStop(); + const originalX = this._activeBuffer.x; + this._activeBuffer.x = this._activeBuffer.nextStop(); if (this._optionsService.options.screenReaderMode) { - this._onA11yTab.fire(this._bufferService.buffer.x - originalX); + this._onA11yTab.fire(this._activeBuffer.x - originalX); } return true; } @@ -924,27 +925,27 @@ export class InputHandler extends Disposable implements IInputHandler { * Restrict cursor to viewport size / scroll margin (origin mode). */ private _restrictCursor(maxCol: number = this._bufferService.cols - 1): void { - this._bufferService.buffer.x = Math.min(maxCol, Math.max(0, this._bufferService.buffer.x)); - this._bufferService.buffer.y = this._coreService.decPrivateModes.origin - ? Math.min(this._bufferService.buffer.scrollBottom, Math.max(this._bufferService.buffer.scrollTop, this._bufferService.buffer.y)) - : Math.min(this._bufferService.rows - 1, Math.max(0, this._bufferService.buffer.y)); - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._activeBuffer.x = Math.min(maxCol, Math.max(0, this._activeBuffer.x)); + this._activeBuffer.y = this._coreService.decPrivateModes.origin + ? Math.min(this._activeBuffer.scrollBottom, Math.max(this._activeBuffer.scrollTop, this._activeBuffer.y)) + : Math.min(this._bufferService.rows - 1, Math.max(0, this._activeBuffer.y)); + this._dirtyRowService.markDirty(this._activeBuffer.y); } /** * Set absolute cursor position. */ private _setCursor(x: number, y: number): void { - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); if (this._coreService.decPrivateModes.origin) { - this._bufferService.buffer.x = x; - this._bufferService.buffer.y = this._bufferService.buffer.scrollTop + y; + this._activeBuffer.x = x; + this._activeBuffer.y = this._activeBuffer.scrollTop + y; } else { - this._bufferService.buffer.x = x; - this._bufferService.buffer.y = y; + this._activeBuffer.x = x; + this._activeBuffer.y = y; } this._restrictCursor(); - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); } /** @@ -954,7 +955,7 @@ export class InputHandler extends Disposable implements IInputHandler { // for relative changes we have to make sure we are within 0 .. cols/rows - 1 // before calculating the new position this._restrictCursor(); - this._setCursor(this._bufferService.buffer.x + x, this._bufferService.buffer.y + y); + this._setCursor(this._activeBuffer.x + x, this._activeBuffer.y + y); } /** @@ -966,7 +967,7 @@ export class InputHandler extends Disposable implements IInputHandler { */ public cursorUp(params: IParams): boolean { // stop at scrollTop - const diffToTop = this._bufferService.buffer.y - this._bufferService.buffer.scrollTop; + const diffToTop = this._activeBuffer.y - this._activeBuffer.scrollTop; if (diffToTop >= 0) { this._moveCursor(0, -Math.min(diffToTop, params.params[0] || 1)); } else { @@ -984,7 +985,7 @@ export class InputHandler extends Disposable implements IInputHandler { */ public cursorDown(params: IParams): boolean { // stop at scrollBottom - const diffToBottom = this._bufferService.buffer.scrollBottom - this._bufferService.buffer.y; + const diffToBottom = this._activeBuffer.scrollBottom - this._activeBuffer.y; if (diffToBottom >= 0) { this._moveCursor(0, Math.min(diffToBottom, params.params[0] || 1)); } else { @@ -1025,7 +1026,7 @@ export class InputHandler extends Disposable implements IInputHandler { */ public cursorNextLine(params: IParams): boolean { this.cursorDown(params); - this._bufferService.buffer.x = 0; + this._activeBuffer.x = 0; return true; } @@ -1039,7 +1040,7 @@ export class InputHandler extends Disposable implements IInputHandler { */ public cursorPrecedingLine(params: IParams): boolean { this.cursorUp(params); - this._bufferService.buffer.x = 0; + this._activeBuffer.x = 0; return true; } @@ -1050,7 +1051,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y CSI CHA "Cursor Horizontal Absolute" "CSI Ps G" "Move cursor to `Ps`-th column of the active row (default=1)." */ public cursorCharAbsolute(params: IParams): boolean { - this._setCursor((params.params[0] || 1) - 1, this._bufferService.buffer.y); + this._setCursor((params.params[0] || 1) - 1, this._activeBuffer.y); return true; } @@ -1081,7 +1082,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y CSI HPA "Horizontal Position Absolute" "CSI Ps ` " "Same as CHA." */ public charPosAbsolute(params: IParams): boolean { - this._setCursor((params.params[0] || 1) - 1, this._bufferService.buffer.y); + this._setCursor((params.params[0] || 1) - 1, this._activeBuffer.y); return true; } @@ -1103,7 +1104,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y CSI VPA "Vertical Position Absolute" "CSI Ps d" "Move cursor to `Ps`-th row (default=1)." */ public linePosAbsolute(params: IParams): boolean { - this._setCursor(this._bufferService.buffer.x, (params.params[0] || 1) - 1); + this._setCursor(this._activeBuffer.x, (params.params[0] || 1) - 1); return true; } @@ -1146,9 +1147,9 @@ export class InputHandler extends Disposable implements IInputHandler { public tabClear(params: IParams): boolean { const param = params.params[0]; if (param === 0) { - delete this._bufferService.buffer.tabs[this._bufferService.buffer.x]; + delete this._activeBuffer.tabs[this._activeBuffer.x]; } else if (param === 3) { - this._bufferService.buffer.tabs = {}; + this._activeBuffer.tabs = {}; } return true; } @@ -1160,12 +1161,12 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y CSI CHT "Cursor Horizontal Tabulation" "CSI Ps I" "Move cursor `Ps` times tabs forward (default=1)." */ public cursorForwardTab(params: IParams): boolean { - if (this._bufferService.buffer.x >= this._bufferService.cols) { + if (this._activeBuffer.x >= this._bufferService.cols) { return true; } let param = params.params[0] || 1; while (param--) { - this._bufferService.buffer.x = this._bufferService.buffer.nextStop(); + this._activeBuffer.x = this._activeBuffer.nextStop(); } return true; } @@ -1176,16 +1177,13 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y CSI CBT "Cursor Backward Tabulation" "CSI Ps Z" "Move cursor `Ps` tabs backward (default=1)." */ public cursorBackwardTab(params: IParams): boolean { - if (this._bufferService.buffer.x >= this._bufferService.cols) { + if (this._activeBuffer.x >= this._bufferService.cols) { return true; } let param = params.params[0] || 1; - // make buffer local for faster access - const buffer = this._bufferService.buffer; - while (param--) { - buffer.x = buffer.prevStop(); + this._activeBuffer.x = this._activeBuffer.prevStop(); } return true; } @@ -1199,11 +1197,11 @@ export class InputHandler extends Disposable implements IInputHandler { * @param end end - 1 is last erased cell */ private _eraseInBufferLine(y: number, start: number, end: number, clearWrap: boolean = false): void { - const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + y)!; + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; line.replaceCells( start, end, - this._bufferService.buffer.getNullCell(this._eraseAttrData()), + this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData() ); if (clearWrap) { @@ -1217,8 +1215,8 @@ export class InputHandler extends Disposable implements IInputHandler { * @param y row index */ private _resetBufferLine(y: number): void { - const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + y)!; - line.fill(this._bufferService.buffer.getNullCell(this._eraseAttrData())); + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; + line.fill(this._activeBuffer.getNullCell(this._eraseAttrData())); line.isWrapped = false; } @@ -1251,22 +1249,22 @@ export class InputHandler extends Disposable implements IInputHandler { let j; switch (params.params[0]) { case 0: - j = this._bufferService.buffer.y; + j = this._activeBuffer.y; this._dirtyRowService.markDirty(j); - this._eraseInBufferLine(j++, this._bufferService.buffer.x, this._bufferService.cols, this._bufferService.buffer.x === 0); + this._eraseInBufferLine(j++, this._activeBuffer.x, this._bufferService.cols, this._activeBuffer.x === 0); for (; j < this._bufferService.rows; j++) { this._resetBufferLine(j); } this._dirtyRowService.markDirty(j); break; case 1: - j = this._bufferService.buffer.y; + j = this._activeBuffer.y; this._dirtyRowService.markDirty(j); // Deleted front part of line and everything before. This line will no longer be wrapped. - this._eraseInBufferLine(j, 0, this._bufferService.buffer.x + 1, true); - if (this._bufferService.buffer.x + 1 >= this._bufferService.cols) { + this._eraseInBufferLine(j, 0, this._activeBuffer.x + 1, true); + if (this._activeBuffer.x + 1 >= this._bufferService.cols) { // Deleted entire previous line. This next line can no longer be wrapped. - this._bufferService.buffer.lines.get(j + 1)!.isWrapped = false; + this._activeBuffer.lines.get(j + 1)!.isWrapped = false; } while (j--) { this._resetBufferLine(j); @@ -1283,11 +1281,11 @@ export class InputHandler extends Disposable implements IInputHandler { break; case 3: // Clear scrollback (everything not in viewport) - const scrollBackSize = this._bufferService.buffer.lines.length - this._bufferService.rows; + const scrollBackSize = this._activeBuffer.lines.length - this._bufferService.rows; if (scrollBackSize > 0) { - this._bufferService.buffer.lines.trimStart(scrollBackSize); - this._bufferService.buffer.ybase = Math.max(this._bufferService.buffer.ybase - scrollBackSize, 0); - this._bufferService.buffer.ydisp = Math.max(this._bufferService.buffer.ydisp - scrollBackSize, 0); + this._activeBuffer.lines.trimStart(scrollBackSize); + this._activeBuffer.ybase = Math.max(this._activeBuffer.ybase - scrollBackSize, 0); + this._activeBuffer.ydisp = Math.max(this._activeBuffer.ydisp - scrollBackSize, 0); // Force a scroll event to refresh viewport this._onScroll.fire(0); } @@ -1322,16 +1320,16 @@ export class InputHandler extends Disposable implements IInputHandler { this._restrictCursor(this._bufferService.cols); switch (params.params[0]) { case 0: - this._eraseInBufferLine(this._bufferService.buffer.y, this._bufferService.buffer.x, this._bufferService.cols); + this._eraseInBufferLine(this._activeBuffer.y, this._activeBuffer.x, this._bufferService.cols); break; case 1: - this._eraseInBufferLine(this._bufferService.buffer.y, 0, this._bufferService.buffer.x + 1); + this._eraseInBufferLine(this._activeBuffer.y, 0, this._activeBuffer.x + 1); break; case 2: - this._eraseInBufferLine(this._bufferService.buffer.y, 0, this._bufferService.cols); + this._eraseInBufferLine(this._activeBuffer.y, 0, this._bufferService.cols); break; } - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); return true; } @@ -1348,26 +1346,23 @@ export class InputHandler extends Disposable implements IInputHandler { this._restrictCursor(); let param = params.params[0] || 1; - // make buffer local for faster access - const buffer = this._bufferService.buffer; - - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } - const row: number = buffer.ybase + buffer.y; + const row: number = this._activeBuffer.ybase + this._activeBuffer.y; - const scrollBottomRowsOffset = this._bufferService.rows - 1 - buffer.scrollBottom; - const scrollBottomAbsolute = this._bufferService.rows - 1 + buffer.ybase - scrollBottomRowsOffset + 1; + const scrollBottomRowsOffset = this._bufferService.rows - 1 - this._activeBuffer.scrollBottom; + const scrollBottomAbsolute = this._bufferService.rows - 1 + this._activeBuffer.ybase - scrollBottomRowsOffset + 1; while (param--) { // test: echo -e '\e[44m\e[1L\e[0m' // blankLine(true) - xterm/linux behavior - buffer.lines.splice(scrollBottomAbsolute - 1, 1); - buffer.lines.splice(row, 0, buffer.getBlankLine(this._eraseAttrData())); + this._activeBuffer.lines.splice(scrollBottomAbsolute - 1, 1); + this._activeBuffer.lines.splice(row, 0, this._activeBuffer.getBlankLine(this._eraseAttrData())); } - this._dirtyRowService.markRangeDirty(buffer.y, buffer.scrollBottom); - buffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only? + this._dirtyRowService.markRangeDirty(this._activeBuffer.y, this._activeBuffer.scrollBottom); + this._activeBuffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only? return true; } @@ -1384,27 +1379,24 @@ export class InputHandler extends Disposable implements IInputHandler { this._restrictCursor(); let param = params.params[0] || 1; - // make buffer local for faster access - const buffer = this._bufferService.buffer; - - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } - const row: number = buffer.ybase + buffer.y; + const row: number = this._activeBuffer.ybase + this._activeBuffer.y; let j: number; - j = this._bufferService.rows - 1 - buffer.scrollBottom; - j = this._bufferService.rows - 1 + buffer.ybase - j; + j = this._bufferService.rows - 1 - this._activeBuffer.scrollBottom; + j = this._bufferService.rows - 1 + this._activeBuffer.ybase - j; while (param--) { // test: echo -e '\e[44m\e[1M\e[0m' // blankLine(true) - xterm/linux behavior - buffer.lines.splice(row, 1); - buffer.lines.splice(j, 0, buffer.getBlankLine(this._eraseAttrData())); + this._activeBuffer.lines.splice(row, 1); + this._activeBuffer.lines.splice(j, 0, this._activeBuffer.getBlankLine(this._eraseAttrData())); } - this._dirtyRowService.markRangeDirty(buffer.y, buffer.scrollBottom); - buffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only? + this._dirtyRowService.markRangeDirty(this._activeBuffer.y, this._activeBuffer.scrollBottom); + this._activeBuffer.x = 0; // see https://vt100.net/docs/vt220-rm/chapter4.html - vt220 only? return true; } @@ -1421,15 +1413,15 @@ export class InputHandler extends Disposable implements IInputHandler { */ public insertChars(params: IParams): boolean { this._restrictCursor(); - const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y); + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y); if (line) { line.insertCells( - this._bufferService.buffer.x, + this._activeBuffer.x, params.params[0] || 1, - this._bufferService.buffer.getNullCell(this._eraseAttrData()), + this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData() ); - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); } return true; } @@ -1447,15 +1439,15 @@ export class InputHandler extends Disposable implements IInputHandler { */ public deleteChars(params: IParams): boolean { this._restrictCursor(); - const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y); + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y); if (line) { line.deleteCells( - this._bufferService.buffer.x, + this._activeBuffer.x, params.params[0] || 1, - this._bufferService.buffer.getNullCell(this._eraseAttrData()), + this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData() ); - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); } return true; } @@ -1471,14 +1463,11 @@ export class InputHandler extends Disposable implements IInputHandler { public scrollUp(params: IParams): boolean { let param = params.params[0] || 1; - // make buffer local for faster access - const buffer = this._bufferService.buffer; - while (param--) { - buffer.lines.splice(buffer.ybase + buffer.scrollTop, 1); - buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 0, buffer.getBlankLine(this._eraseAttrData())); + this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollTop, 1); + this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollBottom, 0, this._activeBuffer.getBlankLine(this._eraseAttrData())); } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1490,14 +1479,11 @@ export class InputHandler extends Disposable implements IInputHandler { public scrollDown(params: IParams): boolean { let param = params.params[0] || 1; - // make buffer local for faster access - const buffer = this._bufferService.buffer; - while (param--) { - buffer.lines.splice(buffer.ybase + buffer.scrollBottom, 1); - buffer.lines.splice(buffer.ybase + buffer.scrollTop, 0, buffer.getBlankLine(DEFAULT_ATTR_DATA)); + this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollBottom, 1); + this._activeBuffer.lines.splice(this._activeBuffer.ybase + this._activeBuffer.scrollTop, 0, this._activeBuffer.getBlankLine(DEFAULT_ATTR_DATA)); } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1520,17 +1506,16 @@ export class InputHandler extends Disposable implements IInputHandler { * SL has no effect outside of the scroll margins. */ public scrollLeft(params: IParams): boolean { - const buffer = this._bufferService.buffer; - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } const param = params.params[0] || 1; - for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) { - const line = buffer.lines.get(buffer.ybase + y)!; - line.deleteCells(0, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); + for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) { + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; + line.deleteCells(0, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); line.isWrapped = false; } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1554,17 +1539,16 @@ export class InputHandler extends Disposable implements IInputHandler { * SL has no effect outside of the scroll margins. */ public scrollRight(params: IParams): boolean { - const buffer = this._bufferService.buffer; - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } const param = params.params[0] || 1; - for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) { - const line = buffer.lines.get(buffer.ybase + y)!; - line.insertCells(0, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); + for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) { + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; + line.insertCells(0, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); line.isWrapped = false; } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1578,17 +1562,16 @@ export class InputHandler extends Disposable implements IInputHandler { * DECIC has no effect outside the scrolling margins. */ public insertColumns(params: IParams): boolean { - const buffer = this._bufferService.buffer; - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } const param = params.params[0] || 1; - for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) { - const line = this._bufferService.buffer.lines.get(buffer.ybase + y)!; - line.insertCells(buffer.x, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); + for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) { + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; + line.insertCells(this._activeBuffer.x, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); line.isWrapped = false; } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1602,17 +1585,16 @@ export class InputHandler extends Disposable implements IInputHandler { * DECDC has no effect outside the scrolling margins. */ public deleteColumns(params: IParams): boolean { - const buffer = this._bufferService.buffer; - if (buffer.y > buffer.scrollBottom || buffer.y < buffer.scrollTop) { + if (this._activeBuffer.y > this._activeBuffer.scrollBottom || this._activeBuffer.y < this._activeBuffer.scrollTop) { return true; } const param = params.params[0] || 1; - for (let y = buffer.scrollTop; y <= buffer.scrollBottom; ++y) { - const line = buffer.lines.get(buffer.ybase + y)!; - line.deleteCells(buffer.x, param, buffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); + for (let y = this._activeBuffer.scrollTop; y <= this._activeBuffer.scrollBottom; ++y) { + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + y)!; + line.deleteCells(this._activeBuffer.x, param, this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData()); line.isWrapped = false; } - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); return true; } @@ -1626,15 +1608,15 @@ export class InputHandler extends Disposable implements IInputHandler { */ public eraseChars(params: IParams): boolean { this._restrictCursor(); - const line = this._bufferService.buffer.lines.get(this._bufferService.buffer.ybase + this._bufferService.buffer.y); + const line = this._activeBuffer.lines.get(this._activeBuffer.ybase + this._activeBuffer.y); if (line) { line.replaceCells( - this._bufferService.buffer.x, - this._bufferService.buffer.x + (params.params[0] || 1), - this._bufferService.buffer.getNullCell(this._eraseAttrData()), + this._activeBuffer.x, + this._activeBuffer.x + (params.params[0] || 1), + this._activeBuffer.getNullCell(this._eraseAttrData()), this._eraseAttrData() ); - this._dirtyRowService.markDirty(this._bufferService.buffer.y); + this._dirtyRowService.markDirty(this._activeBuffer.y); } return true; } @@ -1976,6 +1958,7 @@ export class InputHandler extends Disposable implements IInputHandler { // focusin: ^[[I // focusout: ^[[O this._coreService.decPrivateModes.sendFocus = true; + this._onRequestSendFocus.fire(); break; case 1005: // utf8 ext mode mouse - removed in #2507 this._logService.debug('DECSET 1005 not supported (see #2507)'); @@ -2365,7 +2348,7 @@ export class InputHandler extends Disposable implements IInputHandler { * | 6 | Rapidly blinking. | #N | * | 7 | Inverse. Flips foreground and background color. | #Y | * | 8 | Invisible (hidden). | #Y | - * | 9 | Crossed-out characters. | #N | + * | 9 | Crossed-out characters (strikethrough). | #Y | * | 21 | Doubly underlined. | #P[Currently outputs a single underline.] | * | 22 | Normal (neither bold nor faint). | #Y | * | 23 | No italic. | #Y | @@ -2373,7 +2356,7 @@ export class InputHandler extends Disposable implements IInputHandler { * | 25 | Steady (not blinking). | #Y | * | 27 | Positive (not inverse). | #Y | * | 28 | Visible (not hidden). | #Y | - * | 29 | Not Crossed-out. | #N | + * | 29 | Not Crossed-out (strikethrough). | #Y | * | 30 | Foreground color: Black. | #Y | * | 31 | Foreground color: Red. | #Y | * | 32 | Foreground color: Green. | #Y | @@ -2478,6 +2461,9 @@ export class InputHandler extends Disposable implements IInputHandler { } else if (p === 8) { // invisible attr.fg |= FgFlags.INVISIBLE; + } else if (p === 9) { + // strikethrough + attr.fg |= FgFlags.STRIKETHROUGH; } else if (p === 2) { // dimmed text attr.bg |= BgFlags.DIM; @@ -2503,6 +2489,9 @@ export class InputHandler extends Disposable implements IInputHandler { } else if (p === 28) { // not invisible attr.fg &= ~FgFlags.INVISIBLE; + } else if (p === 29) { + // not strikethrough + attr.fg &= ~FgFlags.STRIKETHROUGH; } else if (p === 39) { // reset fg attr.fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK); @@ -2564,8 +2553,8 @@ export class InputHandler extends Disposable implements IInputHandler { break; case 6: // cursor position - const y = this._bufferService.buffer.y + 1; - const x = this._bufferService.buffer.x + 1; + const y = this._activeBuffer.y + 1; + const x = this._activeBuffer.x + 1; this._coreService.triggerDataEvent(`${C0.ESC}[${y};${x}R`); break; } @@ -2579,8 +2568,8 @@ export class InputHandler extends Disposable implements IInputHandler { switch (params.params[0]) { case 6: // cursor position - const y = this._bufferService.buffer.y + 1; - const x = this._bufferService.buffer.x + 1; + const y = this._activeBuffer.y + 1; + const x = this._activeBuffer.x + 1; this._coreService.triggerDataEvent(`${C0.ESC}[?${y};${x}R`); break; case 15: @@ -2625,18 +2614,18 @@ export class InputHandler extends Disposable implements IInputHandler { public softReset(params: IParams): boolean { this._coreService.isCursorHidden = false; this._onRequestSyncScrollBar.fire(); - this._bufferService.buffer.scrollTop = 0; - this._bufferService.buffer.scrollBottom = this._bufferService.rows - 1; + this._activeBuffer.scrollTop = 0; + this._activeBuffer.scrollBottom = this._bufferService.rows - 1; this._curAttrData = DEFAULT_ATTR_DATA.clone(); this._coreService.reset(); this._charsetService.reset(); // reset DECSC data - this._bufferService.buffer.savedX = 0; - this._bufferService.buffer.savedY = this._bufferService.buffer.ybase; - this._bufferService.buffer.savedCurAttrData.fg = this._curAttrData.fg; - this._bufferService.buffer.savedCurAttrData.bg = this._curAttrData.bg; - this._bufferService.buffer.savedCharset = this._charsetService.charset; + this._activeBuffer.savedX = 0; + this._activeBuffer.savedY = this._activeBuffer.ybase; + this._activeBuffer.savedCurAttrData.fg = this._curAttrData.fg; + this._activeBuffer.savedCurAttrData.bg = this._curAttrData.bg; + this._activeBuffer.savedCharset = this._charsetService.charset; // reset DECOM this._coreService.decPrivateModes.origin = false; @@ -2699,8 +2688,8 @@ export class InputHandler extends Disposable implements IInputHandler { } if (bottom > top) { - this._bufferService.buffer.scrollTop = top - 1; - this._bufferService.buffer.scrollBottom = bottom - 1; + this._activeBuffer.scrollTop = top - 1; + this._activeBuffer.scrollBottom = bottom - 1; this._setCursor(0, 0); } return true; @@ -2795,11 +2784,11 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y ESC SC "Save Cursor" "ESC 7" "Save cursor position, charmap and text attributes." */ public saveCursor(params?: IParams): boolean { - this._bufferService.buffer.savedX = this._bufferService.buffer.x; - this._bufferService.buffer.savedY = this._bufferService.buffer.ybase + this._bufferService.buffer.y; - this._bufferService.buffer.savedCurAttrData.fg = this._curAttrData.fg; - this._bufferService.buffer.savedCurAttrData.bg = this._curAttrData.bg; - this._bufferService.buffer.savedCharset = this._charsetService.charset; + this._activeBuffer.savedX = this._activeBuffer.x; + this._activeBuffer.savedY = this._activeBuffer.ybase + this._activeBuffer.y; + this._activeBuffer.savedCurAttrData.fg = this._curAttrData.fg; + this._activeBuffer.savedCurAttrData.bg = this._curAttrData.bg; + this._activeBuffer.savedCharset = this._charsetService.charset; return true; } @@ -2813,13 +2802,13 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y ESC RC "Restore Cursor" "ESC 8" "Restore cursor position, charmap and text attributes." */ public restoreCursor(params?: IParams): boolean { - this._bufferService.buffer.x = this._bufferService.buffer.savedX || 0; - this._bufferService.buffer.y = Math.max(this._bufferService.buffer.savedY - this._bufferService.buffer.ybase, 0); - this._curAttrData.fg = this._bufferService.buffer.savedCurAttrData.fg; - this._curAttrData.bg = this._bufferService.buffer.savedCurAttrData.bg; + this._activeBuffer.x = this._activeBuffer.savedX || 0; + this._activeBuffer.y = Math.max(this._activeBuffer.savedY - this._activeBuffer.ybase, 0); + this._curAttrData.fg = this._activeBuffer.savedCurAttrData.fg; + this._curAttrData.bg = this._activeBuffer.savedCurAttrData.bg; this._charsetService.charset = (this as any)._savedCharset; - if (this._bufferService.buffer.savedCharset) { - this._charsetService.charset = this._bufferService.buffer.savedCharset; + if (this._activeBuffer.savedCharset) { + this._charsetService.charset = this._activeBuffer.savedCharset; } this._restrictCursor(); return true; @@ -2901,7 +2890,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y ESC NEL "Next Line" "ESC E" "Move the cursor to the beginning of the next row." */ public nextLine(): boolean { - this._bufferService.buffer.x = 0; + this._activeBuffer.x = 0; this.index(); return true; } @@ -2981,13 +2970,12 @@ export class InputHandler extends Disposable implements IInputHandler { */ public index(): boolean { this._restrictCursor(); - const buffer = this._bufferService.buffer; - this._bufferService.buffer.y++; - if (buffer.y === buffer.scrollBottom + 1) { - buffer.y--; + this._activeBuffer.y++; + if (this._activeBuffer.y === this._activeBuffer.scrollBottom + 1) { + this._activeBuffer.y--; this._bufferService.scroll(this._eraseAttrData()); - } else if (buffer.y >= this._bufferService.rows) { - buffer.y = this._bufferService.rows - 1; + } else if (this._activeBuffer.y >= this._bufferService.rows) { + this._activeBuffer.y = this._bufferService.rows - 1; } this._restrictCursor(); return true; @@ -3004,7 +2992,7 @@ export class InputHandler extends Disposable implements IInputHandler { * @vt: #Y ESC HTS "Horizontal Tabulation Set" "ESC H" "Places a tab stop at the current cursor position." */ public tabSet(): boolean { - this._bufferService.buffer.tabs[this._bufferService.buffer.x] = true; + this._activeBuffer.tabs[this._activeBuffer.x] = true; return true; } @@ -3019,17 +3007,16 @@ export class InputHandler extends Disposable implements IInputHandler { */ public reverseIndex(): boolean { this._restrictCursor(); - const buffer = this._bufferService.buffer; - if (buffer.y === buffer.scrollTop) { + if (this._activeBuffer.y === this._activeBuffer.scrollTop) { // possibly move the code below to term.reverseScroll(); // test: echo -ne '\e[1;1H\e[44m\eM\e[0m' // blankLine(true) is xterm/linux behavior - const scrollRegionHeight = buffer.scrollBottom - buffer.scrollTop; - buffer.lines.shiftElements(buffer.ybase + buffer.y, scrollRegionHeight, 1); - buffer.lines.set(buffer.ybase + buffer.y, buffer.getBlankLine(this._eraseAttrData())); - this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom); + const scrollRegionHeight = this._activeBuffer.scrollBottom - this._activeBuffer.scrollTop; + this._activeBuffer.lines.shiftElements(this._activeBuffer.ybase + this._activeBuffer.y, scrollRegionHeight, 1); + this._activeBuffer.lines.set(this._activeBuffer.ybase + this._activeBuffer.y, this._activeBuffer.getBlankLine(this._eraseAttrData())); + this._dirtyRowService.markRangeDirty(this._activeBuffer.scrollTop, this._activeBuffer.scrollBottom); } else { - buffer.y--; + this._activeBuffer.y--; this._restrictCursor(); // quickfix to not run out of bounds } return true; @@ -3090,12 +3077,11 @@ export class InputHandler extends Disposable implements IInputHandler { cell.fg = this._curAttrData.fg; cell.bg = this._curAttrData.bg; - const buffer = this._bufferService.buffer; this._setCursor(0, 0); for (let yOffset = 0; yOffset < this._bufferService.rows; ++yOffset) { - const row = buffer.ybase + buffer.y + yOffset; - const line = buffer.lines.get(row); + const row = this._activeBuffer.ybase + this._activeBuffer.y + yOffset; + const line = this._activeBuffer.lines.get(row); if (line) { line.fill(cell); line.isWrapped = false; diff --git a/src/common/Types.d.ts b/src/common/Types.d.ts index df2991956..78e2e62d1 100644 --- a/src/common/Types.d.ts +++ b/src/common/Types.d.ts @@ -7,11 +7,19 @@ import { IFunctionIdentifier, ITerminalOptions as IPublicTerminalOptions } from import { IEvent, IEventEmitter } from 'common/EventEmitter'; import { IDeleteEvent, IInsertEvent } from 'common/CircularList'; import { IParams } from 'common/parser/Types'; -import { IOptionsService, IUnicodeService } from 'common/services/Services'; +import { ICoreMouseService, ICoreService, IOptionsService, IUnicodeService } from 'common/services/Services'; +import { IBufferSet } from 'common/buffer/Types'; export interface ICoreTerminal { + coreMouseService: ICoreMouseService; + coreService: ICoreService; optionsService: IOptionsService; unicodeService: IUnicodeService; + buffers: IBufferSet; + registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise): IDisposable; + registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise): IDisposable; + registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise): IDisposable; + registerOscHandler(ident: number, callback: (data: string) => boolean | Promise): IDisposable; } export interface IDisposable { @@ -117,6 +125,7 @@ export interface IAttributeData { isInvisible(): number; isItalic(): number; isDim(): number; + isStrikethrough(): number; // color modes getFgColorMode(): number; diff --git a/src/common/buffer/AttributeData.ts b/src/common/buffer/AttributeData.ts index c7217a2a0..43d378eaf 100644 --- a/src/common/buffer/AttributeData.ts +++ b/src/common/buffer/AttributeData.ts @@ -33,13 +33,14 @@ export class AttributeData implements IAttributeData { public extended = new ExtendedAttrs(); // flags - public isInverse(): number { return this.fg & FgFlags.INVERSE; } - public isBold(): number { return this.fg & FgFlags.BOLD; } - public isUnderline(): number { return this.fg & FgFlags.UNDERLINE; } - public isBlink(): number { return this.fg & FgFlags.BLINK; } - public isInvisible(): number { return this.fg & FgFlags.INVISIBLE; } - public isItalic(): number { return this.bg & BgFlags.ITALIC; } - public isDim(): number { return this.bg & BgFlags.DIM; } + public isInverse(): number { return this.fg & FgFlags.INVERSE; } + public isBold(): number { return this.fg & FgFlags.BOLD; } + public isUnderline(): number { return this.fg & FgFlags.UNDERLINE; } + public isBlink(): number { return this.fg & FgFlags.BLINK; } + public isInvisible(): number { return this.fg & FgFlags.INVISIBLE; } + public isItalic(): number { return this.bg & BgFlags.ITALIC; } + public isDim(): number { return this.bg & BgFlags.DIM; } + public isStrikethrough(): number { return this.fg & FgFlags.STRIKETHROUGH; } // color modes public getFgColorMode(): number { return this.fg & Attributes.CM_MASK; } diff --git a/src/common/buffer/BufferSet.ts b/src/common/buffer/BufferSet.ts index b74c4eac7..de220e8ff 100644 --- a/src/common/buffer/BufferSet.ts +++ b/src/common/buffer/BufferSet.ts @@ -42,6 +42,10 @@ export class BufferSet extends Disposable implements IBufferSet { // See http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#h2-The-Alternate-Screen-Buffer this._alt = new Buffer(false, this._optionsService, this._bufferService); this._activeBuffer = this._normal; + this._onBufferActivate.fire({ + activeBuffer: this._normal, + inactiveBuffer: this._alt + }); this.setupTabStops(); } diff --git a/src/common/buffer/Constants.ts b/src/common/buffer/Constants.ts index ee86a804d..a2c1b884c 100644 --- a/src/common/buffer/Constants.ts +++ b/src/common/buffer/Constants.ts @@ -110,13 +110,14 @@ export const enum Attributes { export const enum FgFlags { /** - * bit 27..31 (32th bit unused) + * bit 27..32 */ INVERSE = 0x4000000, BOLD = 0x8000000, UNDERLINE = 0x10000000, BLINK = 0x20000000, - INVISIBLE = 0x40000000 + INVISIBLE = 0x40000000, + STRIKETHROUGH = 0x80000000, } export const enum BgFlags { diff --git a/src/browser/public/AddonManager.test.ts b/src/common/public/AddonManager.test.ts similarity index 100% rename from src/browser/public/AddonManager.test.ts rename to src/common/public/AddonManager.test.ts diff --git a/src/browser/public/AddonManager.ts b/src/common/public/AddonManager.ts similarity index 100% rename from src/browser/public/AddonManager.ts rename to src/common/public/AddonManager.ts diff --git a/src/common/public/BufferApiView.ts b/src/common/public/BufferApiView.ts new file mode 100644 index 000000000..ca9ef2d8f --- /dev/null +++ b/src/common/public/BufferApiView.ts @@ -0,0 +1,35 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { IBuffer as IBufferApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi } from 'xterm'; +import { IBuffer } from 'common/buffer/Types'; +import { BufferLineApiView } from 'common/public/BufferLineApiView'; +import { CellData } from 'common/buffer/CellData'; + +export class BufferApiView implements IBufferApi { + constructor( + private _buffer: IBuffer, + public readonly type: 'normal' | 'alternate' + ) { } + + public init(buffer: IBuffer): BufferApiView { + this._buffer = buffer; + return this; + } + + public get cursorY(): number { return this._buffer.y; } + public get cursorX(): number { return this._buffer.x; } + public get viewportY(): number { return this._buffer.ydisp; } + public get baseY(): number { return this._buffer.ybase; } + public get length(): number { return this._buffer.lines.length; } + public getLine(y: number): IBufferLineApi | undefined { + const line = this._buffer.lines.get(y); + if (!line) { + return undefined; + } + return new BufferLineApiView(line); + } + public getNullCell(): IBufferCellApi { return new CellData(); } +} diff --git a/src/common/public/BufferLineApiView.ts b/src/common/public/BufferLineApiView.ts new file mode 100644 index 000000000..60375015d --- /dev/null +++ b/src/common/public/BufferLineApiView.ts @@ -0,0 +1,29 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { CellData } from 'common/buffer/CellData'; +import { IBufferLine, ICellData } from 'common/Types'; +import { IBufferCell as IBufferCellApi, IBufferLine as IBufferLineApi } from 'xterm'; + +export class BufferLineApiView implements IBufferLineApi { + constructor(private _line: IBufferLine) { } + + public get isWrapped(): boolean { return this._line.isWrapped; } + public get length(): number { return this._line.length; } + public getCell(x: number, cell?: IBufferCellApi): IBufferCellApi | undefined { + if (x < 0 || x >= this._line.length) { + return undefined; + } + + if (cell) { + this._line.loadCell(x, cell as ICellData); + return cell; + } + return this._line.loadCell(x, new CellData()); + } + public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string { + return this._line.translateToString(trimRight, startColumn, endColumn); + } +} diff --git a/src/common/public/BufferNamespaceApi.ts b/src/common/public/BufferNamespaceApi.ts new file mode 100644 index 000000000..d86f6bf5a --- /dev/null +++ b/src/common/public/BufferNamespaceApi.ts @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { IBuffer as IBufferApi, IBufferNamespace as IBufferNamespaceApi } from 'xterm'; +import { BufferApiView } from 'common/public/BufferApiView'; +import { IEvent, EventEmitter } from 'common/EventEmitter'; +import { ICoreTerminal } from 'common/Types'; + +export class BufferNamespaceApi implements IBufferNamespaceApi { + private _normal: BufferApiView; + private _alternate: BufferApiView; + private _onBufferChange = new EventEmitter(); + public get onBufferChange(): IEvent { return this._onBufferChange.event; } + + constructor(private _core: ICoreTerminal) { + this._normal = new BufferApiView(this._core.buffers.normal, 'normal'); + this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate'); + this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active)); + } + public get active(): IBufferApi { + if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; } + if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; } + throw new Error('Active buffer is neither normal nor alternate'); + } + public get normal(): IBufferApi { + return this._normal.init(this._core.buffers.normal); + } + public get alternate(): IBufferApi { + return this._alternate.init(this._core.buffers.alt); + } +} diff --git a/src/common/public/ParserApi.ts b/src/common/public/ParserApi.ts new file mode 100644 index 000000000..67df4be53 --- /dev/null +++ b/src/common/public/ParserApi.ts @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { IParams } from 'common/parser/Types'; +import { IDisposable, IFunctionIdentifier, IParser } from 'xterm'; +import { ICoreTerminal } from 'common/Types'; + +export class ParserApi implements IParser { + constructor(private _core: ICoreTerminal) { } + + public registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise): IDisposable { + return this._core.registerCsiHandler(id, (params: IParams) => callback(params.toArray())); + } + public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise): IDisposable { + return this.registerCsiHandler(id, callback); + } + public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise): IDisposable { + return this._core.registerDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray())); + } + public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise): IDisposable { + return this.registerDcsHandler(id, callback); + } + public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise): IDisposable { + return this._core.registerEscHandler(id, handler); + } + public addEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise): IDisposable { + return this.registerEscHandler(id, handler); + } + public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise): IDisposable { + return this._core.registerOscHandler(ident, callback); + } + public addOscHandler(ident: number, callback: (data: string) => boolean | Promise): IDisposable { + return this.registerOscHandler(ident, callback); + } +} diff --git a/src/common/public/UnicodeApi.ts b/src/common/public/UnicodeApi.ts new file mode 100644 index 000000000..8a669a052 --- /dev/null +++ b/src/common/public/UnicodeApi.ts @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2021 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { ICoreTerminal } from 'common/Types'; +import { IUnicodeHandling, IUnicodeVersionProvider } from 'xterm'; + +export class UnicodeApi implements IUnicodeHandling { + constructor(private _core: ICoreTerminal) { } + + public register(provider: IUnicodeVersionProvider): void { + this._core.unicodeService.register(provider); + } + + public get versions(): string[] { + return this._core.unicodeService.versions; + } + + public get activeVersion(): string { + return this._core.unicodeService.activeVersion; + } + + public set activeVersion(version: string) { + this._core.unicodeService.activeVersion = version; + } +} diff --git a/src/common/services/BufferService.ts b/src/common/services/BufferService.ts index 99594d228..c8c5f2731 100644 --- a/src/common/services/BufferService.ts +++ b/src/common/services/BufferService.ts @@ -36,8 +36,8 @@ export class BufferService extends Disposable implements IBufferService { @IOptionsService private _optionsService: IOptionsService ) { super(); - this.cols = Math.max(_optionsService.options.cols, MINIMUM_COLS); - this.rows = Math.max(_optionsService.options.rows, MINIMUM_ROWS); + this.cols = Math.max(_optionsService.options.cols || 0, MINIMUM_COLS); + this.rows = Math.max(_optionsService.options.rows || 0, MINIMUM_ROWS); this.buffers = new BufferSet(_optionsService, this); } diff --git a/src/common/services/OptionsService.test.ts b/src/common/services/OptionsService.test.ts index c289b5be1..8675b6b99 100644 --- a/src/common/services/OptionsService.test.ts +++ b/src/common/services/OptionsService.test.ts @@ -15,6 +15,16 @@ describe('OptionsService', () => { afterEach(() => { console.error = originalError; }); + it('uses default value if invalid constructor option values passed for cols/rows', () => { + const optionsService = new OptionsService({ cols: undefined, rows: undefined }); + assert.equal(optionsService.getOption('rows'), DEFAULT_OPTIONS.rows); + assert.equal(optionsService.getOption('cols'), DEFAULT_OPTIONS.cols); + }); + it('uses values from constructor option values if correctly passed', () => { + const optionsService = new OptionsService({ cols: 80, rows: 25 }); + assert.equal(optionsService.getOption('rows'), 25); + assert.equal(optionsService.getOption('cols'), 80); + }); it('uses default value if invalid constructor option value passed', () => { assert.equal(new OptionsService({tabStopWidth: 0}).getOption('tabStopWidth'), DEFAULT_OPTIONS.tabStopWidth); }); diff --git a/src/common/services/OptionsService.ts b/src/common/services/OptionsService.ts index b7a1c58e0..e9dcaa6a7 100644 --- a/src/common/services/OptionsService.ts +++ b/src/common/services/OptionsService.ts @@ -21,6 +21,7 @@ export const DEFAULT_OPTIONS: ITerminalOptions = Object.freeze({ cursorBlink: false, cursorStyle: 'block', cursorWidth: 1, + customGlyphs: true, bellSound: DEFAULT_BELL_SOUND, bellStyle: 'none', drawBoldTextInBrightColors: true, @@ -148,6 +149,11 @@ export class OptionsService implements IOptionsService { if (value <= 0) { throw new Error(`${key} cannot be less than or equal to 0, value: ${value}`); } + case 'rows': + case 'cols': + if (!value && value !== 0) { + throw new Error(`${key} must be numeric, value: ${value}`); + } break; } return value; diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts index ce2973222..2190a0f8f 100644 --- a/src/common/services/Services.ts +++ b/src/common/services/Services.ts @@ -244,6 +244,7 @@ export interface ITerminalOptions { cursorBlink: boolean; cursorStyle: 'block' | 'underline' | 'bar'; cursorWidth: number; + customGlyphs: boolean; disableStdin: boolean; drawBoldTextInBrightColors: boolean; fastScrollModifier: 'alt' | 'ctrl' | 'shift' | undefined; diff --git a/src/headless/Terminal.ts b/src/headless/Terminal.ts new file mode 100644 index 000000000..7f138ce1d --- /dev/null +++ b/src/headless/Terminal.ts @@ -0,0 +1,170 @@ +/** + * Copyright (c) 2014 The xterm.js authors. All rights reserved. + * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) + * @license MIT + * + * Originally forked from (with the author's permission): + * Fabrice Bellard's javascript vt100 for jslinux: + * http://bellard.org/jslinux/ + * Copyright (c) 2011 Fabrice Bellard + * The original design remains. The terminal itself + * has been extended to include xterm CSI codes, among + * other features. + * + * Terminal Emulation References: + * http://vt100.net/ + * http://invisible-island.net/xterm/ctlseqs/ctlseqs.txt + * http://invisible-island.net/xterm/ctlseqs/ctlseqs.html + * http://invisible-island.net/vttest/ + * http://www.inwap.com/pdp10/ansicode.txt + * http://linux.die.net/man/4/console_codes + * http://linux.die.net/man/7/urxvt + */ + +import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine'; +import { IBuffer } from 'common/buffer/Types'; +import { CoreTerminal } from 'common/CoreTerminal'; +import { EventEmitter, forwardEvent, IEvent } from 'common/EventEmitter'; +import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services'; +import { IMarker, ITerminalOptions, ScrollSource } from 'common/Types'; + +export class Terminal extends CoreTerminal { + // TODO: We should remove options once components adopt optionsService + public get options(): IInitializedTerminalOptions { return this.optionsService.options; } + + private _onBell = new EventEmitter(); + public get onBell(): IEvent { return this._onBell.event; } + private _onCursorMove = new EventEmitter(); + public get onCursorMove(): IEvent { return this._onCursorMove.event; } + private _onTitleChange = new EventEmitter(); + public get onTitleChange(): IEvent { return this._onTitleChange.event; } + + private _onA11yCharEmitter = new EventEmitter(); + public get onA11yChar(): IEvent { return this._onA11yCharEmitter.event; } + private _onA11yTabEmitter = new EventEmitter(); + public get onA11yTab(): IEvent { return this._onA11yTabEmitter.event; } + + /** + * Creates a new `Terminal` object. + * + * @param options An object containing a set of options, the available options are: + * - `cursorBlink` (boolean): Whether the terminal cursor blinks + * - `cols` (number): The number of columns of the terminal (horizontal size) + * - `rows` (number): The number of rows of the terminal (vertical size) + * + * @public + * @class Xterm Xterm + * @alias module:xterm/src/xterm + */ + constructor( + options: ITerminalOptions = {} + ) { + super(options); + + this._setup(); + + // Setup InputHandler listeners + this.register(this._inputHandler.onRequestBell(() => this.bell())); + this.register(this._inputHandler.onRequestReset(() => this.reset())); + this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove)); + this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange)); + this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter)); + this.register(forwardEvent(this._inputHandler.onA11yTab, this._onA11yTabEmitter)); + } + + public dispose(): void { + if (this._isDisposed) { + return; + } + super.dispose(); + this.write = () => { }; + } + + /** + * Convenience property to active buffer. + */ + public get buffer(): IBuffer { + return this.buffers.active; + } + + protected _updateOptions(key: string): void { + super._updateOptions(key); + + // TODO: These listeners should be owned by individual components + switch (key) { + case 'tabStopWidth': this.buffers.setupTabStops(); break; + } + } + + // TODO: Support paste here? + + public get markers(): IMarker[] { + return this.buffer.markers; + } + + public addMarker(cursorYOffset: number): IMarker | undefined { + // Disallow markers on the alt buffer + if (this.buffer !== this.buffers.normal) { + return; + } + + return this.buffer.addMarker(this.buffer.ybase + this.buffer.y + cursorYOffset); + } + + public bell(): void { + this._onBell.fire(); + } + + /** + * Resizes the terminal. + * + * @param x The number of columns to resize to. + * @param y The number of rows to resize to. + */ + public resize(x: number, y: number): void { + if (x === this.cols && y === this.rows) { + return; + } + + super.resize(x, y); + } + + /** + * Clear the entire buffer, making the prompt line the new first line. + */ + public clear(): void { + if (this.buffer.ybase === 0 && this.buffer.y === 0) { + // Don't clear if it's already clear + return; + } + this.buffer.lines.set(0, this.buffer.lines.get(this.buffer.ybase + this.buffer.y)!); + this.buffer.lines.length = 1; + this.buffer.ydisp = 0; + this.buffer.ybase = 0; + this.buffer.y = 0; + for (let i = 1; i < this.rows; i++) { + this.buffer.lines.push(this.buffer.getBlankLine(DEFAULT_ATTR_DATA)); + } + this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL }); + } + + /** + * Reset terminal. + * Note: Calling this directly from JS is synchronous but does not clear + * input buffers and does not reset the parser, thus the terminal will + * continue to apply pending input data. + * If you need in band reset (synchronous with input data) consider + * using DECSTR (soft reset, CSI ! p) or RIS instead (hard reset, ESC c). + */ + public reset(): void { + /** + * Since _setup handles a full terminal creation, we have to carry forward + * a few things that should not reset. + */ + this.options.rows = this.rows; + this.options.cols = this.cols; + + this._setup(); + super.reset(); + } +} diff --git a/src/headless/Types.d.ts b/src/headless/Types.d.ts new file mode 100644 index 000000000..868e5c178 --- /dev/null +++ b/src/headless/Types.d.ts @@ -0,0 +1,31 @@ +import { IBuffer, IBufferSet } from 'common/buffer/Types'; +import { IEvent } from 'common/EventEmitter'; +import { IFunctionIdentifier, IParams } from 'common/parser/Types'; +import { ICoreTerminal, IDisposable, IMarker, ITerminalOptions } from 'common/Types'; + +export interface ITerminal extends ICoreTerminal { + rows: number; + cols: number; + buffer: IBuffer; + buffers: IBufferSet; + markers: IMarker[]; + // TODO: We should remove options once components adopt optionsService + options: ITerminalOptions; + + onCursorMove: IEvent; + onData: IEvent; + onBinary: IEvent; + onLineFeed: IEvent; + onResize: IEvent<{ cols: number, rows: number }>; + onTitleChange: IEvent; + resize(columns: number, rows: number): void; + addCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean): IDisposable; + addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean): IDisposable; + addEscHandler(id: IFunctionIdentifier, callback: () => boolean): IDisposable; + addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable; + addMarker(cursorYOffset: number): IMarker | undefined; + dispose(): void; + clear(): void; + write(data: string | Uint8Array, callback?: () => void): void; + reset(): void; +} diff --git a/src/headless/public/Terminal.test.ts b/src/headless/public/Terminal.test.ts new file mode 100644 index 000000000..4247aae9e --- /dev/null +++ b/src/headless/public/Terminal.test.ts @@ -0,0 +1,468 @@ +/** + * Copyright (c) 2019 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { deepStrictEqual, strictEqual, throws } from 'assert'; +import { Terminal } from 'headless/public/Terminal'; + +let term: Terminal; + +describe('Headless API Tests', function(): void { + beforeEach(() => { + // Create default terminal to be used by most tests + term = new Terminal(); + }); + + it('Default options', async () => { + strictEqual(term.cols, 80); + strictEqual(term.rows, 24); + }); + + it('Proposed API check', async () => { + term = new Terminal({ allowProposedApi: false }); + throws(() => term.buffer, (error) => error.message === 'You must set the allowProposedApi option to true to use proposed API'); + }); + + it('write', async () => { + await writeSync('foo'); + await writeSync('bar'); + await writeSync('文'); + lineEquals(0, 'foobar文'); + }); + + it('write with callback', async () => { + let result: string | undefined; + await new Promise(r => { + term.write('foo', () => { result = 'a'; }); + term.write('bar', () => { result += 'b'; }); + term.write('文', () => { + result += 'c'; + r(); + }); + }); + lineEquals(0, 'foobar文'); + strictEqual(result, 'abc'); + }); + + it('write - bytes (UTF8)', async () => { + await writeSync(new Uint8Array([102, 111, 111])); // foo + await writeSync(new Uint8Array([98, 97, 114])); // bar + await writeSync(new Uint8Array([230, 150, 135])); // 文 + lineEquals(0, 'foobar文'); + }); + + it('write - bytes (UTF8) with callback', async () => { + let result: string | undefined; + await new Promise(r => { + term.write(new Uint8Array([102, 111, 111]), () => { result = 'A'; }); // foo + term.write(new Uint8Array([98, 97, 114]), () => { result += 'B'; }); // bar + term.write(new Uint8Array([230, 150, 135]), () => { // 文 + result += 'C'; + r(); + }); + }); + lineEquals(0, 'foobar文'); + strictEqual(result, 'ABC'); + }); + + it('writeln', async () => { + await writelnSync('foo'); + await writelnSync('bar'); + await writelnSync('文'); + lineEquals(0, 'foo'); + lineEquals(1, 'bar'); + lineEquals(2, '文'); + }); + + it('writeln with callback', async () => { + let result: string | undefined; + await new Promise(r => { + term.writeln('foo', () => { result = '1'; }); + term.writeln('bar', () => { result += '2'; }); + term.writeln('文', () => { + result += '3'; + r(); + }); + }); + lineEquals(0, 'foo'); + lineEquals(1, 'bar'); + lineEquals(2, '文'); + strictEqual(result, '123'); + }); + + it('writeln - bytes (UTF8)', async () => { + await writelnSync(new Uint8Array([102, 111, 111])); + await writelnSync(new Uint8Array([98, 97, 114])); + await writelnSync(new Uint8Array([230, 150, 135])); + lineEquals(0, 'foo'); + lineEquals(1, 'bar'); + lineEquals(2, '文'); + }); + + it('clear', async () => { + term = new Terminal({ rows: 5 }); + for (let i = 0; i < 10; i++) { + await writeSync('\n\rtest' + i); + } + term.clear(); + strictEqual(term.buffer.active.length, 5); + lineEquals(0, 'test9'); + for (let i = 1; i < 5; i++) { + lineEquals(i, ''); + } + }); + + it('getOption, setOption', async () => { + strictEqual(term.getOption('scrollback'), 1000); + term.setOption('scrollback', 50); + strictEqual(term.getOption('scrollback'), 50); + }); + + describe('loadAddon', () => { + it('constructor', async () => { + term = new Terminal({ cols: 5 }); + let cols = 0; + term.loadAddon({ + activate: (t) => cols = t.cols, + dispose: () => {} + }); + strictEqual(cols, 5); + }); + + it('dispose (addon)', async () => { + let disposeCalled = false; + const addon = { + activate: () => {}, + dispose: () => disposeCalled = true + }; + term.loadAddon(addon); + strictEqual(disposeCalled, false); + addon.dispose(); + strictEqual(disposeCalled, true); + }); + + it('dispose (terminal)', async () => { + let disposeCalled = false; + term.loadAddon({ + activate: () => {}, + dispose: () => disposeCalled = true + }); + strictEqual(disposeCalled, false); + term.dispose(); + strictEqual(disposeCalled, true); + }); + }); + + describe('Events', () => { + it('onCursorMove', async () => { + let callCount = 0; + term.onCursorMove(e => callCount++); + await writeSync('foo'); + strictEqual(callCount, 1); + await writeSync('bar'); + strictEqual(callCount, 2); + }); + + it('onData', async () => { + const calls: string[] = []; + term.onData(e => calls.push(e)); + await writeSync('\x1b[5n'); // DSR Status Report + deepStrictEqual(calls, ['\x1b[0n']); + }); + + it('onLineFeed', async () => { + let callCount = 0; + term.onLineFeed(() => callCount++); + await writelnSync('foo'); + strictEqual(callCount, 1); + await writelnSync('bar'); + strictEqual(callCount, 2); + }); + + it('onScroll', async () => { + term = new Terminal({ rows: 5 }); + const calls: number[] = []; + term.onScroll(e => calls.push(e)); + for (let i = 0; i < 4; i++) { + await writelnSync('foo'); + } + deepStrictEqual(calls, []); + await writelnSync('bar'); + deepStrictEqual(calls, [1]); + await writelnSync('baz'); + deepStrictEqual(calls, [1, 2]); + }); + + it('onResize', async () => { + const calls: [number, number][] = []; + term.onResize(e => calls.push([e.cols, e.rows])); + deepStrictEqual(calls, []); + term.resize(10, 5); + deepStrictEqual(calls, [[10, 5]]); + term.resize(20, 15); + deepStrictEqual(calls, [[10, 5], [20, 15]]); + }); + + it('onTitleChange', async () => { + const calls: string[] = []; + term.onTitleChange(e => calls.push(e)); + deepStrictEqual(calls, []); + await writeSync('\x1b]2;foo\x9c'); + deepStrictEqual(calls, ['foo']); + }); + + it('onBell', async () => { + const calls: boolean[] = []; + term.onBell(() => calls.push(true)); + deepStrictEqual(calls, []); + await writeSync('\x07'); + deepStrictEqual(calls, [true]); + }); + }); + + describe('buffer', () => { + it('cursorX, cursorY', async () => { + term = new Terminal({ rows: 5, cols: 5 }); + strictEqual(term.buffer.active.cursorX, 0); + strictEqual(term.buffer.active.cursorY, 0); + await writeSync('foo'); + strictEqual(term.buffer.active.cursorX, 3); + strictEqual(term.buffer.active.cursorY, 0); + await writeSync('\n'); + strictEqual(term.buffer.active.cursorX, 3); + strictEqual(term.buffer.active.cursorY, 1); + await writeSync('\r'); + strictEqual(term.buffer.active.cursorX, 0); + strictEqual(term.buffer.active.cursorY, 1); + await writeSync('abcde'); + strictEqual(term.buffer.active.cursorX, 5); + strictEqual(term.buffer.active.cursorY, 1); + await writeSync('\n\r\n\n\n\n\n'); + strictEqual(term.buffer.active.cursorX, 0); + strictEqual(term.buffer.active.cursorY, 4); + }); + + it('viewportY', async () => { + term = new Terminal({ rows: 5 }); + strictEqual(term.buffer.active.viewportY, 0); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.viewportY, 0); + await writeSync('\n'); + strictEqual(term.buffer.active.viewportY, 1); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.viewportY, 5); + term.scrollLines(-1); + strictEqual(term.buffer.active.viewportY, 4); + term.scrollToTop(); + strictEqual(term.buffer.active.viewportY, 0); + }); + + it('baseY', async () => { + term = new Terminal({ rows: 5 }); + strictEqual(term.buffer.active.baseY, 0); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.baseY, 0); + await writeSync('\n'); + strictEqual(term.buffer.active.baseY, 1); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.baseY, 5); + term.scrollLines(-1); + strictEqual(term.buffer.active.baseY, 5); + term.scrollToTop(); + strictEqual(term.buffer.active.baseY, 5); + }); + + it('length', async () => { + term = new Terminal({ rows: 5 }); + strictEqual(term.buffer.active.length, 5); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.length, 5); + await writeSync('\n'); + strictEqual(term.buffer.active.length, 6); + await writeSync('\n\n\n\n'); + strictEqual(term.buffer.active.length, 10); + }); + + describe('getLine', () => { + it('invalid index', async () => { + term = new Terminal({ rows: 5 }); + strictEqual(term.buffer.active.getLine(-1), undefined); + strictEqual(term.buffer.active.getLine(5), undefined); + }); + + it('isWrapped', async () => { + term = new Terminal({ cols: 5 }); + strictEqual(term.buffer.active.getLine(0)!.isWrapped, false); + strictEqual(term.buffer.active.getLine(1)!.isWrapped, false); + await writeSync('abcde'); + strictEqual(term.buffer.active.getLine(0)!.isWrapped, false); + strictEqual(term.buffer.active.getLine(1)!.isWrapped, false); + await writeSync('f'); + strictEqual(term.buffer.active.getLine(0)!.isWrapped, false); + strictEqual(term.buffer.active.getLine(1)!.isWrapped, true); + }); + + it('translateToString', async () => { + term = new Terminal({ cols: 5 }); + strictEqual(term.buffer.active.getLine(0)!.translateToString(), ' '); + strictEqual(term.buffer.active.getLine(0)!.translateToString(true), ''); + await writeSync('foo'); + strictEqual(term.buffer.active.getLine(0)!.translateToString(), 'foo '); + strictEqual(term.buffer.active.getLine(0)!.translateToString(true), 'foo'); + await writeSync('bar'); + strictEqual(term.buffer.active.getLine(0)!.translateToString(), 'fooba'); + strictEqual(term.buffer.active.getLine(0)!.translateToString(true), 'fooba'); + strictEqual(term.buffer.active.getLine(1)!.translateToString(true), 'r'); + strictEqual(term.buffer.active.getLine(0)!.translateToString(false, 1), 'ooba'); + strictEqual(term.buffer.active.getLine(0)!.translateToString(false, 1, 3), 'oo'); + }); + + it('getCell', async () => { + term = new Terminal({ cols: 5 }); + strictEqual(term.buffer.active.getLine(0)!.getCell(-1), undefined); + strictEqual(term.buffer.active.getLine(0)!.getCell(5), undefined); + strictEqual(term.buffer.active.getLine(0)!.getCell(0)!.getChars(), ''); + strictEqual(term.buffer.active.getLine(0)!.getCell(0)!.getWidth(), 1); + await writeSync('a文'); + strictEqual(term.buffer.active.getLine(0)!.getCell(0)!.getChars(), 'a'); + strictEqual(term.buffer.active.getLine(0)!.getCell(0)!.getWidth(), 1); + strictEqual(term.buffer.active.getLine(0)!.getCell(1)!.getChars(), '文'); + strictEqual(term.buffer.active.getLine(0)!.getCell(1)!.getWidth(), 2); + strictEqual(term.buffer.active.getLine(0)!.getCell(2)!.getChars(), ''); + strictEqual(term.buffer.active.getLine(0)!.getCell(2)!.getWidth(), 0); + }); + }); + + it('active, normal, alternate', async () => { + term = new Terminal({ cols: 5 }); + strictEqual(term.buffer.active.type, 'normal'); + strictEqual(term.buffer.normal.type, 'normal'); + strictEqual(term.buffer.alternate.type, 'alternate'); + + await writeSync('norm '); + strictEqual(term.buffer.active.getLine(0)!.translateToString(), 'norm '); + strictEqual(term.buffer.normal.getLine(0)!.translateToString(), 'norm '); + strictEqual(term.buffer.alternate.getLine(0), undefined); + + await writeSync('\x1b[?47h\r'); // use alternate screen buffer + strictEqual(term.buffer.active.type, 'alternate'); + strictEqual(term.buffer.normal.type, 'normal'); + strictEqual(term.buffer.alternate.type, 'alternate'); + + strictEqual(term.buffer.active.getLine(0)!.translateToString(), ' '); + await writeSync('alt '); + strictEqual(term.buffer.active.getLine(0)!.translateToString(), 'alt '); + strictEqual(term.buffer.normal.getLine(0)!.translateToString(), 'norm '); + strictEqual(term.buffer.alternate.getLine(0)!.translateToString(), 'alt '); + + await writeSync('\x1b[?47l\r'); // use normal screen buffer + strictEqual(term.buffer.active.type, 'normal'); + strictEqual(term.buffer.normal.type, 'normal'); + strictEqual(term.buffer.alternate.type, 'alternate'); + + strictEqual(term.buffer.active.getLine(0)!.translateToString(), 'norm '); + strictEqual(term.buffer.normal.getLine(0)!.translateToString(), 'norm '); + strictEqual(term.buffer.alternate.getLine(0), undefined); + }); + }); + + describe('modes', () => { + it('defaults', () => { + deepStrictEqual(term.modes, { + applicationCursorKeysMode: false, + applicationKeypadMode: false, + bracketedPasteMode: false, + insertMode: false, + mouseTrackingMode: 'none', + originMode: false, + reverseWraparoundMode: false, + sendFocusMode: false, + wraparoundMode: true + }); + }); + it('applicationCursorKeysMode', async () => { + await writeSync('\x1b[?1h'); + strictEqual(term.modes.applicationCursorKeysMode, true); + await writeSync('\x1b[?1l'); + strictEqual(term.modes.applicationCursorKeysMode, false); + }); + it('applicationKeypadMode', async () => { + await writeSync('\x1b[?66h'); + strictEqual(term.modes.applicationKeypadMode, true); + await writeSync('\x1b[?66l'); + strictEqual(term.modes.applicationKeypadMode, false); + }); + it('bracketedPasteMode', async () => { + await writeSync('\x1b[?2004h'); + strictEqual(term.modes.bracketedPasteMode, true); + await writeSync('\x1b[?2004l'); + strictEqual(term.modes.bracketedPasteMode, false); + }); + it('insertMode', async () => { + await writeSync('\x1b[4h'); + strictEqual(term.modes.insertMode, true); + await writeSync('\x1b[4l'); + strictEqual(term.modes.insertMode, false); + }); + it('mouseTrackingMode', async () => { + await writeSync('\x1b[?9h'); + strictEqual(term.modes.mouseTrackingMode, 'x10'); + await writeSync('\x1b[?9l'); + strictEqual(term.modes.mouseTrackingMode, 'none'); + await writeSync('\x1b[?1000h'); + strictEqual(term.modes.mouseTrackingMode, 'vt200'); + await writeSync('\x1b[?1000l'); + strictEqual(term.modes.mouseTrackingMode, 'none'); + await writeSync('\x1b[?1002h'); + strictEqual(term.modes.mouseTrackingMode, 'drag'); + await writeSync('\x1b[?1002l'); + strictEqual(term.modes.mouseTrackingMode, 'none'); + await writeSync('\x1b[?1003h'); + strictEqual(term.modes.mouseTrackingMode, 'any'); + await writeSync('\x1b[?1003l'); + strictEqual(term.modes.mouseTrackingMode, 'none'); + }); + it('originMode', async () => { + await writeSync('\x1b[?6h'); + strictEqual(term.modes.originMode, true); + await writeSync('\x1b[?6l'); + strictEqual(term.modes.originMode, false); + }); + it('reverseWraparoundMode', async () => { + await writeSync('\x1b[?45h'); + strictEqual(term.modes.reverseWraparoundMode, true); + await writeSync('\x1b[?45l'); + strictEqual(term.modes.reverseWraparoundMode, false); + }); + it('sendFocusMode', async () => { + await writeSync('\x1b[?1004h'); + strictEqual(term.modes.sendFocusMode, true); + await writeSync('\x1b[?1004l'); + strictEqual(term.modes.sendFocusMode, false); + }); + it('wraparoundMode', async () => { + await writeSync('\x1b[?7h'); + strictEqual(term.modes.wraparoundMode, true); + await writeSync('\x1b[?7l'); + strictEqual(term.modes.wraparoundMode, false); + }); + }); + + it('dispose', async () => { + term.dispose(); + strictEqual((term as any)._core._isDisposed, true); + }); +}); + +function writeSync(text: string | Uint8Array): Promise { + return new Promise(r => term.write(text, r)); +} + +function writelnSync(text: string | Uint8Array): Promise { + return new Promise(r => term.writeln(text, r)); +} + +function lineEquals(index: number, text: string): void { + strictEqual(term.buffer.active.getLine(index)!.translateToString(true), text); +} diff --git a/src/headless/public/Terminal.ts b/src/headless/public/Terminal.ts new file mode 100644 index 000000000..29e835810 --- /dev/null +++ b/src/headless/public/Terminal.ts @@ -0,0 +1,166 @@ +/** + * Copyright (c) 2018 The xterm.js authors. All rights reserved. + * @license MIT + */ + +import { IEvent } from 'common/EventEmitter'; +import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi'; +import { ParserApi } from 'common/public/ParserApi'; +import { UnicodeApi } from 'common/public/UnicodeApi'; +import { IBufferNamespace as IBufferNamespaceApi, IMarker, IModes, IParser, ITerminalAddon, ITerminalOptions, IUnicodeHandling, Terminal as ITerminalApi } from 'xterm-headless'; +import { Terminal as TerminalCore } from 'headless/Terminal'; +import { AddonManager } from 'common/public/AddonManager'; + +export class Terminal implements ITerminalApi { + private _core: TerminalCore; + private _addonManager: AddonManager; + private _parser: IParser | undefined; + private _buffer: BufferNamespaceApi | undefined; + + constructor(options?: ITerminalOptions) { + this._core = new TerminalCore(options); + this._addonManager = new AddonManager(); + } + + private _checkProposedApi(): void { + if (!this._core.optionsService.options.allowProposedApi) { + throw new Error('You must set the allowProposedApi option to true to use proposed API'); + } + } + + public get onBell(): IEvent { return this._core.onBell; } + public get onBinary(): IEvent { return this._core.onBinary; } + public get onCursorMove(): IEvent { return this._core.onCursorMove; } + public get onData(): IEvent { return this._core.onData; } + public get onLineFeed(): IEvent { return this._core.onLineFeed; } + public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; } + public get onScroll(): IEvent { return this._core.onScroll; } + public get onTitleChange(): IEvent { return this._core.onTitleChange; } + + public get parser(): IParser { + this._checkProposedApi(); + if (!this._parser) { + this._parser = new ParserApi(this._core); + } + return this._parser; + } + public get unicode(): IUnicodeHandling { + this._checkProposedApi(); + return new UnicodeApi(this._core); + } + public get rows(): number { return this._core.rows; } + public get cols(): number { return this._core.cols; } + public get buffer(): IBufferNamespaceApi { + this._checkProposedApi(); + if (!this._buffer) { + this._buffer = new BufferNamespaceApi(this._core); + } + return this._buffer; + } + public get markers(): ReadonlyArray { + this._checkProposedApi(); + return this._core.markers; + } + public get modes(): IModes { + const m = this._core.coreService.decPrivateModes; + let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none'; + switch (this._core.coreMouseService.activeProtocol) { + case 'X10': mouseTrackingMode = 'x10'; break; + case 'VT200': mouseTrackingMode = 'vt200'; break; + case 'DRAG': mouseTrackingMode = 'drag'; break; + case 'ANY': mouseTrackingMode = 'any'; break; + } + return { + applicationCursorKeysMode: m.applicationCursorKeys, + applicationKeypadMode: m.applicationKeypad, + bracketedPasteMode: m.bracketedPasteMode, + insertMode: this._core.coreService.modes.insertMode, + mouseTrackingMode: mouseTrackingMode, + originMode: m.origin, + reverseWraparoundMode: m.reverseWraparound, + sendFocusMode: m.sendFocus, + wraparoundMode: m.wraparound + }; + } + public resize(columns: number, rows: number): void { + this._verifyIntegers(columns, rows); + this._core.resize(columns, rows); + } + public registerMarker(cursorYOffset: number): IMarker | undefined { + this._checkProposedApi(); + this._verifyIntegers(cursorYOffset); + return this._core.addMarker(cursorYOffset); + } + public addMarker(cursorYOffset: number): IMarker | undefined { + return this.registerMarker(cursorYOffset); + } + public dispose(): void { + this._addonManager.dispose(); + this._core.dispose(); + } + public scrollLines(amount: number): void { + this._verifyIntegers(amount); + this._core.scrollLines(amount); + } + public scrollPages(pageCount: number): void { + this._verifyIntegers(pageCount); + this._core.scrollPages(pageCount); + } + public scrollToTop(): void { + this._core.scrollToTop(); + } + public scrollToBottom(): void { + this._core.scrollToBottom(); + } + public scrollToLine(line: number): void { + this._verifyIntegers(line); + this._core.scrollToLine(line); + } + public clear(): void { + this._core.clear(); + } + public write(data: string | Uint8Array, callback?: () => void): void { + this._core.write(data, callback); + } + public writeUtf8(data: Uint8Array, callback?: () => void): void { + this._core.write(data, callback); + } + public writeln(data: string | Uint8Array, callback?: () => void): void { + this._core.write(data); + this._core.write('\r\n', callback); + } + public getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'fontFamily' | 'logLevel' | 'rendererType' | 'termName' | 'wordSeparator'): string; + public getOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell'): boolean; + public getOption(key: 'cols' | 'fontSize' | 'letterSpacing' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback'): number; + public getOption(key: string): any; + public getOption(key: any): any { + return this._core.optionsService.getOption(key); + } + public setOption(key: 'bellSound' | 'fontFamily' | 'termName' | 'wordSeparator', value: string): void; + public setOption(key: 'fontWeight' | 'fontWeightBold', value: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number): void; + public setOption(key: 'logLevel', value: 'debug' | 'info' | 'warn' | 'error' | 'off'): void; + public setOption(key: 'bellStyle', value: 'none' | 'visual' | 'sound' | 'both'): void; + public setOption(key: 'cursorStyle', value: 'block' | 'underline' | 'bar'): void; + public setOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell', value: boolean): void; + public setOption(key: 'fontSize' | 'letterSpacing' | 'lineHeight' | 'tabStopWidth' | 'scrollback', value: number): void; + public setOption(key: 'cols' | 'rows', value: number): void; + public setOption(key: string, value: any): void; + public setOption(key: any, value: any): void { + this._core.optionsService.setOption(key, value); + } + public reset(): void { + this._core.reset(); + } + public loadAddon(addon: ITerminalAddon): void { + // TODO: This could cause issues if the addon calls renderer apis + return this._addonManager.loadAddon(this as any, addon); + } + + private _verifyIntegers(...values: number[]): void { + for (const value of values) { + if (value === Infinity || isNaN(value) || value % 1 !== 0) { + throw new Error('This API only accepts integers'); + } + } + } +} diff --git a/src/headless/tsconfig.json b/src/headless/tsconfig.json new file mode 100644 index 000000000..b579af97c --- /dev/null +++ b/src/headless/tsconfig.json @@ -0,0 +1,26 @@ +{ + "extends": "../tsconfig-library-base", + "compilerOptions": { + "lib": [ + "es2015", + "es2016.Array.Include" + ], + "outDir": "../../out", + "types": [ + "../../node_modules/@types/mocha", + "../../node_modules/@types/node" + ], + "baseUrl": "../", + "paths": { + "common/*": [ "./common/*" ] + } + }, + "include": [ + "./**/*", + "../../typings/xterm.d.ts", // common/Types.d.ts imports from 'xterm' + "../../typings/xterm-headless.d.ts" + ], + "references": [ + { "path": "../common" } + ] +} diff --git a/test/api/CharWidth.api.ts b/test/api/CharWidth.api.ts index d7cea109e..83067149a 100644 --- a/test/api/CharWidth.api.ts +++ b/test/api/CharWidth.api.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { pollFor, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -15,10 +15,7 @@ const height = 600; describe('CharWidth Integration Tests', function(): void { before(async function(): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/InputHandler.api.ts b/test/api/InputHandler.api.ts index a695abdce..54ee69571 100644 --- a/test/api/InputHandler.api.ts +++ b/test/api/InputHandler.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { pollFor, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, openTerminal, getBrowserType, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; import { IRenderDimensions } from 'browser/renderer/Types'; @@ -21,9 +21,7 @@ describe('InputHandler Integration Tests', function(): void { before(async function(): Promise { const browserType = getBrowserType(); isChromium = browserType.name() === 'chromium'; - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/MouseTracking.api.ts b/test/api/MouseTracking.api.ts index 3df21a901..ebeb680f4 100644 --- a/test/api/MouseTracking.api.ts +++ b/test/api/MouseTracking.api.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { pollFor, writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, writeSync, openTerminal, getBrowserType, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -211,9 +211,7 @@ describe('Mouse Tracking Tests', async () => { const itMouse = isChromium ? it : it.skip; before(async function(): Promise { - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); diff --git a/test/api/Parser.api.ts b/test/api/Parser.api.ts index 0ef57cf17..ada28adfa 100644 --- a/test/api/Parser.api.ts +++ b/test/api/Parser.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { writeSync, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('Parser Integration Tests', function (): void { before(async function (): Promise { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); await page.goto(APP); diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts index 9e951ffef..00598e478 100644 --- a/test/api/Terminal.api.ts +++ b/test/api/Terminal.api.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { pollFor, timeout, writeSync, openTerminal, getBrowserType } from './TestUtils'; +import { pollFor, timeout, writeSync, openTerminal, launchBrowser } from './TestUtils'; import { Browser, Page } from 'playwright'; const APP = 'http://127.0.0.1:3001/test'; @@ -16,10 +16,7 @@ const height = 600; describe('API Integration Tests', function(): void { before(async () => { - const browserType = getBrowserType(); - browser = await browserType.launch({ - headless: process.argv.indexOf('--headless') !== -1 - }); + browser = await launchBrowser(); page = await (await browser.newContext()).newPage(); await page.setViewportSize({ width, height }); }); @@ -69,12 +66,9 @@ describe('API Integration Tests', function(): void { it('write - bytes (UTF8)', async () => { await openTerminal(page); await page.evaluate(` - // foo - window.term.write(new Uint8Array([102, 111, 111])); - // bar - window.term.write(new Uint8Array([98, 97, 114])); - // 文 - window.term.write(new Uint8Array([230, 150, 135])); + window.term.write(new Uint8Array([102, 111, 111])); // foo + window.term.write(new Uint8Array([98, 97, 114])); // bar + window.term.write(new Uint8Array([230, 150, 135])); // 文 `); await pollFor(page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foobar文'); }); @@ -82,12 +76,9 @@ describe('API Integration Tests', function(): void { it('write - bytes (UTF8) with callback', async () => { await openTerminal(page); await page.evaluate(` - // foo - window.term.write(new Uint8Array([102, 111, 111]), () => { window.__x = 'A'; }); - // bar - window.term.write(new Uint8Array([98, 97, 114]), () => { window.__x += 'B'; }); - // 文 - window.term.write(new Uint8Array([230, 150, 135]), () => { window.__x += 'C'; }); + window.term.write(new Uint8Array([102, 111, 111]), () => { window.__x = 'A'; }); // foo + window.term.write(new Uint8Array([98, 97, 114]), () => { window.__x += 'B'; }); // bar + window.term.write(new Uint8Array([230, 150, 135]), () => { window.__x += 'C'; }); // 文 `); await pollFor(page, `window.term.buffer.active.getLine(0).translateToString(true)`, 'foobar文'); await pollFor(page, `window.__x`, 'ABC'); @@ -568,6 +559,98 @@ describe('API Integration Tests', function(): void { }); }); + describe('modes', () => { + it('defaults', async () => { + await openTerminal(page); + assert.deepStrictEqual(await page.evaluate(`window.term.modes`), { + applicationCursorKeysMode: false, + applicationKeypadMode: false, + bracketedPasteMode: false, + insertMode: false, + mouseTrackingMode: 'none', + originMode: false, + reverseWraparoundMode: false, + sendFocusMode: false, + wraparoundMode: true + }); + }); + it('applicationCursorKeysMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?1h'); + assert.strictEqual(await page.evaluate(`window.term.modes.applicationCursorKeysMode`), true); + await writeSync(page, '\\x1b[?1l'); + assert.strictEqual(await page.evaluate(`window.term.modes.applicationCursorKeysMode`), false); + }); + it('applicationKeypadMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?66h'); + assert.strictEqual(await page.evaluate(`window.term.modes.applicationKeypadMode`), true); + await writeSync(page, '\\x1b[?66l'); + assert.strictEqual(await page.evaluate(`window.term.modes.applicationKeypadMode`), false); + }); + it('bracketedPasteMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?2004h'); + assert.strictEqual(await page.evaluate(`window.term.modes.bracketedPasteMode`), true); + await writeSync(page, '\\x1b[?2004l'); + assert.strictEqual(await page.evaluate(`window.term.modes.bracketedPasteMode`), false); + }); + it('insertMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[4h'); + assert.strictEqual(await page.evaluate(`window.term.modes.insertMode`), true); + await writeSync(page, '\\x1b[4l'); + assert.strictEqual(await page.evaluate(`window.term.modes.insertMode`), false); + }); + it('mouseTrackingMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?9h'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'x10'); + await writeSync(page, '\\x1b[?9l'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'none'); + await writeSync(page, '\\x1b[?1000h'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'vt200'); + await writeSync(page, '\\x1b[?1000l'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'none'); + await writeSync(page, '\\x1b[?1002h'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'drag'); + await writeSync(page, '\\x1b[?1002l'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'none'); + await writeSync(page, '\\x1b[?1003h'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'any'); + await writeSync(page, '\\x1b[?1003l'); + assert.strictEqual(await page.evaluate(`window.term.modes.mouseTrackingMode`), 'none'); + }); + it('originMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?6h'); + assert.strictEqual(await page.evaluate(`window.term.modes.originMode`), true); + await writeSync(page, '\\x1b[?6l'); + assert.strictEqual(await page.evaluate(`window.term.modes.originMode`), false); + }); + it('reverseWraparoundMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?45h'); + assert.strictEqual(await page.evaluate(`window.term.modes.reverseWraparoundMode`), true); + await writeSync(page, '\\x1b[?45l'); + assert.strictEqual(await page.evaluate(`window.term.modes.reverseWraparoundMode`), false); + }); + it('sendFocusMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?1004h'); + assert.strictEqual(await page.evaluate(`window.term.modes.sendFocusMode`), true); + await writeSync(page, '\\x1b[?1004l'); + assert.strictEqual(await page.evaluate(`window.term.modes.sendFocusMode`), false); + }); + it('wraparoundMode', async () => { + await openTerminal(page); + await writeSync(page, '\\x1b[?7h'); + assert.strictEqual(await page.evaluate(`window.term.modes.wraparoundMode`), true); + await writeSync(page, '\\x1b[?7l'); + assert.strictEqual(await page.evaluate(`window.term.modes.wraparoundMode`), false); + }); + }); + it('dispose', async () => { await page.evaluate(` window.term = new Terminal(); diff --git a/test/api/TestUtils.ts b/test/api/TestUtils.ts index 2b1e88284..4fa98d438 100644 --- a/test/api/TestUtils.ts +++ b/test/api/TestUtils.ts @@ -67,3 +67,17 @@ export function getBrowserType(): playwright.BrowserType = { + headless: process.argv.includes('--headless'), + } + + const index = process.argv.indexOf('--executablePath'); + if(index > 0 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') { + options.executablePath = process.argv[index + 1]; + } + + return browserType.launch(options); +} diff --git a/test/benchmark/EscapeSequenceParser.benchmark.ts b/test/benchmark/EscapeSequenceParser.benchmark.ts index c2707f19b..10c447973 100644 --- a/test/benchmark/EscapeSequenceParser.benchmark.ts +++ b/test/benchmark/EscapeSequenceParser.benchmark.ts @@ -40,42 +40,42 @@ perfContext('Parser throughput - 50MB data', () => { beforeEach(() => { parser = new EscapeSequenceParser(); parser.setPrintHandler((data, start, end) => {}); - parser.registerCsiHandler({final: '@'}, params => true); - parser.registerCsiHandler({final: 'A'}, params => true); - parser.registerCsiHandler({final: 'B'}, params => true); - parser.registerCsiHandler({final: 'C'}, params => true); - parser.registerCsiHandler({final: 'D'}, params => true); - parser.registerCsiHandler({final: 'E'}, params => true); - parser.registerCsiHandler({final: 'F'}, params => true); - parser.registerCsiHandler({final: 'G'}, params => true); - parser.registerCsiHandler({final: 'H'}, params => true); - parser.registerCsiHandler({final: 'I'}, params => true); - parser.registerCsiHandler({final: 'J'}, params => true); - parser.registerCsiHandler({final: 'K'}, params => true); - parser.registerCsiHandler({final: 'L'}, params => true); - parser.registerCsiHandler({final: 'M'}, params => true); - parser.registerCsiHandler({final: 'P'}, params => true); - parser.registerCsiHandler({final: 'S'}, params => true); - parser.registerCsiHandler({final: 'T'}, params => true); - parser.registerCsiHandler({final: 'X'}, params => true); - parser.registerCsiHandler({final: 'Z'}, params => true); - parser.registerCsiHandler({final: '`'}, params => true); - parser.registerCsiHandler({final: 'a'}, params => true); - parser.registerCsiHandler({final: 'b'}, params => true); - parser.registerCsiHandler({final: 'c'}, params => true); - parser.registerCsiHandler({final: 'd'}, params => true); - parser.registerCsiHandler({final: 'e'}, params => true); - parser.registerCsiHandler({final: 'f'}, params => true); - parser.registerCsiHandler({final: 'g'}, params => true); - parser.registerCsiHandler({final: 'h'}, params => true); - parser.registerCsiHandler({final: 'l'}, params => true); - parser.registerCsiHandler({final: 'm'}, params => true); - parser.registerCsiHandler({final: 'n'}, params => true); - parser.registerCsiHandler({final: 'p'}, params => true); - parser.registerCsiHandler({final: 'q'}, params => true); - parser.registerCsiHandler({final: 'r'}, params => true); - parser.registerCsiHandler({final: 's'}, params => true); - parser.registerCsiHandler({final: 'u'}, params => true); + parser.registerCsiHandler({ final: '@' }, params => true); + parser.registerCsiHandler({ final: 'A' }, params => true); + parser.registerCsiHandler({ final: 'B' }, params => true); + parser.registerCsiHandler({ final: 'C' }, params => true); + parser.registerCsiHandler({ final: 'D' }, params => true); + parser.registerCsiHandler({ final: 'E' }, params => true); + parser.registerCsiHandler({ final: 'F' }, params => true); + parser.registerCsiHandler({ final: 'G' }, params => true); + parser.registerCsiHandler({ final: 'H' }, params => true); + parser.registerCsiHandler({ final: 'I' }, params => true); + parser.registerCsiHandler({ final: 'J' }, params => true); + parser.registerCsiHandler({ final: 'K' }, params => true); + parser.registerCsiHandler({ final: 'L' }, params => true); + parser.registerCsiHandler({ final: 'M' }, params => true); + parser.registerCsiHandler({ final: 'P' }, params => true); + parser.registerCsiHandler({ final: 'S' }, params => true); + parser.registerCsiHandler({ final: 'T' }, params => true); + parser.registerCsiHandler({ final: 'X' }, params => true); + parser.registerCsiHandler({ final: 'Z' }, params => true); + parser.registerCsiHandler({ final: '`' }, params => true); + parser.registerCsiHandler({ final: 'a' }, params => true); + parser.registerCsiHandler({ final: 'b' }, params => true); + parser.registerCsiHandler({ final: 'c' }, params => true); + parser.registerCsiHandler({ final: 'd' }, params => true); + parser.registerCsiHandler({ final: 'e' }, params => true); + parser.registerCsiHandler({ final: 'f' }, params => true); + parser.registerCsiHandler({ final: 'g' }, params => true); + parser.registerCsiHandler({ final: 'h' }, params => true); + parser.registerCsiHandler({ final: 'l' }, params => true); + parser.registerCsiHandler({ final: 'm' }, params => true); + parser.registerCsiHandler({ final: 'n' }, params => true); + parser.registerCsiHandler({ final: 'p' }, params => true); + parser.registerCsiHandler({ final: 'q' }, params => true); + parser.registerCsiHandler({ final: 'r' }, params => true); + parser.registerCsiHandler({ final: 's' }, params => true); + parser.registerCsiHandler({ final: 'u' }, params => true); parser.setExecuteHandler(C0.BEL, () => true); parser.setExecuteHandler(C0.LF, () => true); parser.setExecuteHandler(C0.VT, () => true); @@ -90,24 +90,24 @@ perfContext('Parser throughput - 50MB data', () => { parser.setExecuteHandler(C1.HTS, () => true); parser.registerOscHandler(0, new OscHandler(data => true)); parser.registerOscHandler(1, new FastOscHandler()); - parser.registerEscHandler({final: '7'}, () => true); - parser.registerEscHandler({final: '8'}, () => true); - parser.registerEscHandler({final: 'D'}, () => true); - parser.registerEscHandler({final: 'E'}, () => true); - parser.registerEscHandler({final: 'H'}, () => true); - parser.registerEscHandler({final: 'M'}, () => true); - parser.registerEscHandler({final: '='}, () => true); - parser.registerEscHandler({final: '>'}, () => true); - parser.registerEscHandler({final: 'c'}, () => true); - parser.registerEscHandler({final: 'n'}, () => true); - parser.registerEscHandler({final: 'o'}, () => true); - parser.registerEscHandler({final: '|'}, () => true); - parser.registerEscHandler({final: '}'}, () => true); - parser.registerEscHandler({final: '~'}, () => true); - parser.registerEscHandler({intermediates: '%', final: '@'}, () => true); - parser.registerEscHandler({intermediates: '%', final: 'G'}, () => true); - parser.registerDcsHandler({final: 'p'}, new DcsHandler(data => true)); - parser.registerDcsHandler({final: 'q'}, new FastDcsHandler()); + parser.registerEscHandler({ final: '7' }, () => true); + parser.registerEscHandler({ final: '8' }, () => true); + parser.registerEscHandler({ final: 'D' }, () => true); + parser.registerEscHandler({ final: 'E' }, () => true); + parser.registerEscHandler({ final: 'H' }, () => true); + parser.registerEscHandler({ final: 'M' }, () => true); + parser.registerEscHandler({ final: '=' }, () => true); + parser.registerEscHandler({ final: '>' }, () => true); + parser.registerEscHandler({ final: 'c' }, () => true); + parser.registerEscHandler({ final: 'n' }, () => true); + parser.registerEscHandler({ final: 'o' }, () => true); + parser.registerEscHandler({ final: '|' }, () => true); + parser.registerEscHandler({ final: '}' }, () => true); + parser.registerEscHandler({ final: '~' }, () => true); + parser.registerEscHandler({ intermediates: '%', final: '@' }, () => true); + parser.registerEscHandler({ intermediates: '%', final: 'G' }, () => true); + parser.registerDcsHandler({ final: 'p' }, new DcsHandler(data => true)); + parser.registerDcsHandler({ final: 'q' }, new FastDcsHandler()); }); perfContext('PRINT - a', () => { @@ -121,8 +121,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', async () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('EXECUTE - \\n', () => { @@ -136,8 +136,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('ESCAPE - ESC E', () => { @@ -151,8 +151,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('ESCAPE with collect - ESC % G', () => { @@ -166,8 +166,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('CSI - CSI A', () => { @@ -181,8 +181,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('CSI with collect - CSI ? p', () => { @@ -196,8 +196,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('CSI with params (short) - CSI 1;2 m', () => { @@ -211,8 +211,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('CSI with params (long) - CSI 1;2;3;4;5;6;7;8;9;0 m', () => { @@ -226,8 +226,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('OSC string interface (short seq) - OSC 0;hi ST', () => { @@ -241,8 +241,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('OSC string interface (long seq) - OSC 0; ST', () => { @@ -256,8 +256,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('OSC class interface (short seq) - OSC 0;hi ST', () => { @@ -271,8 +271,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('OSC class interface (long seq) - OSC 0; ST', () => { @@ -286,8 +286,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('DCS string interface (short seq)', () => { @@ -301,8 +301,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', async () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('DCS string interface (long seq)', () => { @@ -316,8 +316,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', async () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('DCS class interface (short seq)', () => { @@ -331,8 +331,8 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', async () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); perfContext('DCS class interface (long seq)', () => { @@ -346,7 +346,7 @@ perfContext('Parser throughput - 50MB data', () => { }); new ThroughputRuntimeCase('', async () => { parser.parse(parsed, parsed.length); - return {payloadSize: parsed.length}; - }, {fork: true}).showAverageThroughput(); + return { payloadSize: parsed.length }; + }, { fork: true }).showAverageThroughput(); }); }); diff --git a/test/benchmark/Terminal.benchmark.ts b/test/benchmark/Terminal.benchmark.ts index 40a3c208f..578a83d03 100644 --- a/test/benchmark/Terminal.benchmark.ts +++ b/test/benchmark/Terminal.benchmark.ts @@ -47,22 +47,22 @@ perfContext('Terminal: ls -lR /usr/lib', () => { perfContext('write/string/async', () => { let terminal: Terminal; before(() => { - terminal = new Terminal({cols: 80, rows: 25, scrollback: 1000}); + terminal = new Terminal({ cols: 80, rows: 25, scrollback: 1000 }); }); new ThroughputRuntimeCase('', async () => { await new Promise(res => terminal.write(content, res)); - return {payloadSize: contentUtf8.length}; - }, {fork: false}).showAverageThroughput(); + return { payloadSize: contentUtf8.length }; + }, { fork: false }).showAverageThroughput(); }); perfContext('write/Utf8/async', () => { let terminal: Terminal; before(() => { - terminal = new Terminal({cols: 80, rows: 25, scrollback: 1000}); + terminal = new Terminal({ cols: 80, rows: 25, scrollback: 1000 }); }); new ThroughputRuntimeCase('', async () => { await new Promise(res => terminal.write(content, res)); - return {payloadSize: contentUtf8.length}; - }, {fork: false}).showAverageThroughput(); + return { payloadSize: contentUtf8.length }; + }, { fork: false }).showAverageThroughput(); }); }); diff --git a/tsconfig.all.json b/tsconfig.all.json index 009cd498b..6fa02446a 100644 --- a/tsconfig.all.json +++ b/tsconfig.all.json @@ -3,6 +3,7 @@ "include": [], "references": [ { "path": "./src/browser" }, + { "path": "./src/headless" }, { "path": "./test/api" }, { "path": "./test/benchmark" }, { "path": "./addons/xterm-addon-attach" }, diff --git a/typings/xterm-headless.d.ts b/typings/xterm-headless.d.ts new file mode 100644 index 000000000..84b715e86 --- /dev/null +++ b/typings/xterm-headless.d.ts @@ -0,0 +1,1315 @@ +/** + * @license MIT + * + * This contains the type declarations for the xterm.js library. Note that + * some interfaces differ between this file and the actual implementation in + * src/, that's because this file declares the *public* API which is intended + * to be stable and consumed by external programs. + */ + +declare module 'xterm-headless' { + /** + * A string representing log level. + */ + export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off'; + + /** + * An object containing start up options for the terminal. + */ + export interface ITerminalOptions { + /** + * Whether to allow the use of proposed API. When false, any usage of APIs + * marked as experimental/proposed will throw an error. This defaults to + * true currently, but will change to false in v5.0. + */ + allowProposedApi?: boolean; + + /** + * Whether background should support non-opaque color. It must be set before + * executing the `Terminal.open()` method and can't be changed later without + * executing it again. Note that enabling this can negatively impact + * performance. + */ + allowTransparency?: boolean; + + /** + * If enabled, alt + click will move the prompt cursor to position + * underneath the mouse. The default is true. + */ + altClickMovesCursor?: boolean; + + /** + * A data uri of the sound to use for the bell when `bellStyle = 'sound'`. + */ + bellSound?: string; + + /** + * The type of the bell notification the terminal will use. + */ + bellStyle?: 'none' | 'sound'; + + /** + * When enabled the cursor will be set to the beginning of the next line + * with every new line. This is equivalent to sending '\r\n' for each '\n'. + * Normally the termios settings of the underlying PTY deals with the + * translation of '\n' to '\r\n' and this setting should not be used. If you + * deal with data from a non-PTY related source, this settings might be + * useful. + */ + convertEol?: boolean; + + /** + * The number of columns in the terminal. + */ + cols?: number; + + /** + * Whether the cursor blinks. + */ + cursorBlink?: boolean; + + /** + * The style of the cursor. + */ + cursorStyle?: 'block' | 'underline' | 'bar'; + + /** + * The width of the cursor in CSS pixels when `cursorStyle` is set to 'bar'. + */ + cursorWidth?: number; + + /** + * Whether to draw custom glyphs for block element and box drawing characters instead of using + * the font. This should typically result in better rendering with continuous lines, even when + * line height and letter spacing is used. Note that this doesn't work with the DOM renderer + * which renders all characters using the font. The default is true. + */ + customGlyphs?: boolean; + + /** + * Whether input should be disabled. + */ + disableStdin?: boolean; + + /** + * Whether to draw bold text in bright colors. The default is true. + */ + drawBoldTextInBrightColors?: boolean; + + /** + * The modifier key hold to multiply scroll speed. + */ + fastScrollModifier?: 'alt' | 'ctrl' | 'shift' | undefined; + + /** + * The spacing in whole pixels between characters. + */ + letterSpacing?: number; + + /** + * The line height used to render text. + */ + lineHeight?: number; + + /** + * The duration in milliseconds before link tooltip events fire when + * hovering on a link. + * @deprecated This will be removed when the link matcher API is removed. + */ + linkTooltipHoverDuration?: number; + + /** + * What log level to use, this will log for all levels below and including + * what is set: + * + * 1. debug + * 2. info (default) + * 3. warn + * 4. error + * 5. off + */ + logLevel?: LogLevel; + + /** + * Whether to treat option as the meta key. + */ + macOptionIsMeta?: boolean; + + /** + * Whether holding a modifier key will force normal selection behavior, + * regardless of whether the terminal is in mouse events mode. This will + * also prevent mouse events from being emitted by the terminal. For + * example, this allows you to use xterm.js' regular selection inside tmux + * with mouse mode enabled. + */ + macOptionClickForcesSelection?: boolean; + + /** + * The minimum contrast ratio for text in the terminal, setting this will + * change the foreground color dynamically depending on whether the contrast + * ratio is met. Example values: + * + * - 1: The default, do nothing. + * - 4.5: Minimum for WCAG AA compliance. + * - 7: Minimum for WCAG AAA compliance. + * - 21: White on black or black on white. + */ + minimumContrastRatio?: number; + + /** + * Whether to select the word under the cursor on right click, this is + * standard behavior in a lot of macOS applications. + */ + rightClickSelectsWord?: boolean; + + /** + * The number of rows in the terminal. + */ + rows?: number; + + /** + * Whether screen reader support is enabled. When on this will expose + * supporting elements in the DOM to support NVDA on Windows and VoiceOver + * on macOS. + */ + screenReaderMode?: boolean; + + /** + * The amount of scrollback in the terminal. Scrollback is the amount of + * rows that are retained when lines are scrolled beyond the initial + * viewport. + */ + scrollback?: number; + + /** + * The scrolling speed multiplier used for adjusting normal scrolling speed. + */ + scrollSensitivity?: number; + + /** + * The size of tab stops in the terminal. + */ + tabStopWidth?: number; + + /** + * The color theme of the terminal. + */ + theme?: ITheme; + + /** + * Whether "Windows mode" is enabled. Because Windows backends winpty and + * conpty operate by doing line wrapping on their side, xterm.js does not + * have access to wrapped lines. When Windows mode is enabled the following + * changes will be in effect: + * + * - Reflow is disabled. + * - Lines are assumed to be wrapped if the last character of the line is + * not whitespace. + */ + windowsMode?: boolean; + + /** + * A string containing all characters that are considered word separated by the + * double click to select work logic. + */ + wordSeparator?: string; + + /** + * Enable various window manipulation and report features. + * All features are disabled by default for security reasons. + */ + windowOptions?: IWindowOptions; + } + + /** + * Contains colors to theme the terminal with. + */ + export interface ITheme { + /** The default foreground color */ + foreground?: string; + /** The default background color */ + background?: string; + /** The cursor color */ + cursor?: string; + /** The accent color of the cursor (fg color for a block cursor) */ + cursorAccent?: string; + /** The selection background color (can be transparent) */ + selection?: string; + /** ANSI black (eg. `\x1b[30m`) */ + black?: string; + /** ANSI red (eg. `\x1b[31m`) */ + red?: string; + /** ANSI green (eg. `\x1b[32m`) */ + green?: string; + /** ANSI yellow (eg. `\x1b[33m`) */ + yellow?: string; + /** ANSI blue (eg. `\x1b[34m`) */ + blue?: string; + /** ANSI magenta (eg. `\x1b[35m`) */ + magenta?: string; + /** ANSI cyan (eg. `\x1b[36m`) */ + cyan?: string; + /** ANSI white (eg. `\x1b[37m`) */ + white?: string; + /** ANSI bright black (eg. `\x1b[1;30m`) */ + brightBlack?: string; + /** ANSI bright red (eg. `\x1b[1;31m`) */ + brightRed?: string; + /** ANSI bright green (eg. `\x1b[1;32m`) */ + brightGreen?: string; + /** ANSI bright yellow (eg. `\x1b[1;33m`) */ + brightYellow?: string; + /** ANSI bright blue (eg. `\x1b[1;34m`) */ + brightBlue?: string; + /** ANSI bright magenta (eg. `\x1b[1;35m`) */ + brightMagenta?: string; + /** ANSI bright cyan (eg. `\x1b[1;36m`) */ + brightCyan?: string; + /** ANSI bright white (eg. `\x1b[1;37m`) */ + brightWhite?: string; + } + + /** + * An object that can be disposed via a dispose function. + */ + export interface IDisposable { + dispose(): void; + } + + /** + * An event that can be listened to. + * @returns an `IDisposable` to stop listening. + */ + export interface IEvent { + (listener: (arg1: T, arg2: U) => any): IDisposable; + } + + /** + * Represents a specific line in the terminal that is tracked when scrollback + * is trimmed and lines are added or removed. This is a single line that may + * be part of a larger wrapped line. + */ + export interface IMarker extends IDisposable { + /** + * A unique identifier for this marker. + */ + readonly id: number; + + /** + * Whether this marker is disposed. + */ + readonly isDisposed: boolean; + + /** + * The actual line index in the buffer at this point in time. This is set to + * -1 if the marker has been disposed. + */ + readonly line: number; + + /** + * Event listener to get notified when the marker gets disposed. Automatic disposal + * might happen for a marker, that got invalidated by scrolling out or removal of + * a line from the buffer. + */ + onDispose: IEvent; + } + + /** + * The set of localizable strings. + */ + export interface ILocalizableStrings { + /** + * The aria label for the underlying input textarea for the terminal. + */ + promptLabel: string; + + /** + * Announcement for when line reading is suppressed due to too many lines + * being printed to the terminal when `screenReaderMode` is enabled. + */ + tooMuchOutput: string; + } + + /** + * Enable various window manipulation and report features (CSI Ps ; Ps ; Ps t). + * + * Most settings have no default implementation, as they heavily rely on + * the embedding environment. + * + * To implement a feature, create a custom CSI hook like this: + * ```ts + * term.parser.addCsiHandler({final: 't'}, params => { + * const ps = params[0]; + * switch (ps) { + * case XY: + * ... // your implementation for option XY + * return true; // signal Ps=XY was handled + * } + * return false; // any Ps that was not handled + * }); + * ``` + * + * Note on security: + * Most features are meant to deal with some information of the host machine + * where the terminal runs on. This is seen as a security risk possibly leaking + * sensitive data of the host to the program in the terminal. Therefore all options + * (even those without a default implementation) are guarded by the boolean flag + * and disabled by default. + */ + export interface IWindowOptions { + /** + * Ps=1 De-iconify window. + * No default implementation. + */ + restoreWin?: boolean; + /** + * Ps=2 Iconify window. + * No default implementation. + */ + minimizeWin?: boolean; + /** + * Ps=3 ; x ; y + * Move window to [x, y]. + * No default implementation. + */ + setWinPosition?: boolean; + /** + * Ps = 4 ; height ; width + * Resize the window to given `height` and `width` in pixels. + * Omitted parameters should reuse the current height or width. + * Zero parameters should use the display's height or width. + * No default implementation. + */ + setWinSizePixels?: boolean; + /** + * Ps=5 Raise the window to the front of the stacking order. + * No default implementation. + */ + raiseWin?: boolean; + /** + * Ps=6 Lower the xterm window to the bottom of the stacking order. + * No default implementation. + */ + lowerWin?: boolean; + /** Ps=7 Refresh the window. */ + refreshWin?: boolean; + /** + * Ps = 8 ; height ; width + * Resize the text area to given height and width in characters. + * Omitted parameters should reuse the current height or width. + * Zero parameters use the display's height or width. + * No default implementation. + */ + setWinSizeChars?: boolean; + /** + * Ps=9 ; 0 Restore maximized window. + * Ps=9 ; 1 Maximize window (i.e., resize to screen size). + * Ps=9 ; 2 Maximize window vertically. + * Ps=9 ; 3 Maximize window horizontally. + * No default implementation. + */ + maximizeWin?: boolean; + /** + * Ps=10 ; 0 Undo full-screen mode. + * Ps=10 ; 1 Change to full-screen. + * Ps=10 ; 2 Toggle full-screen. + * No default implementation. + */ + fullscreenWin?: boolean; + /** Ps=11 Report xterm window state. + * If the xterm window is non-iconified, it returns "CSI 1 t". + * If the xterm window is iconified, it returns "CSI 2 t". + * No default implementation. + */ + getWinState?: boolean; + /** + * Ps=13 Report xterm window position. Result is "CSI 3 ; x ; y t". + * Ps=13 ; 2 Report xterm text-area position. Result is "CSI 3 ; x ; y t". + * No default implementation. + */ + getWinPosition?: boolean; + /** + * Ps=14 Report xterm text area size in pixels. Result is "CSI 4 ; height ; width t". + * Ps=14 ; 2 Report xterm window size in pixels. Result is "CSI 4 ; height ; width t". + * Has a default implementation. + */ + getWinSizePixels?: boolean; + /** + * Ps=15 Report size of the screen in pixels. Result is "CSI 5 ; height ; width t". + * No default implementation. + */ + getScreenSizePixels?: boolean; + /** + * Ps=16 Report xterm character cell size in pixels. Result is "CSI 6 ; height ; width t". + * Has a default implementation. + */ + getCellSizePixels?: boolean; + /** + * Ps=18 Report the size of the text area in characters. Result is "CSI 8 ; height ; width t". + * Has a default implementation. + */ + getWinSizeChars?: boolean; + /** + * Ps=19 Report the size of the screen in characters. Result is "CSI 9 ; height ; width t". + * No default implementation. + */ + getScreenSizeChars?: boolean; + /** + * Ps=20 Report xterm window's icon label. Result is "OSC L label ST". + * No default implementation. + */ + getIconTitle?: boolean; + /** + * Ps=21 Report xterm window's title. Result is "OSC l label ST". + * No default implementation. + */ + getWinTitle?: boolean; + /** + * Ps=22 ; 0 Save xterm icon and window title on stack. + * Ps=22 ; 1 Save xterm icon title on stack. + * Ps=22 ; 2 Save xterm window title on stack. + * All variants have a default implementation. + */ + pushTitle?: boolean; + /** + * Ps=23 ; 0 Restore xterm icon and window title from stack. + * Ps=23 ; 1 Restore xterm icon title from stack. + * Ps=23 ; 2 Restore xterm window title from stack. + * All variants have a default implementation. + */ + popTitle?: boolean; + /** + * Ps>=24 Resize to Ps lines (DECSLPP). + * DECSLPP is not implemented. This settings is also used to + * enable / disable DECCOLM (earlier variant of DECSLPP). + */ + setWinLines?: boolean; + } + + /** + * The class that represents an xterm.js terminal. + */ + export class Terminal implements IDisposable { + /** + * The number of rows in the terminal's viewport. Use + * `ITerminalOptions.rows` to set this in the constructor and + * `Terminal.resize` for when the terminal exists. + */ + readonly rows: number; + + /** + * The number of columns in the terminal's viewport. Use + * `ITerminalOptions.cols` to set this in the constructor and + * `Terminal.resize` for when the terminal exists. + */ + readonly cols: number; + + /** + * (EXPERIMENTAL) The terminal's current buffer, this might be either the + * normal buffer or the alt buffer depending on what's running in the + * terminal. + */ + readonly buffer: IBufferNamespace; + + /** + * (EXPERIMENTAL) Get all markers registered against the buffer. If the alt + * buffer is active this will always return []. + */ + readonly markers: ReadonlyArray; + + /** + * (EXPERIMENTAL) Get the parser interface to register + * custom escape sequence handlers. + */ + readonly parser: IParser; + + /** + * (EXPERIMENTAL) Get the Unicode handling interface + * to register and switch Unicode version. + */ + readonly unicode: IUnicodeHandling; + + /** + * Gets the terminal modes as set by SM/DECSET. + */ + readonly modes: IModes; + + /** + * Natural language strings that can be localized. + */ + static strings: ILocalizableStrings; + + /** + * Creates a new `Terminal` object. + * + * @param options An object containing a set of options. + */ + constructor(options?: ITerminalOptions); + + /** + * Adds an event listener for when the bell is triggered. + * @returns an `IDisposable` to stop listening. + */ + onBell: IEvent; + + /** + * Adds an event listener for when a binary event fires. This is used to + * enable non UTF-8 conformant binary messages to be sent to the backend. + * Currently this is only used for a certain type of mouse reports that + * happen to be not UTF-8 compatible. + * The event value is a JS string, pass it to the underlying pty as + * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`. + * @returns an `IDisposable` to stop listening. + */ + onBinary: IEvent; + + /** + * Adds an event listener for the cursor moves. + * @returns an `IDisposable` to stop listening. + */ + onCursorMove: IEvent; + + /** + * Adds an event listener for when a data event fires. This happens for + * example when the user types or pastes into the terminal. The event value + * is whatever `string` results, in a typical setup, this should be passed + * on to the backing pty. + * @returns an `IDisposable` to stop listening. + */ + onData: IEvent; + + /** + * Adds an event listener for when a line feed is added. + * @returns an `IDisposable` to stop listening. + */ + onLineFeed: IEvent; + + /** + * Adds an event listener for when the terminal is resized. The event value + * contains the new size. + * @returns an `IDisposable` to stop listening. + */ + onResize: IEvent<{ cols: number, rows: number }>; + + /** + * Adds an event listener for when a scroll occurs. The event value is the + * new position of the viewport. + * @returns an `IDisposable` to stop listening. + */ + onScroll: IEvent; + + /** + * Adds an event listener for when an OSC 0 or OSC 2 title change occurs. + * The event value is the new title. + * @returns an `IDisposable` to stop listening. + */ + onTitleChange: IEvent; + + /** + * Resizes the terminal. It's best practice to debounce calls to resize, + * this will help ensure that the pty can respond to the resize event + * before another one occurs. + * @param x The number of columns to resize to. + * @param y The number of rows to resize to. + */ + resize(columns: number, rows: number): void; + + /** + * (EXPERIMENTAL) Adds a marker to the normal buffer and returns it. If the + * alt buffer is active, undefined is returned. + * @param cursorYOffset The y position offset of the marker from the cursor. + * @returns The new marker or undefined. + */ + registerMarker(cursorYOffset: number): IMarker | undefined; + + /** + * @deprecated use `registerMarker` instead. + */ + addMarker(cursorYOffset: number): IMarker | undefined; + + /* + * Disposes of the terminal, detaching it from the DOM and removing any + * active listeners. + */ + dispose(): void; + + /** + * Scroll the display of the terminal + * @param amount The number of lines to scroll down (negative scroll up). + */ + scrollLines(amount: number): void; + + /** + * Scroll the display of the terminal by a number of pages. + * @param pageCount The number of pages to scroll (negative scrolls up). + */ + scrollPages(pageCount: number): void; + + /** + * Scrolls the display of the terminal to the top. + */ + scrollToTop(): void; + + /** + * Scrolls the display of the terminal to the bottom. + */ + scrollToBottom(): void; + + /** + * Scrolls to a line within the buffer. + * @param line The 0-based line index to scroll to. + */ + scrollToLine(line: number): void; + + /** + * Clear the entire buffer, making the prompt line the new first line. + */ + clear(): void; + + /** + * Write data to the terminal. + * @param data The data to write to the terminal. This can either be raw + * bytes given as Uint8Array from the pty or a string. Raw bytes will always + * be treated as UTF-8 encoded, string data as UTF-16. + * @param callback Optional callback that fires when the data was processed + * by the parser. + */ + write(data: string | Uint8Array, callback?: () => void): void; + + /** + * Writes data to the terminal, followed by a break line character (\n). + * @param data The data to write to the terminal. This can either be raw + * bytes given as Uint8Array from the pty or a string. Raw bytes will always + * be treated as UTF-8 encoded, string data as UTF-16. + * @param callback Optional callback that fires when the data was processed + * by the parser. + */ + writeln(data: string | Uint8Array, callback?: () => void): void; + + /** + * Write UTF8 data to the terminal. + * @param data The data to write to the terminal. + * @param callback Optional callback when data was processed. + * @deprecated use `write` instead + */ + writeUtf8(data: Uint8Array, callback?: () => void): void; + + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'fontFamily' | 'logLevel' | 'rendererType' | 'termName' | 'wordSeparator'): string; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell' | 'windowsMode'): boolean; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'cols' | 'fontSize' | 'letterSpacing' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback'): number; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: string): any; + + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'fontFamily' | 'termName' | 'bellSound' | 'wordSeparator', value: string): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'fontWeight' | 'fontWeightBold', value: null | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'logLevel', value: LogLevel): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'bellStyle', value: null | 'none' | 'visual' | 'sound' | 'both'): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'cursorStyle', value: null | 'block' | 'underline' | 'bar'): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'popOnBell' | 'rightClickSelectsWord' | 'visualBell' | 'windowsMode', value: boolean): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'fontSize' | 'letterSpacing' | 'lineHeight' | 'tabStopWidth' | 'scrollback', value: number): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'theme', value: ITheme): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'cols' | 'rows', value: number): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: string, value: any): void; + + /** + * Perform a full reset (RIS, aka '\x1bc'). + */ + reset(): void; + + /** + * Loads an addon into this instance of xterm.js. + * @param addon The addon to load. + */ + loadAddon(addon: ITerminalAddon): void; + } + + /** + * An addon that can provide additional functionality to the terminal. + */ + export interface ITerminalAddon extends IDisposable { + /** + * This is called when the addon is activated. + */ + activate(terminal: Terminal): void; + } + + /** + * An object representing a selection within the terminal. + */ + interface ISelectionPosition { + /** + * The start column of the selection. + */ + startColumn: number; + + /** + * The start row of the selection. + */ + startRow: number; + + /** + * The end column of the selection. + */ + endColumn: number; + + /** + * The end row of the selection. + */ + endRow: number; + } + + /** + * An object representing a range within the viewport of the terminal. + */ + export interface IViewportRange { + /** + * The start of the range. + */ + start: IViewportRangePosition; + + /** + * The end of the range. + */ + end: IViewportRangePosition; + } + + /** + * An object representing a cell position within the viewport of the terminal. + */ + interface IViewportRangePosition { + /** + * The x position of the cell. This is a 0-based index that refers to the + * space in between columns, not the column itself. Index 0 refers to the + * left side of the viewport, index `Terminal.cols` refers to the right side + * of the viewport. This can be thought of as how a cursor is positioned in + * a text editor. + */ + x: number; + + /** + * The y position of the cell. This is a 0-based index that refers to a + * specific row. + */ + y: number; + } + + /** + * A range within a buffer. + */ + interface IBufferRange { + /** + * The start position of the range. + */ + start: IBufferCellPosition; + + /** + * The end position of the range. + */ + end: IBufferCellPosition; + } + + /** + * A position within a buffer. + */ + interface IBufferCellPosition { + /** + * The x position within the buffer. + */ + x: number; + + /** + * The y position within the buffer. + */ + y: number; + } + + /** + * Represents a terminal buffer. + */ + interface IBuffer { + /** + * The type of the buffer. + */ + readonly type: 'normal' | 'alternate'; + + /** + * The y position of the cursor. This ranges between `0` (when the + * cursor is at baseY) and `Terminal.rows - 1` (when the cursor is on the + * last row). + */ + readonly cursorY: number; + + /** + * The x position of the cursor. This ranges between `0` (left side) and + * `Terminal.cols` (after last cell of the row). + */ + readonly cursorX: number; + + /** + * The line within the buffer where the top of the viewport is. + */ + readonly viewportY: number; + + /** + * The line within the buffer where the top of the bottom page is (when + * fully scrolled down). + */ + readonly baseY: number; + + /** + * The amount of lines in the buffer. + */ + readonly length: number; + + /** + * Gets a line from the buffer, or undefined if the line index does not + * exist. + * + * Note that the result of this function should be used immediately after + * calling as when the terminal updates it could lead to unexpected + * behavior. + * + * @param y The line index to get. + */ + getLine(y: number): IBufferLine | undefined; + + /** + * Creates an empty cell object suitable as a cell reference in + * `line.getCell(x, cell)`. Use this to avoid costly recreation of + * cell objects when dealing with tons of cells. + */ + getNullCell(): IBufferCell; + } + + /** + * Represents the terminal's set of buffers. + */ + interface IBufferNamespace { + /** + * The active buffer, this will either be the normal or alternate buffers. + */ + readonly active: IBuffer; + + /** + * The normal buffer. + */ + readonly normal: IBuffer; + + /** + * The alternate buffer, this becomes the active buffer when an application + * enters this mode via DECSET (`CSI ? 4 7 h`) + */ + readonly alternate: IBuffer; + + /** + * Adds an event listener for when the active buffer changes. + * @returns an `IDisposable` to stop listening. + */ + onBufferChange: IEvent; + } + + /** + * Represents a line in the terminal's buffer. + */ + interface IBufferLine { + /** + * Whether the line is wrapped from the previous line. + */ + readonly isWrapped: boolean; + + /** + * The length of the line, all call to getCell beyond the length will result + * in `undefined`. + */ + readonly length: number; + + /** + * Gets a cell from the line, or undefined if the line index does not exist. + * + * Note that the result of this function should be used immediately after + * calling as when the terminal updates it could lead to unexpected + * behavior. + * + * @param x The character index to get. + * @param cell Optional cell object to load data into for performance + * reasons. This is mainly useful when every cell in the buffer is being + * looped over to avoid creating new objects for every cell. + */ + getCell(x: number, cell?: IBufferCell): IBufferCell | undefined; + + /** + * Gets the line as a string. Note that this is gets only the string for the + * line, not taking isWrapped into account. + * + * @param trimRight Whether to trim any whitespace at the right of the line. + * @param startColumn The column to start from (inclusive). + * @param endColumn The column to end at (exclusive). + */ + translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string; + } + + /** + * Represents a single cell in the terminal's buffer. + */ + interface IBufferCell { + /** + * The width of the character. Some examples: + * + * - `1` for most cells. + * - `2` for wide character like CJK glyphs. + * - `0` for cells immediately following cells with a width of `2`. + */ + getWidth(): number; + + /** + * The character(s) within the cell. Examples of what this can contain: + * + * - A normal width character + * - A wide character (eg. CJK) + * - An emoji + */ + getChars(): string; + + /** + * Gets the UTF32 codepoint of single characters, if content is a combined + * string it returns the codepoint of the last character in the string. + */ + getCode(): number; + + /** + * Gets the number representation of the foreground color mode, this can be + * used to perform quick comparisons of 2 cells to see if they're the same. + * Use `isFgRGB`, `isFgPalette` and `isFgDefault` to check what color mode + * a cell is. + */ + getFgColorMode(): number; + + /** + * Gets the number representation of the background color mode, this can be + * used to perform quick comparisons of 2 cells to see if they're the same. + * Use `isBgRGB`, `isBgPalette` and `isBgDefault` to check what color mode + * a cell is. + */ + getBgColorMode(): number; + + /** + * Gets a cell's foreground color number, this differs depending on what the + * color mode of the cell is: + * + * - Default: This should be 0, representing the default foreground color + * (CSI 39 m). + * - Palette: This is a number from 0 to 255 of ANSI colors (CSI 3(0-7) m, + * CSI 9(0-7) m, CSI 38 ; 5 ; 0-255 m). + * - RGB: A hex value representing a 'true color': 0xRRGGBB. + * (CSI 3 8 ; 2 ; Pi ; Pr ; Pg ; Pb) + */ + getFgColor(): number; + + /** + * Gets a cell's background color number, this differs depending on what the + * color mode of the cell is: + * + * - Default: This should be 0, representing the default background color + * (CSI 49 m). + * - Palette: This is a number from 0 to 255 of ANSI colors + * (CSI 4(0-7) m, CSI 10(0-7) m, CSI 48 ; 5 ; 0-255 m). + * - RGB: A hex value representing a 'true color': 0xRRGGBB + * (CSI 4 8 ; 2 ; Pi ; Pr ; Pg ; Pb) + */ + getBgColor(): number; + + /** Whether the cell has the bold attribute (CSI 1 m). */ + isBold(): number; + /** Whether the cell has the italic attribute (CSI 3 m). */ + isItalic(): number; + /** Whether the cell has the dim attribute (CSI 2 m). */ + isDim(): number; + /** Whether the cell has the underline attribute (CSI 4 m). */ + isUnderline(): number; + /** Whether the cell has the blink attribute (CSI 5 m). */ + isBlink(): number; + /** Whether the cell has the inverse attribute (CSI 7 m). */ + isInverse(): number; + /** Whether the cell has the invisible attribute (CSI 8 m). */ + isInvisible(): number; + /** Whether the cell has the strikethrough attribute (CSI 9 m). */ + isStrikethrough(): number; + + /** Whether the cell is using the RGB foreground color mode. */ + isFgRGB(): boolean; + /** Whether the cell is using the RGB background color mode. */ + isBgRGB(): boolean; + /** Whether the cell is using the palette foreground color mode. */ + isFgPalette(): boolean; + /** Whether the cell is using the palette background color mode. */ + isBgPalette(): boolean; + /** Whether the cell is using the default foreground color mode. */ + isFgDefault(): boolean; + /** Whether the cell is using the default background color mode. */ + isBgDefault(): boolean; + + /** Whether the cell has the default attribute (no color or style). */ + isAttributeDefault(): boolean; + } + + /** + * Data type to register a CSI, DCS or ESC callback in the parser + * in the form: + * ESC I..I F + * CSI Prefix P..P I..I F + * DCS Prefix P..P I..I F data_bytes ST + * + * with these rules/restrictions: + * - prefix can only be used with CSI and DCS + * - only one leading prefix byte is recognized by the parser + * before any other parameter bytes (P..P) + * - intermediate bytes are recognized up to 2 + * + * For custom sequences make sure to read ECMA-48 and the resources at + * vt100.net to not clash with existing sequences or reserved address space. + * General recommendations: + * - use private address space (see ECMA-48) + * - use max one intermediate byte (technically not limited by the spec, + * in practice there are no sequences with more than one intermediate byte, + * thus parsers might get confused with more intermediates) + * - test against other common emulators to check whether they escape/ignore + * the sequence correctly + * + * Notes: OSC command registration is handled differently (see addOscHandler) + * APC, PM or SOS is currently not supported. + */ + export interface IFunctionIdentifier { + /** + * Optional prefix byte, must be in range \x3c .. \x3f. + * Usable in CSI and DCS. + */ + prefix?: string; + /** + * Optional intermediate bytes, must be in range \x20 .. \x2f. + * Usable in CSI, DCS and ESC. + */ + intermediates?: string; + /** + * Final byte, must be in range \x40 .. \x7e for CSI and DCS, + * \x30 .. \x7e for ESC. + */ + final: string; + } + + /** + * Allows hooking into the parser for custom handling of escape sequences. + */ + export interface IParser { + /** + * Adds a handler for CSI escape sequences. + * @param id Specifies the function identifier under which the callback + * gets registered, e.g. {final: 'm'} for SGR. + * @param callback The function to handle the sequence. The callback is + * called with the numerical params. If the sequence has subparams the + * array will contain subarrays with their numercial values. + * Return true if the sequence was handled; false if we should try + * a previous handler (set by addCsiHandler or setCsiHandler). + * The most recently added handler is tried first. + * @return An IDisposable you can call to remove this handler. + */ + registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable; + + /** + * Adds a handler for DCS escape sequences. + * @param id Specifies the function identifier under which the callback + * gets registered, e.g. {intermediates: '$' final: 'q'} for DECRQSS. + * @param callback The function to handle the sequence. Note that the + * function will only be called once if the sequence finished sucessfully. + * There is currently no way to intercept smaller data chunks, data chunks + * will be stored up until the sequence is finished. Since DCS sequences + * are not limited by the amount of data this might impose a problem for + * big payloads. Currently xterm.js limits DCS payload to 10 MB + * which should give enough room for most use cases. + * The function gets the payload and numerical parameters as arguments. + * Return true if the sequence was handled; false if we should try + * a previous handler (set by addDcsHandler or setDcsHandler). + * The most recently added handler is tried first. + * @return An IDisposable you can call to remove this handler. + */ + registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean): IDisposable; + + /** + * Adds a handler for ESC escape sequences. + * @param id Specifies the function identifier under which the callback + * gets registered, e.g. {intermediates: '%' final: 'G'} for + * default charset selection. + * @param callback The function to handle the sequence. + * Return true if the sequence was handled; false if we should try + * a previous handler (set by addEscHandler or setEscHandler). + * The most recently added handler is tried first. + * @return An IDisposable you can call to remove this handler. + */ + registerEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable; + + /** + * Adds a handler for OSC escape sequences. + * @param ident The number (first parameter) of the sequence. + * @param callback The function to handle the sequence. Note that the + * function will only be called once if the sequence finished sucessfully. + * There is currently no way to intercept smaller data chunks, data chunks + * will be stored up until the sequence is finished. Since OSC sequences + * are not limited by the amount of data this might impose a problem for + * big payloads. Currently xterm.js limits OSC payload to 10 MB + * which should give enough room for most use cases. + * The callback is called with OSC data string. + * Return true if the sequence was handled; false if we should try + * a previous handler (set by addOscHandler or setOscHandler). + * The most recently added handler is tried first. + * @return An IDisposable you can call to remove this handler. + */ + registerOscHandler(ident: number, callback: (data: string) => boolean): IDisposable; + } + + /** + * (EXPERIMENTAL) Unicode version provider. + * Used to register custom Unicode versions with `Terminal.unicode.register`. + */ + export interface IUnicodeVersionProvider { + /** + * String indicating the Unicode version provided. + */ + readonly version: string; + + /** + * Unicode version dependent wcwidth implementation. + */ + wcwidth(codepoint: number): 0 | 1 | 2; + } + + /** + * (EXPERIMENTAL) Unicode handling interface. + */ + export interface IUnicodeHandling { + /** + * Register a custom Unicode version provider. + */ + register(provider: IUnicodeVersionProvider): void; + + /** + * Registered Unicode versions. + */ + readonly versions: ReadonlyArray; + + /** + * Getter/setter for active Unicode version. + */ + activeVersion: string; + } + + /** + * Terminal modes as set by SM/DECSET. + */ + export interface IModes { + /** + * Application Cursor Keys (DECCKM): `CSI ? 1 h` + */ + readonly applicationCursorKeysMode: boolean; + /** + * Application Keypad Mode (DECNKM): `CSI ? 6 6 h` + */ + readonly applicationKeypadMode: boolean; + /** + * Bracketed Paste Mode: `CSI ? 2 0 0 4 h` + */ + readonly bracketedPasteMode: boolean; + /** + * Insert Mode (IRM): `CSI 4 h` + */ + readonly insertMode: boolean; + /** + * Mouse Tracking, this can be one of the following: + * - none: This is the default value and can be reset with DECRST + * - x10: Send Mouse X & Y on button press `CSI ? 9 h` + * - vt200: Send Mouse X & Y on button press and release `CSI ? 1 0 0 0 h` + * - drag: Use Cell Motion Mouse Tracking `CSI ? 1 0 0 2 h` + * - any: Use All Motion Mouse Tracking `CSI ? 1 0 0 3 h` + */ + readonly mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any'; + /** + * Origin Mode (DECOM): `CSI ? 6 h` + */ + readonly originMode: boolean; + /** + * Reverse-wraparound Mode: `CSI ? 4 5 h` + */ + readonly reverseWraparoundMode: boolean; + /** + * Send FocusIn/FocusOut events: `CSI ? 1 0 0 4 h` + */ + readonly sendFocusMode: boolean; + /** + * Auto-Wrap Mode (DECAWM): `CSI ? 7 h` + */ + readonly wraparoundMode: boolean + } +} diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 6bfb71ae0..d7c2effcc 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -90,6 +90,14 @@ declare module 'xterm' { */ cursorWidth?: number; + /** + * Whether to draw custom glyphs for block element and box drawing characters instead of using + * the font. This should typically result in better rendering with continuous lines, even when + * line height and letter spacing is used. Note that this doesn't work with the DOM renderer + * which renders all characters using the font. The default is true. + */ + customGlyphs?: boolean; + /** * Whether input should be disabled. */ @@ -622,6 +630,11 @@ declare module 'xterm' { */ readonly unicode: IUnicodeHandling; + /** + * Gets the terminal modes as set by SM/DECSET. + */ + readonly modes: IModes; + /** * Natural language strings that can be localized. */ @@ -634,6 +647,12 @@ declare module 'xterm' { */ constructor(options?: ITerminalOptions); + /** + * Adds an event listener for when the bell is triggered. + * @returns an `IDisposable` to stop listening. + */ + onBell: IEvent; + /** * Adds an event listener for when a binary event fires. This is used to * enable non UTF-8 conformant binary messages to be sent to the backend. @@ -674,19 +693,6 @@ declare module 'xterm' { */ onLineFeed: IEvent; - /** - * Adds an event listener for when a scroll occurs. The event value is the - * new position of the viewport. - * @returns an `IDisposable` to stop listening. - */ - onScroll: IEvent; - - /** - * Adds an event listener for when a selection change occurs. - * @returns an `IDisposable` to stop listening. - */ - onSelectionChange: IEvent; - /** * Adds an event listener for when rows are rendered. The event value * contains the start row and end rows of the rendered area (ranges from `0` @@ -702,6 +708,19 @@ declare module 'xterm' { */ onResize: IEvent<{ cols: number, rows: number }>; + /** + * Adds an event listener for when a scroll occurs. The event value is the + * new position of the viewport. + * @returns an `IDisposable` to stop listening. + */ + onScroll: IEvent; + + /** + * Adds an event listener for when a selection change occurs. + * @returns an `IDisposable` to stop listening. + */ + onSelectionChange: IEvent; + /** * Adds an event listener for when an OSC 0 or OSC 2 title change occurs. * The event value is the new title. @@ -709,12 +728,6 @@ declare module 'xterm' { */ onTitleChange: IEvent; - /** - * Adds an event listener for when the bell is triggered. - * @returns an `IDisposable` to stop listening. - */ - onBell: IEvent; - /** * Unfocus the terminal. */ @@ -1043,6 +1056,14 @@ declare module 'xterm' { */ refresh(start: number, end: number): void; + /** + * Clears the texture atlas of the canvas renderer if it's active. Doing this will force a + * redraw of all glyphs which can workaround issues causing the texture to become corrupt, for + * example Chromium/Nvidia has an issue where the texture gets messed up when resuming the OS + * from sleep. + */ + clearTextureAtlas(): void; + /** * Perform a full reset (RIS, aka '\x1bc'). */ @@ -1431,18 +1452,20 @@ declare module 'xterm' { /** Whether the cell has the bold attribute (CSI 1 m). */ isBold(): number; - /** Whether the cell has the inverse attribute (CSI 3 m). */ + /** Whether the cell has the italic attribute (CSI 3 m). */ isItalic(): number; - /** Whether the cell has the inverse attribute (CSI 2 m). */ + /** Whether the cell has the dim attribute (CSI 2 m). */ isDim(): number; /** Whether the cell has the underline attribute (CSI 4 m). */ isUnderline(): number; - /** Whether the cell has the inverse attribute (CSI 5 m). */ + /** Whether the cell has the blink attribute (CSI 5 m). */ isBlink(): number; /** Whether the cell has the inverse attribute (CSI 7 m). */ isInverse(): number; - /** Whether the cell has the inverse attribute (CSI 8 m). */ + /** Whether the cell has the invisible attribute (CSI 8 m). */ isInvisible(): number; + /** Whether the cell has the strikethrough attribute (CSI 9 m). */ + isStrikethrough(): number; /** Whether the cell is using the RGB foreground color mode. */ isFgRGB(): boolean; @@ -1622,4 +1645,51 @@ declare module 'xterm' { */ activeVersion: string; } + + /** + * Terminal modes as set by SM/DECSET. + */ + export interface IModes { + /** + * Application Cursor Keys (DECCKM): `CSI ? 1 h` + */ + readonly applicationCursorKeysMode: boolean; + /** + * Application Keypad Mode (DECNKM): `CSI ? 6 6 h` + */ + readonly applicationKeypadMode: boolean; + /** + * Bracketed Paste Mode: `CSI ? 2 0 0 4 h` + */ + readonly bracketedPasteMode: boolean; + /** + * Insert Mode (IRM): `CSI 4 h` + */ + readonly insertMode: boolean; + /** + * Mouse Tracking, this can be one of the following: + * - none: This is the default value and can be reset with DECRST + * - x10: Send Mouse X & Y on button press `CSI ? 9 h` + * - vt200: Send Mouse X & Y on button press and release `CSI ? 1 0 0 0 h` + * - drag: Use Cell Motion Mouse Tracking `CSI ? 1 0 0 2 h` + * - any: Use All Motion Mouse Tracking `CSI ? 1 0 0 3 h` + */ + readonly mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any'; + /** + * Origin Mode (DECOM): `CSI ? 6 h` + */ + readonly originMode: boolean; + /** + * Reverse-wraparound Mode: `CSI ? 4 5 h` + */ + readonly reverseWraparoundMode: boolean; + /** + * Send FocusIn/FocusOut events: `CSI ? 1 0 0 4 h` + */ + readonly sendFocusMode: boolean; + /** + * Auto-Wrap Mode (DECAWM): `CSI ? 7 h` + */ + readonly wraparoundMode: boolean + } } diff --git a/webpack.config.headless.js b/webpack.config.headless.js new file mode 100644 index 000000000..d5bb97b78 --- /dev/null +++ b/webpack.config.headless.js @@ -0,0 +1,43 @@ +/** + * Copyright (c) 2019 The xterm.js authors. All rights reserved. + * @license MIT + */ + +const path = require('path'); + +/** + * This webpack config does a production build for xterm.js headless. It works by taking the output + * from tsc (via `yarn watch` or `yarn prebuild`) which are put into `out/` and webpacks them into a + * production mode umd library module in `lib-headless/`. The aliases are used fix up the absolute + * paths output by tsc (because of `baseUrl` and `paths` in `tsconfig.json`. + */ +module.exports = { + entry: './out/headless/public/Terminal.js', + devtool: 'source-map', + module: { + rules: [ + { + test: /\.js$/, + use: ["source-map-loader"], + enforce: "pre", + exclude: /node_modules/ + } + ] + }, + resolve: { + modules: ['./node_modules'], + extensions: [ '.js' ], + alias: { + common: path.resolve('./out/common'), + headless: path.resolve('./out/headless') + } + }, + output: { + filename: 'xterm-headless.js', + path: path.resolve('./headless/lib-headless'), + library: { + type: 'commonjs' + } + }, + mode: 'production' +}; diff --git a/yarn.lock b/yarn.lock index ee0f0558c..cf92d8f7a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1329,7 +1329,14 @@ core-util-is@1.0.2, core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= -cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: +cross-env@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" + integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw== + dependencies: + cross-spawn "^7.0.1" + +cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== @@ -3356,9 +3363,9 @@ path-key@^3.0.0, path-key@^3.1.0: integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-to-regexp@0.1.7: version "0.1.7" @@ -3909,7 +3916,7 @@ source-map-loader@^2.0.1: iconv-lite "^0.6.2" source-map-js "^0.6.2" -source-map-support@~0.5.19: +source-map-support@^0.5.19, source-map-support@~0.5.19: version "0.5.19" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==