From 235982362c5f198c4cadc5ac846086189a1daf52 Mon Sep 17 00:00:00 2001 From: Brandon Bayer Date: Thu, 26 Apr 2018 17:28:07 -0400 Subject: [PATCH 1/2] Add support for italic rendering --- src/InputHandler.ts | 3 +++ src/renderer/BaseRenderLayer.ts | 17 +++++++++-------- src/renderer/TextRenderLayer.ts | 4 ++-- src/renderer/Types.ts | 3 ++- 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/InputHandler.ts b/src/InputHandler.ts index 4df3e69550..7696324ede 100644 --- a/src/InputHandler.ts +++ b/src/InputHandler.ts @@ -1263,6 +1263,9 @@ export class InputHandler implements IInputHandler { } else if (p === 1) { // bold text flags |= FLAGS.BOLD; + } else if (p === 3) { + // italic text + flags |= FLAGS.ITALIC; } else if (p === 4) { // underlined text flags |= FLAGS.UNDERLINE; diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts index fbffd54748..0fe3bfea49 100644 --- a/src/renderer/BaseRenderLayer.ts +++ b/src/renderer/BaseRenderLayer.ts @@ -219,7 +219,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { * @param color The color of the character. */ protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void { - this._ctx.font = this._getFont(terminal, false); + this._ctx.font = this._getFont(terminal, false, false); this._ctx.textBaseline = 'top'; this._clipRow(terminal, y); this._ctx.fillText( @@ -242,7 +242,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { * This is used to validate whether a cached image can be used. * @param bold Whether the text is bold. */ - protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean): void { + protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean, italic: boolean): void { let colorIndex = 0; if (fg < 256) { colorIndex = fg + 2; @@ -259,7 +259,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { const isBasicColor = (colorIndex > 1 && fg < 16) && (fg < 8 || bold); const isDefaultColor = fg >= 256; const isDefaultBackground = bg >= 256; - if (this._charAtlas && isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground) { + if (this._charAtlas && isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground && !italic) { // ImageBitmap's draw about twice as fast as from a canvas const charAtlasCellWidth = this._scaledCharWidth + CHAR_ATLAS_CELL_SPACING; const charAtlasCellHeight = this._scaledCharHeight + CHAR_ATLAS_CELL_SPACING; @@ -287,7 +287,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { charAtlasCellWidth, this._scaledCharHeight); } else { - this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim); + this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim, italic); } // This draws the atlas (for debugging purposes) // this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); @@ -305,9 +305,9 @@ export abstract class BaseRenderLayer implements IRenderLayer { * @param x The column to draw at. * @param y The row to draw at. */ - private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean): void { + private _drawUncachedChar(terminal: ITerminal, char: 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); + this._ctx.font = this._getFont(terminal, bold, italic); this._ctx.textBaseline = 'top'; if (fg === INVERTED_DEFAULT_COLOR) { @@ -353,10 +353,11 @@ export abstract class BaseRenderLayer implements IRenderLayer { * @param terminal The terminal. * @param isBold If we should use the bold fontWeight. */ - protected _getFont(terminal: ITerminal, isBold: boolean): string { + protected _getFont(terminal: ITerminal, isBold: boolean, isItalic: boolean): string { const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight; + const fontStyle = isItalic ? 'italic' : ''; - return `${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`; + return `${fontWeight} ${fontStyle} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`; } } diff --git a/src/renderer/TextRenderLayer.ts b/src/renderer/TextRenderLayer.ts index 58d0d790a8..21e7e31525 100644 --- a/src/renderer/TextRenderLayer.ts +++ b/src/renderer/TextRenderLayer.ts @@ -32,7 +32,7 @@ export class TextRenderLayer extends BaseRenderLayer { super.resize(terminal, dim); // Clear the character width cache if the font or width has changed - const terminalFont = this._getFont(terminal, false); + const terminalFont = this._getFont(terminal, false, false); if (this._characterWidth !== dim.scaledCharWidth || this._characterFont !== terminalFont) { this._characterWidth = dim.scaledCharWidth; this._characterFont = terminalFont; @@ -164,7 +164,7 @@ export class TextRenderLayer extends BaseRenderLayer { terminal, char, code, width, x, y, fg, bg, - !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM) + !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM), !!(flags & FLAGS.ITALIC) ); }); } diff --git a/src/renderer/Types.ts b/src/renderer/Types.ts index bd5b13eb06..edecf8b0f6 100644 --- a/src/renderer/Types.ts +++ b/src/renderer/Types.ts @@ -16,7 +16,8 @@ export const enum FLAGS { BLINK = 4, INVERSE = 8, INVISIBLE = 16, - DIM = 32 + DIM = 32, + ITALIC = 64 } export interface IRenderer extends IEventEmitter { From a732952677bcb7fde78db7ee176d69e32b51e2ec Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 1 May 2018 11:50:06 -0700 Subject: [PATCH 2/2] Rearrange italic/bold to get _ctx.font validating --- src/renderer/BaseRenderLayer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts index 0fe3bfea49..7a655163e4 100644 --- a/src/renderer/BaseRenderLayer.ts +++ b/src/renderer/BaseRenderLayer.ts @@ -357,7 +357,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight; const fontStyle = isItalic ? 'italic' : ''; - return `${fontWeight} ${fontStyle} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`; + return `${fontStyle} ${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`; } }