Support inverse

This commit is contained in:
Daniel Imms
2017-08-30 23:05:51 -07:00
parent 6a0b9bd209
commit 1291dc5571
2 changed files with 25 additions and 12 deletions
+14 -3
View File
@@ -3,6 +3,7 @@ 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;
@@ -34,9 +35,19 @@ export class BackgroundRenderLayer implements IRenderLayer {
let row = y + terminal.buffer.ydisp;
let line = terminal.buffer.lines.get(row);
for (let x = 0; x < terminal.cols; x++) {
const data: number = line[x][CHAR_DATA_ATTR_INDEX];
const bg = data & 0x1ff;
const flags = data >> 18;
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;
+11 -9
View File
@@ -42,13 +42,6 @@ export class ForegroundRenderLayer implements IRenderLayer {
const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio;
const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio;
// TODO: Needs to react to terminal resize
// Initialize image data
// if (!this._imageData) {
// this._imageData = textCtx.createImageData(scaledCharWidth * this._terminal.cols * window.devicePixelRatio, scaledCharHeight * this._terminal.rows * window.devicePixelRatio);
// this._imageData.data.set(createBackgroundFillData(this._imageData.width, this._imageData.height, 255, 0, 0, 255));
// }
// TODO: Ensure that the render is eventually performed
// Don't bother render until the atlas bitmap is ready
if (!this._charAtlas) {
@@ -81,13 +74,22 @@ export class ForegroundRenderLayer implements IRenderLayer {
this._ctx.clearRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
// Skip rendering if the character is invisible
if (!code || code === 32/*' '*/) {
if (!code || code === 32 /*' '*/) {
continue;
}
let fg = (attr >> 9) & 0x1ff;
const flags = attr >> 18;
// If inverse flag is on, the foreground should become the background.
if (flags & FLAGS.INVERSE) {
fg = attr & 0x1ff;
// TODO: Is this case still needed
if (fg === 257) {
fg = 0;
}
}
if (flags & FLAGS.BOLD) {
this._ctx.font = `bold ${this._ctx.font}`;
// Convert the FG color to the bold variant
@@ -116,7 +118,7 @@ export class ForegroundRenderLayer implements IRenderLayer {
// this._ctx.drawImage(this._charAtlas, 0, 0);
}
private _drawUnicodeChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number) {
private _drawUnicodeChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number): void {
this._ctx.save();
this._ctx.font = `${16 * window.devicePixelRatio}px courier`;
this._ctx.textBaseline = 'top';