waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Support selection

Browse Source
This commit is contained in:
Daniel Imms
2017-08-31 00:09:23 -07:00
parent 5953bbab42
commit 3d1bb2c60f
8 changed files with 59 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/SelectionManager.ts
+2 -3
View File
@@ -116,8 +116,6 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
this._mouseMoveListener = event => this._onMouseMove(<MouseEvent>event);
this._mouseUpListener = event => this._onMouseUp(<MouseEvent>event);
this._rowContainer.addEventListener('mousedown', event => this._onMouseDown(<MouseEvent>event));
// Only adjust the selection on trim, shiftElements is rarely used (only in
// reverseIndex) and delete in a splice is only ever used when the same
// number of elements was just added. Given this is could actually be
@@ -312,7 +310,8 @@ export class SelectionManager extends EventEmitter implements ISelectionManager
* Handles te mousedown event, setting up for a new selection.
* @param event The mousedown event.
*/
private _onMouseDown(event: MouseEvent): void {
public onMouseDown(event: MouseEvent): void {
console.log('mousedown selectionmanager');
// If we have selection, we want the context menu on right click even if the
// terminal is in mouse mode.
if (event.button === 2 && this.hasSelection) {
src/Terminal.ts
+3 -3
View File
@@ -751,10 +751,10 @@ export class Terminal extends EventEmitter implements ITerminal, IInputHandlingT
this.renderer = new Renderer(this);
this.on('resize', () => this.renderer.onResize(this.cols, this.rows));
this.charMeasure.on('charsizechanged', () => this.renderer.onCharSizeChanged(this.charMeasure.width, this.charMeasure.height));
this.selectionManager = new SelectionManager(this, this.buffer, this.rowContainer, this.charMeasure);
// this.selectionManager.on('refresh', data => {
// this.renderer.refreshSelection(data.start, data.end);
// });
this.element.addEventListener('mousedown', (e: MouseEvent) => this.selectionManager.onMouseDown(e));
this.selectionManager.on('refresh', data => this.renderer.onSelectionChanged(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
src/renderer/BackgroundRenderLayer.ts
+2 -2
View File
@@ -1,11 +1,11 @@
import { IRenderLayer } from './Interfaces';
import { IDataRenderLayer } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { TANGO_COLORS } from './Color';
import { GridCache } from './GridCache';
import { FLAGS } from './Types';
export class BackgroundRenderLayer implements IRenderLayer {
export class BackgroundRenderLayer implements IDataRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
private _state: GridCache<number>;
src/renderer/ForegroundRenderLayer.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { IRenderLayer } from './Interfaces';
import { IDataRenderLayer } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../Buffer';
import { TANGO_COLORS } from './Color';
@@ -6,7 +6,7 @@ import { FLAGS } from './Types';
import { GridCache } from './GridCache';
import { CharData } from '../Types';
export class ForegroundRenderLayer implements IRenderLayer {
export class ForegroundRenderLayer implements IDataRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
private _charAtlas: ImageBitmap;
src/renderer/Interfaces.ts
+7
View File
@@ -2,5 +2,12 @@ import { ITerminal } from '../Interfaces';
export interface IRenderLayer {
resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void;
}
export interface IDataRenderLayer extends IRenderLayer {
render(terminal: ITerminal, startRow: number, endRow: number): void;
}
export interface ISelectionRenderLayer extends IRenderLayer {
render(terminal: ITerminal, start: [number, number], end: [number, number]): void;
}
src/renderer/Renderer.ts
+23 -9
View File
@@ -6,37 +6,51 @@ import { ITerminal } from '../Interfaces';
import { DomElementObjectPool } from '../utils/DomElementObjectPool';
import { CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CHAR_INDEX } from '../Buffer';
import { createBackgroundFillData } from './Canvas';
import { IRenderLayer } from './Interfaces';
import { IDataRenderLayer, ISelectionRenderLayer } from './Interfaces';
import { BackgroundRenderLayer } from './BackgroundRenderLayer';
import { ForegroundRenderLayer } from './ForegroundRenderLayer';
import { SelectionRenderLayer } from './SelectionRenderLayer';
export class Renderer {
/** A queue of the rows to be refreshed */
private _refreshRowsQueue: {start: number, end: number}[] = [];
private _refreshAnimationFrame = null;
private _renderLayers: IRenderLayer[];
private _dataRenderLayers: IDataRenderLayer[];
private _selectionRenderLayers: ISelectionRenderLayer[];
constructor(private _terminal: ITerminal) {
this._renderLayers = [
this._dataRenderLayers = [
new BackgroundRenderLayer(this._terminal.element),
new ForegroundRenderLayer(this._terminal.element)
];
this._selectionRenderLayers = [
new SelectionRenderLayer(this._terminal.element)
];
}
public onResize(cols: number, rows: number): void {
const width = Math.ceil(this._terminal.charMeasure.width) * this._terminal.cols;
const height = Math.ceil(this._terminal.charMeasure.height) * this._terminal.rows;
for (let i = 0; i < this._renderLayers.length; i++) {
this._renderLayers[i].resize(this._terminal, width, height, false);
for (let i = 0; i < this._dataRenderLayers.length; i++) {
this._dataRenderLayers[i].resize(this._terminal, width, height, false);
}
}
public onCharSizeChanged(charWidth: number, charHeight: number): void {
const width = Math.ceil(charWidth) * this._terminal.cols;
const height = Math.ceil(charHeight) * this._terminal.rows;
for (let i = 0; i < this._renderLayers.length; i++) {
this._renderLayers[i].resize(this._terminal, width, height, true);
for (let i = 0; i < this._dataRenderLayers.length; i++) {
this._dataRenderLayers[i].resize(this._terminal, width, height, true);
}
for (let i = 0; i < this._selectionRenderLayers.length; i++) {
this._selectionRenderLayers[i].resize(this._terminal, width, height, true);
}
}
public onSelectionChanged(start: [number, number], end: [number, number]): void {
for (let i = 0; i < this._selectionRenderLayers.length; i++) {
this._selectionRenderLayers[i].render(this._terminal, start, end);
}
}
@@ -81,8 +95,8 @@ export class Renderer {
this._refreshAnimationFrame = null;
// Render
for (let i = 0; i < this._renderLayers.length; i++) {
this._renderLayers[i].render(this._terminal, start, end);
for (let i = 0; i < this._dataRenderLayers.length; i++) {
this._dataRenderLayers[i].render(this._terminal, start, end);
}
this._terminal.emit('refresh', {start, end});
}
src/renderer/SelectionRenderLayer.ts
+17 -23
View File
@@ -1,21 +1,20 @@
import { IRenderLayer } from './Interfaces';
import { ISelectionRenderLayer } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { TANGO_COLORS } from './Color';
import { GridCache } from './GridCache';
import { FLAGS } from './Types';
export class BackgroundRenderLayer implements IRenderLayer {
export class SelectionRenderLayer implements ISelectionRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
private _state: {start: [number, number], end: [number, number]};
constructor(container: HTMLElement) {
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-bg-layer');
this._canvas.classList.add('xterm-selection-layer');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
this._ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
container.appendChild(this._canvas);
this._state = {
start: null,
@@ -30,15 +29,10 @@ export class BackgroundRenderLayer implements IRenderLayer {
this._canvas.style.height = `${canvasHeight}px`;
}
public render(terminal: ITerminal, startRow: number, endRow: number): void {
public render(terminal: ITerminal, start: [number, number], end: [number, number]): void {
const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio;
const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio;
const start = terminal.selectionManager.selectionStart;
const end = terminal.selectionManager.selectionEnd;
// TODO: Need to redraw selection if the viewport has moved
// Selection has not changed
if (this._state.start === start || this._state.end === end) {
return;
@@ -63,21 +57,21 @@ export class BackgroundRenderLayer implements IRenderLayer {
return;
}
// Create the selections
// Draw first row
const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0;
const endCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : terminal.cols;
this._ctx.fillRect(startCol * scaledCharWidth, viewportCappedStartRow * scaledCharHeight, (endCol - startCol) * scaledCharWidth, scaledCharHeight);
// documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow, startCol, endCol));
const startRowEndCol = viewportCappedStartRow === viewportCappedEndRow ? end[0] : terminal.cols;
this._ctx.fillStyle = 'rgba(255,255,255,0.3)';
this._ctx.fillRect(startCol * scaledCharWidth, viewportCappedStartRow * scaledCharHeight, (startRowEndCol - startCol) * scaledCharWidth, scaledCharHeight);
// Draw middle rows
// const middleRowsCount = viewportCappedEndRow - viewportCappedStartRow - 1;
// documentFragment.appendChild(this._createSelectionElement(viewportCappedStartRow + 1, 0, this._terminal.cols, middleRowsCount));
// // 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);
const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0);
this._ctx.fillRect(0, (viewportCappedStartRow + 1) * scaledCharHeight, terminal.cols * scaledCharWidth, middleRowsCount * scaledCharHeight);
// Draw final row
if (viewportCappedStartRow !== viewportCappedEndRow) {
// Only draw viewportEndRow if it's not the same as viewporttartRow
const endCol = viewportEndRow === viewportCappedEndRow ? end[0] : terminal.cols;
this._ctx.fillRect(0, viewportCappedEndRow * scaledCharHeight, endCol * scaledCharWidth, scaledCharHeight);
}
}
}
src/xterm.css
+3 -7
View File
@@ -164,13 +164,9 @@
top: 0;
}
.terminal .xterm-bg-layer {
z-index: 0;
}
.terminal .xterm-fg-layer {
z-index: 1;
}
.terminal .xterm-bg-layer { z-index: 0; }
.terminal .xterm-fg-layer { z-index: 1; }
.terminal .xterm-selection-layer { z-index: 2; }
.terminal .xterm-rows {
position: absolute;