Merge branch 'master' into 553_find_api

README.md

@@ -36,6 +36,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
 - [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
 - [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy and run in the cloud.
+- [**Gravitational Teleport**](https://github.com/gravitational/teleport): Gravitational Teleport is a modern SSH server for remotely accessing clusters of Linux servers via SSH or HTTPS.
 
 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.
 

src/SelectionManager.test.ts

@@ -142,6 +142,49 @@ describe('SelectionManager', () => {
       selectionManager.selectWordAt([14, 0]);
       assert.equal(selectionManager.selectionText, 'foo');
     });
+    it('should select up to non-path characters that are commonly adjacent to paths', () => {
+      buffer.push(stringToRow(':ab:(cd)[ef]{gh}\'ij"'));
+      selectionManager.selectWordAt([0, 0]);
+      assert.equal(selectionManager.selectionText, ':ab');
+      selectionManager.selectWordAt([1, 0]);
+      assert.equal(selectionManager.selectionText, 'ab');
+      selectionManager.selectWordAt([2, 0]);
+      assert.equal(selectionManager.selectionText, 'ab');
+      selectionManager.selectWordAt([3, 0]);
+      assert.equal(selectionManager.selectionText, 'ab:');
+      selectionManager.selectWordAt([4, 0]);
+      assert.equal(selectionManager.selectionText, '(cd');
+      selectionManager.selectWordAt([5, 0]);
+      assert.equal(selectionManager.selectionText, 'cd');
+      selectionManager.selectWordAt([6, 0]);
+      assert.equal(selectionManager.selectionText, 'cd');
+      selectionManager.selectWordAt([7, 0]);
+      assert.equal(selectionManager.selectionText, 'cd)');
+      selectionManager.selectWordAt([8, 0]);
+      assert.equal(selectionManager.selectionText, '[ef');
+      selectionManager.selectWordAt([9, 0]);
+      assert.equal(selectionManager.selectionText, 'ef');
+      selectionManager.selectWordAt([10, 0]);
+      assert.equal(selectionManager.selectionText, 'ef');
+      selectionManager.selectWordAt([11, 0]);
+      assert.equal(selectionManager.selectionText, 'ef]');
+      selectionManager.selectWordAt([12, 0]);
+      assert.equal(selectionManager.selectionText, '{gh');
+      selectionManager.selectWordAt([13, 0]);
+      assert.equal(selectionManager.selectionText, 'gh');
+      selectionManager.selectWordAt([14, 0]);
+      assert.equal(selectionManager.selectionText, 'gh');
+      selectionManager.selectWordAt([15, 0]);
+      assert.equal(selectionManager.selectionText, 'gh}');
+      selectionManager.selectWordAt([16, 0]);
+      assert.equal(selectionManager.selectionText, '\'ij');
+      selectionManager.selectWordAt([17, 0]);
+      assert.equal(selectionManager.selectionText, 'ij');
+      selectionManager.selectWordAt([18, 0]);
+      assert.equal(selectionManager.selectionText, 'ij');
+      selectionManager.selectWordAt([19, 0]);
+      assert.equal(selectionManager.selectionText, 'ij"');
+    });
   });
 
   describe('_selectLineAt', () => {

src/SelectionManager.ts

@@ -38,6 +38,12 @@ const CLEAR_MOUSE_DOWN_TIME = 400;
  */
 const CLEAR_MOUSE_DISTANCE = 10;
 
+/**
+ * A string containing all characters that are considered word separated by the
+ * double click to select work logic.
+ */
+const WORD_SEPARATORS = ' ()[]{}:\'"';
+
 // TODO: Move these constants elsewhere, they belong in a buffer or buffer
 //       data/line class.
 const LINE_DATA_CHAR_INDEX = 1;
@@ -46,6 +52,23 @@ const LINE_DATA_WIDTH_INDEX = 2;
 const NON_BREAKING_SPACE_CHAR = String.fromCharCode(160);
 const ALL_NON_BREAKING_SPACE_REGEX = new RegExp(NON_BREAKING_SPACE_CHAR, 'g');
 
+/**
+ * Represents a position of a word on a line.
+ */
+interface IWordPosition {
+  start: number;
+  length: number;
+}
+
+/**
+ * A selection mode, this drives how the selection behaves on mouse move.
+ */
+enum SelectionMode {
+  NORMAL,
+  WORD,
+  LINE
+}
+
 /**
  * A class that manages the selection of the terminal. With help from
  * SelectionModel, SelectionManager handles with all logic associated with
@@ -81,9 +104,9 @@ export class SelectionManager extends EventEmitter {
   private _clickCount: number;
 
   /**
-   * Whether line select mode is active, this occurs after a triple click.
+   * The current selection mode.
    */
-  private _isLineSelectModeActive: boolean;
+  private _activeSelectionMode: SelectionMode;
 
   /**
    * A setInterval timer that is active while the mouse is down whose callback
@@ -113,7 +136,7 @@ export class SelectionManager extends EventEmitter {
 
     this._model = new SelectionModel(_terminal);
     this._lastMouseDownTime = 0;
-    this._isLineSelectModeActive = false;
+    this._activeSelectionMode = SelectionMode.NORMAL;
   }
 
   /**
@@ -264,7 +287,7 @@ export class SelectionManager extends EventEmitter {
    * @param event The mouse event.
    */
   private _getMouseBufferCoords(event: MouseEvent): [number, number] {
-    const coords = Mouse.getCoords(event, this._rowContainer, this._charMeasure, this._terminal.cols, this._terminal.rows);
+    const coords = Mouse.getCoords(event, this._rowContainer, this._charMeasure, this._terminal.cols, this._terminal.rows, true);
     // Convert to 0-based
     coords[0]--;
     coords[1]--;
@@ -366,7 +389,7 @@ export class SelectionManager extends EventEmitter {
   private _onSingleClick(event: MouseEvent): void {
     this._model.selectionStartLength = 0;
     this._model.isSelectAllActive = false;
-    this._isLineSelectModeActive = false;
+    this._activeSelectionMode = SelectionMode.NORMAL;
     this._model.selectionStart = this._getMouseBufferCoords(event);
     if (this._model.selectionStart) {
       this._model.selectionEnd = null;
@@ -386,6 +409,7 @@ export class SelectionManager extends EventEmitter {
   private _onDoubleClick(event: MouseEvent): void {
     const coords = this._getMouseBufferCoords(event);
     if (coords) {
+      this._activeSelectionMode = SelectionMode.WORD;
       this._selectWordAt(coords);
     }
   }
@@ -398,7 +422,7 @@ export class SelectionManager extends EventEmitter {
   private _onTripleClick(event: MouseEvent): void {
     const coords = this._getMouseBufferCoords(event);
     if (coords) {
-      this._isLineSelectModeActive = true;
+      this._activeSelectionMode = SelectionMode.LINE;
       this._selectLineAt(coords[1]);
     }
   }
@@ -443,12 +467,14 @@ export class SelectionManager extends EventEmitter {
     this._model.selectionEnd = this._getMouseBufferCoords(event);
 
     // Select the entire line if line select mode is active.
-    if (this._isLineSelectModeActive) {
+    if (this._activeSelectionMode === SelectionMode.LINE) {
       if (this._model.selectionEnd[1] < this._model.selectionStart[1]) {
         this._model.selectionEnd[0] = 0;
       } else {
         this._model.selectionEnd[0] = this._terminal.cols;
       }
+    } else if (this._activeSelectionMode === SelectionMode.WORD) {
+      this._selectToWordAt(this._model.selectionEnd);
     }
 
     // Determine the amount of scrolling that will happen.
@@ -530,11 +556,10 @@ export class SelectionManager extends EventEmitter {
   }
 
   /**
-   * Selects the word at the coordinates specified. Words are defined as all
-   * non-whitespace characters.
+   * Gets positional information for the word at the coordinated specified.
    * @param coords The coordinates to get the word at.
    */
-  protected _selectWordAt(coords: [number, number]): void {
+  private _getWordAt(coords: [number, number]): IWordPosition {
     const bufferLine = this._buffer.get(coords[1]);
     const line = translateBufferLineToString(bufferLine, false);
 
@@ -573,7 +598,7 @@ export class SelectionManager extends EventEmitter {
         endCol++;
       }
       // Expand the string in both directions until a space is hit
-      while (startIndex > 0 && line.charAt(startIndex - 1) !== ' ') {
+      while (startIndex > 0 && !this._isCharWordSeparator(line.charAt(startIndex - 1))) {
         if (bufferLine[startCol - 1][LINE_DATA_WIDTH_INDEX] === 0) {
           // If the next character is a wide char, record it and skip the column
           leftWideCharCount++;
@@ -582,7 +607,7 @@ export class SelectionManager extends EventEmitter {
         startIndex--;
         startCol--;
       }
-      while (endIndex + 1 < line.length && line.charAt(endIndex + 1) !== ' ') {
+      while (endIndex + 1 < line.length && !this._isCharWordSeparator(line.charAt(endIndex + 1))) {
         if (bufferLine[endCol + 1][LINE_DATA_WIDTH_INDEX] === 2) {
           // If the next character is a wide char, record it and skip the column
           rightWideCharCount++;
@@ -593,9 +618,37 @@ export class SelectionManager extends EventEmitter {
       }
     }
 
-    // Record the resulting selection
-    this._model.selectionStart = [startIndex + charOffset - leftWideCharCount, coords[1]];
-    this._model.selectionStartLength = Math.min(endIndex - startIndex + leftWideCharCount + rightWideCharCount + 1/*include endIndex char*/, this._terminal.cols);
+    const start = startIndex + charOffset - leftWideCharCount;
+    const length = Math.min(endIndex - startIndex + leftWideCharCount + rightWideCharCount + 1/*include endIndex char*/, this._terminal.cols);
+    return {start, length};
+  }
+
+  /**
+   * Selects the word at the coordinates specified.
+   * @param coords The coordinates to get the word at.
+   */
+  protected _selectWordAt(coords: [number, number]): void {
+    const wordPosition = this._getWordAt(coords);
+    this._model.selectionStart = [wordPosition.start, coords[1]];
+    this._model.selectionStartLength = wordPosition.length;
+  }
+
+  /**
+   * Sets the selection end to the word at the coordinated specified.
+   * @param coords The coordinates to get the word at.
+   */
+  private _selectToWordAt(coords: [number, number]): void {
+    const wordPosition = this._getWordAt(coords);
+    this._model.selectionEnd = [this._model.areSelectionValuesReversed() ? wordPosition.start : (wordPosition.start + wordPosition.length), coords[1]];
+  }
+
+  /**
+   * Gets whether the character is considered a word separator by the select
+   * word logic.
+   * @param char The character to check.
+   */
+  private _isCharWordSeparator(char: string): boolean {
+    return WORD_SEPARATORS.indexOf(char) >= 0;
   }
 
   /**

src/SelectionModel.test.ts

@@ -11,8 +11,6 @@ class TestSelectionModel extends SelectionModel {
   ) {
     super(terminal);
   }
-
-  public areSelectionValuesReversed(): boolean { return this._areSelectionValuesReversed(); }
 }
 
 describe('SelectionManager', () => {
@@ -39,7 +37,7 @@ describe('SelectionManager', () => {
     });
   });
 
-  describe('_areSelectionValuesReversed', () => {
+  describe('areSelectionValuesReversed', () => {
     it('should return true when the selection end is before selection start', () => {
       model.selectionStart = [1, 0];
       model.selectionEnd = [0, 0];

src/SelectionModel.ts

@@ -59,7 +59,7 @@ export class SelectionModel {
       return this.selectionStart;
     }
 
-    return this._areSelectionValuesReversed() ? this.selectionEnd : this.selectionStart;
+    return this.areSelectionValuesReversed() ? this.selectionEnd : this.selectionStart;
   }
 
   /**
@@ -76,7 +76,7 @@ export class SelectionModel {
     }
 
     // Use the selection start if the end doesn't exist or they're reversed
-    if (!this.selectionEnd || this._areSelectionValuesReversed()) {
+    if (!this.selectionEnd || this.areSelectionValuesReversed()) {
       return [this.selectionStart[0] + this.selectionStartLength, this.selectionStart[1]];
     }
 
@@ -93,7 +93,7 @@ export class SelectionModel {
   /**
    * Returns whether the selection start and end are reversed.
    */
-  protected _areSelectionValuesReversed(): boolean {
+  public areSelectionValuesReversed(): boolean {
     const start = this.selectionStart;
     const end = this.selectionEnd;
     return start[1] > end[1] || (start[1] === end[1] && start[0] > end[0]);

src/utils/Mouse.ts

@@ -30,12 +30,17 @@ export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLEleme
  * @param event The mouse event.
  * @param rowContainer The terminal's row container.
  * @param charMeasure The char measure object used to determine character sizes.
+ * @param colCount The number of columns in the terminal.
+ * @param rowCount The number of rows n the terminal.
+ * @param isSelection Whether the request is for the selection or not. This will
+ * apply an offset to the x value such that the left half of the cell will
+ * select that cell and the right half will select the next cell.
  */
-export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number): [number, number] {
+export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
   const coords = getCoordsRelativeToElement(event, rowContainer);
 
-  // Convert to cols/rows
-  coords[0] = Math.ceil(coords[0] / charMeasure.width);
+  // Convert to cols/rows.
+  coords[0] = Math.ceil((coords[0] + (isSelection ? charMeasure.width / 2 : 0)) / charMeasure.width);
   coords[1] = Math.ceil(coords[1] / charMeasure.height);
 
   // Ensure coordinates are within the terminal viewport.