diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index c50c6483..2cbbc736 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -37,7 +37,6 @@ export class DomRenderer extends Disposable implements IRenderer { private _rowContainer: HTMLElement; private _rowElements: HTMLElement[] = []; private _selectionContainer: HTMLElement; - private _cellToRowElements: Int16Array[] = []; public dimensions: IRenderDimensions; @@ -96,6 +95,7 @@ export class DomRenderer extends Disposable implements IRenderer { } // TODO: put metrics calc into lazy tasks + // TODO: use relative threshold calc to allow bigger px offsets at bigger font sizes private _fontMetrics: Uint8Array = new Uint8Array(1424); private _calcFontMetrics(): void { const start = Date.now(); @@ -391,10 +391,20 @@ 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.rawOptions.cursorStyle; - if (!this._cellToRowElements[y] || this._cellToRowElements[y].length !== this._bufferService.cols) { - this._cellToRowElements[y] = new Int16Array(this._bufferService.cols); - } - rowElement.replaceChildren(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.css.cell.width, this._bufferService.cols, this._cellToRowElements[y], this._fontMetrics)); + rowElement.replaceChildren( + this._rowFactory.createRow( + lineData!, + row, + row === cursorAbsoluteY, + cursorStyle, + cursorX, + cursorBlink, + this.dimensions.css.cell.width, + this._bufferService.cols, + this._fontMetrics, + this._linkState + ) + ); } } @@ -402,6 +412,7 @@ export class DomRenderer extends Disposable implements IRenderer { return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`; } + private _linkState = new Uint8Array(3); private _handleLinkHover(e: ILinkifierEvent): void { this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true); } @@ -411,55 +422,46 @@ export class DomRenderer extends Disposable implements IRenderer { } private _setCellUnderline(x: number, x2: number, y: number, y2: number, cols: number, enabled: boolean): void { - /** - * NOTE: The linkifier may send out of viewport y-values if: - * - negative y-value: the link started at a higher line - * - y-value >= maxY: the link ends at a line below viewport - * - * For negative y-values we can simply adjust x = 0, - * as higher up link start means, that everything from - * (0,0) is a link under top-down-left-right char progression - * - * Additionally there might be a small chance of out-of-sync x|y-values - * from a race condition of render updates vs. link event handler execution: - * - (sync) resize: chances terminal buffer in sync, schedules render update async - * - (async) link handler race condition: new buffer metrics, but still on old render state - * - (async) render update: brings term metrics and render state back in sync - */ + // nomalize coords into viewport borders if (y < 0) x = 0; if (y2 < 0) x2 = 0; - - // avoid out-of-sync y-values, simply clamp into valid area - const maxY = this._cellToRowElements.length - 1; + const maxY = this._bufferService.rows - 1; y = Math.max(Math.min(y, maxY), 0); y2 = Math.max(Math.min(y2, maxY), 0); - const elemY = this._cellToRowElements[y]; - const elemY2 = this._cellToRowElements[y2]; - if (x >= elemY.length || x2 >= elemY2.length) { - // avoid out-of-sync x-values - // simply exit early, gets fixed by the next render update - return; - } - x = elemY[x]; - x2 = elemY2[x2]; - if (x === -1 || x2 === -1) { - return; - } + const cursorAbsoluteY = this._bufferService.buffer.ybase + this._bufferService.buffer.y; + const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1); + const cursorBlink = this._optionsService.rawOptions.cursorBlink; + const cursorStyle = this._optionsService.rawOptions.cursorStyle; - while (x !== x2 || y !== y2) { - const row = this._rowElements[y]; - if (!row) { - return; + // refresh rows within link range + this._linkState[0] = +enabled; + for (let i = y; i <= y2; ++i) { + const rowElement = this._rowElements[i]; + if (!rowElement) { + break; } - const span = row.children[x] as HTMLElement; - if (span) { - span.style.textDecoration = enabled ? 'underline' : 'none'; - } - if (++x >= cols) { - x = 0; - y++; + if (enabled) { + this._linkState[1] = i === y ? x : 0; + this._linkState[2] = (i === y2 ? x2 : cols) - 1; } + const row = i + this._bufferService.buffer.ydisp; + const lineData = this._bufferService.buffer.lines.get(row); + rowElement.replaceChildren( + this._rowFactory.createRow( + lineData!, + row, + row === cursorAbsoluteY, + cursorStyle, + cursorX, + cursorBlink, + this.dimensions.css.cell.width, + this._bufferService.cols, + this._fontMetrics, + this._linkState + ) + ); } + this._linkState[0] = 0; } } diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts index b230abc5..0692a5ba 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts @@ -14,9 +14,9 @@ import { MockCoreService, MockDecorationService, MockOptionsService } from 'comm import { css } from 'common/Color'; import { MockCharacterJoinerService, MockCoreBrowserService, MockThemeService } from 'browser/TestUtils.test'; -const EMPTY_ELEM_MAPPING = new Int16Array(1000); const EMPTY_METRICS = new Uint8Array(1024); EMPTY_METRICS.fill(0xFF); +const EMPTY_LINKSTATE = new Uint8Array(3); describe('DomRendererRowFactory', () => { let dom: jsdom.JSDOM; @@ -39,7 +39,7 @@ describe('DomRendererRowFactory', () => { describe('createRow', () => { it('should not create anything for an empty row', () => { - const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), '' ); @@ -49,7 +49,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, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), '語' ); @@ -57,7 +57,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -65,7 +65,7 @@ describe('DomRendererRowFactory', () => { }); it('should add class for cursor blink', () => { - const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), ` ` ); @@ -74,7 +74,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, 0, false, undefined, 0, false, 5, 1, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -85,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -95,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -105,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -118,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -129,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -140,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -151,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -162,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -173,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -183,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -196,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), `a` ); @@ -210,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), `a` ); @@ -222,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -233,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -243,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -256,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), `a` ); @@ -268,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -279,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'a' ); @@ -291,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), 'ab' ); @@ -299,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, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS); + const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE); assert.equal(getFragmentHtml(fragment), ' a' ); diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts index c9a0059a..b4cbe954 100644 --- a/src/browser/renderer/dom/DomRendererRowFactory.ts +++ b/src/browser/renderer/dom/DomRendererRowFactory.ts @@ -49,7 +49,18 @@ export class DomRendererRowFactory { this._columnSelectMode = columnSelectMode; } - public createRow(lineData: IBufferLine, row: number, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number, cellMap: Int16Array, metrics: Uint8Array): DocumentFragment { + public createRow( + lineData: IBufferLine, + row: number, + isCursorRow: boolean, + cursorStyle: string | undefined, + cursorX: number, + cursorBlink: boolean, + cellWidth: number, + cols: number, + metrics: Uint8Array, + linkState: Uint8Array + ): DocumentFragment { // NOTE: `cellMap` maps cell positions to a span element index in a row. // All positions should be updated, even skipped ones after wide chars or left overs at the end, // otherwise the mouse hover logic might mark the wrong elements as underlined. @@ -71,7 +82,6 @@ export class DomRendererRowFactory { } const colors = this._themeService.colors; - let elemIndex = -1; let charElement: HTMLSpanElement | undefined; let cellAmount = 0; @@ -79,6 +89,9 @@ export class DomRendererRowFactory { let oldBg = 0; let oldFg = 0; let oldExt = 0; + let oldLinkHover: number | boolean = false; + + const isHover = linkState[0]; let x = 0; for (; x < lineLength; x++) { @@ -86,9 +99,7 @@ export class DomRendererRowFactory { let width = this._workCell.getWidth(); // The character to the left is a wide character, drawing is owned by the char at x-1 - // still have to update cellMap with current element index if (width === 0) { - cellMap[x] = elemIndex; continue; } @@ -126,6 +137,7 @@ export class DomRendererRowFactory { const isCursorCell = isCursorRow && x === cursorX; const cc = cell.getCode(); const isCombined = cell.isCombined(); + const isLinkHover = isHover && x >= linkState[1] && x <= linkState[2]; if (!charElement) { charElement = this._document.createElement('span'); @@ -144,6 +156,7 @@ export class DomRendererRowFactory { && cc < 1424 && !metrics[cc] && !isInSelection && !isCursorCell + && isLinkHover === oldLinkHover ) { let c = cell.isInvisible() ? WHITESPACE_CELL_CHAR : (cell.getChars() || WHITESPACE_CELL_CHAR); if (c === ' ' && (cell.isUnderline() || cell.isOverline())) { @@ -154,6 +167,7 @@ export class DomRendererRowFactory { oldBg = cell.bg; oldFg = cell.fg; oldExt = cell.extended.ext; + oldLinkHover = isLinkHover; continue; } else { if (cellAmount) { @@ -168,6 +182,7 @@ export class DomRendererRowFactory { oldBg = cell.bg; oldFg = cell.fg; oldExt = cell.extended.ext; + oldLinkHover = isLinkHover; @@ -256,6 +271,10 @@ export class DomRendererRowFactory { charElement.classList.add(STRIKETHROUGH_CLASS); } + if (isLinkHover) { + charElement.style.textDecoration = 'underline'; + } + let fg = cell.getFgColor(); let fgColorMode = cell.getFgColorMode(); let bg = cell.getBgColor(); @@ -381,10 +400,7 @@ export class DomRendererRowFactory { charElement.textContent = text; } - fragment.appendChild(charElement); - cellMap[x] = ++elemIndex; - x = lastCharX; } @@ -394,12 +410,6 @@ export class DomRendererRowFactory { charElement.style.width = `${cellWidth * cellAmount}px`; } - // since the loop above might exit early not handling all cells, - // also set remaining cell positions to last element index - if (x < cols - 1) { - cellMap.subarray(x).fill(++elemIndex); - } - return fragment; }