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

Fix several issues with line height

Browse Source 
Fixes #966
Fixes #967
This commit is contained in:
Daniel Imms
2017-09-10 10:31:19 -07:00
parent 948eedba89
commit ae741348a6
13 changed files with 125 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+10 -29
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IRenderLayer, IColorSet } from './Interfaces';
import { IRenderLayer, IColorSet, IRenderDimensions } from './Interfaces';
import { ITerminal, ITerminalOptions } from '../Interfaces';
import { acquireCharAtlas, CHAR_ATLAS_CELL_SPACING } from './CharAtlas';
import { CharData } from '../Types';
@@ -61,34 +61,15 @@ export abstract class BaseRenderLayer implements IRenderLayer {
}
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
// Calculate the scaled character dimensions, if devicePixelRatio is a
// floating point number then the value is ceiled to ensure there is enough
// space to draw the character to the cell
this.scaledCharWidth = Math.ceil(terminal.charMeasure.width * window.devicePixelRatio);
this.scaledCharHeight = Math.ceil(terminal.charMeasure.height * window.devicePixelRatio);
// Calculate the scaled line height, if lineHeight is not 1 then the value
// will be floored because since lineHeight can never be lower then 1, there
// is a guarentee that the scaled line height will always be larger than
// scaled char height.
this.scaledLineHeight = Math.floor(this.scaledCharHeight * terminal.options.lineHeight);
// Calculate the y coordinate within a cell that text should draw from in
// order to draw in the center of a cell.
this.scaledLineDrawY = terminal.options.lineHeight === 1 ? 0 : Math.round((this.scaledLineHeight - this.scaledCharHeight) / 2);
// Recalcualte the canvas dimensions; width/height define the actual number
// of pixels in the canvas, style.width/height define the size of the canvas
// on the page. It's very important that this rounds to nearest integer and
// not ceils as browsers often set window.devicePixelRatio as something like
// 1.100000023841858, when it's actually 1.1. Ceiling causes blurriness as
// the backing canvas image is 1 pixel too large for the canvas element
// size.
this._canvas.width = Math.round(canvasWidth * window.devicePixelRatio);
this._canvas.height = Math.round(canvasHeight * window.devicePixelRatio);
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
this.scaledCharWidth = dim.scaledCharWidth;
this.scaledCharHeight = dim.scaledCharHeight;
this.scaledLineHeight = dim.scaledLineHeight;
this.scaledLineDrawY = dim.scaledLineDrawY;
this._canvas.width = dim.scaledCanvasWidth;
this._canvas.height = dim.scaledCanvasHeight;
this._canvas.style.width = `${dim.canvasWidth}px`;
this._canvas.style.height = `${dim.canvasHeight}px`;
if (charSizeChanged) {
this._refreshCharAtlas(terminal, this.colors);