mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
change to width cache
This commit is contained in:
Jörg Breitbart
@@ -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
|
||||
)
|
||||
|
||||
@@ -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),
|
||||
'<span>語</span>'
|
||||
);
|
||||
@@ -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),
|
||||
`<span class="xterm-cursor xterm-cursor-${style}"> </span>`
|
||||
);
|
||||
@@ -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),
|
||||
`<span class="xterm-cursor xterm-cursor-blink xterm-cursor-block"> </span>`
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-bold">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-italic">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-dim">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-underline-1">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-underline-2">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-underline-3">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-underline-4">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-underline-5">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-overline">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-strikethrough">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
`<span class="xterm-fg-${i}">a</span>`
|
||||
);
|
||||
@@ -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),
|
||||
`<span class="xterm-bg-${i}">a</span>`
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-bg-2 xterm-fg-1">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-bg-257 xterm-fg-1">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-bg-1 xterm-fg-257">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
`<span class="xterm-bold xterm-fg-${i + 8}">a</span>`
|
||||
);
|
||||
@@ -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),
|
||||
'<span style="background-color:#040506;color:#010203;">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span style="background-color:#010203;color:#040506;">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span>a</span><span class="xterm-decoration-top">b</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-decoration-top"> </span><span class="xterm-decoration-top">a</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span>abc</span>'
|
||||
);
|
||||
});
|
||||
|
||||
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),
|
||||
'<span>a</span><span style="letter-spacing: 3px;">€</span><span>c</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-fg-1">aa</span><span class="xterm-fg-2">bb</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span>aa</span><span class="xterm-cursor xterm-cursor-block">X</span><span>bb</span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span> </span><span class="xterm-bg-1"> </span><span class="xterm-bg-2"> </span>'
|
||||
);
|
||||
@@ -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),
|
||||
'<span class="xterm-bg-1"> </span>'
|
||||
);
|
||||
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),
|
||||
'<span class="xterm-bg-1"> </span>'
|
||||
);
|
||||
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),
|
||||
'<span class="xterm-bg-1"> </span>'
|
||||
);
|
||||
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),
|
||||
'<span class="xterm-bg-1"> </span><span>a</span>'
|
||||
);
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user