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,9 +214,13 @@ 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);
+ },
+ tooltipCallback: (e: MouseEvent, uri: string) => {
+ console.log(e, uri);
+ },
+ leaveCallback: () => {}
  });
  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.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/Buffer.ts

@@ -1,13 +1,16 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
 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 +35,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 +53,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 +115,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/BufferSet.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/BufferSet.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/Charsets.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/CompositionHelper.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
@@ -42,6 +43,16 @@ describe('CompositionHelper', () => {
  },
  handler: (text: string) => {
  handledText += text;
+ },
+ buffer: {
+ isCursorInViewport: true
+ },
+ charMeasure: {
+ height: 10,
+ width: 10
+ },
+ options: {
+ lineHeight: 1
  }
  };
  handledText = '';

src/CompositionHelper.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
@@ -63,6 +64,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 +195,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/EscapeSequences.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/EventEmitter.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/EventEmitter.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/InputHandler.test.ts

@@ -1,4 +1,5 @@
 /**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 

src/InputHandler.ts

@@ -1,4 +1,6 @@
 /**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
  * @license MIT
  */
 
@@ -36,13 +38,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 +84,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 +191,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 +490,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 +538,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 +592,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;