Merge remote-tracking branch 'upstream/master' into 425_xon_xoff_on_280

README.md

@@ -26,6 +26,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js
 - [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js
 - [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
+- [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE
 
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list.
@@ -117,6 +118,10 @@ Visit https://lair.io/sourcelair/xterm and follow the instructions. All developm
 
 [Download Visual Studio Code](http://code.visualstudio.com/Download), clone xterm.js and you are all set.
 
+#### [Eclipse Che](http://www.eclipse.org/che)
+
+You can start Eclipse Che with `docker run eclipse/che start`
+
 ## License Agreement
 
 If you contribute code to this project, you are implicitly allowing your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.

src/EventEmitter.ts

@@ -11,7 +11,9 @@ export class EventEmitter {
   private _events: {[type: string]: ListenerType[]};
 
   constructor() {
-    this._events = {};
+    // Restore the previous events if available, this will happen if the
+    // constructor is called multiple times on the same object (terminal reset).
+    this._events = this._events || {};
   }
 
   public on(type, listener): void {

src/Viewport.test.ts

@@ -2,11 +2,11 @@ import { assert } from 'chai';
 import { Viewport } from './Viewport';
 
 describe('Viewport', () => {
-  var terminal;
-  var viewportElement;
-  var charMeasureElement;
-  var viewport;
-  var scrollAreaElement;
+  let terminal;
+  let viewportElement;
+  let charMeasure;
+  let viewport;
+  let scrollAreaElement;
 
   const CHARACTER_HEIGHT = 10;
 
@@ -34,21 +34,17 @@ describe('Viewport', () => {
         height: 0
       }
     };
-    charMeasureElement = {
-      getBoundingClientRect: () => {
-        return { width: null, height: CHARACTER_HEIGHT };
-      }
+    charMeasure = {
+      height: CHARACTER_HEIGHT
     };
-    viewport = new Viewport(terminal, viewportElement, scrollAreaElement, charMeasureElement);
+    viewport = new Viewport(terminal, viewportElement, scrollAreaElement, charMeasure);
   });
 
   describe('refresh', () => {
     it('should set the line-height of the terminal', () => {
       assert.equal(viewportElement.style.lineHeight, CHARACTER_HEIGHT + 'px');
       assert.equal(terminal.rowContainer.style.lineHeight, CHARACTER_HEIGHT + 'px');
-      charMeasureElement.getBoundingClientRect = () => {
-        return { width: null, height: 1 };
-      };
+      charMeasure.height = 1;
       viewport.refresh();
       assert.equal(viewportElement.style.lineHeight, '1px');
       assert.equal(terminal.rowContainer.style.lineHeight, '1px');
@@ -59,9 +55,7 @@ describe('Viewport', () => {
       terminal.rows = 1;
       viewport.refresh();
       assert.equal(viewportElement.style.height, 1 * CHARACTER_HEIGHT + 'px');
-      charMeasureElement.getBoundingClientRect = () => {
-        return { width: null, height: 20 };
-      };
+      charMeasure.height = 20;
       viewport.refresh();
       assert.equal(viewportElement.style.height, 20 + 'px');
     });

src/Viewport.ts

@@ -3,6 +3,7 @@
  */
 
 import { ITerminal } from './Interfaces';
+import { CharMeasure } from './utils/CharMeasure';
 
 /**
  * Represents the viewport of a terminal, the visible area within the larger buffer of output.
@@ -24,7 +25,7 @@ export class Viewport {
     private terminal: ITerminal,
     private viewportElement: HTMLElement,
     private scrollArea: HTMLElement,
-    private charMeasureElement: HTMLElement
+    private charMeasure: CharMeasure
   ) {
     this.currentRowHeight = 0;
     this.lastRecordedBufferLength = 0;
@@ -43,21 +44,20 @@ export class Viewport {
    * @param charSize A character size measurement bounding rect object, if it doesn't exist it will
    *   be created.
    */
-  private refresh(charSize?: ClientRect): void {
-    var size = charSize || this.charMeasureElement.getBoundingClientRect();
-    if (size.height > 0) {
-      var rowHeightChanged = size.height !== this.currentRowHeight;
+  private refresh(): void {
+    if (this.charMeasure.height > 0) {
+      var rowHeightChanged = this.charMeasure.height !== this.currentRowHeight;
       if (rowHeightChanged) {
-        this.currentRowHeight = size.height;
-        this.viewportElement.style.lineHeight = size.height + 'px';
-        this.terminal.rowContainer.style.lineHeight = size.height + 'px';
+        this.currentRowHeight = this.charMeasure.height;
+        this.viewportElement.style.lineHeight = this.charMeasure.height + 'px';
+        this.terminal.rowContainer.style.lineHeight = this.charMeasure.height + 'px';
       }
       var viewportHeightChanged = this.lastRecordedViewportHeight !== this.terminal.rows;
       if (rowHeightChanged || viewportHeightChanged) {
         this.lastRecordedViewportHeight = this.terminal.rows;
-        this.viewportElement.style.height = size.height * this.terminal.rows + 'px';
+        this.viewportElement.style.height = this.charMeasure.height * this.terminal.rows + 'px';
       }
-      this.scrollArea.style.height = (size.height * this.lastRecordedBufferLength) + 'px';
+      this.scrollArea.style.height = (this.charMeasure.height * this.lastRecordedBufferLength) + 'px';
     }
   }
 
@@ -74,9 +74,8 @@ export class Viewport {
       this.refresh();
     } else {
       // If size has changed, refresh viewport
-      var size = this.charMeasureElement.getBoundingClientRect();
-      if (size.height !== this.currentRowHeight) {
-        this.refresh(size);
+      if (this.charMeasure.height !== this.currentRowHeight) {
+        this.refresh();
       }
     }
 

src/utils/Browser.js

@@ -1,22 +0,0 @@
-/**
- * Attributes and methods to help with identifying the current browser and platform.
- * @module xterm/utils/Browser
- * @license MIT
- */
-
-import { contains } from './Generic.js';
-
-let isNode = (typeof navigator == 'undefined') ? true : false;
-let userAgent = (isNode) ? 'node' : navigator.userAgent;
-let platform = (isNode) ? 'node' : navigator.platform;
-
-export let isFirefox = !!~userAgent.indexOf('Firefox');
-export let isMSIE = !!~userAgent.indexOf('MSIE') || !!~userAgent.indexOf('Trident');
-
-// Find the users platform. We use this to interpret the meta key
-// and ISO third level shifts.
-// http://stackoverflow.com/q/19877924/577598
-export let isMac = contains(['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], platform);
-export let isIpad = platform === 'iPad';
-export let isIphone = platform === 'iPhone';
-export let isMSWindows = contains(['Windows', 'Win16', 'Win32', 'WinCE'], platform);

src/utils/Browser.ts

@@ -0,0 +1,22 @@
+/**
+ * Attributes and methods to help with identifying the current browser and platform.
+ * @module xterm/utils/Browser
+ * @license MIT
+ */
+
+import { contains } from './Generic';
+
+const isNode = (typeof navigator === 'undefined') ? true : false;
+const userAgent = (isNode) ? 'node' : navigator.userAgent;
+const platform = (isNode) ? 'node' : navigator.platform;
+
+export const isFirefox = !!~userAgent.indexOf('Firefox');
+export const isMSIE = !!~userAgent.indexOf('MSIE') || !!~userAgent.indexOf('Trident');
+
+// Find the users platform. We use this to interpret the meta key
+// and ISO third level shifts.
+// http://stackoverflow.com/q/19877924/577598
+export const isMac = contains(['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], platform);
+export const isIpad = platform === 'iPad';
+export const isIphone = platform === 'iPhone';
+export const isMSWindows = contains(['Windows', 'Win16', 'Win32', 'WinCE'], platform);

src/utils/CharMeasure.ts

@@ -0,0 +1,52 @@
+/**
+ * @module xterm/utils/CharMeasure
+ * @license MIT
+ */
+
+import { EventEmitter } from '../EventEmitter.js';
+
+/**
+ * Utility class that measures the size of a character.
+ */
+export class CharMeasure extends EventEmitter {
+  private _parentElement: HTMLElement;
+  private _measureElement: HTMLElement;
+  private _width: number;
+  private _height: number;
+
+  constructor(parentElement: HTMLElement) {
+    super();
+    this._parentElement = parentElement;
+  }
+
+  public get width(): number {
+    return this._width;
+  }
+
+  public get height(): number {
+    return this._height;
+  }
+
+  public measure(): void {
+    const oldWidth = this._width;
+    const oldHeight = this._height;
+
+    if (!this._measureElement) {
+      this._measureElement = document.createElement('span');
+      this._measureElement.style.position = 'absolute';
+      this._measureElement.style.top = '0';
+      this._measureElement.style.left = '-9999em';
+      this._measureElement.textContent = 'W';
+    }
+
+    this._parentElement.appendChild(this._measureElement);
+    const geometry = this._measureElement.getBoundingClientRect();
+    this._width = geometry.width;
+    this._height = geometry.height;
+    this._parentElement.removeChild(this._measureElement);
+
+    if (this._width !== oldWidth || this._height !== oldHeight) {
+      this.emit('charsizechanged');
+    }
+  }
+}

src/utils/Generic.ts

@@ -9,6 +9,6 @@
  * @param {Array} array The array to search for the given element.
  * @param {Object} el The element to look for into the array
  */
-export let contains = function(arr, el) {
+export function contains(arr: any[], el: any) {
   return arr.indexOf(el) >= 0;
 };

src/xterm.css

@@ -116,6 +116,10 @@
     overflow-y: scroll;
 }
 
+.terminal .xterm-wide-char {
+    display: inline-block;
+}
+
 .terminal .xterm-rows {
     position: absolute;
     left: 0;

src/xterm.js

@@ -15,6 +15,7 @@ import { EventEmitter } from './EventEmitter.js';
 import { Viewport } from './Viewport.js';
 import { rightClickHandler, pasteHandler, copyHandler } from './handlers/Clipboard.js';
 import { CircularList } from './utils/CircularList.js';
+import { CharMeasure } from './utils/CharMeasure.js';
 import * as Browser from './utils/Browser';
 import * as Keyboard from './utils/Keyboard';
 
@@ -603,17 +604,21 @@ Terminal.prototype.open = function(parent) {
   this.compositionHelper = new CompositionHelper(this.textarea, this.compositionView, this);
   this.helperContainer.appendChild(this.compositionView);
 
-  this.charMeasureElement = document.createElement('div');
-  this.charMeasureElement.classList.add('xterm-char-measure-element');
-  this.charMeasureElement.innerHTML = 'W';
-  this.helperContainer.appendChild(this.charMeasureElement);
+  this.charSizeStyleElement = document.createElement('style');
+  this.helperContainer.appendChild(this.charSizeStyleElement);
 
   for (; i < this.rows; i++) {
     this.insertRow();
   }
   this.parent.appendChild(this.element);
 
-  this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasureElement);
+  this.charMeasure = new CharMeasure(this.rowContainer);
+  this.charMeasure.on('charsizechanged', function () {
+    self.updateCharSizeCSS();
+  });
+  this.charMeasure.measure();
+
+  this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure);
 
   // Setup loop that draws to screen
   this.queueRefresh(0, this.rows - 1);
@@ -672,6 +677,13 @@ Terminal.loadAddon = function(addon, callback) {
   }
 };
 
+/**
+ * Updates the helper CSS class with any changes necessary after the terminal's
+ * character width has been changed.
+ */
+Terminal.prototype.updateCharSizeCSS = function() {
+  this.charSizeStyleElement.textContent = '.xterm-wide-char{width:' + (this.charMeasure.width * 2) + 'px;}';
+}
 
 /**
  * XTerm mouse events
@@ -1227,6 +1239,9 @@ Terminal.prototype.refresh = function(start, end) {
         }
       }
 
+      if (ch_width === 2) {
+        out += '<span class="xterm-wide-char">';
+      }
       switch (ch) {
         case '&':
           out += '&amp;';
@@ -1245,6 +1260,9 @@ Terminal.prototype.refresh = function(start, end) {
           }
           break;
       }
+      if (ch_width === 2) {
+        out += '</span>';
+      }
 
       attr = data;
     }
@@ -3041,6 +3059,8 @@ Terminal.prototype.resize = function(x, y) {
   this.scrollTop = 0;
   this.scrollBottom = y - 1;
 
+  this.charMeasure.measure();
+
   this.queueRefresh(0, this.rows - 1);
 
   this.normal = null;