Get underline style affecting webgl rendering

This commit is contained in:
Daniel Imms
2022-07-23 07:38:34 -07:00
parent 34cd5966b9
commit 8b4e8199d7
3 changed files with 32 additions and 14 deletions
@@ -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
@@ -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
@@ -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);