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/BackgroundRenderLayer.ts
+3 -3
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IColorSet } from './Interfaces';
import { IColorSet, IRenderDimensions } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { GridCache } from './GridCache';
@@ -18,8 +18,8 @@ export class BackgroundRenderLayer extends BaseRenderLayer {
this._state = new GridCache<number>();
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
super.resize(terminal, dim, charSizeChanged);
// Resizing the canvas discards the contents of the canvas so clear state
this._state.clear();
this._state.resize(terminal.cols, terminal.rows);
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);
src/renderer/CursorRenderLayer.ts
+3 -3
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IColorSet } from './Interfaces';
import { IColorSet, IRenderDimensions } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal, ITerminalOptions } from '../Interfaces';
import { CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX } from '../Buffer';
import { GridCache } from './GridCache';
@@ -47,8 +47,8 @@ export class CursorRenderLayer extends BaseRenderLayer {
// TODO: Consider initial options? Maybe onOptionsChanged should be called at the end of open?
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
super.resize(terminal, dim, charSizeChanged);
// Resizing the canvas discards the contents of the canvas so clear state
this._state = {
x: null,
src/renderer/ForegroundRenderLayer.ts
+3 -3
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IColorSet } from './Interfaces';
import { IColorSet, IRenderDimensions } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../Buffer';
import { FLAGS } from './Types';
@@ -26,8 +26,8 @@ export class ForegroundRenderLayer extends BaseRenderLayer {
this._state = new GridCache<CharData>();
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
super.resize(terminal, dim, charSizeChanged);
// Resizing the canvas discards the contents of the canvas so clear state
this._state.clear();
this._state.resize(terminal.cols, terminal.rows);
src/renderer/Interfaces.ts
+16 -3
View File
@@ -3,9 +3,11 @@
* @license MIT
*/
import { ITerminal, ITerminalOptions, ITheme } from '../Interfaces';
import { ITerminal, ITerminalOptions, ITheme, IEventEmitter } from '../Interfaces';
export interface IRenderer extends IEventEmitter {
dimensions: IRenderDimensions;
export interface IRenderer {
setTheme(theme: ITheme): IColorSet;
onWindowResize(devicePixelRatio: number): void;
onResize(cols: number, rows: number, didCharSizeChange: boolean): void;
@@ -59,7 +61,7 @@ export interface IRenderLayer {
/**
* Resize the render layer.
*/
resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void;
resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void;
/**
* Clear the state of the render layer.
@@ -75,3 +77,14 @@ export interface IColorSet {
selection: string;
ansi: string[];
}
export interface IRenderDimensions {
scaledCharWidth: number;
scaledCharHeight: number;
scaledLineHeight: number;
scaledLineDrawY: number;
scaledCanvasWidth: number;
scaledCanvasHeight: number;
canvasWidth: number;
canvasHeight: number;
}
src/renderer/LinkRenderLayer.ts
+3 -3
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IColorSet } from './Interfaces';
import { IColorSet, IRenderDimensions } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal, ILinkifierAccessor } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { GridCache } from './GridCache';
@@ -20,8 +20,8 @@ export class LinkRenderLayer extends BaseRenderLayer {
terminal.linkifier.on(LinkHoverEventTypes.LEAVE, (e: LinkHoverEvent) => this._onLinkLeave(e));
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
super.resize(terminal, dim, charSizeChanged);
// Resizing the canvas discards the contents of the canvas so clear state
this._state = null;
}
src/renderer/Renderer.ts
+52 -5
View File
@@ -11,10 +11,11 @@ import { SelectionRenderLayer } from './SelectionRenderLayer';
import { CursorRenderLayer } from './CursorRenderLayer';
import { ColorManager } from './ColorManager';
import { BaseRenderLayer } from './BaseRenderLayer';
import { IRenderLayer, IColorSet, IRenderer } from './Interfaces';
import { IRenderLayer, IColorSet, IRenderer, IRenderDimensions } from './Interfaces';
import { LinkRenderLayer } from './LinkRenderLayer';
import { EventEmitter } from '../EventEmitter';
export class Renderer implements IRenderer {
export class Renderer extends EventEmitter implements IRenderer {
/** A queue of the rows to be refreshed */
private _refreshRowsQueue: {start: number, end: number}[] = [];
private _refreshAnimationFrame = null;
@@ -23,8 +24,10 @@ export class Renderer implements IRenderer {
private _devicePixelRatio: number;
private _colorManager: ColorManager;
public dimensions: IRenderDimensions;
constructor(private _terminal: ITerminal) {
super();
this._colorManager = new ColorManager();
this._renderLayers = [
new BackgroundRenderLayer(this._terminal.element, 0, this._colorManager.colors),
@@ -33,6 +36,16 @@ export class Renderer implements IRenderer {
new LinkRenderLayer(this._terminal.element, 3, this._colorManager.colors, this._terminal),
new CursorRenderLayer(this._terminal.element, 4, this._colorManager.colors)
];
this.dimensions = {
scaledCharWidth: null,
scaledCharHeight: null,
scaledLineHeight: null,
scaledLineDrawY: null,
scaledCanvasWidth: null,
scaledCanvasHeight: null,
canvasWidth: null,
canvasHeight: null
};
this._devicePixelRatio = window.devicePixelRatio;
}
@@ -63,12 +76,46 @@ export class Renderer implements IRenderer {
if (!this._terminal.charMeasure.width || !this._terminal.charMeasure.height) {
return;
}
const width = this._terminal.charMeasure.width * cols;
const height = Math.floor(this._terminal.charMeasure.height * this._terminal.options.lineHeight) * rows;
// 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.dimensions.scaledCharWidth = Math.ceil(this._terminal.charMeasure.width * window.devicePixelRatio);
this.dimensions.scaledCharHeight = Math.ceil(this._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.dimensions.scaledLineHeight = Math.floor(this.dimensions.scaledCharHeight * this._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.dimensions.scaledLineDrawY = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledLineHeight - this.dimensions.scaledCharHeight) / 2);
// Recalculate the canvas dimensions; scaled* define the actual number of
// pixel in the canvas
this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledLineHeight;
this.dimensions.scaledCanvasWidth = this._terminal.cols * this.dimensions.scaledCharWidth;
// The 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.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
// Resize all render layers
this._renderLayers.forEach(l => l.resize(this._terminal, width, height, didCharSizeChange));
this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions, didCharSizeChange));
// Force a refresh
this._terminal.refresh(0, this._terminal.rows - 1);
this.emit('resize', {
width: this.dimensions.canvasWidth,
height: this.dimensions.canvasHeight
});
}
public onCharSizeChanged(): void {
src/renderer/SelectionRenderLayer.ts
+3 -3
View File
@@ -3,7 +3,7 @@
* @license MIT
*/
import { IColorSet } from './Interfaces';
import { IColorSet, IRenderDimensions } from './Interfaces';
import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
import { GridCache } from './GridCache';
@@ -21,8 +21,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
};
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
public resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void {
super.resize(terminal, dim, charSizeChanged);
// Resizing the canvas discards the contents of the canvas so clear state
this._state = {
start: null,