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     let x, y, i, line, out, ch, ch_width, width, data, attr, bg, fg, flags, row, parent, focused = document.activeElement;
 125
 126     // If this is a big refresh, remove the terminal rows from the DOM for faster calculations
 127     if (end - start >= this._terminal.rows / 2) {
 128       parent = this._terminal.element.parentNode;
 129       if (parent) {
 130         this._terminal.element.removeChild(this._terminal.rowContainer);
 131       }
 132     }
 133
 134     width = this._terminal.cols;
 135     y = start;
 136
 137     if (end >= this._terminal.rows) {
 138       this._terminal.log('`end` is too large. Most likely a bad CSR.');
 139       end = this._terminal.rows - 1;
 140     }
 141
 142     for (; y <= end; y++) {
 143       row = y + this._terminal.ydisp;
 144
 145       line = this._terminal.lines.get(row);
 146       out = '';
 147
 148       if (this._terminal.y === y - (this._terminal.ybase - this._terminal.ydisp)
 149           && this._terminal.cursorState
 150           && !this._terminal.cursorHidden) {
 151         x = this._terminal.x;
 152       } else {
 153         x = -1;
 154       }
 155
 156       attr = this._terminal.defAttr;
 157       i = 0;
 158
 159       var documentFragment = document.createDocumentFragment();
 160       var innerHTML = '';
 161       var currentElement;
 162
 163       // Return the row's spans to the pool
 164       while (this._terminal.children[y].children.length) {
 165         var child = this._terminal.children[y].children[0];
 166         this._terminal.children[y].removeChild(child);
 167         this._spanElementObjectPool.release(<HTMLElement>child);
 168       }
 169
 170       for (; i < width; i++) {
 171         data = line[i][0];
 172         ch = line[i][1];
 173         ch_width = line[i][2];
 174         if (!ch_width)
 175           continue;
 176
 177         if (i === x) data = -1;
 178
 179         if (data !== attr) {
 180           if (attr !== this._terminal.defAttr) {
 181             if (innerHTML) {
 182               currentElement.innerHTML = innerHTML;
 183               innerHTML = '';
 184             }
 185             documentFragment.appendChild(currentElement);
 186             currentElement = null;
 187             //out += '</span>';
 188           }
 189           if (data !== this._terminal.defAttr) {
 190             if (innerHTML && !currentElement) {
 191               currentElement = this._spanElementObjectPool.acquire();
 192               // For some reason the text nodes only containing &nbsp; don't get added to the DOM
 193               //currentElement = document.createTextNode('');
 194             }
 195             if (currentElement) {
 196               if (innerHTML) {
 197                 currentElement.innerHTML = innerHTML;
 198                 innerHTML = '';
 199               }
 200               documentFragment.appendChild(currentElement);
 201             }
 202             currentElement = this._spanElementObjectPool.acquire();
 203             if (data === -1) {
 204               currentElement.classList.add('reverse-video', 'terminal-cursor');
 205               //out += '<span class="reverse-video terminal-cursor';
 206               // if (this._terminal.getOption('cursorBlink')) {
 207               //   currentElement.classList.add('blinking');
 208               //   //out += ' blinking';
 209               // }
 210               //out += '">';
 211             } else {
 212               //var classNames = [];
 213
 214               bg = data & 0x1ff;
 215               fg = (data >> 9) & 0x1ff;
 216               flags = data >> 18;
 217
 218               if (flags & FLAGS.BOLD) {
 219                 if (!brokenBold) {
 220                   currentElement.classList.add('xterm-bold');
 221                   //classNames.push('xterm-bold');
 222                 }
 223                 // See: XTerm*boldColors
 224                 if (fg < 8) fg += 8;
 225               }
 226
 227               if (flags & FLAGS.UNDERLINE) {
 228                 currentElement.classList.add('xterm-underline');
 229                 //classNames.push('xterm-underline');
 230               }
 231
 232               if (flags & FLAGS.BLINK) {
 233                 currentElement.classList.add('xterm-blink');
 234                 //classNames.push('xterm-blink');
 235               }
 236
 237               // If inverse flag is on, then swap the foreground and background variables.
 238               if (flags & FLAGS.INVERSE) {
 239                 /* One-line variable swap in JavaScript: http://stackoverflow.com/a/16201730 */
 240                 bg = [fg, fg = bg][0];
 241                 // Should inverse just be before the
 242                 // above boldColors effect instead?
 243                 if ((flags & 1) && fg < 8) fg += 8;
 244               }
 245
 246               if (flags & FLAGS.INVISIBLE) {
 247                 currentElement.classList.add('xterm-hidden');
 248                 //classNames.push('xterm-hidden');
 249               }
 250
 251               /**
 252                * Weird situation: Invert flag used black foreground and white background results
 253                * in invalid background color, positioned at the 256 index of the 256 terminal
 254                * color map. Pin the colors manually in such a case.
 255                *
 256                * Source: https://github.com/sourcelair/xterm.js/issues/57
 257                */
 258               if (flags & FLAGS.INVERSE) {
 259                 if (bg == 257) {
 260                   bg = 15;
 261                 }
 262                 if (fg == 256) {
 263                   fg = 0;
 264                 }
 265               }
 266
 267               if (bg < 256) {
 268                 currentElement.classList.add('xterm-bg-color-' + bg);
 269                 //classNames.push('xterm-bg-color-' + bg);
 270               }
 271
 272               if (fg < 256) {
 273                 currentElement.classList.add('xterm-color-' + fg);
 274                 //classNames.push('xterm-color-' + fg);
 275               }
 276
 277               // out += '<span';
 278               // if (classNames.length) {
 279               //   out += ' class="' + classNames.join(' ') + '"';
 280               // }
 281               // out += '>';
 282             }
 283           }
 284         }
 285
 286         // TODO: Consider performance implications of not pulling these from the pool
 287         if (ch_width === 2) {
 288           innerHTML += '<span class="xterm-wide-char">';
 289         } else {
 290           // TODO: Only wrap unicode characters that may vary in width
 291           innerHTML += '<span class="xterm-normal-char">';
 292         }
 293         switch (ch) {
 294           case '&':
 295             innerHTML += '&amp;';
 296             //out += '&amp;';
 297             break;
 298           case '<':
 299             innerHTML += '&lt;';
 300             //out += '&lt;';
 301             break;
 302           case '>':
 303             innerHTML += '&gt;';
 304             //out += '&gt;';
 305             break;
 306           default:
 307             if (ch <= ' ') {
 308               innerHTML += '&nbsp;';
 309               //out += '&nbsp;';
 310             } else {
 311               innerHTML += ch;
 312               // out += ch;
 313             }
 314             break;
 315         }
 316         if (ch_width === 2) {
 317           innerHTML += '</span>';
 318         } else {
 319           // TODO: Only wrap unicode characters that may vary in width
 320           innerHTML += '</span>';
 321         }
 322
 323         attr = data;
 324       }
 325
 326       if (innerHTML && !currentElement) {
 327         currentElement = this._spanElementObjectPool.acquire();
 328         // For some reason the text nodes only containing &nbsp; don't get added to the DOM
 329         //currentElement = document.createTextNode('');
 330       }
 331       if (currentElement) {
 332         if (innerHTML) {
 333           currentElement.innerHTML = innerHTML;
 334           innerHTML = '';
 335         }
 336         documentFragment.appendChild(currentElement);
 337         currentElement = null;
 338       }
 339       // if (attr !== this.defAttr) {
 340       //   out += '</span>';
 341       // }
 342
 343       //this.children[y].innerHTML = out;
 344       //this.children[y].innerHTML = '';
 345
 346       this._terminal.children[y].appendChild(documentFragment)
 347     }
 348
 349     if (parent) {
 350       this._terminal.element.appendChild(this._terminal.rowContainer);
 351     }
 352
 353     this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
 354   };
 355 }
 356
 357
 358 // if bold is broken, we can't
 359 // use it in the terminal.
 360 function checkBoldBroken(terminal) {
 361   const document = terminal.ownerDocument;
 362   const el = document.createElement('span');
 363   el.innerHTML = 'hello world';
 364   terminal.appendChild(el);
 365   const w1 = el.offsetWidth;
 366   const h1 = el.offsetHeight;
 367   el.style.fontWeight = 'bold';
 368   const w2 = el.offsetWidth;
 369   const h2 = el.offsetHeight;
 370   terminal.removeChild(el);
 371   return w1 !== w2 || h1 !== h2;
 372 }