From 8b4e8199d7e67e1b048c102dc29781cd602ea6b2 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Sat, 23 Jul 2022 07:38:34 -0700 Subject: [PATCH] Get underline style affecting webgl rendering --- addons/xterm-addon-webgl/src/GlyphRenderer.ts | 10 +++---- addons/xterm-addon-webgl/src/WebglRenderer.ts | 8 ++++-- .../src/atlas/WebglCharAtlas.ts | 28 +++++++++++++++---- 3 files changed, 32 insertions(+), 14 deletions(-) diff --git a/addons/xterm-addon-webgl/src/GlyphRenderer.ts b/addons/xterm-addon-webgl/src/GlyphRenderer.ts index 28b37c29..e679232c 100644 --- a/addons/xterm-addon-webgl/src/GlyphRenderer.ts +++ b/addons/xterm-addon-webgl/src/GlyphRenderer.ts @@ -169,11 +169,11 @@ export class GlyphRenderer extends Disposable { return this._atlas ? this._atlas.beginFrame() : true; } - public updateCell(x: number, y: number, code: number, bg: number, fg: number, chars: string, lastBg: number): void { - this._updateCell(this._vertices.attributes, x, y, code, bg, fg, chars, lastBg); + public updateCell(x: number, y: number, code: number, bg: number, fg: number, ext: number, chars: string, lastBg: number): void { + this._updateCell(this._vertices.attributes, x, y, code, bg, fg, ext, chars, lastBg); } - private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, chars: string, lastBg: number): void { + private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, ext: number, chars: string, lastBg: number): void { const terminal = this._terminal; const i = (y * terminal.cols + x) * INDICES_PER_CELL; @@ -193,10 +193,10 @@ export class GlyphRenderer extends Disposable { // Get the glyph if (chars && chars.length > 1) { // TODO: Use actual ext - rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, 0); + rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext); } else { // TODO: Use actual ext - rasterizedGlyph = this._atlas.getRasterizedGlyph(code, bg, fg, 0); + rasterizedGlyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext); } // Fill empty if no glyph was found diff --git a/addons/xterm-addon-webgl/src/WebglRenderer.ts b/addons/xterm-addon-webgl/src/WebglRenderer.ts index 1e385b33..eb8b8d8d 100644 --- a/addons/xterm-addon-webgl/src/WebglRenderer.ts +++ b/addons/xterm-addon-webgl/src/WebglRenderer.ts @@ -32,7 +32,7 @@ export class WebglRenderer extends Disposable implements IRenderer { private _model: RenderModel = new RenderModel(); private _workCell: CellData = new CellData(); - private _workColors: { fg: number, bg: number } = { fg: 0, bg: 0 }; + private _workColors: { fg: number, bg: number, ext: number } = { fg: 0, bg: 0, ext: 0 }; private _canvas: HTMLCanvasElement; private _gl: IWebGL2RenderingContext; @@ -357,7 +357,7 @@ export class WebglRenderer extends Disposable implements IRenderer { this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workColors.bg; this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workColors.fg; - this._glyphRenderer.updateCell(x, y, code, this._workColors.bg, this._workColors.fg, chars, lastBg); + this._glyphRenderer.updateCell(x, y, code, this._workColors.bg, this._workColors.fg, this._workColors.ext, chars, lastBg); if (isJoined) { // Restore work cell @@ -366,7 +366,7 @@ 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, 0); + this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0); this._model.cells[j] = NULL_CELL_CODE; this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._workColors.bg; this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._workColors.fg; @@ -384,6 +384,8 @@ export class WebglRenderer extends Disposable implements IRenderer { private _loadColorsForCell(x: number, y: number): void { this._workColors.bg = this._workCell.bg; this._workColors.fg = this._workCell.fg; + // TODO: Use extended packed format as key + this._workColors.ext = this._workCell.extended.underlineStyle; // Get any foreground/background overrides, this happens on the model to avoid spreading // override logic throughout the different sub-renderers diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts index 642c0e83..7971fd87 100644 --- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts +++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts @@ -6,7 +6,7 @@ import { ICharAtlasConfig } from './Types'; import { DIM_OPACITY, TEXT_BASELINE } from 'browser/renderer/atlas/Constants'; import { IRasterizedGlyph, IBoundingBox, IRasterizedGlyphSet } from '../Types'; -import { DEFAULT_COLOR, Attributes, DEFAULT_EXT } from 'common/buffer/Constants'; +import { DEFAULT_COLOR, Attributes, DEFAULT_EXT, UnderlineStyle } from 'common/buffer/Constants'; import { throwIfFalsy } from '../WebglUtils'; import { IColor } from 'common/Types'; import { IDisposable } from 'xterm'; @@ -106,7 +106,7 @@ export class WebglCharAtlas implements IDisposable { private _doWarmUp(): void { // Pre-fill with ASCII 33-126 for (let i = 33; i < 126; i++) { - const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR); + const rasterizedGlyph = this._drawToCache(i, DEFAULT_COLOR, DEFAULT_COLOR, DEFAULT_EXT); this._cacheMap[i] = { [DEFAULT_COLOR]: { [DEFAULT_COLOR]: { @@ -179,7 +179,7 @@ export class WebglCharAtlas implements IDisposable { } if (!rasterizedGlyph) { - rasterizedGlyph = this._drawToCache(key, bg, fg); + rasterizedGlyph = this._drawToCache(key, bg, fg, ext); rasterizedGlyphSetFg[ext] = rasterizedGlyph; } @@ -312,7 +312,7 @@ export class WebglCharAtlas implements IDisposable { return color; } - private _drawToCache(codeOrChars: number | string, bg: number, fg: number): IRasterizedGlyph { + private _drawToCache(codeOrChars: number | string, bg: number, fg: number, ext: number): IRasterizedGlyph { const chars = typeof codeOrChars === 'number' ? String.fromCharCode(codeOrChars) : codeOrChars; this.hasCanvasChanged = true; @@ -333,6 +333,8 @@ export class WebglCharAtlas implements IDisposable { this._workAttributeData.fg = fg; this._workAttributeData.bg = bg; + // TODO: Use packed ext format + this._workAttributeData.extended.underlineStyle = ext; const invisible = !!this._workAttributeData.isInvisible(); if (invisible) { @@ -421,8 +423,22 @@ export class WebglCharAtlas implements IDisposable { this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle; this._tmpCtx.beginPath(); if (underline) { - this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset); - this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset); + console.log('underline', this._workAttributeData.extended.underlineStyle); + switch (this._workAttributeData.extended.underlineStyle) { + case UnderlineStyle.DOUBLE: + break; + case UnderlineStyle.CURLY: + break; + case UnderlineStyle.DOTTED: + break; + case UnderlineStyle.DASHED: + break; + case UnderlineStyle.SINGLE: + default: + this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset); + this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset); + break; + } } if (strikethrough) { this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);