Doesn't pass color value to the newly created handle editor in Chrome
shamansir opened this issue · comments
Ulric Wilfred commented
Reproducible in the demo at https://artf.github.io/grapick/ as well, at least for latest Chrome Version 99.0.4844.74 (Official Build) (arm64) gives warning:
The specified value "rgba(45, 120, 145, 255)" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.
When one adds new stop and clicks its color, grapick doesn't pass color values to the native input:
Ulric Wilfred commented
In my case the patch was, in Handler.js
/render
:
let color = this.getColor(); /* changed const to let */
if (!previewEl) {
return;
}
const hEl = document.createElement('div');
const style = hEl.style;
const baseCls = `${pfx}-handler`;
hEl.className = baseCls;
/* new code below */
console.log(color);
if (color.startsWith('rgb')) { // it's in form of rgb(..) or rgba(...)
color = rgbStrToHex(color); /* some implementation of RGB -> HEX conversion */
console.log(color); // now it is #rrggbb
}
conversions.js
:
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
function rgbStrToValues(rgbStr) {
let rgb = rgbStr.match(/\d+/g).map(Number);
return [ rgb[0], rgb[1], rgb[2] ];
}
function rgbaStrToValues(rgbaStr) {
return rgbaStr.match(/\d+/g).map(Number);
}
function colorValToHex(color) {
var hexadecimal = color.toString(16);
return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}
function rgbToHex(r, g, b) {
return "#" + colorValToHex(r) + colorValToHex(g) + colorValToHex(b);
}
function rgbaStrToHex(rbgaStr) {
const rgb = rgbStrToValues(rbgaStr);
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}
const rgbStrToHex = rgbaStrToHex;