artf / grapick

Easy configurable gradient picker, with no dependencies

Home Page:https://artf.github.io/grapick/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Doesn't pass color value to the newly created handle editor in Chrome

shamansir opened this issue · comments

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:

Screenshot 2022-03-21 at 14 02 37

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;