5 import { ITerminal } from './Interfaces';
6 import { DomElementObjectPool } from './utils/DomElementObjectPool';
9 * The maximum number of refresh frames to skip when the write buffer is non-
10 * empty. Note that these frames may be intermingled with frames that are
11 * skipped via requestAnimationFrame's mechanism.
13 const MAX_REFRESH_FRAME_SKIP = 5;
16 * Flags used to render terminal text properly.
26 let brokenBold: boolean = null;
28 export class Renderer {
29 /** A queue of the rows to be refreshed */
30 private _refreshRowsQueue: {start: number, end: number}[] = [];
31 private _refreshFramesSkipped = 0;
32 private _refreshAnimationFrame = null;
34 private _spanElementObjectPool = new DomElementObjectPool('span');
36 constructor(private _terminal: ITerminal) {
37 // Figure out whether boldness affects
38 // the character width of monospace fonts.
39 if (brokenBold === null) {
40 brokenBold = checkBoldBroken((<any>this._terminal).element);
42 this._spanElementObjectPool = new DomElementObjectPool('span');
44 // TODO: Pull more DOM interactions into Renderer.constructor, element for
45 // example should be owned by Renderer (and also exposed by Terminal due to
46 // to established public API).
50 * Queues a refresh between two rows (inclusive), to be done on next animation
52 * @param {number} start The start row.
53 * @param {number} end The end row.
55 public queueRefresh(start: number, end: number): void {
56 this._refreshRowsQueue.push({ start: start, end: end });
57 if (!this._refreshAnimationFrame) {
58 this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
63 * Performs the refresh loop callback, calling refresh only if a refresh is
64 * necessary before queueing up the next one.
66 private _refreshLoop(): void {
67 // Skip MAX_REFRESH_FRAME_SKIP frames if the writeBuffer is non-empty as it
68 // will need to be immediately refreshed anyway. This saves a lot of
69 // rendering time as the viewport DOM does not need to be refreshed, no
70 // scroll events, no layouts, etc.
71 const skipFrame = this._terminal.writeBuffer.length > 0 && this._refreshFramesSkipped++ <= MAX_REFRESH_FRAME_SKIP;
73 this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
77 this._refreshFramesSkipped = 0;
80 if (this._refreshRowsQueue.length > 4) {
81 // Just do a full refresh when 5+ refreshes are queued
83 end = this._terminal.rows - 1;
85 // Get start and end rows that need refreshing
86 start = this._refreshRowsQueue[0].start;
87 end = this._refreshRowsQueue[0].end;
88 for (let i = 1; i < this._refreshRowsQueue.length; i++) {
89 if (this._refreshRowsQueue[i].start < start) {
90 start = this._refreshRowsQueue[i].start;
92 if (this._refreshRowsQueue[i].end > end) {
93 end = this._refreshRowsQueue[i].end;
97 this._refreshRowsQueue = [];
98 this._refreshAnimationFrame = null;
99 this._refresh(start, end);
103 * Refreshes (re-renders) terminal content within two rows (inclusive)
107 * In the screen buffer, each character is stored as a an array with a character
108 * and a 32-bit integer:
109 * - First value: a utf-16 character.
111 * - Next 9 bits: background color (0-511).
112 * - Next 9 bits: foreground color (0-511).
113 * - Next 14 bits: a mask for misc. flags:
120 * @param {number} start The row to start from (between 0 and terminal's height terminal - 1)
121 * @param {number} end The row to end at (between fromRow and terminal's height terminal - 1)
123 private _refresh(start: number, end: number): void {
124 // If this is a big refresh, remove the terminal rows from the DOM for faster calculations
126 if (end - start >= this._terminal.rows / 2) {
127 parent = this._terminal.element.parentNode;
129 this._terminal.element.removeChild(this._terminal.rowContainer);
133 let width = this._terminal.cols;
136 if (end >= this._terminal.rows) {
137 this._terminal.log('`end` is too large. Most likely a bad CSR.');
138 end = this._terminal.rows - 1;
141 for (; y <= end; y++) {
142 let row = y + this._terminal.buffer.ydisp;
144 let line = this._terminal.buffer.lines.get(row);
147 if (this._terminal.buffer.y === y - (this._terminal.buffer.ybase - this._terminal.buffer.ydisp) &&
148 this._terminal.cursorState &&
149 !this._terminal.cursorHidden) {
150 x = this._terminal.buffer.x;
155 let attr = this._terminal.defAttr;
157 const documentFragment = document.createDocumentFragment();
161 // Return the row's spans to the pool
162 while (this._terminal.children[y].children.length) {
163 const child = this._terminal.children[y].children[0];
164 this._terminal.children[y].removeChild(child);
165 this._spanElementObjectPool.release(<HTMLElement>child);
168 for (let i = 0; i < width; i++) {
169 // TODO: Could data be a more specific type?
170 let data: any = line[i][0];
171 const ch = line[i][1];
172 const ch_width: any = line[i][2];
173 const isCursor: boolean = i === x;
178 if (data !== attr || isCursor) {
179 if (attr !== this._terminal.defAttr && !isCursor) {
181 currentElement.innerHTML = innerHTML;
184 documentFragment.appendChild(currentElement);
185 currentElement = null;
187 if (data !== this._terminal.defAttr || isCursor) {
188 if (innerHTML && !currentElement) {
189 currentElement = this._spanElementObjectPool.acquire();
191 if (currentElement) {
193 currentElement.innerHTML = innerHTML;
196 documentFragment.appendChild(currentElement);
198 currentElement = this._spanElementObjectPool.acquire();
200 let bg = data & 0x1ff;
201 let fg = (data >> 9) & 0x1ff;
202 let flags = data >> 18;
205 currentElement.classList.add('reverse-video');
206 currentElement.classList.add('terminal-cursor');
209 if (flags & FLAGS.BOLD) {
211 currentElement.classList.add('xterm-bold');
213 // See: XTerm*boldColors
219 if (flags & FLAGS.UNDERLINE) {
220 currentElement.classList.add('xterm-underline');
223 if (flags & FLAGS.BLINK) {
224 currentElement.classList.add('xterm-blink');
227 // If inverse flag is on, then swap the foreground and background variables.
228 if (flags & FLAGS.INVERSE) {
232 // Should inverse just be before the above boldColors effect instead?
233 if ((flags & 1) && fg < 8) {
238 if (flags & FLAGS.INVISIBLE && !isCursor) {
239 currentElement.classList.add('xterm-hidden');
243 * Weird situation: Invert flag used black foreground and white background results
244 * in invalid background color, positioned at the 256 index of the 256 terminal
245 * color map. Pin the colors manually in such a case.
247 * Source: https://github.com/sourcelair/xterm.js/issues/57
249 if (flags & FLAGS.INVERSE) {
259 currentElement.classList.add(`xterm-bg-color-${bg}`);
263 currentElement.classList.add(`xterm-color-${fg}`);
269 if (ch_width === 2) {
270 // Wrap wide characters so they're sized correctly. It's more difficult to release these
271 // from the object pool so just create new ones via innerHTML.
272 innerHTML += `<span class="xterm-wide-char">${ch}</span>`;
273 } else if (ch.charCodeAt(0) > 255) {
274 // Wrap any non-wide unicode character as some fonts size them badly
275 innerHTML += `<span class="xterm-normal-char">${ch}</span>`;
279 innerHTML += '&';
289 innerHTML += ' ';
297 // The cursor needs its own element, therefore we set attr to -1
298 // which will cause the next character to be rendered in a new element
299 attr = isCursor ? -1 : data;
303 if (innerHTML && !currentElement) {
304 currentElement = this._spanElementObjectPool.acquire();
306 if (currentElement) {
308 currentElement.innerHTML = innerHTML;
311 documentFragment.appendChild(currentElement);
312 currentElement = null;
315 this._terminal.children[y].appendChild(documentFragment);
319 this._terminal.element.appendChild(this._terminal.rowContainer);
322 this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
326 * Refreshes the selection in the DOM.
327 * @param start The selection start.
328 * @param end The selection end.
330 public refreshSelection(start: [number, number], end: [number, number]) {
331 // Remove all selections
332 while (this._terminal.selectionContainer.children.length) {
333 this._terminal.selectionContainer.removeChild(this._terminal.selectionContainer.children[0]);
336 // Selection does not exist
337 if (!start || !end) {
341 // Translate from buffer position to viewport position
342 const viewportStartRow = start[1] - this._terminal.buffer.ydisp;
343 const viewportEndRow = end[1] - this._terminal.buffer.ydisp;
344 const viewportCappedStartRow = Math.max(viewportStartRow, 0);
345 const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
347 // No need to draw the selection
348 if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
352 // Create the selections
353 const documentFragment = document.createDocumentFragment();
355 const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
356 const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
357 documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
359 const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
360 documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount));
362 if (viewportCappedStartRow !== viewportCappedEndRow) {
363 // Only draw viewportEndRow if it's not the same as viewporttartRow
364 const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
365 documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
367 this._terminal.selectionContainer.appendChild(documentFragment);
371 * Creates a selection element at the specified position.
372 * @param row The row of the selection.
373 * @param colStart The start column.
374 * @param colEnd The end columns.
376 private _createSelectionElement(row: number, colStart: number, colEnd: number, rowCount: number = 1): HTMLElement {
377 const element = document.createElement('div');
378 element.style.height = `${rowCount * this._terminal.charMeasure.height}px`;
379 element.style.top = `${row * this._terminal.charMeasure.height}px`;
380 element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
381 element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;
387 // If bold is broken, we can't use it in the terminal.
388 function checkBoldBroken(terminal) {
389 const document = terminal.ownerDocument;
390 const el = document.createElement('span');
391 el.innerHTML = 'hello world';
392 terminal.appendChild(el);
393 const w1 = el.offsetWidth;
394 const h1 = el.offsetHeight;
395 el.style.fontWeight = 'bold';
396 const w2 = el.offsetWidth;
397 const h2 = el.offsetHeight;
398 terminal.removeChild(el);
399 return w1 !== w2 || h1 !== h2;