From 9323833fccc85508f10f32892b338300dab7f517 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Thu, 31 Aug 2017 22:48:08 -0700 Subject: [PATCH] Move scaledCharWidth/Height into base render layer --- src/renderer/BackgroundRenderLayer.ts | 7 ++----- src/renderer/BaseRenderLayer.ts | 4 ++++ src/renderer/CursorRenderLayer.ts | 22 ++++++++-------------- src/renderer/ForegroundRenderLayer.ts | 7 ++----- src/renderer/SelectionRenderLayer.ts | 9 +++------ 5 files changed, 19 insertions(+), 30 deletions(-) diff --git a/src/renderer/BackgroundRenderLayer.ts b/src/renderer/BackgroundRenderLayer.ts index 37b9c69e..1e8169d7 100644 --- a/src/renderer/BackgroundRenderLayer.ts +++ b/src/renderer/BackgroundRenderLayer.ts @@ -25,9 +25,6 @@ export class BackgroundRenderLayer extends BaseRenderLayer implements IDataRende } public render(terminal: ITerminal, startRow: number, endRow: number): void { - const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; - const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; - for (let y = startRow; y <= endRow; y++) { let row = y + terminal.buffer.ydisp; let line = terminal.buffer.lines.get(row); @@ -51,11 +48,11 @@ export class BackgroundRenderLayer extends BaseRenderLayer implements IDataRende if (bg < 256) { this._ctx.save(); this._ctx.fillStyle = COLORS[bg]; - this._ctx.fillRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight); + this._ctx.fillRect(x * this.scaledCharWidth, y * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight); this._ctx.restore(); this._state.cache[x][y] = bg; } else { - this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight); + this._ctx.clearRect(x * this.scaledCharWidth, y * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight); this._state.cache[x][y] = null; } } diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts index 419b814c..7790e034 100644 --- a/src/renderer/BaseRenderLayer.ts +++ b/src/renderer/BaseRenderLayer.ts @@ -5,6 +5,8 @@ import { COLORS } from './Color'; export abstract class BaseRenderLayer implements IRenderLayer { protected _canvas: HTMLCanvasElement; protected _ctx: CanvasRenderingContext2D; + protected scaledCharWidth: number; + protected scaledCharHeight: number; // TODO: This will apply to all terminals, should it be per-terminal? protected static _charAtlas: ImageBitmap; @@ -26,6 +28,8 @@ export abstract class BaseRenderLayer implements IRenderLayer { } public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void { + this.scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; + this.scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; this._canvas.width = canvasWidth * window.devicePixelRatio; this._canvas.height = canvasHeight * window.devicePixelRatio; this._canvas.style.width = `${canvasWidth}px`; diff --git a/src/renderer/CursorRenderLayer.ts b/src/renderer/CursorRenderLayer.ts index c18bb130..bb0ff928 100644 --- a/src/renderer/CursorRenderLayer.ts +++ b/src/renderer/CursorRenderLayer.ts @@ -15,21 +15,15 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay } public clear(terminal: ITerminal): void { - const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; - const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; - this._clearCursor(scaledCharWidth, scaledCharHeight); + this._clearCursor(); } public render(terminal: ITerminal, startRow: number, endRow: number): void { // TODO: Track blur/focus somehow, support unfocused cursor - // TODO: scaledCharWidth should probably be on Base as a per-terminal thing - const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; - const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; - // Don't draw the cursor if it's hidden if (!terminal.cursorState || terminal.cursorHidden) { - this._clearCursor(scaledCharWidth, scaledCharHeight); + this._clearCursor(); return; } @@ -38,7 +32,7 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay // Don't draw the cursor if it's off-screen if (viewportRelativeCursorY < 0 || viewportRelativeCursorY >= terminal.rows) { - this._clearCursor(scaledCharWidth, scaledCharHeight); + this._clearCursor(); return; } @@ -47,23 +41,23 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay if (this._state[0] === terminal.buffer.x && this._state[1] === viewportRelativeCursorY) { return; } - this._clearCursor(scaledCharWidth, scaledCharHeight); + this._clearCursor(); } this._ctx.save(); this._ctx.fillStyle = COLORS[COLOR_CODES.WHITE]; - this._ctx.fillRect(terminal.buffer.x * scaledCharWidth, viewportRelativeCursorY * scaledCharHeight, scaledCharWidth, scaledCharHeight); + this._ctx.fillRect(terminal.buffer.x * this.scaledCharWidth, viewportRelativeCursorY * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight); this._ctx.restore(); const charData = terminal.buffer.lines.get(cursorY)[terminal.buffer.x]; - this.drawChar(terminal, charData[CHAR_DATA_CHAR_INDEX], charData[CHAR_DATA_CODE_INDEX], COLOR_CODES.BLACK, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight); + this.drawChar(terminal, charData[CHAR_DATA_CHAR_INDEX], charData[CHAR_DATA_CODE_INDEX], COLOR_CODES.BLACK, terminal.buffer.x, viewportRelativeCursorY, this.scaledCharWidth, this.scaledCharHeight); this._state = [terminal.buffer.x, viewportRelativeCursorY]; } - private _clearCursor(scaledCharWidth: number, scaledCharHeight: number): void { + private _clearCursor(): void { if (this._state) { - this._ctx.clearRect(this._state[0] * scaledCharWidth, this._state[1] * scaledCharHeight, scaledCharWidth, scaledCharHeight); + this._ctx.clearRect(this._state[0] * this.scaledCharWidth, this._state[1] * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight); this._state = null; } } diff --git a/src/renderer/ForegroundRenderLayer.ts b/src/renderer/ForegroundRenderLayer.ts index 3cd7ae1e..68d00857 100644 --- a/src/renderer/ForegroundRenderLayer.ts +++ b/src/renderer/ForegroundRenderLayer.ts @@ -26,9 +26,6 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende } public render(terminal: ITerminal, startRow: number, endRow: number): void { - const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; - const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; - // TODO: Ensure that the render is eventually performed // Don't bother render until the atlas bitmap is ready // TODO: Move this to BaseRenderLayer? @@ -56,7 +53,7 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende this._state.cache[x][y] = charData; // Clear the old character - this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight); + this._ctx.clearRect(x * this.scaledCharWidth, y * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight); // Skip rendering if the character is invisible if (!code || code === 32 /*' '*/) { @@ -83,7 +80,7 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende } } - this.drawChar(terminal, char, code, fg, x, y, scaledCharWidth, scaledCharHeight); + this.drawChar(terminal, char, code, fg, x, y, this.scaledCharWidth, this.scaledCharHeight); } } } diff --git a/src/renderer/SelectionRenderLayer.ts b/src/renderer/SelectionRenderLayer.ts index a2cfb1d6..602bb486 100644 --- a/src/renderer/SelectionRenderLayer.ts +++ b/src/renderer/SelectionRenderLayer.ts @@ -27,9 +27,6 @@ export class SelectionRenderLayer extends BaseRenderLayer implements ISelectionR } 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; - // Selection has not changed if (this._state.start === start || this._state.end === end) { return; @@ -58,17 +55,17 @@ export class SelectionRenderLayer extends BaseRenderLayer implements ISelectionR const startCol = viewportStartRow === viewportCappedStartRow ? start[0] : 0; 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); + this._ctx.fillRect(startCol * this.scaledCharWidth, viewportCappedStartRow * this.scaledCharHeight, (startRowEndCol - startCol) * this.scaledCharWidth, this.scaledCharHeight); // Draw middle rows const middleRowsCount = Math.max(viewportCappedEndRow - viewportCappedStartRow - 1, 0); - this._ctx.fillRect(0, (viewportCappedStartRow + 1) * scaledCharHeight, terminal.cols * scaledCharWidth, middleRowsCount * scaledCharHeight); + this._ctx.fillRect(0, (viewportCappedStartRow + 1) * this.scaledCharHeight, terminal.cols * this.scaledCharWidth, middleRowsCount * this.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); + this._ctx.fillRect(0, viewportCappedEndRow * this.scaledCharHeight, endCol * this.scaledCharWidth, this.scaledCharHeight); } // Save state for next render