From 9246d524cb54f1453ccddb5249857e9b3ed5ef75 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 9 Jun 2017 16:35:21 -0700 Subject: [PATCH] Use a single element for the middle of the selection This reduces the number of DOM nodes used for the selection dramatically. --- src/Renderer.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index f0f50f61..7d8c6f85 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -353,9 +353,8 @@ export class Renderer { const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols; documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol)); // Draw middle rows - for (let i = viewportCappedStartRow + 1; i < viewportCappedEndRow; i++) { - documentFragment.appendChild(this._createSelectionElement(i, 0, this._terminal.cols)); - } + const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1; + documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount)); // Draw final row if (viewportCappedStartRow !== viewportCappedEndRow) { // Only draw viewportEndRow if it's not the same as viewporttartRow @@ -371,9 +370,9 @@ export class Renderer { * @param colStart The start column. * @param colEnd The end columns. */ - private _createSelectionElement(row: number, colStart: number, colEnd: number): HTMLElement { + private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement { const element = document.createElement('div'); - element.style.height = `${this._terminal.charMeasure.height}px`; + element.style.height = `${rowCount * this._terminal.charMeasure.height}px`; element.style.top = `${row * this._terminal.charMeasure.height}px`; element.style.left = `${colStart * this._terminal.charMeasure.width}px`; element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;