Reimplement selection in the terminal

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

src/InputHandler.ts

@@ -75,8 +75,9 @@ export class InputHandler implements IInputHandler {
           const removed = this._terminal.lines.get(this._terminal.y + this._terminal.ybase).pop();
           if (removed[2] === 0
               && this._terminal.lines.get(row)[this._terminal.cols - 2]
-          && this._terminal.lines.get(row)[this._terminal.cols - 2][2] === 2)
+              && this._terminal.lines.get(row)[this._terminal.cols - 2][2] === 2) {
             this._terminal.lines.get(row)[this._terminal.cols - 2] = [this._terminal.curAttr, ' ', 1];
+          }
 
           // insert empty cell at cursor
           this._terminal.lines.get(row).splice(this._terminal.x, 0, [this._terminal.curAttr, ' ', 1]);
@@ -903,7 +904,8 @@ export class InputHandler implements IInputHandler {
           this._terminal.vt200Mouse = params[0] === 1000;
           this._terminal.normalMouse = params[0] > 1000;
           this._terminal.mouseEvents = true;
-          this._terminal.element.style.cursor = 'default';
+          this._terminal.element.classList.add('enable-mouse-events');
+          this._terminal.selectionManager.disable();
           this._terminal.log('Binding to mouse events.');
           break;
         case 1004: // send focusin/focusout events
@@ -1096,7 +1098,8 @@ export class InputHandler implements IInputHandler {
           this._terminal.vt200Mouse = false;
           this._terminal.normalMouse = false;
           this._terminal.mouseEvents = false;
-          this._terminal.element.style.cursor = '';
+          this._terminal.element.classList.remove('enable-mouse-events');
+          this._terminal.selectionManager.enable();
           break;
         case 1004: // send focusin/focusout events
           this._terminal.sendFocus = false;
@@ -1127,6 +1130,8 @@ export class InputHandler implements IInputHandler {
             this._terminal.scrollBottom = this._terminal.normal.scrollBottom;
             this._terminal.tabs = this._terminal.normal.tabs;
             this._terminal.normal = null;
+            // Ensure the selection manager has the correct buffer
+            this._terminal.selectionManager.setBuffer(this._terminal.lines);
             // if (params === 1049) {
             //   this.x = this.savedX;
             //   this.y = this.savedY;

src/Interfaces.ts

@@ -20,6 +20,8 @@ export interface IBrowser {
 export interface ITerminal {
   element: HTMLElement;
   rowContainer: HTMLElement;
+  selectionContainer: HTMLElement;
+  charMeasure: ICharMeasure;
   textarea: HTMLTextAreaElement;
   ybase: number;
   ydisp: number;
@@ -47,6 +49,10 @@ export interface ITerminal {
   emit(event: string, data: any);
 }
 
+export interface ISelectionManager {
+  selectionText: string;
+}
+
 export interface ICharMeasure {
   width: number;
   height: number;

src/Renderer.ts

@@ -318,6 +318,67 @@ export class Renderer {
 
     this._terminal.emit('refresh', {element: this._terminal.element, start: start, end: end});
   };
+
+  /**
+   * Refreshes the selection in the DOM.
+   * @param start The selection start.
+   * @param end The selection end.
+   */
+  public refreshSelection(start: [number, number], end: [number, number]) {
+    // Remove all selections
+    while (this._terminal.selectionContainer.children.length) {
+      this._terminal.selectionContainer.removeChild(this._terminal.selectionContainer.children[0]);
+    }
+
+    // Selection does not exist
+    if (!start || !end) {
+      return;
+    }
+
+    // Translate from buffer position to viewport position
+    const viewportStartRow = start[1] - this._terminal.ydisp;
+    const viewportEndRow = end[1] - this._terminal.ydisp;
+    const viewportCappedStartRow = Math.max(viewportStartRow, 0);
+    const viewportCappedEndRow = Math.min(viewportEndRow, this._terminal.rows - 1);
+
+    // No need to draw the selection
+    if (viewportCappedStartRow >= this._terminal.rows || viewportCappedEndRow < 0) {
+      return;
+    }
+
+    // Create the selections
+    const documentFragment = document.createDocumentFragment();
+    // Draw first row
+    const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
+    const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
+    documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
+    // Draw middle rows
+    for (let i = viewportCappedStartRow + 1; i < viewportCappedEndRow; i++) {
+      documentFragment.appendChild(this._createSelectionElement(i, 0, this._terminal.cols));
+    }
+    // Draw final row
+    if (viewportCappedStartRow !== viewportCappedEndRow) {
+      // Only draw viewportEndRow if it's not the same as viewporttartRow
+      const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : this._terminal.cols;
+      documentFragment.appendChild(this._createSelectionElement(viewportCappedEndRow, 0, endCol));
+    }
+    this._terminal.selectionContainer.appendChild(documentFragment);
+  }
+
+  /**
+   * Creates a selection element at the specified position.
+   * @param row The row of the selection.
+   * @param colStart The start column.
+   * @param colEnd The end columns.
+   */
+  private _createSelectionElement(row: number, colStart: number, colEnd: number): HTMLElement {
+    const element = document.createElement('div');
+    element.style.height = `${this._terminal.charMeasure.height}px`;
+    element.style.top = `${row * this._terminal.charMeasure.height}px`;
+    element.style.left = `${colStart * this._terminal.charMeasure.width}px`;
+    element.style.width = `${this._terminal.charMeasure.width * (colEnd - colStart)}px`;
+    return element;
+  }
 }
 
 

src/SelectionManager.test.ts

@@ -0,0 +1,169 @@
+/**
+ * @license MIT
+ */
+import jsdom = require('jsdom');
+import { assert } from 'chai';
+import { ITerminal } from './Interfaces';
+import { CharMeasure } from './utils/CharMeasure';
+import { CircularList } from './utils/CircularList';
+import { SelectionManager } from './SelectionManager';
+import { SelectionModel } from './SelectionModel';
+
+class TestSelectionManager extends SelectionManager {
+  constructor(
+    terminal: ITerminal,
+    buffer: CircularList<any>,
+    rowContainer: HTMLElement,
+    charMeasure: CharMeasure
+  ) {
+    super(terminal, buffer, rowContainer, charMeasure);
+  }
+
+  public get model(): SelectionModel { return this._model; }
+
+  public selectLineAt(line: number): void { this._selectLineAt(line); }
+  public selectWordAt(coords: [number, number]): void { this._selectWordAt(coords); }
+
+  // Disable DOM interaction
+  public enable(): void {}
+  public disable(): void {}
+  public refresh(): void {}
+}
+
+describe('SelectionManager', () => {
+  let window: Window;
+  let document: Document;
+
+  let terminal: ITerminal;
+  let buffer: CircularList<any>;
+  let rowContainer: HTMLElement;
+  let selectionManager: TestSelectionManager;
+
+  beforeEach(done => {
+    jsdom.env('', (err, w) => {
+      window = w;
+      document = window.document;
+      buffer = new CircularList<any>(100);
+      terminal = <any>{ cols: 80, rows: 2 };
+      selectionManager = new TestSelectionManager(terminal, buffer, rowContainer, null);
+      done();
+    });
+  });
+
+  function stringToRow(text: string): [number, string, number][] {
+    let result: [number, string, number][] = [];
+    for (let i = 0; i < text.length; i++) {
+      result.push([0, text.charAt(i), 1]);
+    }
+    return result;
+  }
+
+  describe('_selectWordAt', () => {
+    it('should expand selection for normal width chars', () => {
+      buffer.push(stringToRow('foo bar'));
+      selectionManager.selectWordAt([0, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+      selectionManager.selectWordAt([1, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+      selectionManager.selectWordAt([2, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+      selectionManager.selectWordAt([3, 0]);
+      assert.equal(selectionManager.selectionText, ' ');
+      selectionManager.selectWordAt([4, 0]);
+      assert.equal(selectionManager.selectionText, 'bar');
+      selectionManager.selectWordAt([5, 0]);
+      assert.equal(selectionManager.selectionText, 'bar');
+      selectionManager.selectWordAt([6, 0]);
+      assert.equal(selectionManager.selectionText, 'bar');
+    });
+    it('should expand selection for whitespace', () => {
+      buffer.push(stringToRow('a   b'));
+      selectionManager.selectWordAt([0, 0]);
+      assert.equal(selectionManager.selectionText, 'a');
+      selectionManager.selectWordAt([1, 0]);
+      assert.equal(selectionManager.selectionText, '   ');
+      selectionManager.selectWordAt([2, 0]);
+      assert.equal(selectionManager.selectionText, '   ');
+      selectionManager.selectWordAt([3, 0]);
+      assert.equal(selectionManager.selectionText, '   ');
+      selectionManager.selectWordAt([4, 0]);
+      assert.equal(selectionManager.selectionText, 'b');
+    });
+    it('should expand selection for wide characters', () => {
+      // Wide characters use a special format
+      buffer.push([
+        [null, '中', 2],
+        [null, '', 0],
+        [null, '文', 2],
+        [null, '', 0],
+        [null, ' ', 1],
+        [null, 'a', 1],
+        [null, '中', 2],
+        [null, '', 0],
+        [null, '文', 2],
+        [null, '', 0],
+        [null, 'b', 1],
+        [null, ' ', 1],
+        [null, 'f', 1],
+        [null, 'o', 1],
+        [null, 'o', 1]
+      ]);
+      // Ensure wide characters take up 2 columns
+      selectionManager.selectWordAt([0, 0]);
+      assert.equal(selectionManager.selectionText, '中文');
+      selectionManager.selectWordAt([1, 0]);
+      assert.equal(selectionManager.selectionText, '中文');
+      selectionManager.selectWordAt([2, 0]);
+      assert.equal(selectionManager.selectionText, '中文');
+      selectionManager.selectWordAt([3, 0]);
+      assert.equal(selectionManager.selectionText, '中文');
+      selectionManager.selectWordAt([4, 0]);
+      assert.equal(selectionManager.selectionText, ' ');
+      // Ensure wide characters work when wrapped in normal width characters
+      selectionManager.selectWordAt([5, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([6, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([7, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([8, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([9, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([10, 0]);
+      assert.equal(selectionManager.selectionText, 'a中文b');
+      selectionManager.selectWordAt([11, 0]);
+      assert.equal(selectionManager.selectionText, ' ');
+      // Ensure normal width characters work fine in a line containing wide characters
+      selectionManager.selectWordAt([12, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+      selectionManager.selectWordAt([13, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+      selectionManager.selectWordAt([14, 0]);
+      assert.equal(selectionManager.selectionText, 'foo');
+    });
+  });
+
+  describe('_selectLineAt', () => {
+    it('should select the entire line', () => {
+      buffer.push(stringToRow('foo bar'));
+      selectionManager.selectLineAt(0);
+      assert.equal(selectionManager.selectionText, 'foo bar', 'The selected text is correct');
+      assert.deepEqual(selectionManager.model.finalSelectionStart, [0, 0]);
+      assert.deepEqual(selectionManager.model.finalSelectionEnd, [terminal.cols, 0], 'The actual selection spans the entire column');
+    });
+  });
+
+  describe('selectAll', () => {
+    it('should select the entire buffer, beyond the viewport', () => {
+      buffer.push(stringToRow('1'));
+      buffer.push(stringToRow('2'));
+      buffer.push(stringToRow('3'));
+      buffer.push(stringToRow('4'));
+      buffer.push(stringToRow('5'));
+      selectionManager.selectAll();
+      terminal.ybase = buffer.length - terminal.rows;
+      assert.equal(selectionManager.selectionText, '1\n2\n3\n4\n5');
+    });
+  });
+});