From 734bd8c96a43f7ed38e1bdf377b014533d4a7928 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Nov 2019 11:30:48 -0800 Subject: [PATCH] Factor out toRgba function and test --- src/browser/Color.test.ts | 43 ++++++++++++++++++++++++++++++++++++- src/browser/Color.ts | 7 +++++- src/browser/ColorManager.ts | 12 +++++------ 3 files changed, 53 insertions(+), 9 deletions(-) diff --git a/src/browser/Color.test.ts b/src/browser/Color.test.ts index 5542611f1..44cd52f32 100644 --- a/src/browser/Color.test.ts +++ b/src/browser/Color.test.ts @@ -4,7 +4,7 @@ */ import { assert } from 'chai'; -import { blend, fromCss, toPaddedHex, toCss } from 'browser/Color'; +import { blend, fromCss, toPaddedHex, toCss, toRgba } from 'browser/Color'; describe('Color', () => { describe('blend', () => { @@ -94,4 +94,45 @@ describe('Color', () => { assert.equal(toCss(0xff, 0xff, 0xff), '#ffffff'); }); }); + + describe('toRgba', () => { + it('should convert an rgb array to an rgba number', () => { + assert.equal(toRgba(0x00, 0x00, 0x00), 0x000000FF); + assert.equal(toRgba(0x10, 0x10, 0x10), 0x101010FF); + assert.equal(toRgba(0x20, 0x20, 0x20), 0x202020FF); + assert.equal(toRgba(0x30, 0x30, 0x30), 0x303030FF); + assert.equal(toRgba(0x40, 0x40, 0x40), 0x404040FF); + assert.equal(toRgba(0x50, 0x50, 0x50), 0x505050FF); + assert.equal(toRgba(0x60, 0x60, 0x60), 0x606060FF); + assert.equal(toRgba(0x70, 0x70, 0x70), 0x707070FF); + assert.equal(toRgba(0x80, 0x80, 0x80), 0x808080FF); + assert.equal(toRgba(0x90, 0x90, 0x90), 0x909090FF); + assert.equal(toRgba(0xa0, 0xa0, 0xa0), 0xa0a0a0FF); + assert.equal(toRgba(0xb0, 0xb0, 0xb0), 0xb0b0b0FF); + assert.equal(toRgba(0xc0, 0xc0, 0xc0), 0xc0c0c0FF); + assert.equal(toRgba(0xd0, 0xd0, 0xd0), 0xd0d0d0FF); + assert.equal(toRgba(0xe0, 0xe0, 0xe0), 0xe0e0e0FF); + assert.equal(toRgba(0xf0, 0xf0, 0xf0), 0xf0f0f0FF); + assert.equal(toRgba(0xff, 0xff, 0xff), 0xffffffFF); + }); + it('should convert an rgba array to an rgba number', () => { + assert.equal(toRgba(0x00, 0x00, 0x00, 0x00), 0x00000000); + assert.equal(toRgba(0x10, 0x10, 0x10, 0x10), 0x10101010); + assert.equal(toRgba(0x20, 0x20, 0x20, 0x20), 0x20202020); + assert.equal(toRgba(0x30, 0x30, 0x30, 0x30), 0x30303030); + assert.equal(toRgba(0x40, 0x40, 0x40, 0x40), 0x40404040); + assert.equal(toRgba(0x50, 0x50, 0x50, 0x50), 0x50505050); + assert.equal(toRgba(0x60, 0x60, 0x60, 0x60), 0x60606060); + assert.equal(toRgba(0x70, 0x70, 0x70, 0x70), 0x70707070); + assert.equal(toRgba(0x80, 0x80, 0x80, 0x80), 0x80808080); + assert.equal(toRgba(0x90, 0x90, 0x90, 0x90), 0x90909090); + assert.equal(toRgba(0xa0, 0xa0, 0xa0, 0xa0), 0xa0a0a0a0); + assert.equal(toRgba(0xb0, 0xb0, 0xb0, 0xb0), 0xb0b0b0b0); + assert.equal(toRgba(0xc0, 0xc0, 0xc0, 0xc0), 0xc0c0c0c0); + assert.equal(toRgba(0xd0, 0xd0, 0xd0, 0xd0), 0xd0d0d0d0); + assert.equal(toRgba(0xe0, 0xe0, 0xe0, 0xe0), 0xe0e0e0e0); + assert.equal(toRgba(0xf0, 0xf0, 0xf0, 0xf0), 0xf0f0f0f0); + assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff); + }); + }); }); diff --git a/src/browser/Color.ts b/src/browser/Color.ts index 5e86d5e98..51c1a4468 100644 --- a/src/browser/Color.ts +++ b/src/browser/Color.ts @@ -23,7 +23,7 @@ export function blend(bg: IColor, fg: IColor): IColor { const g = bgG + Math.round((fgG - bgG) * a); const b = bgB + Math.round((fgB - bgB) * a); const css = toCss(r, g, b); - const rgba = ((r << 24) | (g << 16) | (b << 8) | 0xFF) >>> 0; + const rgba = toRgba(r, g, b); return { css, rgba }; } @@ -42,3 +42,8 @@ export function toPaddedHex(c: number): string { export function toCss(r: number, g: number, b: number): string { return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`; } + +export function toRgba(r: number, g: number, b: number, a: number = 0xFF): number { + // >>> 0 forces an unsigned int + return (r << 24 | g << 16 | b << 8 | a) >>> 0; +} diff --git a/src/browser/ColorManager.ts b/src/browser/ColorManager.ts index 170fead63..c6354f711 100644 --- a/src/browser/ColorManager.ts +++ b/src/browser/ColorManager.ts @@ -5,7 +5,7 @@ import { IColorManager, IColor, IColorSet } from 'browser/Types'; import { ITheme } from 'common/services/Services'; -import { fromCss, toPaddedHex, toCss, blend } from 'browser/Color'; +import { fromCss, toCss, blend, toRgba } from 'browser/Color'; const DEFAULT_FOREGROUND = fromCss('#ffffff'); const DEFAULT_BACKGROUND = fromCss('#000000'); @@ -49,18 +49,16 @@ export const DEFAULT_ANSI_COLORS = (() => { const b = v[i % 6]; colors.push({ css: toCss(r, g, b), - // Use >>> 0 to force a conversion to an unsigned int - rgba: ((r << 24) | (g << 16) | (b << 8) | 0xFF) >>> 0 + rgba: toRgba(r, g, b) }); } // Generate greys (232-255) for (let i = 0; i < 24; i++) { const c = 8 + i * 10; - const ch = toPaddedHex(c); colors.push({ - css: `#${ch}${ch}${ch}`, - rgba: ((c << 24) | (c << 16) | (c << 8) | 0xFF) >>> 0 + css: toCss(c, c, c), + rgba: toRgba(c, c, c) }); } @@ -175,7 +173,7 @@ export class ColorManager implements IColorManager { return { css, - rgba: (data[0] << 24 | data[1] << 16 | data[2] << 8 | data[3]) >>> 0 + rgba: toRgba(data[0], data[1], data[2], data[3]) }; } }