Function addScaleKeyColor

docs/ui/src/js/scaleKeyColors.js:220–285

(scaleType, e, position)

}

function addScaleKeyColor(scaleType, e, position) {
  let smoothWrapper = document.getElementById(`${scaleType}_smoothWrapper`);
  let smooth = document.getElementById(`${scaleType}_smooth`);
  let thisId = e.target.id;
  let parentId = thisId.replace('_addKeyColor', '');

  let currentColor = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // TODO: replace with _diverging when available
  let currentKeys = scaleType === 'sequential' ? currentColor.colorKeys : position === 'start' ? currentColor.startKeys : currentColor.endKeys;

  let lastIndex = currentKeys.length;
  if (!lastIndex) lastIndex = 0;
  let lastColor = lastIndex > 0 ? chroma(currentKeys[lastIndex - 1]).hsluv() : chroma(currentKeys[0]).hsluv();
  let lastColorLightness = lastColor[2];
  let fCtintHalf = (100 - lastColorLightness) / 3 + lastColorLightness;
  let fCshadeHalf = lastColorLightness / 2;

  let c = lastColorLightness >= 50 ? chroma.hsluv(lastColor[0], lastColor[1], fCshadeHalf) : chroma.hsluv(lastColor[0], lastColor[1], fCtintHalf);
  c = c.hex();
  currentKeys.push(c);

  // Update color class arguments via the theme class
  if (scaleType === 'sequential') {
    currentColor.colorKeys = currentKeys;

    removeElementsByClass(`keyColor-${scaleType}`);
  } else {
    if (position === 'start') {
      currentColor.startKeys = currentKeys;
      // only remove respective inputs
      let parentDest = document.getElementById('diverging_startKeyColors');
      removeElementsByClass(`keyColor-${scaleType}`, parentDest);
    } else {
      currentColor.endKeys = currentKeys;
      // only remove respective inputs
      let parentDest = document.getElementById('diverging_endKeyColors');
      removeElementsByClass(`keyColor-${scaleType}`, parentDest);
    }
  }

  if (scaleType === 'sequential') {
    currentColor.colorKeys.forEach((key, i) => {
      addScaleKeyColorInput(key, thisId, scaleType, i, position);
    });
  } else {
    if (position === 'start') {
      currentColor.startKeys.forEach((key, i) => {
        addScaleKeyColorInput(key, thisId, scaleType, i, position);
      });
    } else {
      currentColor.endKeys.forEach((key, i) => {
        addScaleKeyColorInput(key, thisId, scaleType, i, position);
      });
    }
  }

  // Update gradient
  updateRamps(currentColor, parentId, scaleType);