From 67934ff35f5d9b9ddff9f80741d5e4dc61f492a8 Mon Sep 17 00:00:00 2001 From: Labhansh Agrawal Date: Tue, 16 Mar 2021 13:36:32 +0530 Subject: [PATCH 01/16] Enable using ligatures addon outside electron --- addons/xterm-addon-ligatures/package.json | 2 +- addons/xterm-addon-ligatures/src/font.ts | 57 +++++++++++++++++-- .../xterm-addon-ligatures/webpack.config.js | 14 ++++- addons/xterm-addon-ligatures/yarn.lock | 33 +++++------ demo/client.ts | 16 +++++- demo/start.js | 7 +++ 6 files changed, 99 insertions(+), 30 deletions(-) diff --git a/addons/xterm-addon-ligatures/package.json b/addons/xterm-addon-ligatures/package.json index 4e2b4056..f96ce167 100644 --- a/addons/xterm-addon-ligatures/package.json +++ b/addons/xterm-addon-ligatures/package.json @@ -32,7 +32,7 @@ "license": "MIT", "dependencies": { "font-finder": "^1.1.0", - "font-ligatures": "^1.3.3" + "font-ligatures": "^1.4.0" }, "devDependencies": { "@types/sinon": "^5.0.1", diff --git a/addons/xterm-addon-ligatures/src/font.ts b/addons/xterm-addon-ligatures/src/font.ts index 825fc797..0d01d3cc 100644 --- a/addons/xterm-addon-ligatures/src/font.ts +++ b/addons/xterm-addon-ligatures/src/font.ts @@ -3,12 +3,19 @@ * @license MIT */ -import * as fontFinder from 'font-finder'; -import * as fontLigatures from 'font-ligatures'; +import {FontList} from 'font-finder'; +import {Font, loadBuffer, loadFile} from 'font-ligatures'; import parse from './parse'; -let fontsPromise: Promise | undefined = undefined; +interface IFontMetadata { + family: string; + fullName: string; + postscriptName: string; + blob: () => Promise; +} + +let fontsPromise: Promise> | undefined = undefined; /** * Loads the font ligature wrapper for the specified font family if it could be @@ -16,9 +23,43 @@ let fontsPromise: Promise | undefined = undefined; * @param fontFamily The CSS font family definition to resolve * @param cacheSize The size of the ligature cache to maintain if the font is resolved */ -export default async function load(fontFamily: string, cacheSize: number): Promise { +export default async function load(fontFamily: string, cacheSize: number): Promise { + if (!fontsPromise && 'fonts' in navigator) { + try { + const status = await (navigator as any).permissions.request?.({ + name: 'local-fonts' + }); + if (status && status.state !== 'granted') { + throw new Error('Permission to access local fonts not granted.'); + } + } catch (err) { + // A `TypeError` indicates the 'local-fonts' + // permission is not yet implemented, so + // only `throw` if this is _not_ the problem. + if (err.name !== 'TypeError') { + throw err; + } + } + const fonts: Record = {}; + try { + const fontsIterator: AsyncIterableIterator = (navigator as any).fonts.query(); + for await (const metadata of fontsIterator) { + if (!fonts.hasOwnProperty(metadata.family)) { + fonts[metadata.family] = []; + } + fonts[metadata.family].push(metadata); + } + fontsPromise = Promise.resolve(fonts); + } catch (err) { + console.error(err.name, err.message); + } + } if (!fontsPromise) { - fontsPromise = fontFinder.list(); + try { + fontsPromise = (await import('font-finder')).list(); + } catch (err) { + fontsPromise = Promise.resolve({}); + } } const fonts = await fontsPromise; @@ -31,7 +72,11 @@ export default async function load(fontFamily: string, cacheSize: number): Promi } if (fonts.hasOwnProperty(family) && fonts[family].length > 0) { - return await fontLigatures.loadFile(fonts[family][0].path, { cacheSize }); + const font = fonts[family][0]; + if ('blob' in font) { + return loadBuffer(await (await font.blob()).arrayBuffer(), {cacheSize}); + } + return await loadFile(font.path, {cacheSize}); } } diff --git a/addons/xterm-addon-ligatures/webpack.config.js b/addons/xterm-addon-ligatures/webpack.config.js index 253e1207..6bdbd156 100644 --- a/addons/xterm-addon-ligatures/webpack.config.js +++ b/addons/xterm-addon-ligatures/webpack.config.js @@ -30,7 +30,17 @@ module.exports = { }, mode: 'production', externals: { - 'font-finder':'font-finder', - 'font-ligatures':'font-ligatures' + 'font-finder': 'font-finder', + 'stream': 'stream', + 'os': 'os', + 'util': 'util' + }, + resolve: { + fallback: { + stream: false, + util: false, + os: false, + path: false + } } }; diff --git a/addons/xterm-addon-ligatures/yarn.lock b/addons/xterm-addon-ligatures/yarn.lock index 049b798a..2191ce37 100644 --- a/addons/xterm-addon-ligatures/yarn.lock +++ b/addons/xterm-addon-ligatures/yarn.lock @@ -87,19 +87,19 @@ font-finder@^1.0.3: font-finder@^1.1.0: version "1.1.0" - resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858" + resolved "https://registry.npmjs.org/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858" integrity sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw== dependencies: get-system-fonts "^2.0.0" promise-stream-reader "^1.0.1" -font-ligatures@^1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/font-ligatures/-/font-ligatures-1.3.3.tgz#63fff18dc8adb3a11fe5eec1f4e8d7edfa8075b9" - integrity sha512-NSGpHgVNX81M7AWS1XylK1UZbN3QllfUIDAAuPv6TUcl5O2b781JcKS5L2RopAU0AqlTyX3ZuX/04eaMpbVrHA== +font-ligatures@^1.4.0: + version "1.4.0" + resolved "https://registry.npmjs.org/font-ligatures/-/font-ligatures-1.4.0.tgz#6a7b370d96be1358dddfad67830e82fbfd59e6dc" + integrity sha512-n7DFnnEpJ0NrVoLqZIL4tMGVs+CnFwQc92m80LWyrbgAFO4x234+t2/H9o4eOYA1eh6ta9dZAEEsJAwsBdNezA== dependencies: font-finder "^1.0.3" - lru-cache "^4.1.3" + lru-cache "^6.0.0" opentype.js "^0.8.0" get-system-fonts@^2.0.0: @@ -144,12 +144,12 @@ lolex@^5.0.1: dependencies: "@sinonjs/commons" "^1.7.0" -lru-cache@^4.1.3: - version "4.1.3" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c" +lru-cache@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94" + integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== dependencies: - pseudomap "^1.0.2" - yallist "^2.1.2" + yallist "^4.0.0" minimist@^1.2.5: version "1.2.5" @@ -198,10 +198,6 @@ promise-stream-reader@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz#4e793a79c9d49a73ccd947c6da9c127f12923649" -pseudomap@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" - sinon@6.3.5: version "6.3.5" resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.3.5.tgz#0f6d6a5b4ebaad1f6e8e019395542d1d02c144a0" @@ -232,9 +228,10 @@ type-detect@4.0.8, type-detect@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" -yallist@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" +yallist@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" + integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== yauzl@^2.10.0: version "2.10.0" diff --git a/demo/client.ts b/demo/client.ts index 93b7c26c..1f5eb49a 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -16,6 +16,7 @@ import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAdd import { WebLinksAddon } from '../addons/xterm-addon-web-links/out/WebLinksAddon'; import { WebglAddon } from '../addons/xterm-addon-webgl/out/WebglAddon'; import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Addon'; +import { LigaturesAddon } from '../addons/xterm-addon-ligatures/out/LigaturesAddon'; // Use webpacked version (yarn package) // import { Terminal } from '../lib/xterm'; @@ -26,6 +27,7 @@ import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Add // import { WebLinksAddon } from 'xterm-addon-web-links'; // import { WebglAddon } from 'xterm-addon-webgl'; // import { Unicode11Addon } from 'xterm-addon-unicode11'; +// import { LigaturesAddon } from 'xterm-addon-ligatures'; // Pulling in the module's types relies on the above, it's looks a // little weird here as we're importing "this" module @@ -41,6 +43,7 @@ export interface IWindowWithTerminal extends Window { WebLinksAddon?: typeof WebLinksAddon; WebglAddon?: typeof WebglAddon; Unicode11Addon?: typeof Unicode11Addon; + LigaturesAddon?: typeof LigaturesAddon; } declare let window: IWindowWithTerminal; @@ -50,7 +53,7 @@ let socketURL; let socket; let pid; -type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl'; +type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl' | 'ligatures'; interface IDemoAddon { name: T; @@ -62,8 +65,9 @@ interface IDemoAddon { T extends 'serialize' ? typeof SerializeAddon : T extends 'web-links' ? typeof WebLinksAddon : T extends 'unicode11' ? typeof Unicode11Addon : + T extends 'ligatures' ? typeof LigaturesAddon : typeof WebglAddon; - instance?: + instance?: T extends 'attach' ? AttachAddon : T extends 'fit' ? FitAddon : T extends 'search' ? SearchAddon : @@ -71,6 +75,7 @@ interface IDemoAddon { T extends 'web-links' ? WebLinksAddon : T extends 'webgl' ? WebglAddon : T extends 'unicode11' ? typeof Unicode11Addon : + T extends 'ligatures' ? typeof LigaturesAddon : never; } @@ -81,7 +86,8 @@ const addons: { [T in AddonType]: IDemoAddon} = { serialize: { name: 'serialize', ctor: SerializeAddon, canChange: true }, 'web-links': { name: 'web-links', ctor: WebLinksAddon, canChange: true }, webgl: { name: 'webgl', ctor: WebglAddon, canChange: true }, - unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true } + unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true }, + ligatures: { name: 'ligatures', ctor: LigaturesAddon, canChange: true } }; const terminalContainer = document.getElementById('terminal-container'); @@ -117,6 +123,7 @@ const disposeRecreateButtonHandler = () => { addons.search.instance = undefined; addons.serialize.instance = undefined; addons.unicode11.instance = undefined; + addons.ligatures.instance = undefined; addons['web-links'].instance = undefined; addons.webgl.instance = undefined; document.getElementById('dispose').innerHTML = 'Recreate Terminal'; @@ -133,6 +140,7 @@ if (document.location.pathname === '/test') { window.SearchAddon = SearchAddon; window.SerializeAddon = SerializeAddon; window.Unicode11Addon = Unicode11Addon; + window.LigaturesAddon = LigaturesAddon; window.WebLinksAddon = WebLinksAddon; window.WebglAddon = WebglAddon; } else { @@ -158,6 +166,7 @@ function createTerminal(): void { addons.serialize.instance = new SerializeAddon(); addons.fit.instance = new FitAddon(); addons.unicode11.instance = new Unicode11Addon(); + addons.ligatures.instance = new LigaturesAddon(); // TODO: Remove arguments when link provider API is the default addons['web-links'].instance = new WebLinksAddon(undefined, undefined, true); typedTerm.loadAddon(addons.fit.instance); @@ -181,6 +190,7 @@ function createTerminal(): void { socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/'; term.open(terminalContainer); + typedTerm.loadAddon(addons.ligatures.instance); addons.fit.instance!.fit(); term.focus(); diff --git a/demo/start.js b/demo/start.js index a14627c1..c4caea77 100644 --- a/demo/start.js +++ b/demo/start.js @@ -49,6 +49,13 @@ const clientConfig = { alias: { common: path.resolve('./out/common'), browser: path.resolve('./out/browser') + }, + fallback: { + stream: false, + util: false, + os: false, + path: false, + fs: false } }, output: { From 1e499c7867fe607563fcaa6cc8175cec30a3cb80 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 06:57:11 -0700 Subject: [PATCH 02/16] Disable ligatures addon by default Since it needs a user action to trigger the permissions prompt --- demo/client.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/demo/client.ts b/demo/client.ts index 1f5eb49a..780597e3 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -166,7 +166,6 @@ function createTerminal(): void { addons.serialize.instance = new SerializeAddon(); addons.fit.instance = new FitAddon(); addons.unicode11.instance = new Unicode11Addon(); - addons.ligatures.instance = new LigaturesAddon(); // TODO: Remove arguments when link provider API is the default addons['web-links'].instance = new WebLinksAddon(undefined, undefined, true); typedTerm.loadAddon(addons.fit.instance); @@ -190,7 +189,6 @@ function createTerminal(): void { socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/'; term.open(terminalContainer); - typedTerm.loadAddon(addons.ligatures.instance); addons.fit.instance!.fit(); term.focus(); From f19d7f0b705d81da2334381b307ed2f09a6ab4fb Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:08:06 -0700 Subject: [PATCH 03/16] Require spacing of objects outside of test files --- .eslintrc.json | 14 +- .../src/atlas/WebglCharAtlas.ts | 4 +- .../src/renderLayer/BaseRenderLayer.ts | 2 +- src/browser/renderer/BaseRenderLayer.ts | 2 +- .../renderer/atlas/DynamicCharAtlas.ts | 4 +- src/common/CircularList.ts | 4 +- src/common/InputHandler.ts | 148 +++++++++--------- src/common/buffer/Buffer.ts | 2 +- 8 files changed, 96 insertions(+), 84 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 8c416f15..114a0f1d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -151,6 +151,10 @@ "warn", "never" ], + "object-curly-spacing": [ + "warn", + "always" + ], "prefer-const": "warn", "spaced-comment": [ "warn", @@ -160,5 +164,13 @@ "exceptions": ["-"] } ] - } + }, + "overrides": [ + { + "files": ["**/*.test.ts"], + "rules": { + "object-curly-spacing": "off" + } + } + ] } diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 223ec16a..d252f065 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -80,12 +80,12 @@ export class WebglCharAtlas implements IDisposable { // The canvas needs alpha because we use clearColor to convert the background color to alpha. // It might also contain some characters with transparent backgrounds if allowTransparency is // set. - this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', {alpha: true})); + this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true })); this._tmpCanvas = document.createElement('canvas'); this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2; - this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency})); + this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency })); } public dispose(): void { diff --git a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts index da3b4d41..afd2b384 100644 --- a/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts +++ b/addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts @@ -46,7 +46,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { } private _initCanvas(): void { - this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha})); + this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha })); // Draw the background if this is an opaque layer if (!this._alpha) { this._clearAll(); diff --git a/src/browser/renderer/BaseRenderLayer.ts b/src/browser/renderer/BaseRenderLayer.ts index 8afec352..86e12f48 100644 --- a/src/browser/renderer/BaseRenderLayer.ts +++ b/src/browser/renderer/BaseRenderLayer.ts @@ -66,7 +66,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { } private _initCanvas(): void { - this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha})); + this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha })); // Draw the background if this is an opaque layer if (!this._alpha) { this._clearAll(); diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/src/browser/renderer/atlas/DynamicCharAtlas.ts index 696fb63c..d370fc8f 100644 --- a/src/browser/renderer/atlas/DynamicCharAtlas.ts +++ b/src/browser/renderer/atlas/DynamicCharAtlas.ts @@ -91,12 +91,12 @@ export class DynamicCharAtlas extends BaseCharAtlas { // The canvas needs alpha because we use clearColor to convert the background color to alpha. // It might also contain some characters with transparent backgrounds if allowTransparency is // set. - this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', {alpha: true})); + this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', { alpha: true })); const tmpCanvas = document.createElement('canvas'); tmpCanvas.width = this._config.scaledCharWidth; tmpCanvas.height = this._config.scaledCharHeight; - this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency})); + this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency })); this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth); this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight); diff --git a/src/common/CircularList.ts b/src/common/CircularList.ts index ab00e681..4d2c04ec 100644 --- a/src/common/CircularList.ts +++ b/src/common/CircularList.ts @@ -158,7 +158,7 @@ export class CircularList implements ICircularList { this._array[this._getCyclicIndex(i)] = this._array[this._getCyclicIndex(i + deleteCount)]; } this._length -= deleteCount; - this.onDeleteEmitter.fire({index: start, amount: deleteCount}); + this.onDeleteEmitter.fire({ index: start, amount: deleteCount }); } // Add items @@ -169,7 +169,7 @@ export class CircularList implements ICircularList { this._array[this._getCyclicIndex(start + i)] = items[i]; } if (items.length) { - this.onInsertEmitter.fire({index: start, amount: items.length}); + this.onInsertEmitter.fire({ index: start, amount: items.length }); } // Adjust length as needed diff --git a/src/common/InputHandler.ts b/src/common/InputHandler.ts index 13b0a0e7..da315005 100644 --- a/src/common/InputHandler.ts +++ b/src/common/InputHandler.ts @@ -24,7 +24,7 @@ import { DcsHandler } from 'common/parser/DcsParser'; /** * Map collect to glevel. Used in `selectCharset`. */ -const GLEVEL: {[key: string]: number} = {'(': 0, ')': 1, '*': 2, '+': 3, '-': 1, '.': 2}; +const GLEVEL: {[key: string]: number} = { '(': 0, ')': 1, '*': 2, '+': 3, '-': 1, '.': 2 }; /** * VT commands done by the parser - FIXME: move this to the parser? @@ -174,7 +174,7 @@ class DECRQSS implements IDcsHandler { this._coreService.triggerDataEvent(`${C0.ESC}P1$r0m${C0.ESC}\\`); break; case ' q': // DECSCUSR - const STYLES: {[key: string]: number} = {'block': 2, 'underline': 4, 'bar': 6}; + const STYLES: {[key: string]: number} = { 'block': 2, 'underline': 4, 'bar': 6 }; let style = STYLES[this._optionsService.options.cursorStyle]; style -= this._optionsService.options.cursorBlink ? 1 : 0; this._coreService.triggerDataEvent(`${C0.ESC}P1$r${style} q${C0.ESC}\\`); @@ -314,53 +314,53 @@ export class InputHandler extends Disposable implements IInputHandler { /** * CSI handler */ - this._parser.registerCsiHandler({final: '@'}, params => this.insertChars(params)); - this._parser.registerCsiHandler({intermediates: ' ', final: '@'}, params => this.scrollLeft(params)); - this._parser.registerCsiHandler({final: 'A'}, params => this.cursorUp(params)); - this._parser.registerCsiHandler({intermediates: ' ', final: 'A'}, params => this.scrollRight(params)); - this._parser.registerCsiHandler({final: 'B'}, params => this.cursorDown(params)); - this._parser.registerCsiHandler({final: 'C'}, params => this.cursorForward(params)); - this._parser.registerCsiHandler({final: 'D'}, params => this.cursorBackward(params)); - this._parser.registerCsiHandler({final: 'E'}, params => this.cursorNextLine(params)); - this._parser.registerCsiHandler({final: 'F'}, params => this.cursorPrecedingLine(params)); - this._parser.registerCsiHandler({final: 'G'}, params => this.cursorCharAbsolute(params)); - this._parser.registerCsiHandler({final: 'H'}, params => this.cursorPosition(params)); - this._parser.registerCsiHandler({final: 'I'}, params => this.cursorForwardTab(params)); - this._parser.registerCsiHandler({final: 'J'}, params => this.eraseInDisplay(params)); - this._parser.registerCsiHandler({prefix: '?', final: 'J'}, params => this.eraseInDisplay(params)); - this._parser.registerCsiHandler({final: 'K'}, params => this.eraseInLine(params)); - this._parser.registerCsiHandler({prefix: '?', final: 'K'}, params => this.eraseInLine(params)); - this._parser.registerCsiHandler({final: 'L'}, params => this.insertLines(params)); - this._parser.registerCsiHandler({final: 'M'}, params => this.deleteLines(params)); - this._parser.registerCsiHandler({final: 'P'}, params => this.deleteChars(params)); - this._parser.registerCsiHandler({final: 'S'}, params => this.scrollUp(params)); - this._parser.registerCsiHandler({final: 'T'}, params => this.scrollDown(params)); - this._parser.registerCsiHandler({final: 'X'}, params => this.eraseChars(params)); - this._parser.registerCsiHandler({final: 'Z'}, params => this.cursorBackwardTab(params)); - this._parser.registerCsiHandler({final: '`'}, params => this.charPosAbsolute(params)); - this._parser.registerCsiHandler({final: 'a'}, params => this.hPositionRelative(params)); - this._parser.registerCsiHandler({final: 'b'}, params => this.repeatPrecedingCharacter(params)); - this._parser.registerCsiHandler({final: 'c'}, params => this.sendDeviceAttributesPrimary(params)); - this._parser.registerCsiHandler({prefix: '>', final: 'c'}, params => this.sendDeviceAttributesSecondary(params)); - this._parser.registerCsiHandler({final: 'd'}, params => this.linePosAbsolute(params)); - this._parser.registerCsiHandler({final: 'e'}, params => this.vPositionRelative(params)); - this._parser.registerCsiHandler({final: 'f'}, params => this.hVPosition(params)); - this._parser.registerCsiHandler({final: 'g'}, params => this.tabClear(params)); - this._parser.registerCsiHandler({final: 'h'}, params => this.setMode(params)); - this._parser.registerCsiHandler({prefix: '?', final: 'h'}, params => this.setModePrivate(params)); - this._parser.registerCsiHandler({final: 'l'}, params => this.resetMode(params)); - this._parser.registerCsiHandler({prefix: '?', final: 'l'}, params => this.resetModePrivate(params)); - this._parser.registerCsiHandler({final: 'm'}, params => this.charAttributes(params)); - this._parser.registerCsiHandler({final: 'n'}, params => this.deviceStatus(params)); - this._parser.registerCsiHandler({prefix: '?', final: 'n'}, params => this.deviceStatusPrivate(params)); - this._parser.registerCsiHandler({intermediates: '!', final: 'p'}, params => this.softReset(params)); - this._parser.registerCsiHandler({intermediates: ' ', final: 'q'}, params => this.setCursorStyle(params)); - this._parser.registerCsiHandler({final: 'r'}, params => this.setScrollRegion(params)); - this._parser.registerCsiHandler({final: 's'}, params => this.saveCursor(params)); - this._parser.registerCsiHandler({final: 't'}, params => this.windowOptions(params)); - this._parser.registerCsiHandler({final: 'u'}, params => this.restoreCursor(params)); - this._parser.registerCsiHandler({intermediates: '\'', final: '}'}, params => this.insertColumns(params)); - this._parser.registerCsiHandler({intermediates: '\'', final: '~'}, params => this.deleteColumns(params)); + this._parser.registerCsiHandler({ final: '@' }, params => this.insertChars(params)); + this._parser.registerCsiHandler({ intermediates: ' ', final: '@' }, params => this.scrollLeft(params)); + this._parser.registerCsiHandler({ final: 'A' }, params => this.cursorUp(params)); + this._parser.registerCsiHandler({ intermediates: ' ', final: 'A' }, params => this.scrollRight(params)); + this._parser.registerCsiHandler({ final: 'B' }, params => this.cursorDown(params)); + this._parser.registerCsiHandler({ final: 'C' }, params => this.cursorForward(params)); + this._parser.registerCsiHandler({ final: 'D' }, params => this.cursorBackward(params)); + this._parser.registerCsiHandler({ final: 'E' }, params => this.cursorNextLine(params)); + this._parser.registerCsiHandler({ final: 'F' }, params => this.cursorPrecedingLine(params)); + this._parser.registerCsiHandler({ final: 'G' }, params => this.cursorCharAbsolute(params)); + this._parser.registerCsiHandler({ final: 'H' }, params => this.cursorPosition(params)); + this._parser.registerCsiHandler({ final: 'I' }, params => this.cursorForwardTab(params)); + this._parser.registerCsiHandler({ final: 'J' }, params => this.eraseInDisplay(params)); + this._parser.registerCsiHandler({ prefix: '?', final: 'J' }, params => this.eraseInDisplay(params)); + this._parser.registerCsiHandler({ final: 'K' }, params => this.eraseInLine(params)); + this._parser.registerCsiHandler({ prefix: '?', final: 'K' }, params => this.eraseInLine(params)); + this._parser.registerCsiHandler({ final: 'L' }, params => this.insertLines(params)); + this._parser.registerCsiHandler({ final: 'M' }, params => this.deleteLines(params)); + this._parser.registerCsiHandler({ final: 'P' }, params => this.deleteChars(params)); + this._parser.registerCsiHandler({ final: 'S' }, params => this.scrollUp(params)); + this._parser.registerCsiHandler({ final: 'T' }, params => this.scrollDown(params)); + this._parser.registerCsiHandler({ final: 'X' }, params => this.eraseChars(params)); + this._parser.registerCsiHandler({ final: 'Z' }, params => this.cursorBackwardTab(params)); + this._parser.registerCsiHandler({ final: '`' }, params => this.charPosAbsolute(params)); + this._parser.registerCsiHandler({ final: 'a' }, params => this.hPositionRelative(params)); + this._parser.registerCsiHandler({ final: 'b' }, params => this.repeatPrecedingCharacter(params)); + this._parser.registerCsiHandler({ final: 'c' }, params => this.sendDeviceAttributesPrimary(params)); + this._parser.registerCsiHandler({ prefix: '>', final: 'c' }, params => this.sendDeviceAttributesSecondary(params)); + this._parser.registerCsiHandler({ final: 'd' }, params => this.linePosAbsolute(params)); + this._parser.registerCsiHandler({ final: 'e' }, params => this.vPositionRelative(params)); + this._parser.registerCsiHandler({ final: 'f' }, params => this.hVPosition(params)); + this._parser.registerCsiHandler({ final: 'g' }, params => this.tabClear(params)); + this._parser.registerCsiHandler({ final: 'h' }, params => this.setMode(params)); + this._parser.registerCsiHandler({ prefix: '?', final: 'h' }, params => this.setModePrivate(params)); + this._parser.registerCsiHandler({ final: 'l' }, params => this.resetMode(params)); + this._parser.registerCsiHandler({ prefix: '?', final: 'l' }, params => this.resetModePrivate(params)); + this._parser.registerCsiHandler({ final: 'm' }, params => this.charAttributes(params)); + this._parser.registerCsiHandler({ final: 'n' }, params => this.deviceStatus(params)); + this._parser.registerCsiHandler({ prefix: '?', final: 'n' }, params => this.deviceStatusPrivate(params)); + this._parser.registerCsiHandler({ intermediates: '!', final: 'p' }, params => this.softReset(params)); + this._parser.registerCsiHandler({ intermediates: ' ', final: 'q' }, params => this.setCursorStyle(params)); + this._parser.registerCsiHandler({ final: 'r' }, params => this.setScrollRegion(params)); + this._parser.registerCsiHandler({ final: 's' }, params => this.saveCursor(params)); + this._parser.registerCsiHandler({ final: 't' }, params => this.windowOptions(params)); + this._parser.registerCsiHandler({ final: 'u' }, params => this.restoreCursor(params)); + this._parser.registerCsiHandler({ intermediates: '\'', final: '}' }, params => this.insertColumns(params)); + this._parser.registerCsiHandler({ intermediates: '\'', final: '~' }, params => this.deleteColumns(params)); /** * execute handler @@ -426,32 +426,32 @@ export class InputHandler extends Disposable implements IInputHandler { /** * ESC handlers */ - this._parser.registerEscHandler({final: '7'}, () => this.saveCursor()); - this._parser.registerEscHandler({final: '8'}, () => this.restoreCursor()); - this._parser.registerEscHandler({final: 'D'}, () => this.index()); - this._parser.registerEscHandler({final: 'E'}, () => this.nextLine()); - this._parser.registerEscHandler({final: 'H'}, () => this.tabSet()); - this._parser.registerEscHandler({final: 'M'}, () => this.reverseIndex()); - this._parser.registerEscHandler({final: '='}, () => this.keypadApplicationMode()); - this._parser.registerEscHandler({final: '>'}, () => this.keypadNumericMode()); - this._parser.registerEscHandler({final: 'c'}, () => this.fullReset()); - this._parser.registerEscHandler({final: 'n'}, () => this.setgLevel(2)); - this._parser.registerEscHandler({final: 'o'}, () => this.setgLevel(3)); - this._parser.registerEscHandler({final: '|'}, () => this.setgLevel(3)); - this._parser.registerEscHandler({final: '}'}, () => this.setgLevel(2)); - this._parser.registerEscHandler({final: '~'}, () => this.setgLevel(1)); - this._parser.registerEscHandler({intermediates: '%', final: '@'}, () => this.selectDefaultCharset()); - this._parser.registerEscHandler({intermediates: '%', final: 'G'}, () => this.selectDefaultCharset()); + this._parser.registerEscHandler({ final: '7' }, () => this.saveCursor()); + this._parser.registerEscHandler({ final: '8' }, () => this.restoreCursor()); + this._parser.registerEscHandler({ final: 'D' }, () => this.index()); + this._parser.registerEscHandler({ final: 'E' }, () => this.nextLine()); + this._parser.registerEscHandler({ final: 'H' }, () => this.tabSet()); + this._parser.registerEscHandler({ final: 'M' }, () => this.reverseIndex()); + this._parser.registerEscHandler({ final: '=' }, () => this.keypadApplicationMode()); + this._parser.registerEscHandler({ final: '>' }, () => this.keypadNumericMode()); + this._parser.registerEscHandler({ final: 'c' }, () => this.fullReset()); + this._parser.registerEscHandler({ final: 'n' }, () => this.setgLevel(2)); + this._parser.registerEscHandler({ final: 'o' }, () => this.setgLevel(3)); + this._parser.registerEscHandler({ final: '|' }, () => this.setgLevel(3)); + this._parser.registerEscHandler({ final: '}' }, () => this.setgLevel(2)); + this._parser.registerEscHandler({ final: '~' }, () => this.setgLevel(1)); + this._parser.registerEscHandler({ intermediates: '%', final: '@' }, () => this.selectDefaultCharset()); + this._parser.registerEscHandler({ intermediates: '%', final: 'G' }, () => this.selectDefaultCharset()); for (const flag in CHARSETS) { - this._parser.registerEscHandler({intermediates: '(', final: flag}, () => this.selectCharset('(' + flag)); - this._parser.registerEscHandler({intermediates: ')', final: flag}, () => this.selectCharset(')' + flag)); - this._parser.registerEscHandler({intermediates: '*', final: flag}, () => this.selectCharset('*' + flag)); - this._parser.registerEscHandler({intermediates: '+', final: flag}, () => this.selectCharset('+' + flag)); - this._parser.registerEscHandler({intermediates: '-', final: flag}, () => this.selectCharset('-' + flag)); - this._parser.registerEscHandler({intermediates: '.', final: flag}, () => this.selectCharset('.' + flag)); - this._parser.registerEscHandler({intermediates: '/', final: flag}, () => this.selectCharset('/' + flag)); // TODO: supported? + this._parser.registerEscHandler({ intermediates: '(', final: flag }, () => this.selectCharset('(' + flag)); + this._parser.registerEscHandler({ intermediates: ')', final: flag }, () => this.selectCharset(')' + flag)); + this._parser.registerEscHandler({ intermediates: '*', final: flag }, () => this.selectCharset('*' + flag)); + this._parser.registerEscHandler({ intermediates: '+', final: flag }, () => this.selectCharset('+' + flag)); + this._parser.registerEscHandler({ intermediates: '-', final: flag }, () => this.selectCharset('-' + flag)); + this._parser.registerEscHandler({ intermediates: '.', final: flag }, () => this.selectCharset('.' + flag)); + this._parser.registerEscHandler({ intermediates: '/', final: flag }, () => this.selectCharset('/' + flag)); // TODO: supported? } - this._parser.registerEscHandler({intermediates: '#', final: '8'}, () => this.screenAlignmentPattern()); + this._parser.registerEscHandler({ intermediates: '#', final: '8' }, () => this.screenAlignmentPattern()); /** * error handler @@ -464,7 +464,7 @@ export class InputHandler extends Disposable implements IInputHandler { /** * DCS handler */ - this._parser.registerDcsHandler({intermediates: '$', final: 'q'}, new DECRQSS(this._bufferService, this._coreService, this._logService, this._optionsService)); + this._parser.registerDcsHandler({ intermediates: '$', final: 'q' }, new DECRQSS(this._bufferService, this._coreService, this._logService, this._optionsService)); } public dispose(): void { diff --git a/src/common/buffer/Buffer.ts b/src/common/buffer/Buffer.ts index e06ffb01..c788bf36 100644 --- a/src/common/buffer/Buffer.ts +++ b/src/common/buffer/Buffer.ts @@ -671,6 +671,6 @@ export class BufferStringIterator implements IBufferStringIterator { content += this._buffer.translateBufferLineToString(i, this._trimRight); } this._current = range.last + 1; - return {range, content}; + return { range, content }; } } From 999116c5367cfd643fa4aca5cdd395c5f8628133 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:43:39 -0700 Subject: [PATCH 04/16] Convert CharacterJoinerRegistry to a service Part of #3094, #3283 --- src/browser/Terminal.ts | 17 ++- src/browser/TestUtils.test.ts | 12 +- src/browser/Types.d.ts | 7 + src/browser/renderer/CursorRenderLayer.ts | 8 +- src/browser/renderer/LinkRenderLayer.ts | 4 +- src/browser/renderer/Renderer.ts | 26 +--- src/browser/renderer/SelectionRenderLayer.ts | 4 +- src/browser/renderer/TextRenderLayer.ts | 20 ++- src/browser/renderer/Types.d.ts | 25 --- src/browser/renderer/dom/DomRenderer.ts | 5 +- .../CharacterJoinerService.test.ts} | 142 +++++++++--------- .../CharacterJoinerService.ts} | 16 +- src/browser/services/RenderService.ts | 10 +- src/browser/services/Services.ts | 14 +- 14 files changed, 138 insertions(+), 172 deletions(-) rename src/browser/{renderer/CharacterJoinerRegistry.test.ts => services/CharacterJoinerService.test.ts} (60%) rename src/browser/{renderer/CharacterJoinerRegistry.ts => services/CharacterJoinerService.ts} (95%) diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index 1ab207c7..d04f9e38 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -21,8 +21,8 @@ * http://linux.die.net/man/7/urxvt */ -import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types'; -import { IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types'; +import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2, CharacterJoinerHandler } from 'browser/Types'; +import { IRenderer } from 'browser/renderer/Types'; import { CompositionHelper } from 'browser/input/CompositionHelper'; import { Viewport } from 'browser/Viewport'; import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard'; @@ -45,7 +45,7 @@ import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter'; import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine'; import { ColorManager } from 'browser/ColorManager'; import { RenderService } from 'browser/services/RenderService'; -import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services'; +import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService, ICharacterJoinerService } from 'browser/services/Services'; import { CharSizeService } from 'browser/services/CharSizeService'; import { IBuffer } from 'common/buffer/Types'; import { MouseService } from 'browser/services/MouseService'; @@ -54,6 +54,7 @@ import { CoreBrowserService } from 'browser/services/CoreBrowserService'; import { CoreTerminal } from 'common/CoreTerminal'; import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services'; import { rgba } from 'browser/Color'; +import { CharacterJoinerService } from 'browser/services/CharacterJoinerService'; // Let it work inside Node.js for automated testing purposes. const document: Document = (typeof window !== 'undefined') ? window.document : null as any; @@ -82,6 +83,7 @@ export class Terminal extends CoreTerminal implements ITerminal { private _charSizeService: ICharSizeService | undefined; private _mouseService: IMouseService | undefined; private _renderService: IRenderService | undefined; + private _characterJoinerService: ICharacterJoinerService | undefined; private _selectionService: ISelectionService | undefined; private _soundService: ISoundService | undefined; @@ -450,6 +452,9 @@ export class Terminal extends CoreTerminal implements ITerminal { this.register(this.optionsService.onOptionChange(e => this._colorManager!.onOptionsChange(e))); this._colorManager.setTheme(this._theme); + this._characterJoinerService = this._instantiationService.createInstance(CharacterJoinerService); + this._instantiationService.setService(ICharacterJoinerService, this._characterJoinerService); + const renderer = this._createRenderer(); this._renderService = this.register(this._instantiationService.createInstance(RenderService, renderer, this.rows, this.screenElement)); this._instantiationService.setService(IRenderService, this._renderService); @@ -551,7 +556,7 @@ export class Terminal extends CoreTerminal implements ITerminal { private _createRenderer(): IRenderer { switch (this.options.rendererType) { - case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager!.colors, this.screenElement!, this.linkifier, this.linkifier2); + case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager!.colors, this.screenElement!, this.linkifier, this.linkifier2, this._instantiationService); case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager!.colors, this.element!, this.screenElement!, this._viewportElement!, this.linkifier, this.linkifier2); default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`); } @@ -915,13 +920,13 @@ export class Terminal extends CoreTerminal implements ITerminal { } public registerCharacterJoiner(handler: CharacterJoinerHandler): number { - const joinerId = this._renderService!.registerCharacterJoiner(handler); + const joinerId = this._characterJoinerService!.register(handler); this.refresh(0, this.rows - 1); return joinerId; } public deregisterCharacterJoiner(joinerId: number): void { - if (this._renderService!.deregisterCharacterJoiner(joinerId)) { + if (this._characterJoinerService!.deregister(joinerId)) { this.refresh(0, this.rows - 1); } } diff --git a/src/browser/TestUtils.test.ts b/src/browser/TestUtils.test.ts index a2140aa5..7ab7d9b1 100644 --- a/src/browser/TestUtils.test.ts +++ b/src/browser/TestUtils.test.ts @@ -6,8 +6,8 @@ import { IDisposable, IMarker, ISelectionPosition, ILinkProvider } from 'xterm'; import { IEvent, EventEmitter } from 'common/EventEmitter'; import { ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services'; -import { IRenderDimensions, IRenderer, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types'; -import { IColorSet, ILinkMatcherOptions, ITerminal, ILinkifier, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper } from 'browser/Types'; +import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types'; +import { IColorSet, ILinkMatcherOptions, ITerminal, ILinkifier, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper, CharacterJoinerHandler } from 'browser/Types'; import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types'; import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, ITerminalOptions } from 'common/Types'; import { Buffer } from 'common/buffer/Buffer'; @@ -284,8 +284,6 @@ export class MockRenderer implements IRenderer { public onDevicePixelRatioChange(): void { } public clear(): void { } public renderRows(start: number, end: number): void { } - public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return 0; } - public deregisterCharacterJoiner(): boolean { return true; } } export class MockViewport implements IViewport { @@ -409,12 +407,6 @@ export class MockRenderService implements IRenderService { public clear(): void { throw new Error('Method not implemented.'); } - public registerCharacterJoiner(handler: CharacterJoinerHandler): number { - throw new Error('Method not implemented.'); - } - public deregisterCharacterJoiner(joinerId: number): boolean { - throw new Error('Method not implemented.'); - } public dispose(): void { throw new Error('Method not implemented.'); } diff --git a/src/browser/Types.d.ts b/src/browser/Types.d.ts index f743934e..15eef804 100644 --- a/src/browser/Types.d.ts +++ b/src/browser/Types.d.ts @@ -302,3 +302,10 @@ interface IBufferCellPosition { x: number; y: number; } + +export type CharacterJoinerHandler = (text: string) => [number, number][]; + +export interface ICharacterJoiner { + id: number; + handler: CharacterJoinerHandler; +} diff --git a/src/browser/renderer/CursorRenderLayer.ts b/src/browser/renderer/CursorRenderLayer.ts index d358d580..a78b2048 100644 --- a/src/browser/renderer/CursorRenderLayer.ts +++ b/src/browser/renderer/CursorRenderLayer.ts @@ -37,10 +37,10 @@ export class CursorRenderLayer extends BaseRenderLayer { colors: IColorSet, rendererId: number, private _onRequestRedraw: IEventEmitter, - bufferService: IBufferService, - optionsService: IOptionsService, - private readonly _coreService: ICoreService, - private readonly _coreBrowserService: ICoreBrowserService + @IBufferService bufferService: IBufferService, + @IOptionsService optionsService: IOptionsService, + @ICoreService private readonly _coreService: ICoreService, + @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService ) { super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService); this._state = { diff --git a/src/browser/renderer/LinkRenderLayer.ts b/src/browser/renderer/LinkRenderLayer.ts index c41955d9..2492f921 100644 --- a/src/browser/renderer/LinkRenderLayer.ts +++ b/src/browser/renderer/LinkRenderLayer.ts @@ -20,8 +20,8 @@ export class LinkRenderLayer extends BaseRenderLayer { rendererId: number, linkifier: ILinkifier, linkifier2: ILinkifier2, - bufferService: IBufferService, - optionsService: IOptionsService + @IBufferService bufferService: IBufferService, + @IOptionsService optionsService: IOptionsService ) { super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService); linkifier.onShowLinkUnderline(e => this._onShowLinkUnderline(e)); diff --git a/src/browser/renderer/Renderer.ts b/src/browser/renderer/Renderer.ts index b9d02ff8..bcfae266 100644 --- a/src/browser/renderer/Renderer.ts +++ b/src/browser/renderer/Renderer.ts @@ -6,13 +6,12 @@ import { TextRenderLayer } from 'browser/renderer/TextRenderLayer'; import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer'; import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer'; -import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRedrawEvent } from 'browser/renderer/Types'; +import { IRenderLayer, IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types'; import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer'; -import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry'; import { Disposable } from 'common/Lifecycle'; import { IColorSet, ILinkifier, ILinkifier2 } from 'browser/Types'; import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services'; -import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services'; +import { IBufferService, IOptionsService, ICoreService, IInstantiationService } from 'common/services/Services'; import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache'; import { EventEmitter, IEvent } from 'common/EventEmitter'; @@ -23,7 +22,6 @@ export class Renderer extends Disposable implements IRenderer { private _renderLayers: IRenderLayer[]; private _devicePixelRatio: number; - private _characterJoinerRegistry: ICharacterJoinerRegistry; public dimensions: IRenderDimensions; @@ -35,20 +33,18 @@ export class Renderer extends Disposable implements IRenderer { private readonly _screenElement: HTMLElement, linkifier: ILinkifier, linkifier2: ILinkifier2, + instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService, @ICharSizeService private readonly _charSizeService: ICharSizeService, @IOptionsService private readonly _optionsService: IOptionsService, - @ICoreService coreService: ICoreService, - @ICoreBrowserService coreBrowserService: ICoreBrowserService ) { super(); const allowTransparency = this._optionsService.options.allowTransparency; - this._characterJoinerRegistry = new CharacterJoinerRegistry(this._bufferService); this._renderLayers = [ - new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService), - new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService), - new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier, linkifier2, this._bufferService, _optionsService), - new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, _optionsService, coreService, coreBrowserService) + instantiationService.createInstance(TextRenderLayer, this._screenElement, 0, this._colors, allowTransparency, this._id), + instantiationService.createInstance(SelectionRenderLayer, this._screenElement, 1, this._colors, this._id), + instantiationService.createInstance(LinkRenderLayer, this._screenElement, 2, this._colors, this._id, linkifier, linkifier2), + instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw) ]; this.dimensions = { scaledCharWidth: 0, @@ -210,12 +206,4 @@ export class Renderer extends Disposable implements IRenderer { this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows; this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols; } - - public registerCharacterJoiner(handler: CharacterJoinerHandler): number { - return this._characterJoinerRegistry.registerCharacterJoiner(handler); - } - - public deregisterCharacterJoiner(joinerId: number): boolean { - return this._characterJoinerRegistry.deregisterCharacterJoiner(joinerId); - } } diff --git a/src/browser/renderer/SelectionRenderLayer.ts b/src/browser/renderer/SelectionRenderLayer.ts index 80022f01..9054e3ca 100644 --- a/src/browser/renderer/SelectionRenderLayer.ts +++ b/src/browser/renderer/SelectionRenderLayer.ts @@ -23,8 +23,8 @@ export class SelectionRenderLayer extends BaseRenderLayer { zIndex: number, colors: IColorSet, rendererId: number, - bufferService: IBufferService, - optionsService: IOptionsService + @IBufferService bufferService: IBufferService, + @IOptionsService optionsService: IOptionsService ) { super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService); this._clearState(); diff --git a/src/browser/renderer/TextRenderLayer.ts b/src/browser/renderer/TextRenderLayer.ts index 1f35fae1..48bf848e 100644 --- a/src/browser/renderer/TextRenderLayer.ts +++ b/src/browser/renderer/TextRenderLayer.ts @@ -3,16 +3,17 @@ * @license MIT */ -import { ICharacterJoinerRegistry, IRenderDimensions } from 'browser/renderer/Types'; +import { IRenderDimensions } from 'browser/renderer/Types'; import { CharData, ICellData } from 'common/Types'; import { GridCache } from 'browser/renderer/GridCache'; import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer'; import { AttributeData } from 'common/buffer/AttributeData'; import { NULL_CELL_CODE, Content } from 'common/buffer/Constants'; -import { JoinedCellData } from 'browser/renderer/CharacterJoinerRegistry'; import { IColorSet } from 'browser/Types'; import { CellData } from 'common/buffer/CellData'; import { IOptionsService, IBufferService } from 'common/services/Services'; +import { ICharacterJoinerService } from 'browser/services/Services'; +import { JoinedCellData } from 'browser/services/CharacterJoinerService'; /** * This CharData looks like a null character, which will forc a clear and render @@ -26,22 +27,20 @@ export class TextRenderLayer extends BaseRenderLayer { private _characterWidth: number = 0; private _characterFont: string = ''; private _characterOverlapCache: { [key: string]: boolean } = {}; - private _characterJoinerRegistry: ICharacterJoinerRegistry; private _workCell = new CellData(); constructor( container: HTMLElement, zIndex: number, colors: IColorSet, - characterJoinerRegistry: ICharacterJoinerRegistry, alpha: boolean, rendererId: number, - bufferService: IBufferService, - optionsService: IOptionsService + @IBufferService bufferService: IBufferService, + @IOptionsService optionsService: IOptionsService, + @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService ) { super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService); this._state = new GridCache(); - this._characterJoinerRegistry = characterJoinerRegistry; } public resize(dim: IRenderDimensions): void { @@ -67,7 +66,6 @@ export class TextRenderLayer extends BaseRenderLayer { private _forEachCell( firstRow: number, lastRow: number, - joinerRegistry: ICharacterJoinerRegistry | null, callback: ( cell: ICellData, x: number, @@ -77,7 +75,7 @@ export class TextRenderLayer extends BaseRenderLayer { for (let y = firstRow; y <= lastRow; y++) { const row = y + this._bufferService.buffer.ydisp; const line = this._bufferService.buffer.lines.get(row); - const joinedRanges = joinerRegistry ? joinerRegistry.getJoinedCharacters(row) : []; + const joinedRanges = this._characterJoinerService.getJoinedCharacters(row); for (let x = 0; x < this._bufferService.cols; x++) { line!.loadCell(x, this._workCell); let cell = this._workCell; @@ -160,7 +158,7 @@ export class TextRenderLayer extends BaseRenderLayer { ctx.save(); - this._forEachCell(firstRow, lastRow, null, (cell, x, y) => { + this._forEachCell(firstRow, lastRow, (cell, x, y) => { // libvte and xterm both draw the background (but not foreground) of invisible characters, // so we should too. let nextFillStyle = null; // null represents default background color @@ -213,7 +211,7 @@ export class TextRenderLayer extends BaseRenderLayer { } private _drawForeground(firstRow: number, lastRow: number): void { - this._forEachCell(firstRow, lastRow, this._characterJoinerRegistry, (cell, x, y) => { + this._forEachCell(firstRow, lastRow, (cell, x, y) => { if (cell.isInvisible()) { return; } diff --git a/src/browser/renderer/Types.d.ts b/src/browser/renderer/Types.d.ts index cab14b88..fc137bc8 100644 --- a/src/browser/renderer/Types.d.ts +++ b/src/browser/renderer/Types.d.ts @@ -7,8 +7,6 @@ import { IDisposable } from 'common/Types'; import { IColorSet } from 'browser/Types'; import { IEvent } from 'common/EventEmitter'; -export type CharacterJoinerHandler = (text: string) => [number, number][]; - export interface IRenderDimensions { scaledCharWidth: number; scaledCharHeight: number; @@ -54,19 +52,6 @@ export interface IRenderer extends IDisposable { onOptionsChanged(): void; clear(): void; renderRows(start: number, end: number): void; - registerCharacterJoiner(handler: CharacterJoinerHandler): number; - deregisterCharacterJoiner(joinerId: number): boolean; -} - -export interface ICharacterJoiner { - id: number; - handler: CharacterJoinerHandler; -} - -export interface ICharacterJoinerRegistry { - registerCharacterJoiner(handler: (text: string) => [number, number][]): number; - deregisterCharacterJoiner(joinerId: number): boolean; - getJoinedCharacters(row: number): [number, number][]; } export interface IRenderLayer extends IDisposable { @@ -106,16 +91,6 @@ export interface IRenderLayer extends IDisposable { */ onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void; - /** - * Registers a handler to join characters to render as a group - */ - registerCharacterJoiner?(joiner: ICharacterJoiner): void; - - /** - * Deregisters the specified character joiner handler - */ - deregisterCharacterJoiner?(joinerId: number): void; - /** * Resize the render layer. */ diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index f0a92259..8dd1ac0e 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types'; +import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types'; import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory'; import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants'; import { Disposable } from 'common/Lifecycle'; @@ -372,9 +372,6 @@ export class DomRenderer extends Disposable implements IRenderer { return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`; } - public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; } - public deregisterCharacterJoiner(joinerId: number): boolean { return false; } - private _onLinkHover(e: ILinkifierEvent): void { this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true); } diff --git a/src/browser/renderer/CharacterJoinerRegistry.test.ts b/src/browser/services/CharacterJoinerService.test.ts similarity index 60% rename from src/browser/renderer/CharacterJoinerRegistry.test.ts rename to src/browser/services/CharacterJoinerService.test.ts index bca12d6b..94abc4d5 100644 --- a/src/browser/renderer/CharacterJoinerRegistry.test.ts +++ b/src/browser/services/CharacterJoinerService.test.ts @@ -4,15 +4,15 @@ */ import { assert } from 'chai'; -import { ICharacterJoinerRegistry } from 'browser/renderer/Types'; -import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry'; +import { ICharacterJoinerService } from 'browser/services/Services'; +import { CharacterJoinerService } from 'browser/services/CharacterJoinerService'; import { BufferLine } from 'common/buffer/BufferLine'; import { IBufferLine } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; import { MockBufferService } from 'common/TestUtils.test'; -describe('CharacterJoinerRegistry', () => { - let registry: ICharacterJoinerRegistry; +describe('CharacterJoinerService', () => { + let service: ICharacterJoinerService; beforeEach(() => { const bufferService = new MockBufferService(16, 10); @@ -39,225 +39,225 @@ describe('CharacterJoinerRegistry', () => { for (let i = 0; i < sub.length; ++i) line6.setCell(i + oldSize, sub.loadCell(i, new CellData())); lines.set(6, line6); - registry = new CharacterJoinerRegistry(bufferService); + service = new CharacterJoinerService(bufferService); }); it('has no joiners upon creation', () => { - assert.deepEqual(registry.getJoinedCharacters(0), []); + assert.deepEqual(service.getJoinedCharacters(0), []); }); it('returns ranges matched by the registered joiners', () => { - registry.registerCharacterJoiner(substringJoiner('->')); + service.register(substringJoiner('->')); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[2, 4], [7, 9], [12, 14]] ); }); it('processes the input using all provided joiners', () => { - registry.registerCharacterJoiner(substringJoiner('->')); + service.register(substringJoiner('->')); assert.deepEqual( - registry.getJoinedCharacters(1), + service.getJoinedCharacters(1), [[2, 4], [12, 14]] ); - registry.registerCharacterJoiner(substringJoiner('=>')); + service.register(substringJoiner('=>')); assert.deepEqual( - registry.getJoinedCharacters(1), + service.getJoinedCharacters(1), [[2, 4], [7, 9], [12, 14]] ); }); it('removes deregistered joiners from future calls', () => { - const joiner1 = registry.registerCharacterJoiner(substringJoiner('->')); - const joiner2 = registry.registerCharacterJoiner(substringJoiner('=>')); + const joiner1 = service.register(substringJoiner('->')); + const joiner2 = service.register(substringJoiner('=>')); assert.deepEqual( - registry.getJoinedCharacters(1), + service.getJoinedCharacters(1), [[2, 4], [7, 9], [12, 14]] ); - registry.deregisterCharacterJoiner(joiner1); + service.deregister(joiner1); assert.deepEqual( - registry.getJoinedCharacters(1), + service.getJoinedCharacters(1), [[7, 9]] ); - registry.deregisterCharacterJoiner(joiner2); + service.deregister(joiner2); assert.deepEqual( - registry.getJoinedCharacters(1), + service.getJoinedCharacters(1), [] ); }); it('doesn\'t process joins on differently-styled characters', () => { - registry.registerCharacterJoiner(substringJoiner('->')); + service.register(substringJoiner('->')); assert.deepEqual( - registry.getJoinedCharacters(2), + service.getJoinedCharacters(2), [[2, 4], [12, 14]] ); }); it('returns an empty list of ranges if there is nothing to be joined', () => { - registry.registerCharacterJoiner(substringJoiner('->')); + service.register(substringJoiner('->')); assert.deepEqual( - registry.getJoinedCharacters(3), + service.getJoinedCharacters(3), [] ); }); it('returns an empty list of ranges if the line is empty', () => { - registry.registerCharacterJoiner(substringJoiner('->')); + service.register(substringJoiner('->')); assert.deepEqual( - registry.getJoinedCharacters(4), + service.getJoinedCharacters(4), [] ); }); it('returns false when trying to deregister a joiner that does not exist', () => { - registry.registerCharacterJoiner(substringJoiner('->')); - assert.deepEqual(registry.deregisterCharacterJoiner(123), false); + service.register(substringJoiner('->')); + assert.deepEqual(service.deregister(123), false); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[2, 4], [7, 9], [12, 14]] ); }); it('doesn\'t process same-styled ranges that only have one character', () => { - registry.registerCharacterJoiner(substringJoiner('a')); - registry.registerCharacterJoiner(substringJoiner('b')); - registry.registerCharacterJoiner(substringJoiner('d')); + service.register(substringJoiner('a')); + service.register(substringJoiner('b')); + service.register(substringJoiner('d')); assert.deepEqual( - registry.getJoinedCharacters(5), + service.getJoinedCharacters(5), [[5, 6]] ); }); it('handles ranges that extend all the way to the end of the line', () => { - registry.registerCharacterJoiner(substringJoiner('-> d')); + service.register(substringJoiner('-> d')); assert.deepEqual( - registry.getJoinedCharacters(2), + service.getJoinedCharacters(2), [[12, 16]] ); }); it('handles adjacent ranges', () => { - registry.registerCharacterJoiner(substringJoiner('->')); - registry.registerCharacterJoiner(substringJoiner('> c ')); + service.register(substringJoiner('->')); + service.register(substringJoiner('> c ')); assert.deepEqual( - registry.getJoinedCharacters(2), + service.getJoinedCharacters(2), [[2, 4], [8, 12], [12, 14]] ); }); it('handles fullwidth characters in the middle of ranges', () => { - registry.registerCharacterJoiner(substringJoiner('wi￥de')); + service.register(substringJoiner('wi￥de')); assert.deepEqual( - registry.getJoinedCharacters(6), + service.getJoinedCharacters(6), [[0, 6]] ); }); it('handles fullwidth characters at the end of ranges', () => { - registry.registerCharacterJoiner(substringJoiner('wi￥')); + service.register(substringJoiner('wi￥')); assert.deepEqual( - registry.getJoinedCharacters(6), + service.getJoinedCharacters(6), [[0, 4]] ); }); it('handles emojis in the middle of ranges', () => { - registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 ji')); + service.register(substringJoiner('emo\xf0\x9f\x98\x81 ji')); assert.deepEqual( - registry.getJoinedCharacters(6), + service.getJoinedCharacters(6), [[6, 13]] ); }); it('handles emojis at the end of ranges', () => { - registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 ')); + service.register(substringJoiner('emo\xf0\x9f\x98\x81 ')); assert.deepEqual( - registry.getJoinedCharacters(6), + service.getJoinedCharacters(6), [[6, 11]] ); }); it('handles ranges after wide and emoji characters', () => { - registry.registerCharacterJoiner(substringJoiner('abc')); + service.register(substringJoiner('abc')); assert.deepEqual( - registry.getJoinedCharacters(6), + service.getJoinedCharacters(6), [[13, 16]] ); }); describe('range merging', () => { it('inserts a new range before the existing ones', () => { - registry.registerCharacterJoiner(() => [[1, 2], [2, 3]]); - registry.registerCharacterJoiner(() => [[0, 1]]); + service.register(() => [[1, 2], [2, 3]]); + service.register(() => [[0, 1]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 1], [1, 2], [2, 3]] ); }); it('inserts in between two ranges', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[2, 4]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[2, 4]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 2], [2, 4], [4, 6]] ); }); it('inserts after the last range', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[6, 8]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[6, 8]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 2], [4, 6], [6, 8]] ); }); it('extends the beginning of a range', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[3, 5]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[3, 5]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 2], [3, 6]] ); }); it('extends the end of a range', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[1, 4]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[1, 4]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 4], [4, 6]] ); }); it('extends the last range', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[5, 7]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[5, 7]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 2], [4, 7]] ); }); it('connects two ranges', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]); - registry.registerCharacterJoiner(() => [[1, 5]]); + service.register(() => [[0, 2], [4, 6]]); + service.register(() => [[1, 5]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 6]] ); }); it('connects more than two ranges', () => { - registry.registerCharacterJoiner(() => [[0, 2], [4, 6], [8, 10], [12, 14]]); - registry.registerCharacterJoiner(() => [[1, 10]]); + service.register(() => [[0, 2], [4, 6], [8, 10], [12, 14]]); + service.register(() => [[1, 10]]); assert.deepEqual( - registry.getJoinedCharacters(0), + service.getJoinedCharacters(0), [[0, 10], [12, 14]] ); }); diff --git a/src/browser/renderer/CharacterJoinerRegistry.ts b/src/browser/services/CharacterJoinerService.ts similarity index 95% rename from src/browser/renderer/CharacterJoinerRegistry.ts rename to src/browser/services/CharacterJoinerService.ts index 5385b76b..ea65c29b 100644 --- a/src/browser/renderer/CharacterJoinerRegistry.ts +++ b/src/browser/services/CharacterJoinerService.ts @@ -4,11 +4,12 @@ */ import { IBufferLine, ICellData, CharData } from 'common/Types'; -import { ICharacterJoinerRegistry, ICharacterJoiner } from 'browser/renderer/Types'; +import { ICharacterJoiner } from 'browser/Types'; import { AttributeData } from 'common/buffer/AttributeData'; import { WHITESPACE_CELL_CHAR, Content } from 'common/buffer/Constants'; import { CellData } from 'common/buffer/CellData'; import { IBufferService } from 'common/services/Services'; +import { ICharacterJoinerService } from 'browser/services/Services'; export class JoinedCellData extends AttributeData implements ICellData { private _width: number; @@ -55,15 +56,18 @@ export class JoinedCellData extends AttributeData implements ICellData { } } -export class CharacterJoinerRegistry implements ICharacterJoinerRegistry { +export class CharacterJoinerService implements ICharacterJoinerService { + public serviceBrand: undefined; private _characterJoiners: ICharacterJoiner[] = []; private _nextCharacterJoinerId: number = 0; private _workCell: CellData = new CellData(); - constructor(private _bufferService: IBufferService) { } + constructor( + @IBufferService private _bufferService: IBufferService + ) { } - public registerCharacterJoiner(handler: (text: string) => [number, number][]): number { + public register(handler: (text: string) => [number, number][]): number { const joiner: ICharacterJoiner = { id: this._nextCharacterJoinerId++, handler @@ -73,7 +77,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry { return joiner.id; } - public deregisterCharacterJoiner(joinerId: number): boolean { + public deregister(joinerId: number): boolean { for (let i = 0; i < this._characterJoiners.length; i++) { if (this._characterJoiners[i].id === joinerId) { this._characterJoiners.splice(i, 1); @@ -177,7 +181,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry { // We merge any overlapping ranges across the different joiners const joinerRanges = this._characterJoiners[i].handler(text); for (let j = 0; j < joinerRanges.length; j++) { - CharacterJoinerRegistry._mergeRanges(joinedRanges, joinerRanges[j]); + CharacterJoinerService._mergeRanges(joinedRanges, joinerRanges[j]); } } this._stringRangesToCellRanges(joinedRanges, lineData, startCol); diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index 51971091..fc2eb435 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -3,7 +3,7 @@ * @license MIT */ -import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types'; +import { IRenderer, IRenderDimensions } from 'browser/renderer/Types'; import { RenderDebouncer } from 'browser/RenderDebouncer'; import { EventEmitter, IEvent } from 'common/EventEmitter'; import { Disposable } from 'common/Lifecycle'; @@ -214,12 +214,4 @@ export class RenderService extends Disposable implements IRenderService { public clear(): void { this._renderer.clear(); } - - public registerCharacterJoiner(handler: CharacterJoinerHandler): number { - return this._renderer.registerCharacterJoiner(handler); - } - - public deregisterCharacterJoiner(joinerId: number): boolean { - return this._renderer.deregisterCharacterJoiner(joinerId); - } } diff --git a/src/browser/services/Services.ts b/src/browser/services/Services.ts index f06e320b..8c8a7bd9 100644 --- a/src/browser/services/Services.ts +++ b/src/browser/services/Services.ts @@ -4,7 +4,7 @@ */ import { IEvent } from 'common/EventEmitter'; -import { IRenderDimensions, IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types'; +import { IRenderDimensions, IRenderer } from 'browser/renderer/Types'; import { IColorSet } from 'browser/Types'; import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types'; import { createDecorator } from 'common/services/ServiceRegistry'; @@ -66,8 +66,6 @@ export interface IRenderService extends IDisposable { onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void; onCursorMove(): void; clear(): void; - registerCharacterJoiner(handler: CharacterJoinerHandler): number; - deregisterCharacterJoiner(joinerId: number): boolean; } export const ISelectionService = createDecorator('SelectionService'); @@ -104,3 +102,13 @@ export interface ISoundService { playBellSound(): void; } + + +export const ICharacterJoinerService = createDecorator('CharacterJoinerService'); +export interface ICharacterJoinerService { + serviceBrand: undefined; + + register(handler: (text: string) => [number, number][]): number; + deregister(joinerId: number): boolean; + getJoinedCharacters(row: number): [number, number][]; +} From b511f1b52aa5e82b817beccc9ac80b300518616c Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:46:30 -0700 Subject: [PATCH 05/16] Fix other case of no spacing --- src/common/CoreTerminal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/CoreTerminal.ts b/src/common/CoreTerminal.ts index 699a1b1c..815326d6 100644 --- a/src/common/CoreTerminal.ts +++ b/src/common/CoreTerminal.ts @@ -122,7 +122,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal { 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._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL }); this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom); })); From 5f96f33cf03b739ccb9c7ee339f7eeacabacd3f8 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:50:22 -0700 Subject: [PATCH 06/16] Fix dangling comma --- src/browser/renderer/Renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/renderer/Renderer.ts b/src/browser/renderer/Renderer.ts index bcfae266..c88ce256 100644 --- a/src/browser/renderer/Renderer.ts +++ b/src/browser/renderer/Renderer.ts @@ -36,7 +36,7 @@ export class Renderer extends Disposable implements IRenderer { instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService, @ICharSizeService private readonly _charSizeService: ICharSizeService, - @IOptionsService private readonly _optionsService: IOptionsService, + @IOptionsService private readonly _optionsService: IOptionsService ) { super(); const allowTransparency = this._optionsService.options.allowTransparency; From 1124f8b5139518f06c89d4aa0951fe3922c00f20 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:57:24 -0700 Subject: [PATCH 07/16] Improve error when adding char joiner before open --- src/browser/Terminal.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index d0c698a6..2525fd57 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -919,13 +919,19 @@ export class Terminal extends CoreTerminal implements ITerminal { } public registerCharacterJoiner(handler: CharacterJoinerHandler): number { - const joinerId = this._characterJoinerService!.register(handler); + if (!this._characterJoinerService) { + throw new Error('Terminal must be opened first'); + } + const joinerId = this._characterJoinerService.register(handler); this.refresh(0, this.rows - 1); return joinerId; } public deregisterCharacterJoiner(joinerId: number): void { - if (this._characterJoinerService!.deregister(joinerId)) { + if (!this._characterJoinerService) { + throw new Error('Terminal must be opened first'); + } + if (this._characterJoinerService.deregister(joinerId)) { this.refresh(0, this.rows - 1); } } From 4fa58c978b143e337cc7dec5b3b68d544be14c40 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 07:58:59 -0700 Subject: [PATCH 08/16] Fix lint --- addons/xterm-addon-ligatures/src/font.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/addons/xterm-addon-ligatures/src/font.ts b/addons/xterm-addon-ligatures/src/font.ts index 0d01d3cc..7a8e8985 100644 --- a/addons/xterm-addon-ligatures/src/font.ts +++ b/addons/xterm-addon-ligatures/src/font.ts @@ -3,8 +3,8 @@ * @license MIT */ -import {FontList} from 'font-finder'; -import {Font, loadBuffer, loadFile} from 'font-ligatures'; +import { FontList } from 'font-finder'; +import { Font, loadBuffer, loadFile } from 'font-ligatures'; import parse from './parse'; @@ -74,9 +74,9 @@ export default async function load(fontFamily: string, cacheSize: number): Promi if (fonts.hasOwnProperty(family) && fonts[family].length > 0) { const font = fonts[family][0]; if ('blob' in font) { - return loadBuffer(await (await font.blob()).arrayBuffer(), {cacheSize}); + return loadBuffer(await (await font.blob()).arrayBuffer(), { cacheSize }); } - return await loadFile(font.path, {cacheSize}); + return await loadFile(font.path, { cacheSize }); } } From a57910e2fa479d95c7b1d8fe690948ec33ecde17 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 08:33:00 -0700 Subject: [PATCH 09/16] Check navigator safely in node --- addons/xterm-addon-ligatures/src/font.ts | 73 +++++++++++++----------- 1 file changed, 40 insertions(+), 33 deletions(-) diff --git a/addons/xterm-addon-ligatures/src/font.ts b/addons/xterm-addon-ligatures/src/font.ts index 7a8e8985..fca110a4 100644 --- a/addons/xterm-addon-ligatures/src/font.ts +++ b/addons/xterm-addon-ligatures/src/font.ts @@ -24,40 +24,47 @@ let fontsPromise: Promise> | undefine * @param cacheSize The size of the ligature cache to maintain if the font is resolved */ export default async function load(fontFamily: string, cacheSize: number): Promise { - if (!fontsPromise && 'fonts' in navigator) { - try { - const status = await (navigator as any).permissions.request?.({ - name: 'local-fonts' - }); - if (status && status.state !== 'granted') { - throw new Error('Permission to access local fonts not granted.'); - } - } catch (err) { - // A `TypeError` indicates the 'local-fonts' - // permission is not yet implemented, so - // only `throw` if this is _not_ the problem. - if (err.name !== 'TypeError') { - throw err; - } - } - const fonts: Record = {}; - try { - const fontsIterator: AsyncIterableIterator = (navigator as any).fonts.query(); - for await (const metadata of fontsIterator) { - if (!fonts.hasOwnProperty(metadata.family)) { - fonts[metadata.family] = []; - } - fonts[metadata.family].push(metadata); - } - fontsPromise = Promise.resolve(fonts); - } catch (err) { - console.error(err.name, err.message); - } - } if (!fontsPromise) { - try { - fontsPromise = (await import('font-finder')).list(); - } catch (err) { + // Web environment that supports font access API + if (typeof navigator !== 'undefined' && 'fonts' in navigator) { + try { + const status = await (navigator as any).permissions.request?.({ + name: 'local-fonts' + }); + if (status && status.state !== 'granted') { + throw new Error('Permission to access local fonts not granted.'); + } + } catch (err) { + // A `TypeError` indicates the 'local-fonts' + // permission is not yet implemented, so + // only `throw` if this is _not_ the problem. + if (err.name !== 'TypeError') { + throw err; + } + } + const fonts: Record = {}; + try { + const fontsIterator: AsyncIterableIterator = (navigator as any).fonts.query(); + for await (const metadata of fontsIterator) { + if (!fonts.hasOwnProperty(metadata.family)) { + fonts[metadata.family] = []; + } + fonts[metadata.family].push(metadata); + } + fontsPromise = Promise.resolve(fonts); + } catch (err) { + console.error(err.name, err.message); + } + } + // Node environment or no font access API + else { + try { + fontsPromise = (await import('font-finder')).list(); + } catch (err) { + // No-op + } + } + if (!fontsPromise) { fontsPromise = Promise.resolve({}); } } From 0564ad465305a0c105c164fbd15e3aa1d7fbaed4 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 09:42:10 -0700 Subject: [PATCH 10/16] Add comments to webpack configs --- addons/xterm-addon-ligatures/webpack.config.js | 1 + demo/start.js | 1 + 2 files changed, 2 insertions(+) diff --git a/addons/xterm-addon-ligatures/webpack.config.js b/addons/xterm-addon-ligatures/webpack.config.js index 6bdbd156..ea69841e 100644 --- a/addons/xterm-addon-ligatures/webpack.config.js +++ b/addons/xterm-addon-ligatures/webpack.config.js @@ -36,6 +36,7 @@ module.exports = { 'util': 'util' }, resolve: { + // The ligature modules contains fallbacks for node environments, we never want to browserify them fallback: { stream: false, util: false, diff --git a/demo/start.js b/demo/start.js index c4caea77..b40b9bc3 100644 --- a/demo/start.js +++ b/demo/start.js @@ -51,6 +51,7 @@ const clientConfig = { browser: path.resolve('./out/browser') }, fallback: { + // The ligature modules contains fallbacks for node environments, we never want to browserify them stream: false, util: false, os: false, From d8113aa5335134851e01592d87d7179ac372c913 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 10:21:20 -0700 Subject: [PATCH 11/16] Default to Fira Code in demo --- demo/client.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demo/client.ts b/demo/client.ts index 780597e3..0bb124cd 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -157,7 +157,8 @@ function createTerminal(): void { const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].indexOf(navigator.platform) >= 0; term = new Terminal({ - windowsMode: isWindows + windowsMode: isWindows, + fontFamily: 'Fira Code, courier-new, courier, monospace' } as ITerminalOptions); // Load addons From b7320794bbf04914ededf769d2724502f181a019 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 10:34:14 -0700 Subject: [PATCH 12/16] Ligature support for dom renderer Fixes #3283 --- css/xterm.css | 1 - src/browser/Terminal.ts | 2 +- src/browser/TestUtils.test.ts | 15 +++- src/browser/renderer/Renderer.ts | 2 +- src/browser/renderer/dom/DomRenderer.ts | 7 +- .../dom/DomRendererRowFactory.test.ts | 39 ++++----- .../renderer/dom/DomRendererRowFactory.ts | 80 +++++++++++++++---- src/common/services/InstantiationService.ts | 2 + src/common/services/Services.ts | 2 + 9 files changed, 108 insertions(+), 42 deletions(-) diff --git a/css/xterm.css b/css/xterm.css index 7ddcc2d0..831a89c6 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -36,7 +36,6 @@ */ .xterm { - font-feature-settings: "liga" 0; position: relative; user-select: none; -ms-user-select: none; diff --git a/src/browser/Terminal.ts b/src/browser/Terminal.ts index 2525fd57..76c7716f 100644 --- a/src/browser/Terminal.ts +++ b/src/browser/Terminal.ts @@ -555,7 +555,7 @@ export class Terminal extends CoreTerminal implements ITerminal { private _createRenderer(): IRenderer { switch (this.options.rendererType) { - case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager!.colors, this.screenElement!, this.linkifier, this.linkifier2, this._instantiationService); + case 'canvas': return this._instantiationService.createInstance(Renderer, this._colorManager!.colors, this.screenElement!, this.linkifier, this.linkifier2); case 'dom': return this._instantiationService.createInstance(DomRenderer, this._colorManager!.colors, this.element!, this.screenElement!, this._viewportElement!, this.linkifier, this.linkifier2); default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`); } diff --git a/src/browser/TestUtils.test.ts b/src/browser/TestUtils.test.ts index 7ab7d9b1..c577b566 100644 --- a/src/browser/TestUtils.test.ts +++ b/src/browser/TestUtils.test.ts @@ -5,7 +5,7 @@ import { IDisposable, IMarker, ISelectionPosition, ILinkProvider } from 'xterm'; import { IEvent, EventEmitter } from 'common/EventEmitter'; -import { ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services'; +import { ICharacterJoinerService, ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services'; import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types'; import { IColorSet, ILinkMatcherOptions, ITerminal, ILinkifier, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper, CharacterJoinerHandler } from 'browser/Types'; import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types'; @@ -411,3 +411,16 @@ export class MockRenderService implements IRenderService { throw new Error('Method not implemented.'); } } + +export class MockCharacterJoinerService implements ICharacterJoinerService { + public serviceBrand: undefined; + public register(handler: (text: string) => [number, number][]): number { + return 0; + } + public deregister(joinerId: number): boolean { + return true; + } + public getJoinedCharacters(row: number): [number, number][] { + return []; + } +} diff --git a/src/browser/renderer/Renderer.ts b/src/browser/renderer/Renderer.ts index c88ce256..d5de40db 100644 --- a/src/browser/renderer/Renderer.ts +++ b/src/browser/renderer/Renderer.ts @@ -33,7 +33,7 @@ export class Renderer extends Disposable implements IRenderer { private readonly _screenElement: HTMLElement, linkifier: ILinkifier, linkifier2: ILinkifier2, - instantiationService: IInstantiationService, + @IInstantiationService instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService, @ICharSizeService private readonly _charSizeService: ICharSizeService, @IOptionsService private readonly _optionsService: IOptionsService diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 8dd1ac0e..dccdb877 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -9,7 +9,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants'; import { Disposable } from 'common/Lifecycle'; import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types'; import { ICharSizeService } from 'browser/services/Services'; -import { IOptionsService, IBufferService } from 'common/services/Services'; +import { IOptionsService, IBufferService, IInstantiationService } from 'common/services/Services'; import { EventEmitter, IEvent } from 'common/EventEmitter'; import { color } from 'browser/Color'; import { removeElementFromParent } from 'browser/Dom'; @@ -49,6 +49,7 @@ export class DomRenderer extends Disposable implements IRenderer { private readonly _viewportElement: HTMLElement, private readonly _linkifier: ILinkifier, private readonly _linkifier2: ILinkifier2, + @IInstantiationService instantiationService: IInstantiationService, @ICharSizeService private readonly _charSizeService: ICharSizeService, @IOptionsService private readonly _optionsService: IOptionsService, @IBufferService private readonly _bufferService: IBufferService @@ -80,7 +81,7 @@ export class DomRenderer extends Disposable implements IRenderer { this._updateDimensions(); this._injectCss(); - this._rowFactory = new DomRendererRowFactory(document, this._optionsService, this._colors); + this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document, this._colors); this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass); this._screenElement.appendChild(this._rowContainer); @@ -364,7 +365,7 @@ export class DomRenderer extends Disposable implements IRenderer { const row = y + this._bufferService.buffer.ydisp; const lineData = this._bufferService.buffer.lines.get(row); const cursorStyle = this._optionsService.options.cursorStyle; - rowElement.appendChild(this._rowFactory.createRow(lineData!, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols)); + rowElement.appendChild(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols)); } } diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts index b6604b14..9eacb97a 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts @@ -12,6 +12,7 @@ import { IBufferLine } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; import { MockOptionsService } from 'common/TestUtils.test'; import { css } from 'browser/Color'; +import { MockCharacterJoinerService } from 'browser/TestUtils.test'; describe('DomRendererRowFactory', () => { let dom: jsdom.JSDOM; @@ -20,7 +21,7 @@ describe('DomRendererRowFactory', () => { beforeEach(() => { dom = new jsdom.JSDOM(''); - rowFactory = new DomRendererRowFactory(dom.window.document, new MockOptionsService({ drawBoldTextInBrightColors: true }), { + rowFactory = new DomRendererRowFactory(dom.window.document, { background: css.toColor('#010101'), foreground: css.toColor('#020202'), ansi: [ @@ -43,13 +44,13 @@ describe('DomRendererRowFactory', () => { css.toColor('#34e2e2'), css.toColor('#eeeeec') ] - } as any); + } as any, new MockCharacterJoinerService(), new MockOptionsService({ drawBoldTextInBrightColors: true })); lineData = createEmptyLineData(2); }); describe('createRow', () => { it('should not create anything for an empty row', () => { - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), '' ); @@ -59,7 +60,7 @@ describe('DomRendererRowFactory', () => { lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)])); // There should be no element for the following "empty" cell lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '', 0, 0])); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), '語' ); @@ -67,7 +68,7 @@ describe('DomRendererRowFactory', () => { it('should add class for cursor and cursor style', () => { for (const style of ['block', 'bar', 'underline']) { - const fragment = rowFactory.createRow(lineData, true, style, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -75,7 +76,7 @@ describe('DomRendererRowFactory', () => { }); it('should add class for cursor blink', () => { - const fragment = rowFactory.createRow(lineData, true, 'block', 0, true, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -84,7 +85,7 @@ describe('DomRendererRowFactory', () => { it('should not render cells that go beyond the terminal\'s columns', () => { lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)])); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -95,7 +96,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.BOLD; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -105,7 +106,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.ITALIC; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -115,7 +116,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.DIM; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -125,7 +126,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.UNDERLINE; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -138,7 +139,7 @@ describe('DomRendererRowFactory', () => { cell.fg &= ~Attributes.PCOLOR_MASK; cell.fg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), `a` ); @@ -152,7 +153,7 @@ describe('DomRendererRowFactory', () => { cell.bg &= ~Attributes.PCOLOR_MASK; cell.bg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), `a` ); @@ -164,7 +165,7 @@ describe('DomRendererRowFactory', () => { cell.fg |= Attributes.CM_P16 | 2 | FgFlags.INVERSE; cell.bg |= Attributes.CM_P16 | 1; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -175,7 +176,7 @@ describe('DomRendererRowFactory', () => { cell.fg |= FgFlags.INVERSE; cell.bg |= Attributes.CM_P16 | 1; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -185,7 +186,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.fg |= Attributes.CM_P16 | 1 | FgFlags.INVERSE; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -198,7 +199,7 @@ describe('DomRendererRowFactory', () => { cell.fg &= ~Attributes.PCOLOR_MASK; cell.fg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), `a` ); @@ -210,7 +211,7 @@ describe('DomRendererRowFactory', () => { cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3; cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -221,7 +222,7 @@ describe('DomRendererRowFactory', () => { cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3 | FgFlags.INVERSE; cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20); assert.equal(getFragmentHtml(fragment), 'a' ); diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index c7c87451..a052db54 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -10,6 +10,8 @@ import { CellData } from 'common/buffer/CellData'; import { IOptionsService } from 'common/services/Services'; import { color, rgba } from 'browser/Color'; import { IColorSet, IColor } from 'browser/Types'; +import { ICharacterJoinerService } from 'browser/services/Services'; +import { JoinedCellData } from 'browser/services/CharacterJoinerService'; export const BOLD_CLASS = 'xterm-bold'; export const DIM_CLASS = 'xterm-dim'; @@ -26,8 +28,9 @@ export class DomRendererRowFactory { constructor( private readonly _document: Document, - private readonly _optionsService: IOptionsService, - private _colors: IColorSet + private _colors: IColorSet, + @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService, + @IOptionsService private readonly _optionsService: IOptionsService ) { } @@ -35,9 +38,11 @@ export class DomRendererRowFactory { this._colors = colors; } - public createRow(lineData: IBufferLine, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment { + public createRow(lineData: IBufferLine, row: number, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment { const fragment = this._document.createDocumentFragment(); + const joinedRanges = this._characterJoinerService.getJoinedCharacters(row); + console.log('joinedRanges', joinedRanges.map(e => e[0] + '->' + e[1]).join(',')); // Find the line length first, this prevents the need to output a bunch of // empty cells at the end. This cannot easily be integrated into the main // loop below because of the colCount feature (which can be removed after we @@ -53,18 +58,59 @@ export class DomRendererRowFactory { for (let x = 0; x < lineLength; x++) { lineData.loadCell(x, this._workCell); - const width = this._workCell.getWidth(); + let width = this._workCell.getWidth(); // The character to the left is a wide character, drawing is owned by the char at x-1 if (width === 0) { continue; } + // If true, indicates that the current character(s) to draw were joined. + let isJoined = false; + let lastCharX = x; + + // Process any joined character ranges as needed. Because of how the + // ranges are produced, we know that they are valid for the characters + // and attributes of our input. + let cell = this._workCell; + if (joinedRanges.length > 0 && x === joinedRanges[0][0]) { + isJoined = true; + const range = joinedRanges.shift()!; + + // We already know the exact start and end column of the joined range, + // so we get the string and width representing it directly + + cell = new JoinedCellData( + this._workCell, + lineData.translateToString(true, range[0], range[1]), + range[1] - range[0] + ); + + // Skip over the cells occupied by this range in the loop + lastCharX = range[1] - 1; + + // Recalculate width + width = cell.getWidth(); + } + const charElement = this._document.createElement('span'); if (width > 1) { charElement.style.width = `${cellWidth * width}px`; } + if (isJoined) { + // Ligatures in the DOM renderer must use display inline, as they may not show with + // inline-block if they are outside the bounds of the element + charElement.style.display = 'inline'; + + // The DOM renderer colors the background of the cursor but for ligatures all cells are + // joined. The workaround here is to show a cursor around the whole ligature so it shows up, + // the cursor looks the same when on any character of the ligature though + if (cursorX >= x && cursorX <= lastCharX) { + cursorX = x; + } + } + if (isCursorRow && x === cursorX) { charElement.classList.add(CURSOR_CLASS); @@ -85,33 +131,33 @@ export class DomRendererRowFactory { } } - if (this._workCell.isBold()) { + if (cell.isBold()) { charElement.classList.add(BOLD_CLASS); } - if (this._workCell.isItalic()) { + if (cell.isItalic()) { charElement.classList.add(ITALIC_CLASS); } - if (this._workCell.isDim()) { + if (cell.isDim()) { charElement.classList.add(DIM_CLASS); } - if (this._workCell.isUnderline()) { + if (cell.isUnderline()) { charElement.classList.add(UNDERLINE_CLASS); } - if (this._workCell.isInvisible()) { + if (cell.isInvisible()) { charElement.textContent = WHITESPACE_CELL_CHAR; } else { - charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR; + charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR; } - let fg = this._workCell.getFgColor(); - let fgColorMode = this._workCell.getFgColorMode(); - let bg = this._workCell.getBgColor(); - let bgColorMode = this._workCell.getBgColorMode(); - const isInverse = !!this._workCell.isInverse(); + let fg = cell.getFgColor(); + let fgColorMode = cell.getFgColorMode(); + let bg = cell.getBgColor(); + let bgColorMode = cell.getBgColorMode(); + const isInverse = !!cell.isInverse(); if (isInverse) { const temp = fg; fg = bg; @@ -125,7 +171,7 @@ export class DomRendererRowFactory { switch (fgColorMode) { case Attributes.CM_P16: case Attributes.CM_P256: - if (this._workCell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) { + if (cell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) { fg += 8; } if (!this._applyMinimumContrast(charElement, this._colors.background, this._colors.ansi[fg])) { @@ -168,6 +214,8 @@ export class DomRendererRowFactory { } fragment.appendChild(charElement); + + x = lastCharX; } return fragment; } diff --git a/src/common/services/InstantiationService.ts b/src/common/services/InstantiationService.ts index e5727fa6..8280948a 100644 --- a/src/common/services/InstantiationService.ts +++ b/src/common/services/InstantiationService.ts @@ -42,6 +42,8 @@ export class ServiceCollection { } export class InstantiationService implements IInstantiationService { + public serviceBrand: undefined; + private readonly _services: ServiceCollection = new ServiceCollection(); constructor() { diff --git a/src/common/services/Services.ts b/src/common/services/Services.ts index 8b21f100..ce297322 100644 --- a/src/common/services/Services.ts +++ b/src/common/services/Services.ts @@ -157,6 +157,8 @@ type GetLeadingNonServiceArgs = export const IInstantiationService = createDecorator('InstantiationService'); export interface IInstantiationService { + serviceBrand: undefined; + setService(id: IServiceIdentifier, instance: T): void; getService(id: IServiceIdentifier): T | undefined; createInstance any, R extends InstanceType>(t: Ctor, ...args: GetLeadingNonServiceArgs>): R; From b03a25f4c7df82f6a64408717aa35a2b69333c74 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 11:15:57 -0700 Subject: [PATCH 13/16] Webgl ligature support Fixes #3094 --- addons/xterm-addon-webgl/src/WebglAddon.ts | 5 +- addons/xterm-addon-webgl/src/WebglRenderer.ts | 94 ++++++++++++++++++- .../src/atlas/WebglCharAtlas.ts | 24 +++-- src/browser/renderer/TextRenderLayer.ts | 1 - .../renderer/dom/DomRendererRowFactory.ts | 2 - 5 files changed, 109 insertions(+), 17 deletions(-) diff --git a/addons/xterm-addon-webgl/src/WebglAddon.ts b/addons/xterm-addon-webgl/src/WebglAddon.ts index c07bc0d7..91fa7968 100644 --- a/addons/xterm-addon-webgl/src/WebglAddon.ts +++ b/addons/xterm-addon-webgl/src/WebglAddon.ts @@ -5,7 +5,7 @@ import { Terminal, ITerminalAddon, IEvent } from 'xterm'; import { WebglRenderer } from './WebglRenderer'; -import { IRenderService } from 'browser/services/Services'; +import { ICharacterJoinerService, IRenderService } from 'browser/services/Services'; import { IColorSet } from 'browser/Types'; import { EventEmitter } from 'common/EventEmitter'; @@ -25,8 +25,9 @@ export class WebglAddon implements ITerminalAddon { } this._terminal = terminal; const renderService: IRenderService = (terminal)._core._renderService; + const characterJoinerService: ICharacterJoinerService = (terminal)._core._characterJoinerService; const colors: IColorSet = (terminal)._core._colorManager.colors; - this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer); + this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, this._preserveDrawingBuffer); this._renderer.onContextLoss(() => this._onContextLoss.fire()); renderService.setRenderer(this._renderer); } diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index 08f83b52..ff159f70 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -12,7 +12,7 @@ import { RectangleRenderer } from './RectangleRenderer'; import { IWebGL2RenderingContext } from './Types'; import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel'; import { Disposable } from 'common/Lifecycle'; -import { NULL_CELL_CODE } from 'common/buffer/Constants'; +import { Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants'; import { Terminal, IEvent } from 'xterm'; import { IRenderLayer } from './renderLayer/Types'; import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types'; @@ -20,6 +20,9 @@ import { ITerminal, IColorSet } from 'browser/Types'; import { EventEmitter } from 'common/EventEmitter'; import { CellData } from 'common/buffer/CellData'; import { addDisposableDomListener } from 'browser/Lifecycle'; +import { ICharacterJoinerService } from 'browser/services/Services'; +import { CharData, ICellData } from 'common/Types'; +import { AttributeData } from 'common/buffer/AttributeData'; export class WebglRenderer extends Disposable implements IRenderer { private _renderLayers: IRenderLayer[]; @@ -48,6 +51,7 @@ export class WebglRenderer extends Disposable implements IRenderer { constructor( private _terminal: Terminal, private _colors: IColorSet, + private readonly _characterJoinerService: ICharacterJoinerService, preserveDrawingBuffer?: boolean ) { super(); @@ -288,16 +292,41 @@ export class WebglRenderer extends Disposable implements IRenderer { private _updateModel(start: number, end: number): void { const terminal = this._core; + let cell: ICellData = this._workCell; for (let y = start; y <= end; y++) { const row = y + terminal.buffer.ydisp; const line = terminal.buffer.lines.get(row)!; this._model.lineLengths[y] = 0; + const joinedRanges = this._characterJoinerService.getJoinedCharacters(row); for (let x = 0; x < terminal.cols; x++) { - line.loadCell(x, this._workCell); + line.loadCell(x, cell); - const chars = this._workCell.getChars(); - let code = this._workCell.getCode(); + // If true, indicates that the current character(s) to draw were joined. + let isJoined = false; + let lastCharX = x; + + // Process any joined character ranges as needed. Because of how the + // ranges are produced, we know that they are valid for the characters + // and attributes of our input. + if (joinedRanges.length > 0 && x === joinedRanges[0][0]) { + isJoined = true; + const range = joinedRanges.shift()!; + + // We already know the exact start and end column of the joined range, + // so we get the string and width representing it directly + cell = new JoinedCellData( + cell, + line!.translateToString(true, range[0], range[1]), + range[1] - range[0] + ); + + // Skip over the cells occupied by this range in the loop + lastCharX = range[1] - 1; + } + + const chars = cell.getChars(); + let code = cell.getCode(); const i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL; if (code !== NULL_CELL_CODE) { @@ -321,7 +350,18 @@ export class WebglRenderer extends Disposable implements IRenderer { this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workCell.bg; this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workCell.fg; + console.log('updateCell', x, y, code, chars); this._glyphRenderer.updateCell(x, y, code, this._workCell.bg, this._workCell.fg, chars); + + if (isJoined) { + // Restore work cell + cell = this._workCell; + + // Null out non-first cells + for (x++; x < lastCharX; x++) { + this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, NULL_CELL_CHAR); + } + } } } this._rectangleRenderer.updateBackgrounds(this._model); @@ -438,3 +478,49 @@ export class WebglRenderer extends Disposable implements IRenderer { this.dimensions.actualCellWidth = this.dimensions.scaledCellWidth / this._devicePixelRatio; } } + +// TODO: Share impl with core +export class JoinedCellData extends AttributeData implements ICellData { + private _width: number; + // .content carries no meaning for joined CellData, simply nullify it + // thus we have to overload all other .content accessors + public content: number = 0; + public fg: number; + public bg: number; + public combinedData: string = ''; + + constructor(firstCell: ICellData, chars: string, width: number) { + super(); + this.fg = firstCell.fg; + this.bg = firstCell.bg; + this.combinedData = chars; + this._width = width; + } + + public isCombined(): number { + // always mark joined cell data as combined + return Content.IS_COMBINED_MASK; + } + + public getWidth(): number { + return this._width; + } + + public getChars(): string { + return this.combinedData; + } + + public getCode(): number { + // code always gets the highest possible fake codepoint (read as -1) + // this is needed as code is used by caches as identifier + return 0x1FFFFF; + } + + public setFromCharData(value: CharData): void { + throw new Error('not implemented'); + } + + public getAsCharData(): CharData { + return [this.fg, this.getChars(), this.getWidth(), this.getCode()]; + } +} diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index dfefb339..61a7ae4d 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -83,7 +83,7 @@ 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 * 2 + TMP_CANVAS_GLYPH_PADDING * 2; + this._tmpCanvas.width = this._config.scaledCharWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2; this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency })); } @@ -317,6 +317,14 @@ export class WebglCharAtlas implements IDisposable { this.hasCanvasChanged = true; + // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used + // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure + // giant ligatures (eg. =====>) don't impact overall performance. + const allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2; + console.log('allowedWidth', allowedWidth); + if (this._tmpCanvas.width < allowedWidth) { + this._tmpCanvas.width = allowedWidth; + } this._tmpCtx.save(); this._workAttributeData.fg = fg; @@ -405,7 +413,7 @@ export class WebglCharAtlas implements IDisposable { return NULL_RASTERIZED_GLYPH; } - const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, isPowerlineGlyph); + const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph); const clippedImageData = this._clipImageData(imageData, this._workBoundingBox); // Check if there is enough room in the current row and go to next if needed @@ -438,14 +446,14 @@ 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, restrictedGlyph: boolean): IRasterizedGlyph { + private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean): IRasterizedGlyph { boundingBox.top = 0; const height = restrictedGlyph ? this._config.scaledCharHeight : this._tmpCanvas.height; - const width = restrictedGlyph ? this._config.scaledCharWidth : this._tmpCanvas.width; + const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth; let found = false; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { - const alphaOffset = y * width * 4 + x * 4 + 3; + const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3; if (imageData.data[alphaOffset] !== 0) { boundingBox.top = y; found = true; @@ -460,7 +468,7 @@ export class WebglCharAtlas implements IDisposable { found = false; for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { - const alphaOffset = y * width * 4 + x * 4 + 3; + const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3; if (imageData.data[alphaOffset] !== 0) { boundingBox.left = x; found = true; @@ -475,7 +483,7 @@ export class WebglCharAtlas implements IDisposable { found = false; for (let x = width - 1; x >= 0; x--) { for (let y = 0; y < height; y++) { - const alphaOffset = y * width * 4 + x * 4 + 3; + const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3; if (imageData.data[alphaOffset] !== 0) { boundingBox.right = x; found = true; @@ -490,7 +498,7 @@ export class WebglCharAtlas implements IDisposable { found = false; for (let y = height - 1; y >= 0; y--) { for (let x = 0; x < width; x++) { - const alphaOffset = y * width * 4 + x * 4 + 3; + const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3; if (imageData.data[alphaOffset] !== 0) { boundingBox.bottom = y; found = true; diff --git a/src/browser/renderer/TextRenderLayer.ts b/src/browser/renderer/TextRenderLayer.ts index 48bf848e..ded6c9c6 100644 --- a/src/browser/renderer/TextRenderLayer.ts +++ b/src/browser/renderer/TextRenderLayer.ts @@ -99,7 +99,6 @@ export class TextRenderLayer extends BaseRenderLayer { // We already know the exact start and end column of the joined range, // so we get the string and width representing it directly - cell = new JoinedCellData( this._workCell, line!.translateToString(true, range[0], range[1]), diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index a052db54..eb2dd1fc 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -42,7 +42,6 @@ export class DomRendererRowFactory { const fragment = this._document.createDocumentFragment(); const joinedRanges = this._characterJoinerService.getJoinedCharacters(row); - console.log('joinedRanges', joinedRanges.map(e => e[0] + '->' + e[1]).join(',')); // Find the line length first, this prevents the need to output a bunch of // empty cells at the end. This cannot easily be integrated into the main // loop below because of the colCount feature (which can be removed after we @@ -79,7 +78,6 @@ export class DomRendererRowFactory { // We already know the exact start and end column of the joined range, // so we get the string and width representing it directly - cell = new JoinedCellData( this._workCell, lineData.translateToString(true, range[0], range[1]), From 00fa7bec42b090642197b1169db53668568ffb10 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 11:32:02 -0700 Subject: [PATCH 14/16] Null out secondary ligature chars in cache --- addons/xterm-addon-webgl/src/WebglRenderer.ts | 15 +++++++++------ .../xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 1 - 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index ff159f70..3d25e5b0 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -335,8 +335,8 @@ export class WebglRenderer extends Disposable implements IRenderer { // Nothing has changed, no updates needed if (this._model.cells[i] === code && - this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._workCell.bg && - this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workCell.fg) { + this._model.cells[i + RENDER_MODEL_BG_OFFSET] === cell.bg && + this._model.cells[i + RENDER_MODEL_FG_OFFSET] === cell.fg) { continue; } @@ -347,11 +347,10 @@ export class WebglRenderer extends Disposable implements IRenderer { // Cache the results in the model this._model.cells[i] = code; - this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workCell.bg; - this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workCell.fg; + this._model.cells[i + RENDER_MODEL_BG_OFFSET] = cell.bg; + this._model.cells[i + RENDER_MODEL_FG_OFFSET] = cell.fg; - console.log('updateCell', x, y, code, chars); - this._glyphRenderer.updateCell(x, y, code, this._workCell.bg, this._workCell.fg, chars); + this._glyphRenderer.updateCell(x, y, code, cell.bg, cell.fg, chars); if (isJoined) { // Restore work cell @@ -359,7 +358,11 @@ export class WebglRenderer extends Disposable implements IRenderer { // Null out non-first cells for (x++; x < lastCharX; x++) { + const j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL; this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, NULL_CELL_CHAR); + this._model.cells[j] = NULL_CELL_CODE; + this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._workCell.bg; + this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._workCell.fg; } } } diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 61a7ae4d..5e1ad195 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -321,7 +321,6 @@ export class WebglCharAtlas implements IDisposable { // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure // giant ligatures (eg. =====>) don't impact overall performance. const allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2; - console.log('allowedWidth', allowedWidth); if (this._tmpCanvas.width < allowedWidth) { this._tmpCanvas.width = allowedWidth; } From 8a1d2cf0f4179c69c30dda5fcd9ff722cbd80b2b Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Fri, 2 Apr 2021 14:22:49 -0700 Subject: [PATCH 15/16] Whitespace change to force ligatures publish --- addons/xterm-addon-ligatures/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/xterm-addon-ligatures/README.md b/addons/xterm-addon-ligatures/README.md index 6336bf83..8f869d73 100644 --- a/addons/xterm-addon-ligatures/README.md +++ b/addons/xterm-addon-ligatures/README.md @@ -51,3 +51,4 @@ This package makes use of the following fonts for testing: [Fira Code License]: https://github.com/tonsky/FiraCode/blob/master/LICENSE [Iosevka]: https://github.com/be5invis/Iosevka [Iosevka License]: https://github.com/be5invis/Iosevka/blob/master/LICENSE.md + From af26e27e23e3359dfc338441292699e10670e44b Mon Sep 17 00:00:00 2001 From: WhatTheServer Date: Sun, 4 Apr 2021 00:09:10 -0400 Subject: [PATCH 16/16] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index d5488125..42e57ca0 100644 --- a/README.md +++ b/README.md @@ -173,6 +173,8 @@ Xterm.js is used in several world-class applications to provide great terminal e - [**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. [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 in our list. Note: Please add any new contributions to the end of the list only.