From a91380a76fdff71122ed7b25883a40f5fae9d0ca Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Thu, 31 Aug 2017 17:13:15 -0700 Subject: [PATCH] Pull common parts into BaseRenderLayer --- src/renderer/BackgroundRenderLayer.ts | 18 +++++------------- src/renderer/BaseRenderLayer.ts | 23 +++++++++++++++++++++++ src/renderer/CursorRenderLayer.ts | 20 ++++---------------- src/renderer/ForegroundRenderLayer.ts | 18 +++++------------- src/renderer/Renderer.ts | 8 ++++---- src/renderer/SelectionRenderLayer.ts | 20 ++++---------------- src/xterm.css | 4 ++-- 7 files changed, 47 insertions(+), 64 deletions(-) create mode 100644 src/renderer/BaseRenderLayer.ts diff --git a/src/renderer/BackgroundRenderLayer.ts b/src/renderer/BackgroundRenderLayer.ts index d63a561f..a9722eab 100644 --- a/src/renderer/BackgroundRenderLayer.ts +++ b/src/renderer/BackgroundRenderLayer.ts @@ -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; - 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(); } 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); } diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts new file mode 100644 index 00000000..6d493960 --- /dev/null +++ b/src/renderer/BaseRenderLayer.ts @@ -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`; + } +} diff --git a/src/renderer/CursorRenderLayer.ts b/src/renderer/CursorRenderLayer.ts index d9a21d15..11496610 100644 --- a/src/renderer/CursorRenderLayer.ts +++ b/src/renderer/CursorRenderLayer.ts @@ -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 diff --git a/src/renderer/ForegroundRenderLayer.ts b/src/renderer/ForegroundRenderLayer.ts index db23a041..a073f69d 100644 --- a/src/renderer/ForegroundRenderLayer.ts +++ b/src/renderer/ForegroundRenderLayer.ts @@ -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; 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(); } 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; diff --git a/src/renderer/Renderer.ts b/src/renderer/Renderer.ts index b340afba..522f7af2 100644 --- a/src/renderer/Renderer.ts +++ b/src/renderer/Renderer.ts @@ -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) ]; } diff --git a/src/renderer/SelectionRenderLayer.ts b/src/renderer/SelectionRenderLayer.ts index 091788f9..048be8e4 100644 --- a/src/renderer/SelectionRenderLayer.ts +++ b/src/renderer/SelectionRenderLayer.ts @@ -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; diff --git a/src/xterm.css b/src/xterm.css index 6b044217..f281e527 100644 --- a/src/xterm.css +++ b/src/xterm.css @@ -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;