From 8811d96a8b8d79db4b31bcf2b2d5c428f47d3d50 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Mon, 19 Jun 2017 15:45:18 -0700 Subject: [PATCH 1/5] Fix selection going to clipboard Part of #699 --- src/SelectionManager.ts | 17 +++++++++++++++-- src/xterm.js | 9 ++++++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index a769afd1..63720b86 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -293,10 +293,23 @@ export class SelectionManager extends EventEmitter { /** * Queues a refresh, redrawing the selection on the next opportunity. */ - public refresh(): void { + public refresh(fromMouseEvent?: boolean): void { + // Queue the refresh for the renderer if (!this._refreshAnimationFrame) { this._refreshAnimationFrame = window.requestAnimationFrame(() => this._refresh()); } + + // If the refresh comes from a mouse event then emit a newselection event + if (!fromMouseEvent) { + return; + } + // TODO: Only do this when the selection has actually changed + // TODO: Ensure we're not doing more work than absolutely necessary, particularly for large selections + // TODO: Only do this on Linux + const selectionText = this.selectionText; + if (selectionText.length) { + this.emit('newselection', this.selectionText); + } } /** @@ -392,7 +405,7 @@ export class SelectionManager extends EventEmitter { } this._addMouseDownListeners(); - this.refresh(); + this.refresh(true); } /** diff --git a/src/xterm.js b/src/xterm.js index 0abcbeae..fcd42376 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -703,7 +703,14 @@ Terminal.prototype.open = function(parent, focus) { this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure); this.renderer = new Renderer(this); this.selectionManager = new SelectionManager(this, this.lines, this.rowContainer, this.charMeasure); - this.selectionManager.on('refresh', data => this.renderer.refreshSelection(data.start, data.end)); + this.selectionManager.on('refresh', data => { + this.renderer.refreshSelection(data.start, data.end); + }); + this.selectionManager.on('newselection', text => { + this.textarea.value = text; + this.textarea.focus(); + this.textarea.select(); + }); this.on('scroll', () => this.selectionManager.refresh()); this.viewportElement.addEventListener('scroll', () => this.selectionManager.refresh()); From dc165175cfcff9bfb17e5133aed05869c6f80eb6 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 20 Jun 2017 10:18:29 -0700 Subject: [PATCH 2/5] Handle middle click to paste selection This appears to work in Chrome but not Firefox --- src/SelectionManager.ts | 22 ++++++++++------------ src/handlers/Clipboard.ts | 2 +- src/utils/Browser.ts | 1 + src/xterm.js | 20 +++++++++++++++++--- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 63720b86..8c05cd7c 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -2,10 +2,11 @@ * @license MIT */ +import * as Mouse from './utils/Mouse'; +import * as Browser from './utils/Browser'; 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'; @@ -299,16 +300,13 @@ export class SelectionManager extends EventEmitter { this._refreshAnimationFrame = window.requestAnimationFrame(() => this._refresh()); } - // If the refresh comes from a mouse event then emit a newselection event - if (!fromMouseEvent) { - return; - } - // TODO: Only do this when the selection has actually changed - // TODO: Ensure we're not doing more work than absolutely necessary, particularly for large selections - // TODO: Only do this on Linux - const selectionText = this.selectionText; - if (selectionText.length) { - this.emit('newselection', this.selectionText); + // If the platform is Linux and the refresh call comes from a mouse event, + // we need to update the selection for middle click to paste selection. + if (Browser.isLinux && fromMouseEvent) { + const selectionText = this.selectionText; + if (selectionText.length) { + this.emit('newselection', this.selectionText); + } } } @@ -560,7 +558,7 @@ export class SelectionManager extends EventEmitter { if (!previousSelectionEnd || previousSelectionEnd[0] !== this._model.selectionEnd[0] || previousSelectionEnd[1] !== this._model.selectionEnd[1]) { - this.refresh(); + this.refresh(true); } } diff --git a/src/handlers/Clipboard.ts b/src/handlers/Clipboard.ts index f22523fd..95945088 100644 --- a/src/handlers/Clipboard.ts +++ b/src/handlers/Clipboard.ts @@ -80,7 +80,7 @@ export function pasteHandler(ev: ClipboardEvent, term: ITerminal) { * @param term The terminal on which to apply the handled paste event * @param selectionManager The terminal's selection manager. */ -export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager) { +export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager) { // Bring textarea at the cursor position textarea.style.position = 'fixed'; textarea.style.width = '20px'; diff --git a/src/utils/Browser.ts b/src/utils/Browser.ts index 04da698e..68148aeb 100644 --- a/src/utils/Browser.ts +++ b/src/utils/Browser.ts @@ -20,3 +20,4 @@ export const isMac = contains(['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], pla export const isIpad = platform === 'iPad'; export const isIphone = platform === 'iPhone'; export const isMSWindows = contains(['Windows', 'Win16', 'Win32', 'WinCE'], platform); +export const isLinux = platform.indexOf('Linux') >= 0; diff --git a/src/xterm.js b/src/xterm.js index fcd42376..1bcb45d0 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -13,7 +13,7 @@ import { CompositionHelper } from './CompositionHelper'; import { EventEmitter } from './EventEmitter'; import { Viewport } from './Viewport'; -import { rightClickHandler, pasteHandler, copyHandler } from './handlers/Clipboard'; +import { moveTextAreaUnderMouseCursor, pasteHandler, copyHandler } from './handlers/Clipboard'; import { CircularList } from './utils/CircularList'; import { C0 } from './EscapeSequences'; import { InputHandler } from './InputHandler'; @@ -537,15 +537,29 @@ Terminal.prototype.initGlobal = function() { on(this.textarea, 'paste', pasteHandlerWrapper); on(this.element, 'paste', pasteHandlerWrapper); + // Handle right click context menus if (term.browser.isFirefox) { on(this.element, 'mousedown', event => { if (ev.button == 2) { - rightClickHandler(event, this.textarea, this.selectionManager); + moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); } }); } else { on(this.element, 'contextmenu', event => { - rightClickHandler(event, this.textarea, this.selectionManager); + moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); + }); + } + + // Move the textarea under the cursor when middle clicking on Linux to ensure + // middle click to paste selection works. This only appears to work in Chrome + // at the time is writing. + if (term.browser.isLinux) { + // Use auxclick event over mousedown the latter doesn't seem to work. Note + // that the regular click event doesn't fire for the middle mouse button. + on(this.element, 'click', event => { + if (event.button === 1) { + moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); + } }); } }; From 6f5f68df1a15e958e97735daba66f72aab4a72fd Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 20 Jun 2017 10:24:16 -0700 Subject: [PATCH 3/5] Add a comment --- src/xterm.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/xterm.js b/src/xterm.js index 1bcb45d0..4236d4f8 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -721,6 +721,9 @@ Terminal.prototype.open = function(parent, focus) { this.renderer.refreshSelection(data.start, data.end); }); this.selectionManager.on('newselection', text => { + // If there's a new selection, put it into the textarea, focus and select it + // in order to register it as a selection on the OS. This event is fired + // only on Linux to enable middle click to paste selection. this.textarea.value = text; this.textarea.focus(); this.textarea.select(); From ef1e2ab9e23e3286772c52b638b20ae8889f3cd1 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 20 Jun 2017 10:49:58 -0700 Subject: [PATCH 4/5] Use auxclick event --- src/xterm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/xterm.js b/src/xterm.js index 4236d4f8..efcdd524 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -556,7 +556,7 @@ Terminal.prototype.initGlobal = function() { if (term.browser.isLinux) { // Use auxclick event over mousedown the latter doesn't seem to work. Note // that the regular click event doesn't fire for the middle mouse button. - on(this.element, 'click', event => { + on(this.element, 'auxclick', event => { if (event.button === 1) { moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); } From 63d63c27e74a1302f6b09d6a667d6ddb946867f7 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 20 Jun 2017 11:17:12 -0700 Subject: [PATCH 5/5] Ensure outside selection pastes are respected We were resetting the selection on every auxclick, meaning outside selections could not be pasted in when the terminal had a current selection. --- src/SelectionManager.ts | 6 ++++-- src/handlers/Clipboard.ts | 26 ++++++++++++++++++-------- src/xterm.js | 6 +++--- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/SelectionManager.ts b/src/SelectionManager.ts index 8c05cd7c..3138048a 100644 --- a/src/SelectionManager.ts +++ b/src/SelectionManager.ts @@ -293,8 +293,10 @@ export class SelectionManager extends EventEmitter { /** * Queues a refresh, redrawing the selection on the next opportunity. + * @param isNewSelection Whether the selection should be registered as a new + * selection on Linux. */ - public refresh(fromMouseEvent?: boolean): void { + public refresh(isNewSelection?: boolean): void { // Queue the refresh for the renderer if (!this._refreshAnimationFrame) { this._refreshAnimationFrame = window.requestAnimationFrame(() => this._refresh()); @@ -302,7 +304,7 @@ export class SelectionManager extends EventEmitter { // If the platform is Linux and the refresh call comes from a mouse event, // we need to update the selection for middle click to paste selection. - if (Browser.isLinux && fromMouseEvent) { + if (Browser.isLinux && isNewSelection) { const selectionText = this.selectionText; if (selectionText.length) { this.emit('newselection', this.selectionText); diff --git a/src/handlers/Clipboard.ts b/src/handlers/Clipboard.ts index 95945088..aa1c1400 100644 --- a/src/handlers/Clipboard.ts +++ b/src/handlers/Clipboard.ts @@ -75,12 +75,11 @@ export function pasteHandler(ev: ClipboardEvent, term: ITerminal) { } /** - * Bind to right-click event and allow right-click copy and paste. - * @param ev The original right click event to be handled - * @param term The terminal on which to apply the handled paste event - * @param selectionManager The terminal's selection manager. + * Moves the textarea under the mouse cursor and focuses it. + * @param ev The original right click event to be handled. + * @param textarea The terminal's textarea. */ -export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager) { +export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextAreaElement) { // Bring textarea at the cursor position textarea.style.position = 'fixed'; textarea.style.width = '20px'; @@ -89,10 +88,7 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA textarea.style.top = (ev.clientY - 10) + 'px'; textarea.style.zIndex = '1000'; - // Get textarea ready to copy from the context menu - textarea.value = selectionManager.selectionText; textarea.focus(); - textarea.select(); // Reset the terminal textarea's styling setTimeout(function () { @@ -104,3 +100,17 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA textarea.style.zIndex = null; }, 4); } + +/** + * Bind to right-click event and allow right-click copy and paste. + * @param ev The original right click event to be handled. + * @param textarea The terminal's textarea. + * @param selectionManager The terminal's selection manager. + */ +export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, selectionManager: ISelectionManager) { + moveTextAreaUnderMouseCursor(ev, textarea); + + // Get textarea ready to copy from the context menu + textarea.value = selectionManager.selectionText; + textarea.select(); +} diff --git a/src/xterm.js b/src/xterm.js index efcdd524..478c6856 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -13,7 +13,7 @@ import { CompositionHelper } from './CompositionHelper'; import { EventEmitter } from './EventEmitter'; import { Viewport } from './Viewport'; -import { moveTextAreaUnderMouseCursor, pasteHandler, copyHandler } from './handlers/Clipboard'; +import { rightClickHandler, moveTextAreaUnderMouseCursor, pasteHandler, copyHandler } from './handlers/Clipboard'; import { CircularList } from './utils/CircularList'; import { C0 } from './EscapeSequences'; import { InputHandler } from './InputHandler'; @@ -541,12 +541,12 @@ Terminal.prototype.initGlobal = function() { if (term.browser.isFirefox) { on(this.element, 'mousedown', event => { if (ev.button == 2) { - moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); + rightClickHandler(event, this.textarea, this.selectionManager); } }); } else { on(this.element, 'contextmenu', event => { - moveTextAreaUnderMouseCursor(event, this.textarea, this.selectionManager); + rightClickHandler(event, this.textarea, this.selectionManager); }); }