vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

555 lines
20 KiB

  1. let Hammer = require('../module/hammer');
  2. let hammerUtil = require('../hammerUtil');
  3. let util = require('../util');
  4. class ColorPicker {
  5. constructor(pixelRatio = 1) {
  6. this.pixelRatio = pixelRatio;
  7. this.generated = false;
  8. this.centerCoordinates = {x:289/2, y:289/2};
  9. this.r = 289 * 0.49;
  10. this.color = {r:255,g:255,b:255,a:1.0};
  11. this.hueCircle = undefined;
  12. this.initialColor = {r:255,g:255,b:255,a:1.0};
  13. this.previousColor= undefined;
  14. this.applied = false;
  15. // bound by
  16. this.updateCallback = () => {};
  17. this.closeCallback = () => {};
  18. // create all DOM elements
  19. this._create();
  20. }
  21. /**
  22. * this inserts the colorPicker into a div from the DOM
  23. * @param container
  24. */
  25. insertTo(container) {
  26. if (this.hammer !== undefined) {
  27. this.hammer.destroy();
  28. this.hammer = undefined;
  29. }
  30. this.container = container;
  31. this.container.appendChild(this.frame);
  32. this._bindHammer();
  33. this._setSize();
  34. }
  35. /**
  36. * the callback is executed on apply and save. Bind it to the application
  37. * @param callback
  38. */
  39. setUpdateCallback(callback) {
  40. if (typeof callback === 'function') {
  41. this.updateCallback = callback;
  42. }
  43. else {
  44. throw new Error("Function attempted to set as colorPicker update callback is not a function.");
  45. }
  46. }
  47. /**
  48. * the callback is executed on apply and save. Bind it to the application
  49. * @param callback
  50. */
  51. setCloseCallback(callback) {
  52. if (typeof callback === 'function') {
  53. this.closeCallback = callback;
  54. }
  55. else {
  56. throw new Error("Function attempted to set as colorPicker closing callback is not a function.");
  57. }
  58. }
  59. _isColorString(color) {
  60. var htmlColors = {black: '#000000',navy: '#000080',darkblue: '#00008B',mediumblue: '#0000CD',blue: '#0000FF',darkgreen: '#006400',green: '#008000',teal: '#008080',darkcyan: '#008B8B',deepskyblue: '#00BFFF',darkturquoise: '#00CED1',mediumspringgreen: '#00FA9A',lime: '#00FF00',springgreen: '#00FF7F',aqua: '#00FFFF',cyan: '#00FFFF',midnightblue: '#191970',dodgerblue: '#1E90FF',lightseagreen: '#20B2AA',forestgreen: '#228B22',seagreen: '#2E8B57',darkslategray: '#2F4F4F',limegreen: '#32CD32',mediumseagreen: '#3CB371',turquoise: '#40E0D0',royalblue: '#4169E1',steelblue: '#4682B4',darkslateblue: '#483D8B',mediumturquoise: '#48D1CC',indigo: '#4B0082',darkolivegreen: '#556B2F',cadetblue: '#5F9EA0',cornflowerblue: '#6495ED',mediumaquamarine: '#66CDAA',dimgray: '#696969',slateblue: '#6A5ACD',olivedrab: '#6B8E23',slategray: '#708090',lightslategray: '#778899',mediumslateblue: '#7B68EE',lawngreen: '#7CFC00',chartreuse: '#7FFF00',aquamarine: '#7FFFD4',maroon: '#800000',purple: '#800080',olive: '#808000',gray: '#808080',skyblue: '#87CEEB',lightskyblue: '#87CEFA',blueviolet: '#8A2BE2',darkred: '#8B0000',darkmagenta: '#8B008B',saddlebrown: '#8B4513',darkseagreen: '#8FBC8F',lightgreen: '#90EE90',mediumpurple: '#9370D8',darkviolet: '#9400D3',palegreen: '#98FB98',darkorchid: '#9932CC',yellowgreen: '#9ACD32',sienna: '#A0522D',brown: '#A52A2A',darkgray: '#A9A9A9',lightblue: '#ADD8E6',greenyellow: '#ADFF2F',paleturquoise: '#AFEEEE',lightsteelblue: '#B0C4DE',powderblue: '#B0E0E6',firebrick: '#B22222',darkgoldenrod: '#B8860B',mediumorchid: '#BA55D3',rosybrown: '#BC8F8F',darkkhaki: '#BDB76B',silver: '#C0C0C0',mediumvioletred: '#C71585',indianred: '#CD5C5C',peru: '#CD853F',chocolate: '#D2691E',tan: '#D2B48C',lightgrey: '#D3D3D3',palevioletred: '#D87093',thistle: '#D8BFD8',orchid: '#DA70D6',goldenrod: '#DAA520',crimson: '#DC143C',gainsboro: '#DCDCDC',plum: '#DDA0DD',burlywood: '#DEB887',lightcyan: '#E0FFFF',lavender: '#E6E6FA',darksalmon: '#E9967A',violet: '#EE82EE',palegoldenrod: '#EEE8AA',lightcoral: '#F08080',khaki: '#F0E68C',aliceblue: '#F0F8FF',honeydew: '#F0FFF0',azure: '#F0FFFF',sandybrown: '#F4A460',wheat: '#F5DEB3',beige: '#F5F5DC',whitesmoke: '#F5F5F5',mintcream: '#F5FFFA',ghostwhite: '#F8F8FF',salmon: '#FA8072',antiquewhite: '#FAEBD7',linen: '#FAF0E6',lightgoldenrodyellow: '#FAFAD2',oldlace: '#FDF5E6',red: '#FF0000',fuchsia: '#FF00FF',magenta: '#FF00FF',deeppink: '#FF1493',orangered: '#FF4500',tomato: '#FF6347',hotpink: '#FF69B4',coral: '#FF7F50',darkorange: '#FF8C00',lightsalmon: '#FFA07A',orange: '#FFA500',lightpink: '#FFB6C1',pink: '#FFC0CB',gold: '#FFD700',peachpuff: '#FFDAB9',navajowhite: '#FFDEAD',moccasin: '#FFE4B5',bisque: '#FFE4C4',mistyrose: '#FFE4E1',blanchedalmond: '#FFEBCD',papayawhip: '#FFEFD5',lavenderblush: '#FFF0F5',seashell: '#FFF5EE',cornsilk: '#FFF8DC',lemonchiffon: '#FFFACD',floralwhite: '#FFFAF0',snow: '#FFFAFA',yellow: '#FFFF00',lightyellow: '#FFFFE0',ivory: '#FFFFF0',white: '#FFFFFF'};
  61. if (typeof color === 'string') {
  62. return htmlColors[color];
  63. }
  64. }
  65. /**
  66. * Set the color of the colorPicker
  67. * Supported formats:
  68. * 'red' --> HTML color string
  69. * '#ffffff' --> hex string
  70. * 'rbg(255,255,255)' --> rgb string
  71. * 'rgba(255,255,255,1.0)' --> rgba string
  72. * {r:255,g:255,b:255} --> rgb object
  73. * {r:255,g:255,b:255,a:1.0} --> rgba object
  74. * @param color
  75. * @param setInitial
  76. */
  77. setColor(color, setInitial = true) {
  78. if (color === 'none') {
  79. return;
  80. }
  81. let rgba;
  82. // if a html color shorthand is used, convert to hex
  83. var htmlColor = this._isColorString(color);
  84. if (htmlColor !== undefined) {
  85. color = htmlColor;
  86. }
  87. // check format
  88. if (util.isString(color) === true) {
  89. if (util.isValidRGB(color) === true) {
  90. let rgbaArray = color.substr(4).substr(0, color.length - 5).split(',');
  91. rgba = {r:rgbaArray[0], g:rgbaArray[1], b:rgbaArray[2], a:1.0};
  92. }
  93. else if (util.isValidRGBA(color) === true) {
  94. let rgbaArray = color.substr(5).substr(0, color.length - 6).split(',');
  95. rgba = {r:rgbaArray[0], g:rgbaArray[1], b:rgbaArray[2], a:rgbaArray[3]};
  96. }
  97. else if (util.isValidHex(color) === true) {
  98. let rgbObj = util.hexToRGB(color);
  99. rgba = {r:rgbObj.r, g:rgbObj.g, b:rgbObj.b, a:1.0};
  100. }
  101. }
  102. else {
  103. if (color instanceof Object) {
  104. if (color.r !== undefined && color.g !== undefined && color.b !== undefined) {
  105. let alpha = color.a !== undefined ? color.a : '1.0';
  106. rgba = {r:color.r, g:color.g, b:color.b, a:alpha};
  107. }
  108. }
  109. }
  110. // set color
  111. if (rgba === undefined) {
  112. throw new Error("Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: " + JSON.stringify(color));
  113. }
  114. else {
  115. this._setColor(rgba, setInitial);
  116. }
  117. }
  118. /**
  119. * this shows the color picker.
  120. * The hue circle is constructed once and stored.
  121. */
  122. show() {
  123. if (this.closeCallback !== undefined) {
  124. this.closeCallback();
  125. this.closeCallback = undefined;
  126. }
  127. this.applied = false;
  128. this.frame.style.display = 'block';
  129. this._generateHueCircle();
  130. }
  131. // ------------------------------------------ PRIVATE ----------------------------- //
  132. /**
  133. * Hide the picker. Is called by the cancel button.
  134. * Optional boolean to store the previous color for easy access later on.
  135. * @param storePrevious
  136. * @private
  137. */
  138. _hide(storePrevious = true) {
  139. // store the previous color for next time;
  140. if (storePrevious === true) {
  141. this.previousColor = util.extend({}, this.color);
  142. }
  143. if (this.applied === true) {
  144. this.updateCallback(this.initialColor);
  145. }
  146. this.frame.style.display = 'none';
  147. // call the closing callback, restoring the onclick method.
  148. // this is in a setTimeout because it will trigger the show again before the click is done.
  149. setTimeout(() => {
  150. if (this.closeCallback !== undefined) {
  151. this.closeCallback();
  152. this.closeCallback = undefined;
  153. }
  154. },0);
  155. }
  156. /**
  157. * bound to the save button. Saves and hides.
  158. * @private
  159. */
  160. _save() {
  161. this.updateCallback(this.color);
  162. this.applied = false;
  163. this._hide();
  164. }
  165. /**
  166. * Bound to apply button. Saves but does not close. Is undone by the cancel button.
  167. * @private
  168. */
  169. _apply() {
  170. this.applied = true;
  171. this.updateCallback(this.color);
  172. this._updatePicker(this.color);
  173. }
  174. /**
  175. * load the color from the previous session.
  176. * @private
  177. */
  178. _loadLast() {
  179. if (this.previousColor !== undefined) {
  180. this.setColor(this.previousColor, false);
  181. }
  182. else {
  183. alert("There is no last color to load...");
  184. }
  185. }
  186. /**
  187. * set the color, place the picker
  188. * @param rgba
  189. * @param setInitial
  190. * @private
  191. */
  192. _setColor(rgba, setInitial = true) {
  193. // store the initial color
  194. if (setInitial === true) {
  195. this.initialColor = util.extend({}, rgba);
  196. }
  197. this.color = rgba;
  198. let hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
  199. let angleConvert = 2 * Math.PI;
  200. let radius = this.r * hsv.s;
  201. let x = this.centerCoordinates.x + radius * Math.sin(angleConvert * hsv.h);
  202. let y = this.centerCoordinates.y + radius * Math.cos(angleConvert * hsv.h);
  203. this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px';
  204. this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px';
  205. this._updatePicker(rgba);
  206. }
  207. /**
  208. * bound to opacity control
  209. * @param value
  210. * @private
  211. */
  212. _setOpacity(value) {
  213. this.color.a = value / 100;
  214. this._updatePicker(this.color);
  215. }
  216. /**
  217. * bound to brightness control
  218. * @param value
  219. * @private
  220. */
  221. _setBrightness(value) {
  222. let hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
  223. hsv.v = value / 100;
  224. let rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
  225. rgba['a'] = this.color.a;
  226. this.color = rgba;
  227. this._updatePicker();
  228. }
  229. /**
  230. * update the color picker. A black circle overlays the hue circle to mimic the brightness decreasing.
  231. * @param rgba
  232. * @private
  233. */
  234. _updatePicker(rgba = this.color) {
  235. let hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b);
  236. let ctx = this.colorPickerCanvas.getContext('2d');
  237. if (this.pixelRation === undefined) {
  238. this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
  239. ctx.mozBackingStorePixelRatio ||
  240. ctx.msBackingStorePixelRatio ||
  241. ctx.oBackingStorePixelRatio ||
  242. ctx.backingStorePixelRatio || 1);
  243. }
  244. ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
  245. // clear the canvas
  246. let w = this.colorPickerCanvas.clientWidth;
  247. let h = this.colorPickerCanvas.clientHeight;
  248. ctx.clearRect(0, 0, w, h);
  249. ctx.putImageData(this.hueCircle, 0,0);
  250. ctx.fillStyle = 'rgba(0,0,0,' + (1- hsv.v) + ')';
  251. ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
  252. ctx.fill();
  253. this.brightnessRange.value = 100 * hsv.v;
  254. this.opacityRange.value = 100 * rgba.a;
  255. this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
  256. this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
  257. }
  258. /**
  259. * used by create to set the size of the canvas.
  260. * @private
  261. */
  262. _setSize() {
  263. this.colorPickerCanvas.style.width = '100%';
  264. this.colorPickerCanvas.style.height = '100%';
  265. this.colorPickerCanvas.width = 289 * this.pixelRatio;
  266. this.colorPickerCanvas.height = 289 * this.pixelRatio;
  267. }
  268. /**
  269. * create all dom elements
  270. * TODO: cleanup, lots of similar dom elements
  271. * @private
  272. */
  273. _create() {
  274. this.frame = document.createElement('div');
  275. this.frame.className = 'vis-color-picker';
  276. this.colorPickerDiv = document.createElement('div');
  277. this.colorPickerSelector = document.createElement('div');
  278. this.colorPickerSelector.className = 'vis-selector';
  279. this.colorPickerDiv.appendChild(this.colorPickerSelector);
  280. this.colorPickerCanvas = document.createElement('canvas');
  281. this.colorPickerDiv.appendChild(this.colorPickerCanvas);
  282. if (!this.colorPickerCanvas.getContext) {
  283. let noCanvas = document.createElement( 'DIV' );
  284. noCanvas.style.color = 'red';
  285. noCanvas.style.fontWeight = 'bold' ;
  286. noCanvas.style.padding = '10px';
  287. noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
  288. this.colorPickerCanvas.appendChild(noCanvas);
  289. }
  290. else {
  291. let ctx = this.colorPickerCanvas.getContext("2d");
  292. this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
  293. ctx.mozBackingStorePixelRatio ||
  294. ctx.msBackingStorePixelRatio ||
  295. ctx.oBackingStorePixelRatio ||
  296. ctx.backingStorePixelRatio || 1);
  297. this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
  298. }
  299. this.colorPickerDiv.className = 'vis-color';
  300. this.opacityDiv = document.createElement('div');
  301. this.opacityDiv.className = 'vis-opacity';
  302. this.brightnessDiv = document.createElement('div');
  303. this.brightnessDiv.className = 'vis-brightness';
  304. this.arrowDiv = document.createElement('div');
  305. this.arrowDiv.className = 'vis-arrow';
  306. this.opacityRange = document.createElement('input');
  307. try {
  308. this.opacityRange.type = 'range'; // Not supported on IE9
  309. this.opacityRange.min = '0';
  310. this.opacityRange.max = '100';
  311. }
  312. catch (err) {}
  313. this.opacityRange.value = '100';
  314. this.opacityRange.className = 'vis-range';
  315. this.brightnessRange = document.createElement('input');
  316. try {
  317. this.brightnessRange.type = 'range'; // Not supported on IE9
  318. this.brightnessRange.min = '0';
  319. this.brightnessRange.max = '100';
  320. }
  321. catch (err) {}
  322. this.brightnessRange.value = '100';
  323. this.brightnessRange.className = 'vis-range';
  324. this.opacityDiv.appendChild(this.opacityRange);
  325. this.brightnessDiv.appendChild(this.brightnessRange);
  326. var me = this;
  327. this.opacityRange.onchange = function () {me._setOpacity(this.value);};
  328. this.opacityRange.oninput = function () {me._setOpacity(this.value);};
  329. this.brightnessRange.onchange = function () {me._setBrightness(this.value);};
  330. this.brightnessRange.oninput = function () {me._setBrightness(this.value);};
  331. this.brightnessLabel = document.createElement("div");
  332. this.brightnessLabel.className = "vis-label vis-brightness";
  333. this.brightnessLabel.innerHTML = 'brightness:';
  334. this.opacityLabel = document.createElement("div");
  335. this.opacityLabel.className = "vis-label vis-opacity";
  336. this.opacityLabel.innerHTML = 'opacity:';
  337. this.newColorDiv = document.createElement("div");
  338. this.newColorDiv.className = "vis-new-color";
  339. this.newColorDiv.innerHTML = 'new';
  340. this.initialColorDiv = document.createElement("div");
  341. this.initialColorDiv.className = "vis-initial-color";
  342. this.initialColorDiv.innerHTML = 'initial';
  343. this.cancelButton = document.createElement("div");
  344. this.cancelButton.className = "vis-button vis-cancel";
  345. this.cancelButton.innerHTML = 'cancel';
  346. this.cancelButton.onclick = this._hide.bind(this, false);
  347. this.applyButton = document.createElement("div");
  348. this.applyButton.className = "vis-button vis-apply";
  349. this.applyButton.innerHTML = 'apply';
  350. this.applyButton.onclick = this._apply.bind(this);
  351. this.saveButton = document.createElement("div");
  352. this.saveButton.className = "vis-button vis-save";
  353. this.saveButton.innerHTML = 'save';
  354. this.saveButton.onclick = this._save.bind(this);
  355. this.loadButton = document.createElement("div");
  356. this.loadButton.className = "vis-button vis-load";
  357. this.loadButton.innerHTML = 'load last';
  358. this.loadButton.onclick = this._loadLast.bind(this);
  359. this.frame.appendChild(this.colorPickerDiv);
  360. this.frame.appendChild(this.arrowDiv);
  361. this.frame.appendChild(this.brightnessLabel);
  362. this.frame.appendChild(this.brightnessDiv);
  363. this.frame.appendChild(this.opacityLabel);
  364. this.frame.appendChild(this.opacityDiv);
  365. this.frame.appendChild(this.newColorDiv);
  366. this.frame.appendChild(this.initialColorDiv);
  367. this.frame.appendChild(this.cancelButton);
  368. this.frame.appendChild(this.applyButton);
  369. this.frame.appendChild(this.saveButton);
  370. this.frame.appendChild(this.loadButton);
  371. }
  372. /**
  373. * bind hammer to the color picker
  374. * @private
  375. */
  376. _bindHammer() {
  377. this.drag = {};
  378. this.pinch = {};
  379. this.hammer = new Hammer(this.colorPickerCanvas);
  380. this.hammer.get('pinch').set({enable: true});
  381. hammerUtil.onTouch(this.hammer, (event) => {this._moveSelector(event)});
  382. this.hammer.on('tap', (event) => {this._moveSelector(event)});
  383. this.hammer.on('panstart', (event) => {this._moveSelector(event)});
  384. this.hammer.on('panmove', (event) => {this._moveSelector(event)});
  385. this.hammer.on('panend', (event) => {this._moveSelector(event)});
  386. }
  387. /**
  388. * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown.
  389. * @private
  390. */
  391. _generateHueCircle() {
  392. if (this.generated === false) {
  393. let ctx = this.colorPickerCanvas.getContext('2d');
  394. if (this.pixelRation === undefined) {
  395. this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
  396. ctx.mozBackingStorePixelRatio ||
  397. ctx.msBackingStorePixelRatio ||
  398. ctx.oBackingStorePixelRatio ||
  399. ctx.backingStorePixelRatio || 1);
  400. }
  401. ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
  402. // clear the canvas
  403. let w = this.colorPickerCanvas.clientWidth;
  404. let h = this.colorPickerCanvas.clientHeight;
  405. ctx.clearRect(0, 0, w, h);
  406. // draw hue circle
  407. let x, y, hue, sat;
  408. this.centerCoordinates = {x: w * 0.5, y: h * 0.5};
  409. this.r = 0.49 * w;
  410. let angleConvert = (2 * Math.PI) / 360;
  411. let hfac = 1 / 360;
  412. let sfac = 1 / this.r;
  413. let rgb;
  414. for (hue = 0; hue < 360; hue++) {
  415. for (sat = 0; sat < this.r; sat++) {
  416. x = this.centerCoordinates.x + sat * Math.sin(angleConvert * hue);
  417. y = this.centerCoordinates.y + sat * Math.cos(angleConvert * hue);
  418. rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1);
  419. ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
  420. ctx.fillRect(x - 0.5, y - 0.5, 2, 2);
  421. }
  422. }
  423. ctx.strokeStyle = 'rgba(0,0,0,1)';
  424. ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r);
  425. ctx.stroke();
  426. this.hueCircle = ctx.getImageData(0,0,w,h);
  427. }
  428. this.generated = true;
  429. }
  430. /**
  431. * move the selector. This is called by hammer functions.
  432. *
  433. * @param event
  434. * @private
  435. */
  436. _moveSelector(event) {
  437. let rect = this.colorPickerDiv.getBoundingClientRect();
  438. let left = event.center.x - rect.left;
  439. let top = event.center.y - rect.top;
  440. let centerY = 0.5 * this.colorPickerDiv.clientHeight;
  441. let centerX = 0.5 * this.colorPickerDiv.clientWidth;
  442. let x = left - centerX;
  443. let y = top - centerY;
  444. let angle = Math.atan2(x,y);
  445. let radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX);
  446. let newTop = Math.cos(angle) * radius + centerY;
  447. let newLeft = Math.sin(angle) * radius + centerX;
  448. this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px';
  449. this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px';
  450. // set color
  451. let h = angle / (2 * Math.PI);
  452. h = h < 0 ? h + 1 : h;
  453. let s = radius / this.r;
  454. let hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b);
  455. hsv.h = h;
  456. hsv.s = s;
  457. let rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v);
  458. rgba['a'] = this.color.a;
  459. this.color = rgba;
  460. // update previews
  461. this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')';
  462. this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';
  463. }
  464. }
  465. export default ColorPicker;