sdk4.0/src/Obj/Element/yj-color-picker.js

class YJColorPicker {
  constructor(options = {}) {
    let _this = this
    let pickAlphaInput
    let config = {
      el: options.el,
      size: "mini",
      isLog: false,
      disabled: options.disabled || false, //是否禁止打开颜色选择器
      alpha: false, //是否开启透明度
      clickDefineColor: clickDefineColor,
      hasClear: true,
      openPickerAni: 'opacity',
      defaultColor: options.defaultColor || '#ffffff',
      startMainCallback: (t) => {
        customizeStyle()
      }
    }
    this.el = options.el
    if (options.sure) {
      config.sure = (color) => {
        this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
        let c = Cesium.Color.fromCssColorString(color)
        if (pickAlphaInput) {
          c = c.withAlpha(pickAlphaInput.value / 100)
          this.pickAlphaInputValue = pickAlphaInput.value
        }
        color = c.toCssHexString()
        if (typeof options.sure == 'function') {
          options.sure(color)
        }
        customizeStyle()
      }
    }
    if (options.clear) {
      config.clear = () => {
        if (pickAlphaInput) {
          pickAlphaInput.value = this.pickAlphaInputValue = 100
        }
        customizeStyle()
        if (typeof options.clear == 'function') {
          options.clear()
        }
        // setTimeout(() => {
        //   this.pickAlphaInputValue = 100
        //   this.colorPicker.$Dom.pickerInput.value = ''
        //   if (options.clear && typeof options.clear == 'function') {
        //     options.clear()
        //   }
        //   customizeStyle()
        // }, this.colorPicker.config.pickerAnimationTime);
      }
    }
    let CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
    if (!CesiumColor) {
      config.defaultColor = '#ffffff'
      CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
    }
    // if (options.predefineColor) {
    //   config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
    // }
    config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
    this.colorPicker = new ewPlugins('colorpicker', config)
    window.colorPicker = this.colorPicker

    customizeStyle()

    function customizeStyle() {
      if (!_this.colorPicker) {
        return
      }
      let isSubtract = false
      let box = _this.colorPicker.box
      let picker = _this.colorPicker.picker
      picker.style.minWidth = '325px'
      let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
      let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
      if (pickAlphaSliderBar) {
        pickAlphaSliderBar.parentNode.style.width = '16px'
        pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
      }
      // let customDivider = document.createElement('span')
      // customDivider.className = 'custom-divider'
      // customDivider.style.margin = '10px 0'
      // pickerContent.parentNode.insertBefore(customDivider, pickerContent.nextSibling)
      let pickPen = document.createElement('div')
      pickPen.className = 'icon-pen-box'
      pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
      let pickerInput = _this.colorPicker.pickerInput
      pickerInput.parentNode.insertBefore(pickPen, pickerInput)
      pickerInput.style.width = '188px'

      if (options.alpha) {
        let pickAlpha = document.createElement('div')
        pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
        pickAlpha.innerHTML = `
        <input class="input" type="number" title="" step="0.01" min="0" max="100">
        <span class="unit">%</span>
        <span class="arrow"></span>`
        pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
        pickerInput.style.width = '106px'
        pickAlpha.style.width = '80px'
        pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
        pickAlphaInput.addEventListener('blur', (e) => {
          let value = e.target.value
          if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
            value = Number(value)
            if ((e.target.max) && value > Number(e.target.max)) {
              value = Number(e.target.max)
            }
            if ((e.target.min) && value < Number(e.target.min)) {
              value = Number(e.target.min)
            }
            if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
              value = Number(e.target.dataset.min)
            }
            pickAlphaInput.value = value
          }
        })
        if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
          pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(2))
        }
        else {
          pickAlphaInput.value = Number((CesiumColor.alpha * 100).toFixed(2))
        }
        _this.pickAlphaInputValue = pickAlphaInput.value
        box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
      }
      else {
        CesiumColor = CesiumColor.withAlpha(1)
        box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssColorString()
      }

      let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
      if (defineColorContainer) {
        let colorList = localStorage.getItem('custom-color')
        if (colorList) {
          colorList = JSON.parse(colorList)
        }
        else {
          colorList = {}
        }
        let customDivider2 = document.createElement('span')
        customDivider2.className = 'custom-divider'
        customDivider2.style.margin = '10px 0'
        let customDivider3 = document.createElement('span')
        customDivider3.className = 'custom-divider'
        defineColorContainer.parentNode.insertBefore(customDivider2, defineColorContainer)
        defineColorContainer.parentNode.insertBefore(customDivider3, defineColorContainer.nextSibling)

        let collectColorContainer = document.createElement('div')
        collectColorContainer.className = 'yj-pre-collect-color-container'
        customDivider3.parentNode.insertBefore(collectColorContainer, customDivider3.nextSibling)

        let addColorBtn = document.createElement('div')
        addColorBtn.innerHTML = '<svg class="icon-add2"><use xlink:href="#yj-icon-add2"></use></svg>'
        addColorBtn.className = 'yj-pre-collect-color add'

        let subtractColorBtn = document.createElement('div')
        subtractColorBtn.innerHTML = '<svg class="icon-minus"><use xlink:href="#yj-icon-minus"></use></svg>'
        subtractColorBtn.className = 'yj-pre-collect-color subtract'
        collectColorContainer.appendChild(addColorBtn)
        collectColorContainer.appendChild(subtractColorBtn)

        let subtractElmList = []
        for (let key in colorList) {
          let colorElm = document.createElement('div')
          colorElm.className = 'yj-pre-collect-color'
          colorElm.setAttribute('tabindex', '0')
          colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
          let colorItemElm = document.createElement('div')
          colorItemElm.className = 'yj-pre-define-color-item'
          colorElm.appendChild(colorItemElm)
          colorItemElm.className = 'yj-pre-define-color-item'
          let c = Cesium.Color.fromCssColorString(colorList[key])
          let colorString = c.toCssHexString()
          colorItemElm.style.backgroundColor = colorString
          colorItemElm.addEventListener('click', (e) => {
            _this.colorPicker.updateColor(e)
            colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
            clickDefineColor(colorString)
          })
          colorElm.addEventListener("blur", function (e) {
            colorElm.className = 'yj-pre-collect-color'
          })

          let subtractElm = document.createElement('div')
          subtractElm.className = 'yj-pre-define-color-item subtract-btn'
          subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
          subtractElm.style.display = 'none'
          colorElm.appendChild(subtractElm)

          collectColorContainer.appendChild(colorElm)

          subtractElm.addEventListener('click', () => {
            delete colorList[key]
            localStorage.setItem('custom-color', JSON.stringify(colorList))
            collectColorContainer.removeChild(colorElm)
          })
          subtractElmList.push(subtractElm)
        }

        addColorBtn.addEventListener('click', () => {
          if (isSubtract) {
            isSubtract = false
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'none'
            }
          }
          let colorElm = document.createElement('div')
          colorElm.className = 'yj-pre-collect-color'
          colorElm.setAttribute('tabindex', '0')
          colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
          let colorItemElm = document.createElement('div')
          colorItemElm.className = 'yj-pre-define-color-item'
          colorElm.appendChild(colorItemElm)

          let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
          let c = Cesium.Color.fromCssColorString(color || '#ffffff')
          if (pickAlphaInput) {
            c = c.withAlpha(pickAlphaInput.value / 100)
          }
          let colorString = c.toCssHexString()
          colorItemElm.style.backgroundColor = colorString
          colorItemElm.addEventListener('click', (e) => {
            _this.colorPicker.updateColor(e)
            colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
            clickDefineColor(colorString)
          })
          colorElm.addEventListener("blur", function (e) {
            colorElm.className = 'yj-pre-collect-color'
          })
          collectColorContainer.appendChild(colorElm)

          let subtractElm = document.createElement('div')
          subtractElm.className = 'yj-pre-define-color-item subtract-btn'
          subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
          subtractElm.style.display = 'none'
          colorElm.appendChild(subtractElm)
          subtractElmList.push(subtractElm)

          let key = Cesium.createGuid()
          colorList[key] = colorString
          localStorage.setItem('custom-color', JSON.stringify(colorList))
          subtractElm.addEventListener('click', () => {
            delete colorList[key]
            localStorage.setItem('custom-color', JSON.stringify(colorList))
            collectColorContainer.removeChild(colorElm)
          })
        })

        subtractColorBtn.addEventListener('click', () => {
          isSubtract = !isSubtract
          if (isSubtract) {
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'block'
            }
          }
          else {
            for (let i = 0; i < subtractElmList.length; i++) {
              subtractElmList[i].style.display = 'none'
            }
          }
        })
      }
    }

    function clickDefineColor(color) {
      if (pickAlphaInput) {
        let c = Cesium.Color.fromCssColorString(color)
        pickAlphaInput.value = c.alpha * 100
      }
    }

    function colorHsbaToRgba(e) {
      var r, n, o, i = e.a, a = Math.round(e.h), s = Math.round(255 * e.s / 100), l = Math.round(255 * e.b / 100);
      if (0 === s)
        r = n = o = l;
      else {
        var c = (255 - s) * l / 255
          , d = a % 60 * (l - c) / 60;
        360 === a ? (r = l,
          n = o = 0) : a < 60 ? (r = l,
            n = c + d,
            o = c) : a < 120 ? (r = l - d,
              n = l,
              o = c) : a < 180 ? (r = c,
                n = l,
                o = c + d) : a < 240 ? (r = c,
                  n = l - d,
                  o = l) : a < 300 ? (r = c + d,
                    n = c,
                    o = l) : a < 360 ? (r = l,
                      n = c,
                      o = l - d) : r = n = o = 0
      }
      return "rgba(" + Math.round(r) + "," + Math.round(n) + "," + Math.round(o) + "," + i + ")"
    }

    function colorRgbaToHex(e) {
      var t = {
        10: "A",
        11: "B",
        12: "C",
        13: "D",
        14: "E",
        15: "F"
      };
      if (/rgba?/.test(e)) {
        var r = e.replace(/rgba?\(/, "").replace(/\)/, "").replace(/[\s+]/g, "").split(",")
          , n = "";
        r[3];
        return r.map(function (e, r) {
          r <= 2 && (n += function (e) {
            e = Math.min(Math.round(e), 255);
            var r = Math.floor(e / 16)
              , n = e % 16;
            return "" + (t[r] || r) + (t[n] || n)
          }(e))
        }),
          "#" + n
      }
    }
  }
}

window.YJColorPicker = YJColorPicker
export default YJColorPicker