eiac/xterm.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Support lineHeight

Browse Source
This commit is contained in:
Daniel Imms
2017-09-02 12:27:09 -07:00
parent 9cabb93b8b
commit c92a2f964a
9 changed files with 56 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+15 -11
View File
@@ -11,6 +11,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
protected _ctx: CanvasRenderingContext2D;
private scaledCharWidth: number;
private scaledCharHeight: number;
private scaledLineHeight: number;
private scaledLineDrawY: number;
// TODO: This should be shared between terminals, but not for static as some
// terminals may have different styles
@@ -55,6 +57,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this.scaledCharWidth = terminal.charMeasure.width * window.devicePixelRatio;
this.scaledCharHeight = terminal.charMeasure.height * window.devicePixelRatio;
this.scaledLineHeight = Math.ceil(this.scaledCharHeight * terminal.options.lineHeight);
this.scaledLineDrawY = terminal.options.lineHeight === 1 ? 0 : Math.round((this.scaledLineHeight - this.scaledCharHeight) / 2);
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
@@ -68,13 +72,13 @@ export abstract class BaseRenderLayer implements IRenderLayer {
public abstract reset(terminal: ITerminal): void;
protected fillCells(startCol: number, startRow: number, colWidth: number, colHeight: number): void {
this._ctx.fillRect(startCol * this.scaledCharWidth, startRow * this.scaledCharHeight, colWidth * this.scaledCharWidth, colHeight * this.scaledCharHeight);
this._ctx.fillRect(startCol * this.scaledCharWidth, startRow * this.scaledLineHeight, colWidth * this.scaledCharWidth, colHeight * this.scaledLineHeight);
}
protected drawBottomLineAtCell(x: number, y: number): void {
this._ctx.fillRect(
x * this.scaledCharWidth,
(y + 1) * this.scaledCharHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
(y + 1) * this.scaledLineHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
this.scaledCharWidth,
window.devicePixelRatio);
}
@@ -82,9 +86,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
protected drawLeftLineAtCell(x: number, y: number): void {
this._ctx.fillRect(
x * this.scaledCharWidth,
y * this.scaledCharHeight,
y * this.scaledLineHeight,
window.devicePixelRatio,
this.scaledCharHeight);
this.scaledLineHeight);
}
protected drawRectAtCell(x: number, y: number, width: number, height: number, color: string): void {
@@ -92,9 +96,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
this._ctx.lineWidth = window.devicePixelRatio;
this._ctx.strokeRect(
x * this.scaledCharWidth + window.devicePixelRatio / 2,
y * this.scaledCharHeight + (window.devicePixelRatio / 2),
y * this.scaledLineHeight + (window.devicePixelRatio / 2),
(width * this.scaledCharWidth) - window.devicePixelRatio,
(height * this.scaledCharHeight) - window.devicePixelRatio);
(height * this.scaledLineHeight) - window.devicePixelRatio);
}
protected clearAll(): void {
@@ -102,7 +106,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
}
protected clearCells(startCol: number, startRow: number, colWidth: number, colHeight: number): void {
this._ctx.clearRect(startCol * this.scaledCharWidth, startRow * this.scaledCharHeight, colWidth * this.scaledCharWidth, colHeight * this.scaledCharHeight);
this._ctx.clearRect(startCol * this.scaledCharWidth, startRow * this.scaledLineHeight, colWidth * this.scaledCharWidth, colHeight * this.scaledLineHeight);
}
protected drawCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number, color: string): void {
@@ -116,7 +120,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
// can bleed into other cells. This code will clip the following fillText,
// ensuring that its contents don't go beyond the cell bounds.
this._ctx.beginPath();
this._ctx.rect(x * this.scaledCharWidth, y * this.scaledCharHeight, charData[CHAR_DATA_WIDTH_INDEX] * this.scaledCharWidth, this.scaledCharHeight);
this._ctx.rect(x * this.scaledCharWidth, y * this.scaledLineHeight + this.scaledLineDrawY, charData[CHAR_DATA_WIDTH_INDEX] * this.scaledCharWidth, this.scaledCharHeight);
this._ctx.clip();
this._ctx.fillText(charData[CHAR_DATA_CHAR_INDEX], x * this.scaledCharWidth, y * this.scaledCharHeight);
@@ -137,7 +141,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
const charAtlasCellHeight = this.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
this._ctx.drawImage(this._charAtlas,
code * charAtlasCellWidth, colorIndex * charAtlasCellHeight, this.scaledCharWidth, this.scaledCharHeight,
x * this.scaledCharWidth, y * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight);
x * this.scaledCharWidth, y * this.scaledLineHeight + this.scaledLineDrawY, this.scaledCharWidth, this.scaledCharHeight);
} else {
this._drawUncachedChar(terminal, char, width, fg, x, y);
}
@@ -164,11 +168,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
// can bleed into other cells. This code will clip the following fillText,
// ensuring that its contents don't go beyond the cell bounds.
this._ctx.beginPath();
this._ctx.rect(x * this.scaledCharWidth, y * this.scaledCharHeight, width * this.scaledCharWidth, this.scaledCharHeight);
this._ctx.rect(x * this.scaledCharWidth, y * this.scaledLineHeight + this.scaledLineDrawY, width * this.scaledCharWidth, this.scaledCharHeight);
this._ctx.clip();
// Draw the character
this._ctx.fillText(char, x * this.scaledCharWidth, y * this.scaledCharHeight);
this._ctx.fillText(char, x * this.scaledCharWidth, y * this.scaledLineHeight + this.scaledLineDrawY);
this._ctx.restore();
}
}