diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts index 92e95cd2..5e53c411 100644 --- a/src/renderer/BaseRenderLayer.ts +++ b/src/renderer/BaseRenderLayer.ts @@ -6,6 +6,7 @@ export abstract class BaseRenderLayer implements IRenderLayer { protected _canvas: HTMLCanvasElement; protected _ctx: CanvasRenderingContext2D; + // TODO: This will apply to all terminals, should it be per-terminal? protected static _charAtlas: ImageBitmap; private static _charAtlasCharWidth: number; private static _charAtlasCharHeight: number; @@ -29,7 +30,7 @@ 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 diff --git a/src/renderer/Color.ts b/src/renderer/Color.ts index eb3954ea..446d440b 100644 --- a/src/renderer/Color.ts +++ b/src/renderer/Color.ts @@ -1,6 +1,25 @@ // TODO: Ideally colors would be exposed through some theme manager since colors // are moving to JS. +export enum COLOR_CODES { + BLACK = 0, + RED = 1, + GREEN = 2, + YELLOW = 3, + BLUE = 4, + MAGENTA = 5, + CYAN = 6, + WHITE = 7, + BRIGHT_BLACK = 8, + BRIGHT_RED = 9, + BRIGHT_GREEN = 10, + BRIGHT_YELLOW = 11, + BRIGHT_BLUE = 12, + BRIGHT_MAGENTA = 13, + BRIGHT_CYAN = 14, + BRIGHT_WHITE = 15 +} + const TANGO_COLORS = [ // dark: '#2e3436', @@ -22,33 +41,30 @@ const TANGO_COLORS = [ '#eeeeec' ]; -export const COLORS: string[] = (function(): string[] { - let colors = TANGO_COLORS.slice(); - let r = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff]; - let i; +export const COLORS: string[] = generate256Colors(TANGO_COLORS); - // 16-231 - i = 0; - for (; i < 216; i++) { - out(r[(i / 36) % 6 | 0], r[(i / 6) % 6 | 0], r[i % 6]); +function generate256Colors(first16Colors: string[]): string[] { + let colors = first16Colors.slice(); + + // Generate colors (16-231) + let v = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff]; + for (let i = 0; i < 216; i++) { + const r = toPaddedHex(v[(i / 36) % 6 | 0]); + const g = toPaddedHex(v[(i / 6) % 6 | 0]); + const b = toPaddedHex(v[i % 6]); + colors.push(`#${r}${g}${b}`); } - // 232-255 (grey) - i = 0; - let c: number; - for (; i < 24; i++) { - c = 8 + i * 10; - out(c, c, c); - } - - function out(r: number, g: number, b: number): void { - colors.push('#' + hex(r) + hex(g) + hex(b)); - } - - function hex(c: number): string { - let s = c.toString(16); - return s.length < 2 ? '0' + s : s; + // Generate greys (232-255) + for (let i = 0; i < 24; i++) { + const c = toPaddedHex(8 + i * 10); + colors.push(`#${c}${c}${c}`); } return colors; -})(); +} + +function toPaddedHex(c: number): string { + let s = c.toString(16); + return s.length < 2 ? '0' + s : s; +} diff --git a/src/renderer/CursorRenderLayer.ts b/src/renderer/CursorRenderLayer.ts index da32aaa8..75dd4d89 100644 --- a/src/renderer/CursorRenderLayer.ts +++ b/src/renderer/CursorRenderLayer.ts @@ -1,7 +1,7 @@ import { IDataRenderLayer } from './Interfaces'; import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces'; import { CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX } from '../Buffer'; -import { COLORS } from './Color'; +import { COLORS, COLOR_CODES } from './Color'; import { GridCache } from './GridCache'; import { FLAGS } from './Types'; import { BaseRenderLayer } from './BaseRenderLayer'; @@ -17,6 +17,7 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay public render(terminal: ITerminal, startRow: number, endRow: number): void { // TODO: Track blur/focus somehow, support unfocused cursor + // TODO: scaledCharWidth should probably be on Base as a per-terminal thing const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio; const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio; @@ -44,12 +45,12 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay } this._ctx.save(); - this._ctx.fillStyle = COLORS[7]; + this._ctx.fillStyle = COLORS[COLOR_CODES.WHITE]; this._ctx.fillRect(terminal.buffer.x * scaledCharWidth, viewportRelativeCursorY * scaledCharHeight, scaledCharWidth, scaledCharHeight); this._ctx.restore(); const charData = terminal.buffer.lines.get(viewportRelativeCursorY)[terminal.buffer.x]; - this.drawChar(charData[CHAR_DATA_CHAR_INDEX], charData[CHAR_DATA_CODE_INDEX], 0, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight); + this.drawChar(charData[CHAR_DATA_CHAR_INDEX], charData[CHAR_DATA_CODE_INDEX], COLOR_CODES.BLACK, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight); this._state = [terminal.buffer.x, viewportRelativeCursorY]; }