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

Move scaledCharWidth/Height into base render layer

Browse Source
This commit is contained in:
Daniel Imms
2017-08-31 22:48:08 -07:00
parent 6588e9e01b
commit 9323833fcc
5 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BackgroundRenderLayer.ts
+2 -5
View File
@@ -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;
}
}
src/renderer/BaseRenderLayer.ts
+4
View File
@@ -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`;
src/renderer/CursorRenderLayer.ts
+8 -14
View File
@@ -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], <number>charData[CHAR_DATA_CODE_INDEX], COLOR_CODES.BLACK, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight);
this.drawChar(terminal, charData[CHAR_DATA_CHAR_INDEX], <number>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;
}
}
src/renderer/ForegroundRenderLayer.ts
+2 -5
View File
@@ -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);
}
}
}
src/renderer/SelectionRenderLayer.ts
+3 -6
View File
@@ -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