/** * @license MIT */ import { CharMeasure } from './utils/CharMeasure'; import { CircularList } from './utils/CircularList'; import { EventEmitter } from './EventEmitter'; import * as Mouse from './utils/Mouse'; import { ITerminal } from './Interfaces'; import { SelectionModel } from './SelectionModel'; /** * The number of pixels the mouse needs to be above or below the viewport in * order to scroll at the maximum speed. */ const DRAG_SCROLL_MAX_THRESHOLD = 100; /** * The maximum scrolling speed */ const DRAG_SCROLL_MAX_SPEED = 5; /** * The number of milliseconds between drag scroll updates. */ const DRAG_SCROLL_INTERVAL = 100; /** * The amount of time before mousedown events are no stacked to create double * click events. */ const CLEAR_MOUSE_DOWN_TIME = 400; export class SelectionManager extends EventEmitter { private _model: SelectionModel; /** * The amount to scroll every drag scroll update (depends on how far the mouse * drag is above or below the terminal). */ private _dragScrollAmount: number; /** * The last time the mousedown event fired, this is used to track double and * triple clicks. */ private _lastMouseDownTime: number; private _clickCount: number; private _bufferTrimListener: any; private _mouseMoveListener: EventListener; private _mouseDownListener: EventListener; private _mouseUpListener: EventListener; private _dragScrollTimeout: NodeJS.Timer; constructor( private _terminal: ITerminal, private _buffer: CircularList, private _rowContainer: HTMLElement, private _selectionContainer: HTMLElement, private _charMeasure: CharMeasure ) { super(); this._initListeners(); this.enable(); this._model = new SelectionModel(_terminal); this._lastMouseDownTime = 0; } private _initListeners() { this._bufferTrimListener = (amount: number) => this._onTrim(amount); this._mouseMoveListener = event => this._onMouseMove(event); this._mouseDownListener = event => this._onMouseDown(event); this._mouseUpListener = event => this._onMouseUp(event); } /** * Disables the selection manager. This is useful for when terminal mouse * are enabled. */ public disable() { this._model.selectionStart = null; this._model.selectionEnd = null; this.refresh(); this._buffer.off('trim', this._bufferTrimListener); this._rowContainer.removeEventListener('mousedown', this._mouseDownListener); this._rowContainer.ownerDocument.removeEventListener('mousemove', this._mouseMoveListener); this._rowContainer.ownerDocument.removeEventListener('mouseup', this._mouseUpListener); clearInterval(this._dragScrollTimeout); } /** * Enable the selection manager. */ public enable() { this._buffer.on('trim', this._bufferTrimListener); this._rowContainer.addEventListener('mousedown', this._mouseDownListener); } /** * Gets the text currently selected. */ public get selectionText(): string { const start = this._model.finalSelectionStart; const end = this._model.finalSelectionEnd; if (!start || !end) { return ''; } // Get first row const startRowEndCol = start[1] === end[1] ? end[0] : null; let result: string[] = []; result.push(this._translateBufferLineToString(this._buffer.get(start[1]), start[0], startRowEndCol)); // Get middle rows for (let i = start[1] + 1; i <= end[1] - 1; i++) { result.push(this._translateBufferLineToString(this._buffer.get(i))); } // Get final row if (start[1] !== end[1]) { result.push(this._translateBufferLineToString(this._buffer.get(end[1]), 0, end[1])); } console.log('selectionText result: ' + result); return result.join('\n'); } private _translateBufferLineToString(line: any, startCol: number = 0, endCol: number = null): string { // TODO: This function should live in a buffer or buffer line class endCol = endCol || line.length; let result = ''; for (let i = startCol; i < endCol; i++) { result += line[i][1]; } // TODO: Trim line here instead of in handlers/Clipboard? // TODO: Only trim off the whitespace at the end of a line // TODO: Handle the double-width character case return result; } /** * Redraws the selection. */ public refresh(): void { // TODO: Figure out when to refresh the selection vs when to refresh the viewport this.emit('refresh', { start: this._model.finalSelectionStart, end: this._model.finalSelectionEnd }); } /** * Selects all text within the terminal. */ public selectAll(): void { this._model.isSelectAllActive = true; this.refresh(); } /** * Handle the buffer being trimmed, adjust the selection position. * @param amount The amount the buffer is being trimmed. */ private _onTrim(amount: number) { const needsRefresh = this._model.onTrim(amount); if (needsRefresh) { this.refresh(); } } // TODO: Handle splice/shiftElements in the buffer (just clear the selection?) private _getMouseBufferCoords(event: MouseEvent): [number, number] { const coords = Mouse.getCoords(event, this._rowContainer, this._charMeasure, this._terminal.cols, this._terminal.rows); console.log(coords); // Convert to 0-based coords[0]--; coords[1]--; // Convert viewport coords to buffer coords coords[1] += this._terminal.ydisp; return coords; } private _getMouseEventScrollAmount(event: MouseEvent): number { let offset = Mouse.getCoordsRelativeToElement(event, this._rowContainer)[1]; const terminalHeight = this._terminal.rows * this._charMeasure.height; if (offset >= 0 && offset <= terminalHeight) { return 0; } if (offset > terminalHeight) { offset -= terminalHeight; } offset = Math.min(Math.max(offset, -DRAG_SCROLL_MAX_THRESHOLD), DRAG_SCROLL_MAX_THRESHOLD); offset /= DRAG_SCROLL_MAX_THRESHOLD; return (offset / Math.abs(offset)) + Math.round(offset * (DRAG_SCROLL_MAX_SPEED - 1)); } /** * Handles te mousedown event, setting up for a new selection. * @param event The mousedown event. */ private _onMouseDown(event: MouseEvent) { // TODO: On right click move the text into the textbox so it can be copied via the context menu // Only action the primary button if (event.button !== 0) { return; } this._setMouseClickCount(); console.log(this._clickCount); if (this._clickCount === 1) { this._onSingleClick(event); } else if (this._clickCount === 2) { this._onDoubleClick(event); } else if (this._clickCount === 3) { this._onTripleClick(event); } // Listen on the document so that dragging outside of viewport works this._rowContainer.ownerDocument.addEventListener('mousemove', this._mouseMoveListener); this._rowContainer.ownerDocument.addEventListener('mouseup', this._mouseUpListener); this._dragScrollTimeout = setInterval(() => this._dragScroll(), DRAG_SCROLL_INTERVAL); this.refresh(); } private _onSingleClick(event: MouseEvent): void { this._model.selectionStartLength = 0; this._model.isSelectAllActive = false; this._model.selectionStart = this._getMouseBufferCoords(event); if (this._model.selectionStart) { this._model.selectionEnd = null; } } private _onDoubleClick(event: MouseEvent): void { const coords = this._getMouseBufferCoords(event); if (coords) { this._selectWordAt(coords); } } private _onTripleClick(event: MouseEvent): void { const coords = this._getMouseBufferCoords(event); if (coords) { this._selectLineAt(coords[1]); } } private _setMouseClickCount(): void { let currentTime = (new Date()).getTime(); if (currentTime - this._lastMouseDownTime > CLEAR_MOUSE_DOWN_TIME) { this._clickCount = 0; } this._lastMouseDownTime = currentTime; this._clickCount++; // TODO: Invalidate click count if the position is different } /** * Handles the mousemove event when the mouse button is down, recording the * end of the selection and refreshing the selection. * @param event The mousemove event. */ private _onMouseMove(event: MouseEvent) { this._model.selectionEnd = this._getMouseBufferCoords(event); // TODO: Perhaps the actual selection setting could be merged into _dragScroll? this._dragScrollAmount = this._getMouseEventScrollAmount(event); // If the cursor was above or below the viewport, make sure it's at the // start or end of the viewport respectively if (this._dragScrollAmount > 0) { this._model.selectionEnd[0] = this._terminal.cols - 1; } else if (this._dragScrollAmount < 0) { this._model.selectionEnd[0] = 0; } // TODO: Only draw here if the selection changes this.refresh(); console.log('start: ', this._model.selectionStart); console.log('start final: ', this._model.finalSelectionStart); console.log('end: ', this._model.selectionEnd); console.log('end final: ', this._model.finalSelectionEnd); } private _dragScroll() { if (this._dragScrollAmount) { this._terminal.scrollDisp(this._dragScrollAmount, false); // Re-evaluate selection if (this._dragScrollAmount > 0) { this._model.selectionEnd = [this._terminal.cols - 1, this._terminal.ydisp + this._terminal.rows]; } else { this._model.selectionEnd = [0, this._terminal.ydisp]; } this.refresh(); } } /** * Handles the mouseup event, removing the mousemove listener when * appropriate. * @param event The mouseup event. */ private _onMouseUp(event: MouseEvent) { this._dragScrollAmount = 0; if (!this._model.selectionStart) { return; } this._rowContainer.ownerDocument.removeEventListener('mousemove', this._mouseMoveListener); this._rowContainer.ownerDocument.removeEventListener('mouseup', this._mouseUpListener); } /** * Selects the word at the coordinates specified. Words are defined as all * non-whitespace characters. * @param coords The coordinates to get the word at. */ private _selectWordAt(coords: [number, number]): void { // TODO: Handle double click and drag in both directions! const line = this._translateBufferLineToString(this._buffer.get(coords[1])); // Expand the string in both directions until a space is hit let startCol = coords[0]; let endCol = coords[0]; while (startCol > 0 && line.charAt(startCol - 1) !== ' ') { startCol--; } while (endCol < line.length && line.charAt(endCol) !== ' ') { endCol++; } this._model.selectionStart = [startCol, coords[1]]; this._model.selectionStartLength = endCol - startCol; } private _selectLineAt(line: number): void { this._model.selectionStart = [0, line]; this._model.selectionStartLength = this._terminal.cols; } }