Support bold, underline, fix colors

This commit is contained in:
Daniel Imms
2017-08-30 17:07:30 -07:00
parent c6d4c73c8a
commit 640cd18515
3 changed files with 337 additions and 18 deletions
+33 -15
View File
@@ -97,7 +97,7 @@ export class Renderer {
}
this._refreshRowsQueue = [];
this._refreshAnimationFrame = null;
// this._refresh(start, end);
this._refresh(start, end);
this._canvasRender(start, end);
}
@@ -347,18 +347,26 @@ export class Renderer {
];
private _canvasRender(start: number, end: number): void {
const charWidth = Math.ceil(this._terminal.charMeasure.width);
const charHeight = Math.ceil(this._terminal.charMeasure.height);
const charWidth = Math.ceil(this._terminal.charMeasure.width) * window.devicePixelRatio;
const charHeight = Math.ceil(this._terminal.charMeasure.height) * window.devicePixelRatio;
const ctx = this._terminal.canvasContext;
ctx.font = '16px Hack';
ctx.fillStyle = '#000000';
// console.log('fill', start, end);
// console.log('fill', start * charHeight, (end - start + 1) * charHeight);
ctx.fillRect(0, start * charHeight, charWidth * this._terminal.cols, (end - start + 1) * charHeight);
// ctx.fillRect(0, start * charHeight, charWidth * this._terminal.cols, (end - start + 1) * charHeight);
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.textBaseline = 'top';
// Indicates whether to reset the font next cell
let resetFont = true;
for (let y = start; y <= end; y++) {
if (resetFont) {
ctx.font = `${16 * window.devicePixelRatio}px courier`;
resetFont = false;
}
let row = y + this._terminal.buffer.ydisp;
let line = this._terminal.buffer.lines.get(row);
for (let x = 0; x < this._terminal.cols; x++) {
@@ -376,25 +384,35 @@ export class Renderer {
// if (bg < 16) {
// }
if (flags & FLAGS.BOLD) {
ctx.font = `bold ${ctx.font}`;
resetFont = true;
// Convert the FG color to the bold variant
if (fg < 8) {
fg += 8;
}
}
if (fg < 16) {
ctx.fillStyle = this._colors[fg];
}
// let imageData;
// let key = ch + fg;
// if (key in this._imageDataCache) {
// imageData = this._imageDataCache[key];
// } else {
// Simulate cache
let imageData;
let key = ch + fg;
if (key in this._imageDataCache) {
imageData = this._imageDataCache[key];
} else {
ctx.fillText(ch, x * charWidth, y * charHeight);
// imageData = ctx.getImageData(x * charWidth, y * charHeight, charWidth, charHeight);
// this._imageDataCache[key] = imageData;
// }
imageData = ctx.getImageData(x * charWidth, y * charHeight, charWidth, charHeight);
this._imageDataCache[key] = imageData;
}
ctx.putImageData(imageData, x * charWidth, y * charHeight);
// Always write text
// ctx.fillText(ch, x * charWidth, y * charHeight);
// ctx.putImageData(imageData, x * charWidth, y * charHeight);
}
}
this._imageDataCache = {};
}
/**