src/Renderer.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { ITerminal } from './Interfaces';
   6 import { DomElementObjectPool } from './utils/DomElementObjectPool';
   7
   8 /**
   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.
  12  */
  13 const MAX_REFRESH_FRAME_SKIP = 5;
  14
  15 /**
  16  * Flags used to render terminal text properly.
  17  */
  18 enum FLAGS {
  19   BOLD = 1,
  20   UNDERLINE = 2,
  21   BLINK = 4,
  22   INVERSE = 8,
  23   INVISIBLE = 16
  24 };
  25
  26 let brokenBold: boolean = null;
  27
  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;
  33
  34   private _spanElementObjectPool = new DomElementObjectPool('span');
  35
  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);
  41     }
  42     this._spanElementObjectPool = new DomElementObjectPool('span');
  43
  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).
  47   }
  48
  49   /**
  50    * Queues a refresh between two rows (inclusive), to be done on next animation
  51    * frame.
  52    * @param {number} start The start row.
  53    * @param {number} end The end row.
  54    */
  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));
  59     }
  60   }
  61
  62   /**
  63    * Performs the refresh loop callback, calling refresh only if a refresh is
  64    * necessary before queueing up the next one.
  65    */
  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;
  72     if (skipFrame) {
  73       this._refreshAnimationFrame = window.requestAnimationFrame(this._refreshLoop.bind(this));
  74       return;
  75     }
  76
  77     this._refreshFramesSkipped = 0;
  78     let start;
  79     let end;
  80     if (this._refreshRowsQueue.length > 4) {
  81       // Just do a full refresh when 5+ refreshes are queued
  82       start = 0;
  83       end = this._terminal.rows - 1;
  84     } else {
  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;
  91         }
  92         if (this._refreshRowsQueue[i].end > end) {
  93           end = this._refreshRowsQueue[i].end;
  94         }
  95       }
  96     }
  97     this._refreshRowsQueue = [];
  98     this._refreshAnimationFrame = null;
  99     this._refresh(start, end);
 100   }
 101
 102   /**
 103    * Refreshes (re-renders) terminal content within two rows (inclusive)
 104    *
 105    * Rendering Engine:
 106    *
 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.
 110    *   - Second value:
 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:
 114    *     - 1=bold
 115    *     - 2=underline
 116    *     - 4=blink
 117    *     - 8=inverse
 118    *     - 16=invisible
 119    *
 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)
 122    */
 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
 125     let parent;
 126     if (end - start >= this._terminal.rows / 2) {
 127       parent = this._terminal.element.parentNode;
 128       if (parent) {
 129         this._terminal.element.removeChild(this._terminal.rowContainer);
 130       }
 131     }
 132
 133     let width = this._terminal.cols;
 134     let y = start;
 135
 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;
 139     }
 140
 141     for (; y <= end; y++) {
 142       let row = y + this._terminal.ydisp;
 143
 144       let line = this._terminal.lines.get(row);
 145
 146       let x;
 147       if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp) &&
 148           this._terminal.cursorState &&
 149           !this._terminal.cursorHidden) {
 150         x = this._terminal.x;
 151       } else {
 152         x = -1;
 153       }
 154
 155       let attr = this._terminal.defAttr;
 156
 157       const documentFragment = document.createDocumentFragment();
 158       let innerHTML = '';
 159       let currentElement;
 160
 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);
 166       }
 167
 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         if (!ch_width) {
 174           continue;
 175         }
 176
 177         if (i === x) {
 178           data = -1;
 179         }
 180
 181         if (data !== attr) {
 182           if (attr !== this._terminal.defAttr) {
 183             if (innerHTML) {
 184               currentElement.innerHTML = innerHTML;
 185               innerHTML = '';
 186             }
 187             documentFragment.appendChild(currentElement);
 188             currentElement = null;
 189           }
 190           if (data !== this._terminal.defAttr) {
 191             if (innerHTML && !currentElement) {
 192               currentElement = this._spanElementObjectPool.acquire();
 193             }
 194             if (currentElement) {
 195               if (innerHTML) {
 196                 currentElement.innerHTML = innerHTML;
 197                 innerHTML = '';
 198               }
 199               documentFragment.appendChild(currentElement);
 200             }
 201             currentElement = this._spanElementObjectPool.acquire();
 202             if (data === -1) {
 203               currentElement.classList.add('reverse-video', 'terminal-cursor');
 204             } else {
 205               let bg = data & 0x1ff;
 206               let fg = (data >> 9) & 0x1ff;
 207               let flags = data >> 18;
 208
 209               if (flags & FLAGS.BOLD) {
 210                 if (!brokenBold) {
 211                   currentElement.classList.add('xterm-bold');
 212                 }
 213                 // See: XTerm*boldColors
 214                 if (fg < 8) {
 215                   fg += 8;
 216                 }
 217               }
 218
 219               if (flags & FLAGS.UNDERLINE) {
 220                 currentElement.classList.add('xterm-underline');
 221               }
 222
 223               if (flags & FLAGS.BLINK) {
 224                 currentElement.classList.add('xterm-blink');
 225               }
 226
 227               // If inverse flag is on, then swap the foreground and background variables.
 228               if (flags & FLAGS.INVERSE) {
 229                 let temp = bg;
 230                 bg = fg;
 231                 fg = temp;
 232                 // Should inverse just be before the above boldColors effect instead?
 233                 if ((flags & 1) && fg < 8) {
 234                   fg += 8;
 235                 }
 236               }
 237
 238               if (flags & FLAGS.INVISIBLE) {
 239                 currentElement.classList.add('xterm-hidden');
 240               }
 241
 242               /**
 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.
 246                *
 247                * Source: https://github.com/sourcelair/xterm.js/issues/57
 248                */
 249               if (flags & FLAGS.INVERSE) {
 250                 if (bg === 257) {
 251                   bg = 15;
 252                 }
 253                 if (fg === 256) {
 254                   fg = 0;
 255                 }
 256               }
 257
 258               if (bg < 256) {
 259                 currentElement.classList.add(`xterm-bg-color-${bg}`);
 260               }
 261
 262               if (fg < 256) {
 263                 currentElement.classList.add(`xterm-color-${fg}`);
 264               }
 265             }
 266           }
 267         }
 268
 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>`;
 276         } else {
 277           switch (ch) {
 278             case '&':
 279               innerHTML += '&amp;';
 280               break;
 281             case '<':
 282               innerHTML += '&lt;';
 283               break;
 284             case '>':
 285               innerHTML += '&gt;';
 286               break;
 287             default:
 288               if (ch <= ' ') {
 289                 innerHTML += '&nbsp;';
 290               } else {
 291                 innerHTML += ch;
 292               }
 293               break;
 294           }
 295         }
 296
 297         attr = data;
 298       }
 299
 300       if (innerHTML && !currentElement) {
 301         currentElement = this._spanElementObjectPool.acquire();
 302       }
 303       if (currentElement) {
 304         if (innerHTML) {
 305           currentElement.innerHTML = innerHTML;
 306           innerHTML = '';
 307         }
 308         documentFragment.appendChild(currentElement);
 309         currentElement = null;
 310       }
 311
 312       this._terminal.children[y].appendChild(documentFragment);
 313     }
 314
 315     if (parent) {
 316       this._terminal.element.appendChild(this._terminal.rowContainer);
 317     }
 318
 319     this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
 320   };
 321
 322   public refreshSelection(start: [number, number], end: [number, number]) {
 323     console.log('renderer, refresh:', start, end);
 324
 325     // Remove all selections
 326     while (this._terminal.selectionContainer.children.length) {
 327       this._terminal.selectionContainer.removeChild(this._terminal.selectionContainer.children[0]);
 328     }
 329
 330     // Selection does not exist
 331     if (!start || !end) {
 332       return;
 333     }
 334
 335     // Swap the start and end if necessary
 336     if (start[1] > end[1] || (start[1] === end[1] && start[0] > end[0])) {
 337       const temp = start;
 338       start = end;
 339       end = temp;
 340     }
 341
 342     // Translate from buffer position to viewport position
 343     const viewportStartRow = start[1] - this._terminal.ydisp;
 344     const viewportEndRow = end[1] - this._terminal.ydisp;
 345     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
 346     const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
 347
 348     // No need to draw the selection
 349     if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
 350       return;
 351     }
 352
 353     console.log('viewportStartRow', viewportCappedStartRow);
 354     console.log('viewportEndRow', viewportCappedEndRow);
 355
 356     // TODO: Only redraw selections when necessary
 357
 358     // TODO: Fix selection on the first row going out the left of the terminal
 359     // TODO: Fix selection on the last row not going to the last column
 360
 361     // Create the selections
 362     const documentFragment = document.createDocumentFragment();
 363     // Draw first row
 364     const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
 365     const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
 366     documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
 367     // Draw middle rows
 368     for (let i = viewportCappedStartRow + 1; i < viewportCappedEndRow; i++) {
 369       documentFragment.appendChild(this._createSelectionElement(i, 0, this._terminal.cols));
 370     }
 371     // Draw final row
 372     if (viewportCappedStartRow !== viewportCappedEndRow) {
 373       // Only draw viewportEndRow if it's not the same as viewporttartRow
 374       const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
 375       documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
 376     }
 377     this._terminal.selectionContainer.appendChild(documentFragment);
 378   }
 379
 380   private _createSelectionElement(row: number, colStart: number, colEnd: number): HTMLElement {
 381     const element = document.createElement('div');
 382     // TODO: Move into a generated <style> element
 383     element.style.height = `${this._terminal.charMeasure.height}px`;
 384
 385     element.style.top = `${row * this._terminal.charMeasure.height}px`;
 386     element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
 387     element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;
 388     return element;
 389   }
 390 }
 391
 392
 393 // If bold is broken, we can't use it in the terminal.
 394 function checkBoldBroken(terminal) {
 395   const document = terminal.ownerDocument;
 396   const el = document.createElement('span');
 397   el.innerHTML = 'hello world';
 398   terminal.appendChild(el);
 399   const w1 = el.offsetWidth;
 400   const h1 = el.offsetHeight;
 401   el.style.fontWeight = 'bold';
 402   const w2 = el.offsetWidth;
 403   const h2 = el.offsetHeight;
 404   terminal.removeChild(el);
 405   return w1 !== w2 || h1 !== h2;
 406 }