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

Pull common parts into BaseRenderLayer

Browse Source
This commit is contained in:
Daniel Imms
2017-08-31 17:13:15 -07:00
parent fd18f7cba7
commit a91380a76f
7 changed files with 47 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BackgroundRenderLayer.ts
+5 -13
View File
@@ -4,26 +4,18 @@ import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { COLORS } from './Color';
import { GridCache } from './GridCache';
import { FLAGS } from './Types';
import { BaseRenderLayer } from './BaseRenderLayer';
export class BackgroundRenderLayer implements IDataRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
export class BackgroundRenderLayer extends BaseRenderLayer implements IDataRenderLayer {
private _state: GridCache<number>;
constructor(container: HTMLElement) {
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-bg-layer');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
constructor(container: HTMLElement, zIndex: number) {
super(container, 'bg', zIndex);
this._state = new GridCache<number>();
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
this._state.resize(terminal.cols, terminal.rows);
}
src/renderer/BaseRenderLayer.ts
+23
View File
@@ -0,0 +1,23 @@
import { IRenderLayer } from './Interfaces';
import { ITerminal } from '../Interfaces';
export abstract class BaseRenderLayer implements IRenderLayer {
protected _canvas: HTMLCanvasElement;
protected _ctx: CanvasRenderingContext2D;
constructor(container: HTMLElement, id: string, zIndex: number) {
this._canvas = document.createElement('canvas');
this._canvas.id = `xterm-${id}-layer`;
this._canvas.style.zIndex = zIndex.toString();
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
}
}
src/renderer/CursorRenderLayer.ts
+4 -16
View File
@@ -4,28 +4,16 @@ import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { COLORS } from './Color';
import { GridCache } from './GridCache';
import { FLAGS } from './Types';
import { BaseRenderLayer } from './BaseRenderLayer';
export class CursorRenderLayer implements IDataRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLayer {
private _state: [number, number];
constructor(container: HTMLElement) {
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-cursor-layer');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
constructor(container: HTMLElement, zIndex: number) {
super(container, 'cursor', zIndex);
this._state = null;
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
}
public render(terminal: ITerminal, startRow: number, endRow: number): void {
// TODO: Track blur/focus somehow, support unfocused cursor
src/renderer/ForegroundRenderLayer.ts
+5 -13
View File
@@ -5,30 +5,22 @@ import { COLORS } from './Color';
import { FLAGS } from './Types';
import { GridCache } from './GridCache';
import { CharData } from '../Types';
import { BaseRenderLayer } from './BaseRenderLayer';
export class ForegroundRenderLayer implements IDataRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRenderLayer {
private _charAtlas: ImageBitmap;
private _state: GridCache<CharData>;
private _charAtlasGenerator: CharAtlasGenerator;
constructor(container: HTMLElement) {
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-fg-layer');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
constructor(container: HTMLElement, zIndex: number) {
super(container, 'fg', zIndex);
this._charAtlasGenerator = new CharAtlasGenerator();
this._state = new GridCache<CharData>();
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
this._state.resize(terminal.cols, terminal.rows);
if (charSizeChanged) {
this._charAtlas = null;
src/renderer/Renderer.ts
+4 -4
View File
@@ -22,12 +22,12 @@ export class Renderer {
constructor(private _terminal: ITerminal) {
this._dataRenderLayers = [
new BackgroundRenderLayer(this._terminal.element),
new ForegroundRenderLayer(this._terminal.element),
new CursorRenderLayer(this._terminal.element)
new BackgroundRenderLayer(this._terminal.element, 0),
new ForegroundRenderLayer(this._terminal.element, 2),
new CursorRenderLayer(this._terminal.element, 3)
];
this._selectionRenderLayers = [
new SelectionRenderLayer(this._terminal.element)
new SelectionRenderLayer(this._terminal.element, 1)
];
}
src/renderer/SelectionRenderLayer.ts
+4 -16
View File
@@ -3,31 +3,19 @@ import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { GridCache } from './GridCache';
import { FLAGS } from './Types';
import { BaseRenderLayer } from './BaseRenderLayer';
export class SelectionRenderLayer implements ISelectionRenderLayer {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
export class SelectionRenderLayer extends BaseRenderLayer implements ISelectionRenderLayer {
private _state: {start: [number, number], end: [number, number]};
constructor(container: HTMLElement) {
this._canvas = document.createElement('canvas');
this._canvas.classList.add('xterm-selection-layer');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
constructor(container: HTMLElement, zIndex: number) {
super(container, 'selection', zIndex);
this._state = {
start: null,
end: null
};
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
}
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;
src/xterm.css
+2 -2
View File
@@ -164,10 +164,10 @@
top: 0;
}
.terminal .xterm-bg-layer { z-index: 0; }
/* .terminal .xterm-bg-layer { z-index: 0; }
.terminal .xterm-selection-layer { z-index: 1; }
.terminal .xterm-fg-layer { z-index: 2; }
.terminal .xterm-cursor-layer { z-index: 3; }
.terminal .xterm-cursor-layer { z-index: 3; } */
.terminal .xterm-rows {
position: absolute;