diff --git a/src/renderer/dom/DomRenderer.ts b/src/renderer/dom/DomRenderer.ts index 64a5b380..ea09bb34 100644 --- a/src/renderer/dom/DomRenderer.ts +++ b/src/renderer/dom/DomRenderer.ts @@ -90,7 +90,14 @@ export class DomRenderer extends EventEmitter implements IRenderer { `}` + `.xterm .${ROW_CONTAINER_CLASS} span {` + ` display: inline-block;` + + ` height: 100%;` + + ` vertical-align: top;` + + `}` + + `.xterm .xterm-cursor {` + + ` background-color: #fff;` + + ` color: #000;` + `}`; + // TODO: Copy canvas renderer behavior for cursor this.colorManager.colors.ansi.forEach((c, i) => { styles += `.xterm .xterm-fg-${i} { color: ${c.css}; }` + @@ -158,6 +165,8 @@ export class DomRenderer extends EventEmitter implements IRenderer { console.log('refreshRows', arguments); const terminal = this._terminal; + const cursorAbsoluteY = terminal.buffer.ybase + terminal.buffer.y; + for (let y = start; y <= end; y++) { const rowElement = this._rowElements[y]; rowElement.innerHTML = ''; @@ -166,7 +175,7 @@ export class DomRenderer extends EventEmitter implements IRenderer { const line = terminal.buffer.lines.get(row); for (let x = 0; x < terminal.cols; x++) { const charData = line[x]; - const code: number = charData[CHAR_DATA_CODE_INDEX]; + // const code: number = charData[CHAR_DATA_CODE_INDEX]; const char: string = charData[CHAR_DATA_CHAR_INDEX]; const attr: number = charData[CHAR_DATA_ATTR_INDEX]; let width: number = charData[CHAR_DATA_WIDTH_INDEX]; @@ -185,6 +194,10 @@ export class DomRenderer extends EventEmitter implements IRenderer { let bg = attr & 0x1ff; let fg = (attr >> 9) & 0x1ff; + if (row === cursorAbsoluteY && x === this._terminal.buffer.x) { + charElement.classList.add('xterm-cursor'); + } + // If inverse flag is on, the foreground should become the background. if (flags & FLAGS.INVERSE) { const temp = bg;