123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496 |
- const colorString = require('color-string');
- const convert = require('color-convert');
- const skippedModels = [
- // To be honest, I don't really feel like keyword belongs in color convert, but eh.
- 'keyword',
- // Gray conflicts with some method names, and has its own method defined.
- 'gray',
- // Shouldn't really be in color-convert either...
- 'hex',
- ];
- const hashedModelKeys = {};
- for (const model of Object.keys(convert)) {
- hashedModelKeys[[...convert[model].labels].sort().join('')] = model;
- }
- const limiters = {};
- function Color(object, model) {
- if (!(this instanceof Color)) {
- return new Color(object, model);
- }
- if (model && model in skippedModels) {
- model = null;
- }
- if (model && !(model in convert)) {
- throw new Error('Unknown model: ' + model);
- }
- let i;
- let channels;
- if (object == null) { // eslint-disable-line no-eq-null,eqeqeq
- this.model = 'rgb';
- this.color = [0, 0, 0];
- this.valpha = 1;
- } else if (object instanceof Color) {
- this.model = object.model;
- this.color = [...object.color];
- this.valpha = object.valpha;
- } else if (typeof object === 'string') {
- const result = colorString.get(object);
- if (result === null) {
- throw new Error('Unable to parse color from string: ' + object);
- }
- this.model = result.model;
- channels = convert[this.model].channels;
- this.color = result.value.slice(0, channels);
- this.valpha = typeof result.value[channels] === 'number' ? result.value[channels] : 1;
- } else if (object.length > 0) {
- this.model = model || 'rgb';
- channels = convert[this.model].channels;
- const newArray = Array.prototype.slice.call(object, 0, channels);
- this.color = zeroArray(newArray, channels);
- this.valpha = typeof object[channels] === 'number' ? object[channels] : 1;
- } else if (typeof object === 'number') {
- // This is always RGB - can be converted later on.
- this.model = 'rgb';
- this.color = [
- (object >> 16) & 0xFF,
- (object >> 8) & 0xFF,
- object & 0xFF,
- ];
- this.valpha = 1;
- } else {
- this.valpha = 1;
- const keys = Object.keys(object);
- if ('alpha' in object) {
- keys.splice(keys.indexOf('alpha'), 1);
- this.valpha = typeof object.alpha === 'number' ? object.alpha : 0;
- }
- const hashedKeys = keys.sort().join('');
- if (!(hashedKeys in hashedModelKeys)) {
- throw new Error('Unable to parse color from object: ' + JSON.stringify(object));
- }
- this.model = hashedModelKeys[hashedKeys];
- const {labels} = convert[this.model];
- const color = [];
- for (i = 0; i < labels.length; i++) {
- color.push(object[labels[i]]);
- }
- this.color = zeroArray(color);
- }
- // Perform limitations (clamping, etc.)
- if (limiters[this.model]) {
- channels = convert[this.model].channels;
- for (i = 0; i < channels; i++) {
- const limit = limiters[this.model][i];
- if (limit) {
- this.color[i] = limit(this.color[i]);
- }
- }
- }
- this.valpha = Math.max(0, Math.min(1, this.valpha));
- if (Object.freeze) {
- Object.freeze(this);
- }
- }
- Color.prototype = {
- toString() {
- return this.string();
- },
- toJSON() {
- return this[this.model]();
- },
- string(places) {
- let self = this.model in colorString.to ? this : this.rgb();
- self = self.round(typeof places === 'number' ? places : 1);
- const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
- return colorString.to[self.model](args);
- },
- percentString(places) {
- const self = this.rgb().round(typeof places === 'number' ? places : 1);
- const args = self.valpha === 1 ? self.color : [...self.color, this.valpha];
- return colorString.to.rgb.percent(args);
- },
- array() {
- return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
- },
- object() {
- const result = {};
- const {channels} = convert[this.model];
- const {labels} = convert[this.model];
- for (let i = 0; i < channels; i++) {
- result[labels[i]] = this.color[i];
- }
- if (this.valpha !== 1) {
- result.alpha = this.valpha;
- }
- return result;
- },
- unitArray() {
- const rgb = this.rgb().color;
- rgb[0] /= 255;
- rgb[1] /= 255;
- rgb[2] /= 255;
- if (this.valpha !== 1) {
- rgb.push(this.valpha);
- }
- return rgb;
- },
- unitObject() {
- const rgb = this.rgb().object();
- rgb.r /= 255;
- rgb.g /= 255;
- rgb.b /= 255;
- if (this.valpha !== 1) {
- rgb.alpha = this.valpha;
- }
- return rgb;
- },
- round(places) {
- places = Math.max(places || 0, 0);
- return new Color([...this.color.map(roundToPlace(places)), this.valpha], this.model);
- },
- alpha(value) {
- if (value !== undefined) {
- return new Color([...this.color, Math.max(0, Math.min(1, value))], this.model);
- }
- return this.valpha;
- },
- // Rgb
- red: getset('rgb', 0, maxfn(255)),
- green: getset('rgb', 1, maxfn(255)),
- blue: getset('rgb', 2, maxfn(255)),
- hue: getset(['hsl', 'hsv', 'hsl', 'hwb', 'hcg'], 0, value => ((value % 360) + 360) % 360),
- saturationl: getset('hsl', 1, maxfn(100)),
- lightness: getset('hsl', 2, maxfn(100)),
- saturationv: getset('hsv', 1, maxfn(100)),
- value: getset('hsv', 2, maxfn(100)),
- chroma: getset('hcg', 1, maxfn(100)),
- gray: getset('hcg', 2, maxfn(100)),
- white: getset('hwb', 1, maxfn(100)),
- wblack: getset('hwb', 2, maxfn(100)),
- cyan: getset('cmyk', 0, maxfn(100)),
- magenta: getset('cmyk', 1, maxfn(100)),
- yellow: getset('cmyk', 2, maxfn(100)),
- black: getset('cmyk', 3, maxfn(100)),
- x: getset('xyz', 0, maxfn(95.047)),
- y: getset('xyz', 1, maxfn(100)),
- z: getset('xyz', 2, maxfn(108.833)),
- l: getset('lab', 0, maxfn(100)),
- a: getset('lab', 1),
- b: getset('lab', 2),
- keyword(value) {
- if (value !== undefined) {
- return new Color(value);
- }
- return convert[this.model].keyword(this.color);
- },
- hex(value) {
- if (value !== undefined) {
- return new Color(value);
- }
- return colorString.to.hex(this.rgb().round().color);
- },
- hexa(value) {
- if (value !== undefined) {
- return new Color(value);
- }
- const rgbArray = this.rgb().round().color;
- let alphaHex = Math.round(this.valpha * 255).toString(16).toUpperCase();
- if (alphaHex.length === 1) {
- alphaHex = '0' + alphaHex;
- }
- return colorString.to.hex(rgbArray) + alphaHex;
- },
- rgbNumber() {
- const rgb = this.rgb().color;
- return ((rgb[0] & 0xFF) << 16) | ((rgb[1] & 0xFF) << 8) | (rgb[2] & 0xFF);
- },
- luminosity() {
- // http://www.w3.org/TR/WCAG20/#relativeluminancedef
- const rgb = this.rgb().color;
- const lum = [];
- for (const [i, element] of rgb.entries()) {
- const chan = element / 255;
- lum[i] = (chan <= 0.04045) ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
- }
- return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
- },
- contrast(color2) {
- // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
- const lum1 = this.luminosity();
- const lum2 = color2.luminosity();
- if (lum1 > lum2) {
- return (lum1 + 0.05) / (lum2 + 0.05);
- }
- return (lum2 + 0.05) / (lum1 + 0.05);
- },
- level(color2) {
- // https://www.w3.org/TR/WCAG/#contrast-enhanced
- const contrastRatio = this.contrast(color2);
- if (contrastRatio >= 7) {
- return 'AAA';
- }
- return (contrastRatio >= 4.5) ? 'AA' : '';
- },
- isDark() {
- // YIQ equation from http://24ways.org/2010/calculating-color-contrast
- const rgb = this.rgb().color;
- const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 10000;
- return yiq < 128;
- },
- isLight() {
- return !this.isDark();
- },
- negate() {
- const rgb = this.rgb();
- for (let i = 0; i < 3; i++) {
- rgb.color[i] = 255 - rgb.color[i];
- }
- return rgb;
- },
- lighten(ratio) {
- const hsl = this.hsl();
- hsl.color[2] += hsl.color[2] * ratio;
- return hsl;
- },
- darken(ratio) {
- const hsl = this.hsl();
- hsl.color[2] -= hsl.color[2] * ratio;
- return hsl;
- },
- saturate(ratio) {
- const hsl = this.hsl();
- hsl.color[1] += hsl.color[1] * ratio;
- return hsl;
- },
- desaturate(ratio) {
- const hsl = this.hsl();
- hsl.color[1] -= hsl.color[1] * ratio;
- return hsl;
- },
- whiten(ratio) {
- const hwb = this.hwb();
- hwb.color[1] += hwb.color[1] * ratio;
- return hwb;
- },
- blacken(ratio) {
- const hwb = this.hwb();
- hwb.color[2] += hwb.color[2] * ratio;
- return hwb;
- },
- grayscale() {
- // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
- const rgb = this.rgb().color;
- const value = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
- return Color.rgb(value, value, value);
- },
- fade(ratio) {
- return this.alpha(this.valpha - (this.valpha * ratio));
- },
- opaquer(ratio) {
- return this.alpha(this.valpha + (this.valpha * ratio));
- },
- rotate(degrees) {
- const hsl = this.hsl();
- let hue = hsl.color[0];
- hue = (hue + degrees) % 360;
- hue = hue < 0 ? 360 + hue : hue;
- hsl.color[0] = hue;
- return hsl;
- },
- mix(mixinColor, weight) {
- // Ported from sass implementation in C
- // https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
- if (!mixinColor || !mixinColor.rgb) {
- throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof mixinColor);
- }
- const color1 = mixinColor.rgb();
- const color2 = this.rgb();
- const p = weight === undefined ? 0.5 : weight;
- const w = 2 * p - 1;
- const a = color1.alpha() - color2.alpha();
- const w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2;
- const w2 = 1 - w1;
- return Color.rgb(
- w1 * color1.red() + w2 * color2.red(),
- w1 * color1.green() + w2 * color2.green(),
- w1 * color1.blue() + w2 * color2.blue(),
- color1.alpha() * p + color2.alpha() * (1 - p));
- },
- };
- // Model conversion methods and static constructors
- for (const model of Object.keys(convert)) {
- if (skippedModels.includes(model)) {
- continue;
- }
- const {channels} = convert[model];
- // Conversion methods
- Color.prototype[model] = function (...args) {
- if (this.model === model) {
- return new Color(this);
- }
- if (args.length > 0) {
- return new Color(args, model);
- }
- return new Color([...assertArray(convert[this.model][model].raw(this.color)), this.valpha], model);
- };
- // 'static' construction methods
- Color[model] = function (...args) {
- let color = args[0];
- if (typeof color === 'number') {
- color = zeroArray(args, channels);
- }
- return new Color(color, model);
- };
- }
- function roundTo(number, places) {
- return Number(number.toFixed(places));
- }
- function roundToPlace(places) {
- return function (number) {
- return roundTo(number, places);
- };
- }
- function getset(model, channel, modifier) {
- model = Array.isArray(model) ? model : [model];
- for (const m of model) {
- (limiters[m] || (limiters[m] = []))[channel] = modifier;
- }
- model = model[0];
- return function (value) {
- let result;
- if (value !== undefined) {
- if (modifier) {
- value = modifier(value);
- }
- result = this[model]();
- result.color[channel] = value;
- return result;
- }
- result = this[model]().color[channel];
- if (modifier) {
- result = modifier(result);
- }
- return result;
- };
- }
- function maxfn(max) {
- return function (v) {
- return Math.max(0, Math.min(max, v));
- };
- }
- function assertArray(value) {
- return Array.isArray(value) ? value : [value];
- }
- function zeroArray(array, length) {
- for (let i = 0; i < length; i++) {
- if (typeof array[i] !== 'number') {
- array[i] = 0;
- }
- }
- return array;
- }
- module.exports = Color;
|