X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=src%2FRenderer.ts;h=165594fd25f6d165c116d89e209f0f529db98362;hb=HEAD;hp=f0f50f61fb8d32afd6ac893db3204336c9e42e78;hpb=7d0e585c44769fb3bdc9f66f30d95dd1fcf871f6;p=mirror_xterm.js.git diff --git a/src/Renderer.ts b/src/Renderer.ts index f0f50f6..165594f 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -139,15 +139,15 @@ export class Renderer { } for (; y <= end; y++) { - let row = y + this._terminal.ydisp; + let row = y + this._terminal.buffer.ydisp; - let line = this._terminal.lines.get(row); + let line = this._terminal.buffer.lines.get(row); let x; - if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp) && + if (this._terminal.buffer.y === y - (this._terminal.buffer.ybase - this._terminal.buffer.ydisp) && this._terminal.cursorState && !this._terminal.cursorHidden) { - x = this._terminal.x; + x = this._terminal.buffer.x; } else { x = -1; } @@ -170,16 +170,13 @@ export class Renderer { let data: any = line[i][0]; const ch = line[i][1]; const ch_width: any = line[i][2]; + const isCursor: boolean = i === x; if (!ch_width) { continue; } - if (i === x) { - data = -1; - } - - if (data !== attr) { - if (attr !== this._terminal.defAttr) { + if (data !== attr || isCursor) { + if (attr !== this._terminal.defAttr && !isCursor) { if (innerHTML) { currentElement.innerHTML = innerHTML; innerHTML = ''; @@ -187,7 +184,7 @@ export class Renderer { documentFragment.appendChild(currentElement); currentElement = null; } - if (data !== this._terminal.defAttr) { + if (data !== this._terminal.defAttr || isCursor) { if (innerHTML && !currentElement) { currentElement = this._spanElementObjectPool.acquire(); } @@ -199,70 +196,73 @@ export class Renderer { documentFragment.appendChild(currentElement); } currentElement = this._spanElementObjectPool.acquire(); - if (data === -1) { - currentElement.classList.add('reverse-video', 'terminal-cursor'); - } else { - let bg = data & 0x1ff; - let fg = (data >> 9) & 0x1ff; - let flags = data >> 18; - - if (flags & FLAGS.BOLD) { - if (!brokenBold) { - currentElement.classList.add('xterm-bold'); - } - // See: XTerm*boldColors - if (fg < 8) { - fg += 8; - } - } - if (flags & FLAGS.UNDERLINE) { - currentElement.classList.add('xterm-underline'); - } + let bg = data & 0x1ff; + let fg = (data >> 9) & 0x1ff; + let flags = data >> 18; - if (flags & FLAGS.BLINK) { - currentElement.classList.add('xterm-blink'); - } + if (isCursor) { + currentElement.classList.add('reverse-video'); + currentElement.classList.add('terminal-cursor'); + } - // If inverse flag is on, then swap the foreground and background variables. - if (flags & FLAGS.INVERSE) { - let temp = bg; - bg = fg; - fg = temp; - // Should inverse just be before the above boldColors effect instead? - if ((flags & 1) && fg < 8) { - fg += 8; - } + if (flags & FLAGS.BOLD) { + if (!brokenBold) { + currentElement.classList.add('xterm-bold'); } - - if (flags & FLAGS.INVISIBLE) { - currentElement.classList.add('xterm-hidden'); + // See: XTerm*boldColors + if (fg < 8) { + fg += 8; } + } - /** - * Weird situation: Invert flag used black foreground and white background results - * in invalid background color, positioned at the 256 index of the 256 terminal - * color map. Pin the colors manually in such a case. - * - * Source: https://github.com/sourcelair/xterm.js/issues/57 - */ - if (flags & FLAGS.INVERSE) { - if (bg === 257) { - bg = 15; - } - if (fg === 256) { - fg = 0; - } - } + if (flags & FLAGS.UNDERLINE) { + currentElement.classList.add('xterm-underline'); + } + + if (flags & FLAGS.BLINK) { + currentElement.classList.add('xterm-blink'); + } - if (bg < 256) { - currentElement.classList.add(`xterm-bg-color-${bg}`); + // If inverse flag is on, then swap the foreground and background variables. + if (flags & FLAGS.INVERSE) { + let temp = bg; + bg = fg; + fg = temp; + // Should inverse just be before the above boldColors effect instead? + if ((flags & 1) && fg < 8) { + fg += 8; } + } + + if (flags & FLAGS.INVISIBLE && !isCursor) { + currentElement.classList.add('xterm-hidden'); + } - if (fg < 256) { - currentElement.classList.add(`xterm-color-${fg}`); + /** + * Weird situation: Invert flag used black foreground and white background results + * in invalid background color, positioned at the 256 index of the 256 terminal + * color map. Pin the colors manually in such a case. + * + * Source: https://github.com/sourcelair/xterm.js/issues/57 + */ + if (flags & FLAGS.INVERSE) { + if (bg === 257) { + bg = 15; } + if (fg === 256) { + fg = 0; + } + } + + if (bg < 256) { + currentElement.classList.add(`xterm-bg-color-${bg}`); } + + if (fg < 256) { + currentElement.classList.add(`xterm-color-${fg}`); + } + } } @@ -294,7 +294,10 @@ export class Renderer { } } - attr = data; + // The cursor needs its own element, therefore we set attr to -1 + // which will cause the next character to be rendered in a new element + attr = isCursor ? -1 : data; + } if (innerHTML && !currentElement) { @@ -336,8 +339,8 @@ export class Renderer { } // Translate from buffer position to viewport position - const viewportStartRow = start[1] - this._terminal.ydisp; - const viewportEndRow = end[1] - this._terminal.ydisp; + const viewportStartRow = start[1] - this._terminal.buffer.ydisp; + const viewportEndRow = end[1] - this._terminal.buffer.ydisp; const viewportCappedStartRow = Math.max(viewportStartRow, 0); const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1); @@ -353,9 +356,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 +373,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`;