Render using canvas

README.md

@@ -97,12 +97,10 @@ xterm.fit();
 
 Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Here is a list of the versions we aim to support:
 
-- Chrome 48+
-- Edge 13+
-- Firefox 44+
-- Internet Explorer 11+
-- Opera 35+
-- Safari 8+
+- Chrome latest
+- Edge latest
+- Firefox latest
+- Safari latest
 
 Xterm.js works seamlessly in Electron apps and may even work on earlier versions of the browsers but these are the browsers we strive to keep working.
 

demo/main.js

@@ -2,9 +2,7 @@ var term,
     protocol,
     socketURL,
     socket,
-    pid,
-    charWidth,
-    charHeight;
+    pid;
 
 var terminalContainer = document.getElementById('terminal-container'),
     actionElements = {
@@ -21,11 +19,13 @@ var terminalContainer = document.getElementById('terminal-container'),
     colsElement = document.getElementById('cols'),
     rowsElement = document.getElementById('rows');
 
-function setTerminalSize () {
-  var cols = parseInt(colsElement.value, 10),
-      rows = parseInt(rowsElement.value, 10),
-      width = (cols * charWidth).toString() + 'px',
-      height = (rows * charHeight).toString() + 'px';
+function setTerminalSize() {
+  var cols = parseInt(colsElement.value, 10);
+  var rows = parseInt(rowsElement.value, 10);
+  var viewportElement = document.querySelector('.xterm-viewport');
+  var scrollBarWidth = viewportElement.offsetWidth - viewportElement.clientWidth;
+  var width = (cols * term.charMeasure.width + 20 /*room for scrollbar*/).toString() + 'px';
+  var height = (rows * term.charMeasure.height).toString() + 'px';
 
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
@@ -92,27 +92,26 @@ function createTerminal() {
   term.open(terminalContainer);
   term.fit();
 
-  var initialGeometry = term.proposeGeometry(),
-      cols = initialGeometry.cols,
-      rows = initialGeometry.rows;
+  // fit is called within a setTimeout, cols and rows need this.
+  setTimeout(() => {
+    colsElement.value = term.cols;
+    rowsElement.value = term.rows;
 
-  colsElement.value = cols;
-  rowsElement.value = rows;
+    // Set terminal size again to set the specific dimensions on the demo
+    setTerminalSize();
 
-  fetch('/terminals?cols=' + cols + '&rows=' + rows, {method: 'POST'}).then(function (res) {
+    fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then(function (res) {
 
-    charWidth = Math.ceil(term.element.offsetWidth / cols);
-    charHeight = Math.ceil(term.element.offsetHeight / rows);
-
-    res.text().then(function (pid) {
-      window.pid = pid;
-      socketURL += pid;
-      socket = new WebSocket(socketURL);
-      socket.onopen = runRealTerminal;
-      socket.onclose = runFakeTerminal;
-      socket.onerror = runFakeTerminal;
+      res.text().then(function (pid) {
+        window.pid = pid;
+        socketURL += pid;
+        socket = new WebSocket(socketURL);
+        socket.onopen = runRealTerminal;
+        socket.onclose = runFakeTerminal;
+        socket.onerror = runFakeTerminal;
+      });
     });
-  });
+  }, 0);
 }
 
 function runRealTerminal() {

demo/style.css

@@ -14,9 +14,3 @@ h1 {
     margin: 0 auto;
     padding: 2px;
 }
-
-#terminal-container .terminal {
-    background-color: #111;
-    color: #fafafa;
-    padding: 2px;
-}

fixtures/typings-test/typings-test.ts

@@ -168,6 +168,10 @@ namespace methods_core {
       t.setOption('bellStyle', 'visual');
       t.setOption('bellStyle', 'sound');
       t.setOption('bellStyle', 'both');
+      t.setOption('fontSize', 1);
+      t.setOption('lineHeight', 1);
+      t.setOption('fontFamily', 'foo');
+      t.setOption('theme', {background: '#ff0000'});
     }
   }
   namespace scrolling {
@@ -210,8 +214,11 @@ namespace methods_experimental {
     t.registerLinkMatcher(/foo/, () => true, {
       matchIndex: 1,
       priority: 1,
-      validationCallback: (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => {
-        console.log(uri, element, callback);
+      validationCallback: (uri: string, callback: (isValid: boolean) => void) => {
+        console.log(uri, callback);
+      },
+      hoverCallback: (e: MouseEvent, uri: string) => {
+        console.log(e, uri);
       }
     });
     t.deregisterLinkMatcher(1);

package.json

@@ -64,7 +64,7 @@
     "nodemon": "1.10.2",
     "sorcery": "^0.10.0",
     "tslint": "^4.0.2",
-    "typescript": "~2.2.0",
+    "typescript": "~2.4.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },

src/Buffer.ts

@@ -6,8 +6,10 @@ import { ITerminal, IBuffer } from './Interfaces';
 import { CircularList } from './utils/CircularList';
 import { LineData, CharData } from './Types';
 
+export const CHAR_DATA_ATTR_INDEX = 0;
 export const CHAR_DATA_CHAR_INDEX = 1;
 export const CHAR_DATA_WIDTH_INDEX = 2;
+export const CHAR_DATA_CODE_INDEX = 3;
 
 /**
  * This class represents a terminal buffer (an internal state of the terminal), where the
@@ -32,8 +34,8 @@ export class Buffer implements IBuffer {
   /**
    * Create a new Buffer.
    * @param _terminal The terminal the Buffer will belong to.
-   * @param _hasScrollback Whether the buffer should respecr the scrollback of
-   * the terminal..
+   * @param _hasScrollback Whether the buffer should respect the scrollback of
+   * the terminal.
    */
   constructor(
     private _terminal: ITerminal,
@@ -50,6 +52,12 @@ export class Buffer implements IBuffer {
     return this._hasScrollback && this.lines.maxLength > this._terminal.rows;
   }
 
+  public get isCursorInViewport(): boolean {
+    const absoluteY = this.ybase + this.y;
+    const relativeY = absoluteY - this.ydisp;
+    return (relativeY >= 0 && relativeY < this._terminal.rows);
+  }
+
   /**
    * Gets the correct buffer length based on the rows provided, the terminal's
    * scrollback and whether this buffer is flagged to have scrollback or not.
@@ -106,7 +114,7 @@ export class Buffer implements IBuffer {
     if (this._lines.length > 0) {
       // Deal with columns increasing (we don't do anything when columns reduce)
       if (this._terminal.cols < newCols) {
-        const ch: CharData = [this._terminal.defAttr, ' ', 1]; // does xterm use the default attr?
+        const ch: CharData = [this._terminal.defAttr, ' ', 1, 32]; // does xterm use the default attr?
         for (let i = 0; i < this._lines.length; i++) {
           // TODO: This should be removed, with tests setup for the case that was
           // causing the underlying bug, see https://github.com/sourcelair/xterm.js/issues/824

src/CompositionHelper.test.ts

@@ -42,6 +42,16 @@ describe('CompositionHelper', () => {
       },
       handler: (text: string) => {
         handledText += text;
+      },
+      buffer: {
+        isCursorInViewport: true
+      },
+      charMeasure: {
+        height: 10,
+        width: 10
+      },
+      options: {
+        lineHeight: 1
       }
     };
     handledText = '';

src/CompositionHelper.ts

@@ -63,6 +63,7 @@ export class CompositionHelper {
    * @param {CompositionEvent} ev The event.
    */
   public compositionupdate(ev: CompositionEvent): void {
+  console.log('compositionupdate');
     this.compositionView.textContent = ev.data;
     this.updateCompositionElements();
     setTimeout(() => {
@@ -193,26 +194,26 @@ export class CompositionHelper {
     if (!this.isComposing) {
       return;
     }
-    const cursor = <HTMLElement>this.terminal.element.querySelector('.terminal-cursor');
-    if (cursor) {
-      // Take .xterm-rows offsetTop into account as well in case it's positioned absolutely within
-      // the .xterm element.
-      const xtermRows = <HTMLElement>this.terminal.element.querySelector('.xterm-rows');
-      const cursorTop = xtermRows.offsetTop + cursor.offsetTop;
-
-      this.compositionView.style.left = cursor.offsetLeft + 'px';
+
+    if (this.terminal.buffer.isCursorInViewport) {
+      const cellHeight = Math.ceil(this.terminal.charMeasure.height * this.terminal.options.lineHeight);
+      const cursorTop = this.terminal.buffer.y * cellHeight;
+      const cursorLeft = this.terminal.buffer.x * this.terminal.charMeasure.width;
+
+      this.compositionView.style.left = cursorLeft + 'px';
       this.compositionView.style.top = cursorTop + 'px';
-      this.compositionView.style.height = cursor.offsetHeight + 'px';
-      this.compositionView.style.lineHeight = cursor.offsetHeight + 'px';
+      this.compositionView.style.height = cellHeight + 'px';
+      this.compositionView.style.lineHeight = cellHeight + 'px';
       // Sync the textarea to the exact position of the composition view so the IME knows where the
       // text is.
       const compositionViewBounds = this.compositionView.getBoundingClientRect();
-      this.textarea.style.left = cursor.offsetLeft + 'px';
+      this.textarea.style.left = cursorLeft + 'px';
       this.textarea.style.top = cursorTop + 'px';
       this.textarea.style.width = compositionViewBounds.width + 'px';
       this.textarea.style.height = compositionViewBounds.height + 'px';
       this.textarea.style.lineHeight = compositionViewBounds.height + 'px';
     }
+
     if (!dontRecurse) {
       setTimeout(() => this.updateCompositionElements(true), 0);
     }

src/InputHandler.ts

@@ -36,13 +36,14 @@ export class InputHandler implements IInputHandler {
         // dont overflow left
         if (this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1]) {
           if (!this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][CHAR_DATA_WIDTH_INDEX]) {
-
             // found empty cell after fullwidth, need to go 2 cells back
-            if (this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2])
+            if (this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2]) {
               this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2][CHAR_DATA_CHAR_INDEX] += char;
-
+              this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 2][3] = char.charCodeAt(0);
+            }
           } else {
             this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][CHAR_DATA_CHAR_INDEX] += char;
+            this._terminal.buffer.lines.get(row)[this._terminal.buffer.x - 1][3] = char.charCodeAt(0);
           }
           this._terminal.updateRange(this._terminal.buffer.y);
         }
@@ -81,21 +82,21 @@ export class InputHandler implements IInputHandler {
           if (removed[CHAR_DATA_WIDTH_INDEX] === 0
               && this._terminal.buffer.lines.get(row)[this._terminal.cols - 2]
               && this._terminal.buffer.lines.get(row)[this._terminal.cols - 2][CHAR_DATA_WIDTH_INDEX] === 2) {
-            this._terminal.buffer.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1];
+            this._terminal.buffer.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)];
           }
 
           // insert empty cell at cursor
-          this._terminal.buffer.lines.get(row).splice(this._terminal.buffer.x, 0, [this._terminal.curAttr, ' ', 1]);
+          this._terminal.buffer.lines.get(row).splice(this._terminal.buffer.x, 0, [this._terminal.curAttr, ' ', 1, ' '.charCodeAt(0)]);
         }
       }
 
-      this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, char, ch_width];
+      this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, char, ch_width, char.charCodeAt(0)];
       this._terminal.buffer.x++;
       this._terminal.updateRange(this._terminal.buffer.y);
 
       // fullwidth char - set next cell width to zero and advance cursor
       if (ch_width === 2) {
-        this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, '', 0];
+        this._terminal.buffer.lines.get(row)[this._terminal.buffer.x] = [this._terminal.curAttr, '', 0, undefined];
         this._terminal.buffer.x++;
       }
     }
