0a0159ce1046e95c89d7182ec03d1b2970eea4d98368802989a04f323f66e3f6b82407f75a460789322710a83c13ad3794c9c88cb9c8a4351ba18666d32038 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /* MIT license */
  2. var convert = require('color-convert');
  3. var string = require('chartjs-color-string');
  4. var Color = function (obj) {
  5. if (obj instanceof Color) {
  6. return obj;
  7. }
  8. if (!(this instanceof Color)) {
  9. return new Color(obj);
  10. }
  11. this.valid = false;
  12. this.values = {
  13. rgb: [0, 0, 0],
  14. hsl: [0, 0, 0],
  15. hsv: [0, 0, 0],
  16. hwb: [0, 0, 0],
  17. cmyk: [0, 0, 0, 0],
  18. alpha: 1
  19. };
  20. // parse Color() argument
  21. var vals;
  22. if (typeof obj === 'string') {
  23. vals = string.getRgba(obj);
  24. if (vals) {
  25. this.setValues('rgb', vals);
  26. } else if (vals = string.getHsla(obj)) {
  27. this.setValues('hsl', vals);
  28. } else if (vals = string.getHwb(obj)) {
  29. this.setValues('hwb', vals);
  30. }
  31. } else if (typeof obj === 'object') {
  32. vals = obj;
  33. if (vals.r !== undefined || vals.red !== undefined) {
  34. this.setValues('rgb', vals);
  35. } else if (vals.l !== undefined || vals.lightness !== undefined) {
  36. this.setValues('hsl', vals);
  37. } else if (vals.v !== undefined || vals.value !== undefined) {
  38. this.setValues('hsv', vals);
  39. } else if (vals.w !== undefined || vals.whiteness !== undefined) {
  40. this.setValues('hwb', vals);
  41. } else if (vals.c !== undefined || vals.cyan !== undefined) {
  42. this.setValues('cmyk', vals);
  43. }
  44. }
  45. };
  46. Color.prototype = {
  47. isValid: function () {
  48. return this.valid;
  49. },
  50. rgb: function () {
  51. return this.setSpace('rgb', arguments);
  52. },
  53. hsl: function () {
  54. return this.setSpace('hsl', arguments);
  55. },
  56. hsv: function () {
  57. return this.setSpace('hsv', arguments);
  58. },
  59. hwb: function () {
  60. return this.setSpace('hwb', arguments);
  61. },
  62. cmyk: function () {
  63. return this.setSpace('cmyk', arguments);
  64. },
  65. rgbArray: function () {
  66. return this.values.rgb;
  67. },
  68. hslArray: function () {
  69. return this.values.hsl;
  70. },
  71. hsvArray: function () {
  72. return this.values.hsv;
  73. },
  74. hwbArray: function () {
  75. var values = this.values;
  76. if (values.alpha !== 1) {
  77. return values.hwb.concat([values.alpha]);
  78. }
  79. return values.hwb;
  80. },
  81. cmykArray: function () {
  82. return this.values.cmyk;
  83. },
  84. rgbaArray: function () {
  85. var values = this.values;
  86. return values.rgb.concat([values.alpha]);
  87. },
  88. hslaArray: function () {
  89. var values = this.values;
  90. return values.hsl.concat([values.alpha]);
  91. },
  92. alpha: function (val) {
  93. if (val === undefined) {
  94. return this.values.alpha;
  95. }
  96. this.setValues('alpha', val);
  97. return this;
  98. },
  99. red: function (val) {
  100. return this.setChannel('rgb', 0, val);
  101. },
  102. green: function (val) {
  103. return this.setChannel('rgb', 1, val);
  104. },
  105. blue: function (val) {
  106. return this.setChannel('rgb', 2, val);
  107. },
  108. hue: function (val) {
  109. if (val) {
  110. val %= 360;
  111. val = val < 0 ? 360 + val : val;
  112. }
  113. return this.setChannel('hsl', 0, val);
  114. },
  115. saturation: function (val) {
  116. return this.setChannel('hsl', 1, val);
  117. },
  118. lightness: function (val) {
  119. return this.setChannel('hsl', 2, val);
  120. },
  121. saturationv: function (val) {
  122. return this.setChannel('hsv', 1, val);
  123. },
  124. whiteness: function (val) {
  125. return this.setChannel('hwb', 1, val);
  126. },
  127. blackness: function (val) {
  128. return this.setChannel('hwb', 2, val);
  129. },
  130. value: function (val) {
  131. return this.setChannel('hsv', 2, val);
  132. },
  133. cyan: function (val) {
  134. return this.setChannel('cmyk', 0, val);
  135. },
  136. magenta: function (val) {
  137. return this.setChannel('cmyk', 1, val);
  138. },
  139. yellow: function (val) {
  140. return this.setChannel('cmyk', 2, val);
  141. },
  142. black: function (val) {
  143. return this.setChannel('cmyk', 3, val);
  144. },
  145. hexString: function () {
  146. return string.hexString(this.values.rgb);
  147. },
  148. rgbString: function () {
  149. return string.rgbString(this.values.rgb, this.values.alpha);
  150. },
  151. rgbaString: function () {
  152. return string.rgbaString(this.values.rgb, this.values.alpha);
  153. },
  154. percentString: function () {
  155. return string.percentString(this.values.rgb, this.values.alpha);
  156. },
  157. hslString: function () {
  158. return string.hslString(this.values.hsl, this.values.alpha);
  159. },
  160. hslaString: function () {
  161. return string.hslaString(this.values.hsl, this.values.alpha);
  162. },
  163. hwbString: function () {
  164. return string.hwbString(this.values.hwb, this.values.alpha);
  165. },
  166. keyword: function () {
  167. return string.keyword(this.values.rgb, this.values.alpha);
  168. },
  169. rgbNumber: function () {
  170. var rgb = this.values.rgb;
  171. return (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
  172. },
  173. luminosity: function () {
  174. // http://www.w3.org/TR/WCAG20/#relativeluminancedef
  175. var rgb = this.values.rgb;
  176. var lum = [];
  177. for (var i = 0; i < rgb.length; i++) {
  178. var chan = rgb[i] / 255;
  179. lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);
  180. }
  181. return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
  182. },
  183. contrast: function (color2) {
  184. // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
  185. var lum1 = this.luminosity();
  186. var lum2 = color2.luminosity();
  187. if (lum1 > lum2) {
  188. return (lum1 + 0.05) / (lum2 + 0.05);
  189. }
  190. return (lum2 + 0.05) / (lum1 + 0.05);
  191. },
  192. level: function (color2) {
  193. var contrastRatio = this.contrast(color2);
  194. if (contrastRatio >= 7.1) {
  195. return 'AAA';
  196. }
  197. return (contrastRatio >= 4.5) ? 'AA' : '';
  198. },
  199. dark: function () {
  200. // YIQ equation from http://24ways.org/2010/calculating-color-contrast
  201. var rgb = this.values.rgb;
  202. var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
  203. return yiq < 128;
  204. },
  205. light: function () {
  206. return !this.dark();
  207. },
  208. negate: function () {
  209. var rgb = [];
  210. for (var i = 0; i < 3; i++) {
  211. rgb[i] = 255 - this.values.rgb[i];
  212. }
  213. this.setValues('rgb', rgb);
  214. return this;
  215. },
  216. lighten: function (ratio) {
  217. var hsl = this.values.hsl;
  218. hsl[2] += hsl[2] * ratio;
  219. this.setValues('hsl', hsl);
  220. return this;
  221. },
  222. darken: function (ratio) {
  223. var hsl = this.values.hsl;
  224. hsl[2] -= hsl[2] * ratio;
  225. this.setValues('hsl', hsl);
  226. return this;
  227. },
  228. saturate: function (ratio) {
  229. var hsl = this.values.hsl;
  230. hsl[1] += hsl[1] * ratio;
  231. this.setValues('hsl', hsl);
  232. return this;
  233. },
  234. desaturate: function (ratio) {
  235. var hsl = this.values.hsl;
  236. hsl[1] -= hsl[1] * ratio;
  237. this.setValues('hsl', hsl);
  238. return this;
  239. },
  240. whiten: function (ratio) {
  241. var hwb = this.values.hwb;
  242. hwb[1] += hwb[1] * ratio;
  243. this.setValues('hwb', hwb);
  244. return this;
  245. },
  246. blacken: function (ratio) {
  247. var hwb = this.values.hwb;
  248. hwb[2] += hwb[2] * ratio;
  249. this.setValues('hwb', hwb);
  250. return this;
  251. },
  252. greyscale: function () {
  253. var rgb = this.values.rgb;
  254. // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
  255. var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
  256. this.setValues('rgb', [val, val, val]);
  257. return this;
  258. },
  259. clearer: function (ratio) {
  260. var alpha = this.values.alpha;
  261. this.setValues('alpha', alpha - (alpha * ratio));
  262. return this;
  263. },
  264. opaquer: function (ratio) {
  265. var alpha = this.values.alpha;
  266. this.setValues('alpha', alpha + (alpha * ratio));
  267. return this;
  268. },
  269. rotate: function (degrees) {
  270. var hsl = this.values.hsl;
  271. var hue = (hsl[0] + degrees) % 360;
  272. hsl[0] = hue < 0 ? 360 + hue : hue;
  273. this.setValues('hsl', hsl);
  274. return this;
  275. },
  276. /**
  277. * Ported from sass implementation in C
  278. * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
  279. */
  280. mix: function (mixinColor, weight) {
  281. var color1 = this;
  282. var color2 = mixinColor;
  283. var p = weight === undefined ? 0.5 : weight;
  284. var w = 2 * p - 1;
  285. var a = color1.alpha() - color2.alpha();
  286. var w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
  287. var w2 = 1 - w1;
  288. return this
  289. .rgb(
  290. w1 * color1.red() + w2 * color2.red(),
  291. w1 * color1.green() + w2 * color2.green(),
  292. w1 * color1.blue() + w2 * color2.blue()
  293. )
  294. .alpha(color1.alpha() * p + color2.alpha() * (1 - p));
  295. },
  296. toJSON: function () {
  297. return this.rgb();
  298. },
  299. clone: function () {
  300. // NOTE(SB): using node-clone creates a dependency to Buffer when using browserify,
  301. // making the final build way to big to embed in Chart.js. So let's do it manually,
  302. // assuming that values to clone are 1 dimension arrays containing only numbers,
  303. // except 'alpha' which is a number.
  304. var result = new Color();
  305. var source = this.values;
  306. var target = result.values;
  307. var value, type;
  308. for (var prop in source) {
  309. if (source.hasOwnProperty(prop)) {
  310. value = source[prop];
  311. type = ({}).toString.call(value);
  312. if (type === '[object Array]') {
  313. target[prop] = value.slice(0);
  314. } else if (type === '[object Number]') {
  315. target[prop] = value;
  316. } else {
  317. console.error('unexpected color value:', value);
  318. }
  319. }
  320. }
  321. return result;
  322. }
  323. };
  324. Color.prototype.spaces = {
  325. rgb: ['red', 'green', 'blue'],
  326. hsl: ['hue', 'saturation', 'lightness'],
  327. hsv: ['hue', 'saturation', 'value'],
  328. hwb: ['hue', 'whiteness', 'blackness'],
  329. cmyk: ['cyan', 'magenta', 'yellow', 'black']
  330. };
  331. Color.prototype.maxes = {
  332. rgb: [255, 255, 255],
  333. hsl: [360, 100, 100],
  334. hsv: [360, 100, 100],
  335. hwb: [360, 100, 100],
  336. cmyk: [100, 100, 100, 100]
  337. };
  338. Color.prototype.getValues = function (space) {
  339. var values = this.values;
  340. var vals = {};
  341. for (var i = 0; i < space.length; i++) {
  342. vals[space.charAt(i)] = values[space][i];
  343. }
  344. if (values.alpha !== 1) {
  345. vals.a = values.alpha;
  346. }
  347. // {r: 255, g: 255, b: 255, a: 0.4}
  348. return vals;
  349. };
  350. Color.prototype.setValues = function (space, vals) {
  351. var values = this.values;
  352. var spaces = this.spaces;
  353. var maxes = this.maxes;
  354. var alpha = 1;
  355. var i;
  356. this.valid = true;
  357. if (space === 'alpha') {
  358. alpha = vals;
  359. } else if (vals.length) {
  360. // [10, 10, 10]
  361. values[space] = vals.slice(0, space.length);
  362. alpha = vals[space.length];
  363. } else if (vals[space.charAt(0)] !== undefined) {
  364. // {r: 10, g: 10, b: 10}
  365. for (i = 0; i < space.length; i++) {
  366. values[space][i] = vals[space.charAt(i)];
  367. }
  368. alpha = vals.a;
  369. } else if (vals[spaces[space][0]] !== undefined) {
  370. // {red: 10, green: 10, blue: 10}
  371. var chans = spaces[space];
  372. for (i = 0; i < space.length; i++) {
  373. values[space][i] = vals[chans[i]];
  374. }
  375. alpha = vals.alpha;
  376. }
  377. values.alpha = Math.max(0, Math.min(1, (alpha === undefined ? values.alpha : alpha)));
  378. if (space === 'alpha') {
  379. return false;
  380. }
  381. var capped;
  382. // cap values of the space prior converting all values
  383. for (i = 0; i < space.length; i++) {
  384. capped = Math.max(0, Math.min(maxes[space][i], values[space][i]));
  385. values[space][i] = Math.round(capped);
  386. }
  387. // convert to all the other color spaces
  388. for (var sname in spaces) {
  389. if (sname !== space) {
  390. values[sname] = convert[space][sname](values[space]);
  391. }
  392. }
  393. return true;
  394. };
  395. Color.prototype.setSpace = function (space, args) {
  396. var vals = args[0];
  397. if (vals === undefined) {
  398. // color.rgb()
  399. return this.getValues(space);
  400. }
  401. // color.rgb(10, 10, 10)
  402. if (typeof vals === 'number') {
  403. vals = Array.prototype.slice.call(args);
  404. }
  405. this.setValues(space, vals);
  406. return this;
  407. };
  408. Color.prototype.setChannel = function (space, index, val) {
  409. var svalues = this.values[space];
  410. if (val === undefined) {
  411. // color.red()
  412. return svalues[index];
  413. } else if (val === svalues[index]) {
  414. // color.red(color.red())
  415. return this;
  416. }
  417. // color.red(100)
  418. svalues[index] = val;
  419. this.setValues(space, svalues);
  420. return this;
  421. };
  422. if (typeof window !== 'undefined') {
  423. window.Color = Color;
  424. }
  425. module.exports = Color;