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

Move char atlas into BaseRenderLayer

Browse Source
This commit is contained in:
Daniel Imms
2017-08-31 17:20:50 -07:00
parent a91380a76f
commit fe7b424ab8
2 changed files with 78 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+76
View File
@@ -1,10 +1,16 @@
import { IRenderLayer } from './Interfaces';
import { ITerminal } from '../Interfaces';
import { COLORS } from './Color';
export abstract class BaseRenderLayer implements IRenderLayer {
protected _canvas: HTMLCanvasElement;
protected _ctx: CanvasRenderingContext2D;
protected static _charAtlas: ImageBitmap;
private static _charAtlasCharWidth: number;
private static _charAtlasCharHeight: number;
private static _charAtlasGenerator: CharAtlasGenerator;
constructor(container: HTMLElement, id: string, zIndex: number) {
this._canvas = document.createElement('canvas');
this._canvas.id = `xterm-${id}-layer`;
@@ -12,6 +18,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
container.appendChild(this._canvas);
if (!BaseRenderLayer._charAtlasGenerator) {
BaseRenderLayer._charAtlasGenerator = new CharAtlasGenerator();
}
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
@@ -19,5 +29,71 @@ export abstract class BaseRenderLayer implements IRenderLayer {
this._canvas.height = canvasHeight * window.devicePixelRatio;
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
// Only update the char atlas if the char size changed
if (charSizeChanged) {
// Only update the char atlas if an update for the right dimensions is not
// already in progress
if (BaseRenderLayer._charAtlasCharWidth !== terminal.charMeasure.width ||
BaseRenderLayer._charAtlasCharHeight !== terminal.charMeasure.height) {
BaseRenderLayer._charAtlas = null;
BaseRenderLayer._charAtlasCharWidth = terminal.charMeasure.width;
BaseRenderLayer._charAtlasCharHeight = terminal.charMeasure.height;
BaseRenderLayer._charAtlasGenerator.generate(terminal.charMeasure.width, terminal.charMeasure.height).then(bitmap => {
BaseRenderLayer._charAtlas = bitmap;
});
}
}
}
}
class CharAtlasGenerator {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
constructor() {
this._canvas = document.createElement('canvas');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
public generate(charWidth: number, charHeight: number): Promise<ImageBitmap> {
const scaledCharWidth = Math.ceil(charWidth) * window.devicePixelRatio;
const scaledCharHeight = Math.ceil(charHeight) * window.devicePixelRatio;
this._canvas.width = 255 * scaledCharWidth;
this._canvas.height = (/*default*/1 + /*0-15*/16) * scaledCharHeight;
this._ctx.save();
this._ctx.fillStyle = '#ffffff';
this._ctx.font = `${16 * window.devicePixelRatio}px courier`;
this._ctx.textBaseline = 'top';
// Default color
for (let i = 0; i < 256; i++) {
this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, 0);
}
// Colors 0-15
for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
// colors 8-15 are bold
if (colorIndex === 8) {
this._ctx.font = `bold ${this._ctx.font}`;
}
const y = (colorIndex + 1) * scaledCharHeight;
// Clear rectangle as some fonts seem to draw over the bottom boundary
this._ctx.clearRect(0, y, this._canvas.width, scaledCharHeight);
// Draw ascii characters
for (let i = 0; i < 256; i++) {
this._ctx.fillStyle = COLORS[colorIndex];
this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, y);
}
}
this._ctx.restore();
const charAtlasImageData = this._ctx.getImageData(0, 0, this._canvas.width, this._canvas.height);
const promise = window.createImageBitmap(charAtlasImageData);
// Clear the rect while the promise is in progress
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
return promise;
}
}
src/renderer/ForegroundRenderLayer.ts
+2 -64
View File
@@ -8,26 +8,16 @@ import { CharData } from '../Types';
import { BaseRenderLayer } from './BaseRenderLayer';
export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRenderLayer {
private _charAtlas: ImageBitmap;
private _state: GridCache<CharData>;
private _charAtlasGenerator: CharAtlasGenerator;
constructor(container: HTMLElement, zIndex: number) {
super(container, 'fg', zIndex);
this._charAtlasGenerator = new CharAtlasGenerator();
this._state = new GridCache<CharData>();
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
super.resize(terminal, canvasWidth, canvasHeight, charSizeChanged);
this._state.resize(terminal.cols, terminal.rows);
if (charSizeChanged) {
this._charAtlas = null;
this._charAtlasGenerator.generate(terminal.charMeasure.width, terminal.charMeasure.height).then(bitmap => {
this._charAtlas = bitmap;
});
}
}
public render(terminal: ITerminal, startRow: number, endRow: number): void {
@@ -36,7 +26,7 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende
// TODO: Ensure that the render is eventually performed
// Don't bother render until the atlas bitmap is ready
if (!this._charAtlas) {
if (!BaseRenderLayer._charAtlas) {
return;
}
@@ -98,7 +88,7 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende
if (code < 256 && (colorIndex > 0 || fg > 255)) {
// ImageBitmap's draw about twice as fast as from a canvas
this._ctx.drawImage(this._charAtlas, code * scaledCharWidth, colorIndex * scaledCharHeight, scaledCharWidth, scaledCharHeight, x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
this._ctx.drawImage(BaseRenderLayer._charAtlas, code * scaledCharWidth, colorIndex * scaledCharHeight, scaledCharWidth, scaledCharHeight, x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
} else {
// TODO: Evaluate how long it takes to convert from a number
const width: number = charData[CHAR_DATA_WIDTH_INDEX];
@@ -128,55 +118,3 @@ export class ForegroundRenderLayer extends BaseRenderLayer implements IDataRende
this._ctx.restore();
}
}
class CharAtlasGenerator {
private _canvas: HTMLCanvasElement;
private _ctx: CanvasRenderingContext2D;
constructor() {
this._canvas = document.createElement('canvas');
this._ctx = this._canvas.getContext('2d');
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
public generate(charWidth: number, charHeight: number): Promise<ImageBitmap> {
const scaledCharWidth = Math.ceil(charWidth) * window.devicePixelRatio;
const scaledCharHeight = Math.ceil(charHeight) * window.devicePixelRatio;
this._canvas.width = 255 * scaledCharWidth;
this._canvas.height = (/*default*/1 + /*0-15*/16) * scaledCharHeight;
this._ctx.save();
this._ctx.fillStyle = '#ffffff';
this._ctx.font = `${16 * window.devicePixelRatio}px courier`;
this._ctx.textBaseline = 'top';
// Default color
for (let i = 0; i < 256; i++) {
this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, 0);
}
// Colors 0-15
for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
// colors 8-15 are bold
if (colorIndex === 8) {
this._ctx.font = `bold ${this._ctx.font}`;
}
const y = (colorIndex + 1) * scaledCharHeight;
// Clear rectangle as some fonts seem to draw over the bottom boundary
this._ctx.clearRect(0, y, this._canvas.width, scaledCharHeight);
// Draw ascii characters
for (let i = 0; i < 256; i++) {
this._ctx.fillStyle = COLORS[colorIndex];
this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, y);
}
}
this._ctx.restore();
const charAtlasImageData = this._ctx.getImageData(0, 0, this._canvas.width, this._canvas.height);
const promise = window.createImageBitmap(charAtlasImageData);
// Clear the rect while the promise is in progress
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
return promise;
}
}