修改颜色选择器样式，显示rgba格式

src/Obj/Element/svg.js

@@ -1,4 +1,4 @@
-let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross']
+let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross', 'icom-confirm']
 function setSvg() {
   let svgElm = document.createElement('svg');
   svgElm.xmlns = 'http://www.w3.org/2000/svg'

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

@@ -1,7 +1,11 @@
 class YJColorPicker {
   constructor(options = {}) {
     let _this = this
-    let pickAlphaInput
+    let RInput
+    let GInput
+    let BInput
+    let AInput
+
     let config = {
       el: options.el,
       size: "mini",
@@ -12,6 +16,7 @@ class YJColorPicker {
       hasClear: true,
       openPickerAni: 'opacity',
       defaultColor: options.defaultColor,
+      pickerInputChange: pickerInputChange,
       startMainCallback: (t) => {
         _this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
         setTimeout(() => {
@@ -24,9 +29,9 @@ class YJColorPicker {
       config.sure = (color) => {
         // this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
         let c = Cesium.Color.fromCssColorString(color)
-        if (pickAlphaInput) {
+        if (AInput) {
-          c = c.withAlpha(pickAlphaInput.value / 100)
+          c = c.withAlpha(AInput.value)
-          this.pickAlphaInputValue = pickAlphaInput.value
+          this.pickAlphaInputValue = AInput.value
         }
         color = c.toCssHexString()
         if (typeof options.sure == 'function') {
@@ -37,8 +42,8 @@ class YJColorPicker {
     }
     if (options.clear) {
       config.clear = () => {
-        if (pickAlphaInput) {
+        if (AInput) {
-          pickAlphaInput.value = this.pickAlphaInputValue = 100
+          AInput.value = this.pickAlphaInputValue = 1
         }
         this.colorPicker.config.defaultColor = ''
         customizeStyle()
@@ -64,7 +69,7 @@ class YJColorPicker {
     // }
     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
+    // window.colorPicker = this.colorPicker
 
     customizeStyle()
 
@@ -103,16 +108,13 @@ class YJColorPicker {
         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>'
 
       /** 为完成、暂时隐藏 *///////
-      pickPen.style.opacity = '0'
+      pickPen.style.display = 'none'
       pickPen.style.cursor = 'unset'
 
 
@@ -120,19 +122,67 @@ class YJColorPicker {
       let pickerInput = _this.colorPicker.pickerInput
       pickerInput.parentNode.insertBefore(pickPen, pickerInput)
       pickerInput.style.width = '188px'
+      pickerInput.style.display = 'none'
+
+      let colorInputBox = document.createElement('div')
+      let row1Elm = document.createElement('div')
+      row1Elm.className = 'row'
+      row1Elm.style.margin = '6px 0 0 0'
+      row1Elm.innerHTML = `
+          <div class="col">R</div>
+          <div class="col">G</div>
+          <div class="col">B</div>
+          <div class="col" style="flex: 0 0 92px;"></div>
+      `
+      let row2Elm = document.createElement('div')
+      row2Elm.className = 'row'
+      row2Elm.innerHTML = `
+          <div class="col">
+            <input type="number" step="1" min="0" max="255">
+          </div>
+          <div class="col">
+            <input type="number" step="1" min="0" max="255">
+          </div>
+          <div class="col">
+            <input type="number" step="1" min="0" max="255">
+          </div>
+      `
+      colorInputBox.appendChild(row1Elm)
+      colorInputBox.appendChild(row2Elm)
+      let Inputs = row2Elm.getElementsByTagName('input')
+      Inputs[0].style.width = '72px'
+      Inputs[1].style.width = '72px'
+      Inputs[2].style.width = '72px'
+      RInput = Inputs[0]
+      GInput = Inputs[1]
+      BInput = Inputs[2]
+
+      let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0]
+      picker.insertBefore(colorInputBox, dropbtns)
 
       if (options.alpha) {
+        Inputs[0].style.width = '52px'
+        Inputs[1].style.width = '52px'
+        Inputs[2].style.width = '52px'
         let pickAlpha = document.createElement('div')
-        pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
+        pickAlpha.className = 'input-number input-number-unit color-alpha'
         pickAlpha.innerHTML = `
-        <input class="input" type="number" title="" step="1" min="0" max="100">
+        <input class="input" type="number" title="" step="0.01" min="0" max="1">
-        <span class="unit">%</span>
         <span class="arrow"></span>`
         pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
         pickerInput.style.width = '106px'
-        pickAlpha.style.width = '80px'
+        pickAlpha.style.width = '66px'
-        pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
+        pickAlpha.style.margin = '0 6px 0 0'
-        pickAlphaInput.addEventListener('blur', (e) => {
+        AInput = pickAlpha.getElementsByClassName('input')[0]
+        row1Elm.innerHTML = `
+          <div class="col">R</div>
+          <div class="col">G</div>
+          <div class="col">B</div>
+          <div class="col">A</div>
+          <div class="col" style="flex: 0 0 106px;"></div>
+        `
+        row2Elm.appendChild(pickAlpha)
+        AInput.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)
@@ -145,23 +195,26 @@ class YJColorPicker {
             if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
               value = Number(e.target.dataset.min)
             }
-            pickAlphaInput.value = Number(value.toFixed(0))
+            AInput.value = parseInt(value * 100) / 100
           }
         })
         if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
-          pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(0))
+          AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
         }
         else {
-          pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(0)) : 100
+          AInput.value = CesiumColor ? parseInt(CesiumColor.alpha * 100) / 100 : 1
         }
-        _this.pickAlphaInputValue = pickAlphaInput.value
+        _this.pickAlphaInputValue = AInput.value
-        box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
+        box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString()
       }
       else {
         CesiumColor = CesiumColor ? CesiumColor.withAlpha(1) : ''
         box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssColorString()
       }
 
+      let btngroup = picker.getElementsByClassName('ew-color-dropbtngroup')[0]
+      row2Elm.appendChild(btngroup)
+
       let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
       if (defineColorContainer) {
         let colorList = localStorage.getItem('custom-color')
@@ -188,8 +241,10 @@ class YJColorPicker {
         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.innerHTML = '<svg class="icon-minus" style="display: unset;"><use xlink:href="#yj-icon-minus"></use></svg><svg class="icon-confirm" style="display: none;"><use xlink:href="#yj-icom-confirm"></use></svg>'
         subtractColorBtn.className = 'yj-pre-collect-color subtract'
+        let minusIcon = subtractColorBtn.getElementsByClassName('icon-minus')[0]
+        let confirmIcon = subtractColorBtn.getElementsByClassName('icon-confirm')[0]
         collectColorContainer.appendChild(addColorBtn)
         collectColorContainer.appendChild(subtractColorBtn)
 
@@ -248,8 +303,8 @@ class YJColorPicker {
 
           let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
           let c = Cesium.Color.fromCssColorString(color || '#ffffff')
-          if (pickAlphaInput) {
+          if (AInput) {
-            c = c.withAlpha(pickAlphaInput.value / 100)
+            c = c.withAlpha(AInput.value)
           }
           let colorString = c.toCssHexString()
           colorItemElm.style.backgroundColor = colorString
@@ -283,11 +338,15 @@ class YJColorPicker {
         subtractColorBtn.addEventListener('click', () => {
           isSubtract = !isSubtract
           if (isSubtract) {
+            minusIcon.style.display = 'none'
+            confirmIcon.style.display = 'unset'
             for (let i = 0; i < subtractElmList.length; i++) {
               subtractElmList[i].style.display = 'block'
             }
           }
           else {
+            minusIcon.style.display = 'unset'
+            confirmIcon.style.display = 'none'
             for (let i = 0; i < subtractElmList.length; i++) {
               subtractElmList[i].style.display = 'none'
             }
@@ -308,12 +367,14 @@ class YJColorPicker {
         picker.style.top = (y + box.offsetHeight + 4) + 'px'
       }
       _this.colorPicker.pancelTop = parseFloat(picker.style.top) - 2
+
+      pickerInputChange(Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssHexString())
     }
 
     function clickDefineColor(color) {
-      if (pickAlphaInput) {
+      if (AInput) {
         let c = Cesium.Color.fromCssColorString(color)
-        pickAlphaInput.value = Number((c.alpha * 100).toFixed(0))
+        AInput.value = parseInt(c.alpha * 100) / 100
       }
     }
 
@@ -366,6 +427,46 @@ class YJColorPicker {
           "#" + n
       }
     }
+
+    function colorHexToRgba(hex, alpha) {
+      let a = alpha || 1,
+        hColor = hex.toLowerCase(),
+        hLen = hex.length,
+        rgbaColor = [];
+      hColor = Cesium.Color.fromCssColorString(hColor).toCssHexString().substring(0, 7)
+      const colorRegExp = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+      if (hex && colorRegExp.test(hColor)) {
+        //the hex length may be 4 or 7,contained the symbol of #
+        if (hLen === 4) {
+          let hSixColor = '#';
+
+          for (let i = 1; i < hLen; i++) {
+            let sColor = hColor.slice(i, i + 1);
+            hSixColor += sColor.concat(sColor);
+          }
+
+          hColor = hSixColor;
+        }
+
+        for (let j = 1, len = hColor.length; j < len; j += 2) {
+          rgbaColor.push(parseInt('0X' + hColor.slice(j, j + 2), 16));
+        }
+
+        // return "rgba(" + rgbaColor.join(",") + ',' + a + ")";
+        return rgbaColor;
+      } else {
+        return;
+      }
+    }
+
+    function pickerInputChange(v) {
+      if (_this.colorPicker && _this.colorPicker.pickerInput) {
+        let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value)
+        RInput.value = rgbaColor[0]
+        GInput.value = rgbaColor[1]
+        BInput.value = rgbaColor[2]
+      }
+    }
   }
 }
 

static/3rdparty/ewPlugins.min.js

@@ -746,6 +746,7 @@
         o.colorHsbaToRgba)(e.hsba) : e.pickerInput.value = (0,
         o.colorRgbaToHex)((0,
         o.colorHsbaToRgba)(e.hsba))
+        e.config.pickerInputChange && e.config.pickerInputChange()
     }
     function f(e) {
         if (this.pickerFlag = !1,
@@ -795,6 +796,8 @@
                 n.isFunction)(e.sure) ? e.sure : null,
                 clear: (0,
                 n.isFunction)(e.clear) ? e.clear : null,
+                pickerInputChange: (0,
+                    n.isFunction)(e.pickerInputChange) ? e.pickerInputChange : null,
                 startMainCallback: (0,
                   n.isFunction)(e.startMainCallback) ? e.startMainCallback : null,
                 clickDefineColor: (0,
@@ -891,6 +894,7 @@
             var u = i - e.hsba.a * i;
             c(e.alphaBarThumb, "top", u + "px")
         }
+        e.config.pickerInputChange && e.config.pickerInputChange()
     }
     function b(e, t) {
         var r = e.hueBar.offsetHeight
@@ -1086,6 +1090,7 @@
                 o.colorRgbaToHex)((0,
                 o.colorHsbaToRgba)(e.hsba));
                 e.config.defaultColor = e.pickerInput.value
+                e.config.pickerInputChange && e.config.pickerInputChange()
                 e.render(e.box.parentNode, e.config),
                 e.config.sure(t, e)
             }(r)

static/custom/css/index.css

@@ -1034,8 +1034,19 @@
   padding: 5px;
   position: fixed !important;
 }
+.YJ-custom-base-dialog>.content .ew-color-picker input {
+  font-size: 14px;
+  line-height: 28px;
+  height: 28px;
+  padding: 0 8px;
+  font-weight: 400;
+}
+.YJ-custom-base-dialog>.content .ew-color-picker .input-number-unit input[type=number] {
+  padding: 0 20px 0 8px;
+  width: 66px;
+}
 
-.YJ-custom-base-dialog .ew-color-picker>.ew-color-picker-content {
+.YJ-custom-base-dialog.ew-color-picker>.ew-color-picker-content {
   margin-bottom: 10px;
 }
 .YJ-custom-base-dialog .ew-color-picker>.ew-color-picker-content>.ew-color-panel  {
@@ -1064,6 +1075,10 @@
   line-height: 24px;
 }
 
+.YJ-custom-base-dialog>.content>div .ew-color-picker .row>.col {
+  margin: 0 !important;
+}
+
 .YJ-custom-base-dialog .ew-color-picker .icon-pen-box .icon-pen {
   margin: 0;
 }
@@ -1079,9 +1094,9 @@
 }
 
 .YJ-custom-base-dialog .ew-color-picker .color-alpha>input {
-  font-weight: 400;
+  font-weight: 400 !important;
-  font-family: Arial;
+  font-family: Arial !important;
-  font-size: 14px;
+  font-size: 14px !important;
 }
 
 .YJ-custom-base-dialog .ew-color-picker>.ew-pre-define-color-container {
@@ -1169,10 +1184,13 @@
 
 .YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup {
   display: flex;
+  position: unset;
 }
 
 .YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button {
-  padding: 5px 10px 4px 10px;
+  padding: 0 8px;
+  height: 28px;
+  line-height: 28px;
 }
 .YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button.ew-color-clear {
   margin-right: 8px;

static/custom/img/icom-confirm.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="9.19921875" viewBox="0 0 12 9.19921875" fill="none">
+<path d="M4.66806 9.2C4.47815 9.2 4.29548 9.12926 4.15776 9.00078L0.22761 5.35124C-0.0666872 5.0784 -0.0768368 4.62509 0.204411 4.33925C0.485649 4.0534 0.953909 4.04474 1.2482 4.31759L4.60427 7.43442L10.6916 0.260945C10.9511 -0.0436629 11.4165 -0.0884161 11.731 0.162779C12.0457 0.413972 12.0905 0.864388 11.8325 1.17044L5.23924 8.94014C5.10877 9.09461 4.91741 9.18845 4.713 9.2L4.66806 9.2Z"   fill="#FFFFFF" >
+</path>
+</svg>