@@ -188,7 +189,7 @@ export class InputHandler implements IInputHandler {
 
     const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
     let j = this._terminal.buffer.x;
-    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1]; // xterm
+    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm
 
     while (param-- && j < this._terminal.cols) {
       this._terminal.buffer.lines.get(row).splice(j++, 0, ch);
@@ -487,7 +488,7 @@ export class InputHandler implements IInputHandler {
     }
 
     const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
-    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1]; // xterm
+    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm
 
     while (param--) {
       this._terminal.buffer.lines.get(row).splice(this._terminal.buffer.x, 1);
@@ -535,7 +536,7 @@ export class InputHandler implements IInputHandler {
 
     const row = this._terminal.buffer.y + this._terminal.buffer.ybase;
     let j = this._terminal.buffer.x;
-    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1]; // xterm
+    const ch: CharData = [this._terminal.eraseAttr(), ' ', 1, 32]; // xterm
 
     while (param-- && j < this._terminal.cols) {
       this._terminal.buffer.lines.get(row)[j++] = ch;
@@ -589,7 +590,7 @@ export class InputHandler implements IInputHandler {
   public repeatPrecedingCharacter(params: number[]): void {
     let param = params[0] || 1;
     const line = this._terminal.buffer.lines.get(this._terminal.buffer.ybase + this._terminal.buffer.y);
-    const ch = line[this._terminal.buffer.x - 1] || [this._terminal.defAttr, ' ', 1];
+    const ch = line[this._terminal.buffer.x - 1] || [this._terminal.defAttr, ' ', 1, 32];
 
     while (param--) {
       line[this._terminal.buffer.x++] = ch;