From 7f2e94c30c4fe067d45a2044543d988068845b67 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 18 Jun 2017 10:38:04 -0700 Subject: [PATCH 1/5] Don't select colon or brackets when double clicking Fixes #713 --- src/SelectionManager.test.ts | 35 +++++++++++++++++++++++++++++++++++ src/SelectionManager.ts | 19 +++++++++++++++++-- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/SelectionManager.test.ts b/src/SelectionManager.test.ts index e0ff6789..4de1d1cf 100644 --- a/src/SelectionManager.test.ts +++ b/src/SelectionManager.test.ts @@ -142,6 +142,41 @@ 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}')); + 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}'); + }); }); describe('_selectLineAt', () => { diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 9cfa5302..d1ccecae 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -37,6 +37,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; @@ -610,7 +616,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++; @@ -619,7 +625,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++; @@ -635,6 +641,15 @@ export class SelectionManager extends EventEmitter { this._model.selectionStartLength = Math.min(endIndex - startIndex + leftWideCharCount + rightWideCharCount + 1/*include endIndex char*/, this._terminal.cols); } + /** + * 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; + } + /** * Selects the line specified. * @param line The line index. From 07882c42dcb90572475925ac26f9304edafa63bd Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 18 Jun 2017 11:51:00 -0700 Subject: [PATCH 2/5] Also consider ' and " word separators For example URIs in json --- src/SelectionManager.test.ts | 10 +++++++++- src/SelectionManager.ts | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/SelectionManager.test.ts b/src/SelectionManager.test.ts index 4de1d1cf..eb9322b6 100644 --- a/src/SelectionManager.test.ts +++ b/src/SelectionManager.test.ts @@ -143,7 +143,7 @@ describe('SelectionManager', () => { 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}')); + buffer.push(stringToRow(':ab:(cd)[ef]{gh}\'ij"')); selectionManager.selectWordAt([0, 0]); assert.equal(selectionManager.selectionText, ':ab'); selectionManager.selectWordAt([1, 0]); @@ -176,6 +176,14 @@ describe('SelectionManager', () => { 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"'); }); }); diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index d1ccecae..b1da4926 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -41,7 +41,7 @@ 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 = ' ()[]{}:'; +const WORD_SEPARATORS = ' ()[]{}:\'"'; // TODO: Move these constants elsewhere, they belong in a buffer or buffer // data/line class. From b05814e6a5429c9abed40c64becf5d73bb624011 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 18 Jun 2017 12:02:58 -0700 Subject: [PATCH 3/5] Improve selection cell selection Fixes #709 --- src/SelectionManager.ts | 2 +- src/utils/Mouse.ts | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 9cfa5302..71c712ed 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -309,7 +309,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]--; diff --git a/src/utils/Mouse.ts b/src/utils/Mouse.ts index 79c5d5c1..a5d72c1e 100644 --- a/src/utils/Mouse.ts +++ b/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. From 4b170ca43f67ead8a5dce8096fb24923dca8e5ed Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 18 Jun 2017 12:52:43 -0700 Subject: [PATCH 4/5] Select to the word at the mouse after double click Fixes #697 --- src/SelectionManager.ts | 47 +++++++++++++++++++++++++++++++++----- src/SelectionModel.test.ts | 4 +--- src/SelectionModel.ts | 6 ++--- 3 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 9cfa5302..7f21c2b8 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -45,6 +45,11 @@ 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'); +interface IWordPosition { + start: number; + length: number; +} + /** * A class that manages the selection of the terminal. With help from * SelectionModel, SelectionManager handles with all logic associated with @@ -84,6 +89,11 @@ export class SelectionManager extends EventEmitter { */ private _isLineSelectModeActive: boolean; + /** + * Whether word select mode is active, this occurs after a double click. + */ + private _isWordSelectModeActive: boolean; + /** * A setInterval timer that is active while the mouse is down whose callback * scrolls the viewport when necessary. @@ -113,6 +123,7 @@ export class SelectionManager extends EventEmitter { this._model = new SelectionModel(_terminal); this._lastMouseDownTime = 0; this._isLineSelectModeActive = false; + this._isWordSelectModeActive = false; } /** @@ -412,6 +423,7 @@ export class SelectionManager extends EventEmitter { this._model.selectionStartLength = 0; this._model.isSelectAllActive = false; this._isLineSelectModeActive = false; + this._isWordSelectModeActive = false; this._model.selectionStart = this._getMouseBufferCoords(event); if (this._model.selectionStart) { this._model.selectionEnd = null; @@ -431,6 +443,7 @@ export class SelectionManager extends EventEmitter { private _onDoubleClick(event: MouseEvent): void { const coords = this._getMouseBufferCoords(event); if (coords) { + this._isWordSelectModeActive = true; this._selectWordAt(coords); } } @@ -496,6 +509,10 @@ export class SelectionManager extends EventEmitter { } } + if (this._isWordSelectModeActive) { + this._selectToWordAt(this._model.selectionEnd); + } + // Determine the amount of scrolling that will happen. this._dragScrollAmount = this._getMouseEventScrollAmount(event); @@ -567,11 +584,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 = this._translateBufferLineToString(bufferLine, false); @@ -630,9 +646,28 @@ 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]]; } /** diff --git a/src/SelectionModel.test.ts b/src/SelectionModel.test.ts index e8629596..ab22b77c 100644 --- a/src/SelectionModel.test.ts +++ b/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]; diff --git a/src/SelectionModel.ts b/src/SelectionModel.ts index 403f42e0..410af3b3 100644 --- a/src/SelectionModel.ts +++ b/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]); From 320fb55ddc2be29628a4389f8104686c9f27afaa Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 18 Jun 2017 12:56:32 -0700 Subject: [PATCH 5/5] Use an enum for selection mode --- src/SelectionManager.ts | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 7f21c2b8..ac0e4290 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -45,11 +45,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 @@ -85,14 +97,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; - - /** - * Whether word select mode is active, this occurs after a double click. - */ - private _isWordSelectModeActive: boolean; + private _activeSelectionMode: SelectionMode; /** * A setInterval timer that is active while the mouse is down whose callback @@ -122,8 +129,7 @@ export class SelectionManager extends EventEmitter { this._model = new SelectionModel(_terminal); this._lastMouseDownTime = 0; - this._isLineSelectModeActive = false; - this._isWordSelectModeActive = false; + this._activeSelectionMode = SelectionMode.NORMAL; } /** @@ -422,8 +428,7 @@ export class SelectionManager extends EventEmitter { private _onSingleClick(event: MouseEvent): void { this._model.selectionStartLength = 0; this._model.isSelectAllActive = false; - this._isLineSelectModeActive = false; - this._isWordSelectModeActive = false; + this._activeSelectionMode = SelectionMode.NORMAL; this._model.selectionStart = this._getMouseBufferCoords(event); if (this._model.selectionStart) { this._model.selectionEnd = null; @@ -443,7 +448,7 @@ export class SelectionManager extends EventEmitter { private _onDoubleClick(event: MouseEvent): void { const coords = this._getMouseBufferCoords(event); if (coords) { - this._isWordSelectModeActive = true; + this._activeSelectionMode = SelectionMode.WORD; this._selectWordAt(coords); } } @@ -456,7 +461,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]); } } @@ -501,15 +506,13 @@ 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; } - } - - if (this._isWordSelectModeActive) { + } else if (this._activeSelectionMode === SelectionMode.WORD) { this._selectToWordAt(this._model.selectionEnd); }