diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 93624a37..978393b1 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -4,7 +4,7 @@ */ import { DomRendererRowFactory, RowCss } from 'browser/renderer/dom/DomRendererRowFactory'; -import { SpacingCache } from 'browser/renderer/dom/SpacingCache'; +import { WidthCache } from 'browser/renderer/dom/WidthCache'; import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants'; import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils'; import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types'; @@ -39,7 +39,7 @@ export class DomRenderer extends Disposable implements IRenderer { private _rowContainer: HTMLElement; private _rowElements: HTMLElement[] = []; private _selectionContainer: HTMLElement; - private _spacingCache: SpacingCache; + private _widthCache: WidthCache; public dimensions: IRenderDimensions; @@ -91,11 +91,11 @@ export class DomRenderer extends Disposable implements IRenderer { this._rowContainer.remove(); this._selectionContainer.remove(); this._themeStyleElement.remove(); - this._spacingCache.dispose(); + this._widthCache.dispose(); })); - this._spacingCache = new SpacingCache(document); - this._spacingCache.setFont(this._optionsService.rawOptions.fontFamily, this._optionsService.rawOptions.fontSize); + this._widthCache = new WidthCache(document); + this._widthCache.setFont(this._optionsService.rawOptions.fontFamily, this._optionsService.rawOptions.fontSize); } private _updateDimensions(): void { @@ -338,7 +338,7 @@ export class DomRenderer extends Disposable implements IRenderer { // Refresh CSS this._injectCss(this._themeService.colors); // update spacing cache - this._spacingCache.setFont(this._optionsService.rawOptions.fontFamily, this._optionsService.rawOptions.fontSize); + this._widthCache.setFont(this._optionsService.rawOptions.fontFamily, this._optionsService.rawOptions.fontSize); } public clear(): void { @@ -377,7 +377,7 @@ export class DomRenderer extends Disposable implements IRenderer { cursorX, cursorBlink, this.dimensions.css.cell.width, - this._spacingCache, + this._widthCache, -1, -1 ) @@ -429,7 +429,7 @@ export class DomRenderer extends Disposable implements IRenderer { cursorX, cursorBlink, this.dimensions.css.cell.width, - this._spacingCache, + this._widthCache, enabled ? (i === y ? x : 0) : -1, enabled ? ((i === y2 ? x2 : cols) - 1) : -1 ) diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts index 1388a0f3..f3363098 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts @@ -12,18 +12,18 @@ import { IBufferLine } from 'common/Types'; import { CellData } from 'common/buffer/CellData'; import { MockCoreService, MockDecorationService, MockOptionsService } from 'common/TestUtils.test'; import { MockCharacterJoinerService, MockCoreBrowserService, MockThemeService } from 'browser/TestUtils.test'; -import { FontVariant, SpacingCache } from 'browser/renderer/dom/SpacingCache'; +import { WidthCache } from 'browser/renderer/dom/WidthCache'; -class EmptySpacingCache extends SpacingCache { - public spacing: {[key: string]: number} = {}; - public get(c: string, pixelWidth: number, variant: FontVariant): number { - if (this.spacing[c] !== undefined) { - return this.spacing[c]; +class EmptyWidthCache extends WidthCache { + public widths: {[key: string]: number} = {}; + public get(c: string, bold: boolean | number, italic: boolean | number): number { + if (this.widths[c] !== undefined) { + return this.widths[c]; } - return 0; + return 5; // 5 is default width below in tests } } -const EMPTY_SPACING = new EmptySpacingCache(new jsdom.JSDOM('').window.document); +const EMPTY_WIDTH = new EmptyWidthCache(new jsdom.JSDOM('').window.document); describe('DomRendererRowFactory', () => { @@ -47,17 +47,18 @@ describe('DomRendererRowFactory', () => { describe('createRow', () => { it('should not create anything for an empty row', () => { - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), '' ); }); it('should set correct attributes for double width characters', () => { + EMPTY_WIDTH.widths['語'] = 10; 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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), '語' ); @@ -65,7 +66,7 @@ describe('DomRendererRowFactory', () => { it('should add class for cursor and cursor style', () => { for (const style of ['block', 'bar', 'underline']) { - const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -73,7 +74,7 @@ describe('DomRendererRowFactory', () => { }); it('should add class for cursor blink', () => { - const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -84,7 +85,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -94,7 +95,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -104,7 +105,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -117,7 +118,7 @@ describe('DomRendererRowFactory', () => { cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED; cell.extended.underlineStyle = UnderlineStyle.SINGLE; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -128,7 +129,7 @@ describe('DomRendererRowFactory', () => { cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED; cell.extended.underlineStyle = UnderlineStyle.DOUBLE; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -139,7 +140,7 @@ describe('DomRendererRowFactory', () => { cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED; cell.extended.underlineStyle = UnderlineStyle.CURLY; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -150,7 +151,7 @@ describe('DomRendererRowFactory', () => { cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED; cell.extended.underlineStyle = UnderlineStyle.DOTTED; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -161,7 +162,7 @@ describe('DomRendererRowFactory', () => { cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED; cell.extended.underlineStyle = UnderlineStyle.DASHED; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -172,7 +173,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.OVERLINE; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -182,7 +183,7 @@ describe('DomRendererRowFactory', () => { const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]); cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -195,7 +196,7 @@ describe('DomRendererRowFactory', () => { cell.fg &= ~Attributes.PCOLOR_MASK; cell.fg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), `a` ); @@ -209,7 +210,7 @@ describe('DomRendererRowFactory', () => { cell.bg &= ~Attributes.PCOLOR_MASK; cell.bg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), `a` ); @@ -221,7 +222,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -232,7 +233,7 @@ describe('DomRendererRowFactory', () => { cell.fg |= FgFlags.INVERSE; cell.bg |= Attributes.CM_P16 | 1; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -242,7 +243,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -255,7 +256,7 @@ describe('DomRendererRowFactory', () => { cell.fg &= ~Attributes.PCOLOR_MASK; cell.fg |= i; lineData.setCell(0, cell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), `a` ); @@ -267,7 +268,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -278,7 +279,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, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -290,7 +291,7 @@ describe('DomRendererRowFactory', () => { lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)])); rowFactory.handleSelectionChanged([1, 0], [2, 0], false); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'ab' ); @@ -298,7 +299,7 @@ describe('DomRendererRowFactory', () => { it('should force whitespace cells to be rendered above the background', () => { lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); rowFactory.handleSelectionChanged([0, 0], [2, 0], false); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' a' ); @@ -315,7 +316,7 @@ describe('DomRendererRowFactory', () => { }); it('should not create anything for an empty row', () => { - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), '' ); @@ -325,18 +326,18 @@ describe('DomRendererRowFactory', () => { lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)])); lineData.setCell(2, CellData.fromCharData([DEFAULT_ATTR, 'c', 1, 'c'.charCodeAt(0)])); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'abc' ); }); it('should not merge codepoints with different spacing', () => { - EMPTY_SPACING.spacing['€'] = 3; + EMPTY_WIDTH.widths['€'] = 2; lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '€', 1, '€'.charCodeAt(0)])); lineData.setCell(2, CellData.fromCharData([DEFAULT_ATTR, 'c', 1, 'c'.charCodeAt(0)])); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'a€c' ); @@ -351,7 +352,7 @@ describe('DomRendererRowFactory', () => { lineData.setCell(1, aColor1); lineData.setCell(2, bColor2); lineData.setCell(3, bColor2); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'aabb' ); @@ -363,7 +364,7 @@ describe('DomRendererRowFactory', () => { lineData.setCell(2, CellData.fromCharData([DEFAULT_ATTR, 'X', 1, 'X'.charCodeAt(0)])); lineData.setCell(3, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)])); lineData.setCell(4, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)])); - const fragment = rowFactory.createRow(lineData, 0, true, undefined, 2, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, true, undefined, 2, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), 'aaXbb' ); @@ -376,7 +377,7 @@ describe('DomRendererRowFactory', () => { nullCell.bg = Attributes.CM_P16 | 2; lineData.setCell(3, nullCell); lineData.setCell(4, nullCell); - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' ' ); @@ -386,23 +387,23 @@ describe('DomRendererRowFactory', () => { const nullCell = lineData.loadCell(0, new CellData()); nullCell.bg = Attributes.CM_P16 | 1; lineData.setCell(0, nullCell); - let fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + let fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' ' ); lineData.setCell(1, nullCell); - fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' ' ); lineData.setCell(2, nullCell); lineData.setCell(3, nullCell); - fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' ' ); lineData.setCell(4, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)])); - fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_SPACING, -1, -1); + fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, EMPTY_WIDTH, -1, -1); assert.equal(getFragmentHtml(fragment), ' a' ); diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index 2a691107..ece98ea5 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -13,7 +13,7 @@ import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'bro import { JoinedCellData } from 'browser/services/CharacterJoinerService'; import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils'; import { AttributeData } from 'common/buffer/AttributeData'; -import { FontVariant, SpacingCache } from 'browser/renderer/dom/SpacingCache'; +import { WidthCache } from 'browser/renderer/dom/WidthCache'; export const enum RowCss { @@ -62,7 +62,7 @@ export class DomRendererRowFactory { cursorX: number, cursorBlink: boolean, cellWidth: number, - spacingCache: SpacingCache, + widthCache: WidthCache, linkStart: number, linkEnd: number ): DocumentFragment { @@ -135,11 +135,8 @@ export class DomRendererRowFactory { chars = '\xa0'; } - // lookup letter-spacing with font variant applied - let fontVariant = FontVariant.REGULAR; - if (cell.isBold()) fontVariant |= FontVariant.BOLD; - if (cell.isItalic()) fontVariant |= FontVariant.ITALIC; - spacing = spacingCache.get(chars, width * cellWidth, fontVariant); + // lookup char render width and calc spacing + spacing = width * cellWidth - widthCache.get(chars, cell.isBold(), cell.isItalic()); if (!charElement) { charElement = this._document.createElement('span'); diff --git a/src/browser/renderer/dom/SpacingCache.ts b/src/browser/renderer/dom/WidthCache.ts similarity index 72% rename from src/browser/renderer/dom/SpacingCache.ts rename to src/browser/renderer/dom/WidthCache.ts index f6a15c76..1b0fd1d7 100644 --- a/src/browser/renderer/dom/SpacingCache.ts +++ b/src/browser/renderer/dom/WidthCache.ts @@ -6,14 +6,6 @@ import { IDisposable } from 'common/Types'; -export const enum FontVariant { - REGULAR = 0, - BOLD = 1, - ITALIC = 2, - BOLD_ITALIC = 3 -} - - const enum CacheSettings { FLAT_UNSET = -9999, // sentinel for unset values in flat cache FLAT_SIZE = 256, // codepoint upper bound to handle in flat cache @@ -21,7 +13,7 @@ const enum CacheSettings { } -export class SpacingCache implements IDisposable { +export class WidthCache implements IDisposable { // flat cache for regular private _flat = new Float32Array(CacheSettings.FLAT_SIZE); // holey cache for bold, italic and bold&italic for any string @@ -55,7 +47,7 @@ export class SpacingCache implements IDisposable { boldItalic.style.fontWeight = 'bold'; boldItalic.style.fontStyle = 'italic'; - // note: must be in order of FontVariant values + // note: must be in order of variant in _measure this._measureElements = [regular, bold, italic, boldItalic]; this._container.appendChild(regular); this._container.appendChild(bold); @@ -98,33 +90,31 @@ export class SpacingCache implements IDisposable { } /** - * Get the letter-spacing value for cell content `c`. - * `c` should be the cell content obtained from `cell.getChars()`. - * `pixelWidth` is the standard width the cell should render with - * and can be calculated by `cell.getWidth() * cellWidth`. + * Get the render width for cell content `c` with current font settings. * `variant` denotes the font variant to be used. - * - * Returns the letter-spacing value, so that `c` renders aligned to `pixelWidth`. */ - public get(c: string, pixelWidth: number, variant: FontVariant): number { + public get(c: string, bold: boolean | number, italic: boolean | number): number { let cp = 0; - if (!variant && c.length === 1 && (cp = c.charCodeAt(0)) < CacheSettings.FLAT_SIZE) { + if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < CacheSettings.FLAT_SIZE) { return this._flat[cp] !== CacheSettings.FLAT_UNSET ? this._flat[cp] - : (this._flat[cp] = pixelWidth - this._measure(c, 0)); + : (this._flat[cp] = this._measure(c, 0)); } let key = c; - if (variant & FontVariant.BOLD) key += 'B'; - if (variant & FontVariant.ITALIC) key += 'I'; - let spacing = this._holey.get(key); - if (spacing === undefined) { - spacing = pixelWidth - this._measure(c, variant); - this._holey.set(key, spacing); + if (bold) key += 'B'; + if (italic) key += 'I'; + let width = this._holey.get(key); + if (width === undefined) { + let variant = 0; + if (bold) variant |= 1; + if (italic) variant |= 2; + width = this._measure(c, variant); + this._holey.set(key, width); } - return spacing; + return width; } - private _measure(c: string, variant: FontVariant): number { + private _measure(c: string, variant: number): number { const el = this._measureElements[variant]; el.textContent = c.repeat(CacheSettings.REPEAT); return el.getBoundingClientRect().width / CacheSettings.REPEAT;