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

Merge pull request #1859 from Tyriar/baseline

Browse Source 
Fix text being top aligned in latest Chrome and Firefox
This commit is contained in:
Daniel Imms
2019-01-01 18:58:32 -08:00
committed by GitHub
parent 7a579a374a c66a24fab4
commit 29ff74e069
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+4 -4
View File
@@ -236,12 +236,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
*/
protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void {
this._ctx.font = this._getFont(terminal, false, false);
this._ctx.textBaseline = 'top';
this._ctx.textBaseline = 'middle';
this._clipRow(terminal, y);
this._ctx.fillText(
charData[CHAR_DATA_CHAR_INDEX],
x * this._scaledCellWidth + this._scaledCharLeft,
y * this._scaledCellHeight + this._scaledCharTop);
(y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
}
/**
@@ -295,7 +295,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
private _drawUncachedChars(terminal: ITerminal, chars: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean): void {
this._ctx.save();
this._ctx.font = this._getFont(terminal, bold, italic);
this._ctx.textBaseline = 'top';
this._ctx.textBaseline = 'middle';
if (fg === INVERTED_DEFAULT_COLOR) {
this._ctx.fillStyle = this._colors.background.css;
@@ -316,7 +316,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
this._ctx.fillText(
chars,
x * this._scaledCellWidth + this._scaledCharLeft,
y * this._scaledCellHeight + this._scaledCharTop);
(y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
this._ctx.restore();
}
src/renderer/atlas/CharAtlasGenerator.ts
+5 -5
View File
@@ -29,7 +29,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
ctx.save();
ctx.fillStyle = config.colors.foreground.css;
ctx.font = getFont(config.fontWeight, config);
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle';
// Default color
for (let i = 0; i < 256; i++) {
@@ -37,7 +37,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
ctx.beginPath();
ctx.rect(i * cellWidth, 0, cellWidth, cellHeight);
ctx.clip();
ctx.fillText(String.fromCharCode(i), i * cellWidth, 0);
ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight / 2);
ctx.restore();
}
// Default color bold
@@ -48,7 +48,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
ctx.beginPath();
ctx.rect(i * cellWidth, cellHeight, cellWidth, cellHeight);
ctx.clip();
ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight);
ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight * 1.5);
ctx.restore();
}
ctx.restore();
@@ -64,7 +64,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
ctx.clip();
ctx.fillStyle = config.colors.ansi[colorIndex].css;
ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
ctx.fillText(String.fromCharCode(i), i * cellWidth, y + cellHeight / 2);
ctx.restore();
}
}
@@ -80,7 +80,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
ctx.clip();
ctx.fillStyle = config.colors.ansi[colorIndex].css;
ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
ctx.fillText(String.fromCharCode(i), i * cellWidth, y + cellHeight / 2);
ctx.restore();
}
}
src/renderer/atlas/DynamicCharAtlas.ts
+2 -2
View File
@@ -250,7 +250,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
const fontStyle = glyph.italic ? 'italic' : '';
this._tmpCtx.font =
`${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
this._tmpCtx.textBaseline = 'top';
this._tmpCtx.textBaseline = 'middle';
this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
@@ -259,7 +259,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
this._tmpCtx.globalAlpha = DIM_OPACITY;
}
// Draw the character
this._tmpCtx.fillText(glyph.chars, 0, 0);
this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight / 2);
this._tmpCtx.restore();
// clear the background from the character to avoid issues with drawing over the previous