70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { IRenderLayer } 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 {
|
|
private _canvas: HTMLCanvasElement;
|
|
private _ctx: CanvasRenderingContext2D;
|
|
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);
|
|
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`;
|
|
this._state.resize(terminal.cols, terminal.rows);
|
|
}
|
|
|
|
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);
|
|
for (let x = 0; x < terminal.cols; x++) {
|
|
const attr: number = line[x][CHAR_DATA_ATTR_INDEX];
|
|
let bg = attr & 0x1ff;
|
|
const flags = attr >> 18;
|
|
|
|
|
|
// If inverse flag is on, the background should become the foreground.
|
|
if (flags & FLAGS.INVERSE) {
|
|
bg = (attr >> 9) & 0x1ff;
|
|
// TODO: Is this case still needed
|
|
if (bg === 257) {
|
|
bg = 15;
|
|
}
|
|
}
|
|
|
|
const cellState = this._state.cache[x][y];
|
|
const needsRefresh = (bg < 16 && cellState !== bg) || cellState !== null;
|
|
if (needsRefresh) {
|
|
if (bg < 16) {
|
|
this._ctx.save();
|
|
this._ctx.fillStyle = TANGO_COLORS[bg];
|
|
this._ctx.fillRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
|
|
this._ctx.restore();
|
|
this._state.cache[x][y] = bg;
|
|
} else {
|
|
this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
|
|
this._state.cache[x][y] = null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|