diff --git a/src/Obj/Element/svg.js b/src/Obj/Element/svg.js index 58bbc1e..3580739 100644 --- a/src/Obj/Element/svg.js +++ b/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' diff --git a/src/Obj/Element/yj-color-picker.js b/src/Obj/Element/yj-color-picker.js index 3495428..fb45f6d 100644 --- a/src/Obj/Element/yj-color-picker.js +++ b/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) { - c = c.withAlpha(pickAlphaInput.value / 100) - this.pickAlphaInputValue = pickAlphaInput.value + if (AInput) { + c = c.withAlpha(AInput.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) { - pickAlphaInput.value = this.pickAlphaInputValue = 100 + if (AInput) { + 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() @@ -78,7 +83,7 @@ class YJColorPicker { let x = box.getBoundingClientRect().x let y = box.getBoundingClientRect().y let height = 0 - + // if (picker.style.display === 'none') { // picker.style.display = 'block' // height = picker.offsetHeight @@ -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 = '' /** 为完成、暂时隐藏 */////// - 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 = ` +
R
+
G
+
B
+
+ ` + let row2Elm = document.createElement('div') + row2Elm.className = 'row' + row2Elm.innerHTML = ` +
+ +
+
+ +
+
+ +
+ ` + 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 = ` - - % + ` pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling) pickerInput.style.width = '106px' - pickAlpha.style.width = '80px' - pickAlphaInput = pickAlpha.getElementsByClassName('input')[0] - pickAlphaInput.addEventListener('blur', (e) => { + pickAlpha.style.width = '66px' + pickAlpha.style.margin = '0 6px 0 0' + AInput = pickAlpha.getElementsByClassName('input')[0] + row1Elm.innerHTML = ` +
R
+
G
+
B
+
A
+
+ ` + 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 - box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString() + _this.pickAlphaInputValue = AInput.value + 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 = '' + subtractColorBtn.innerHTML = '' 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) { - c = c.withAlpha(pickAlphaInput.value / 100) + if (AInput) { + 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] + } + } } } diff --git a/static/3rdparty/ewPlugins.min.js b/static/3rdparty/ewPlugins.min.js index 8f9a006..ffd594b 100644 --- a/static/3rdparty/ewPlugins.min.js +++ b/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) diff --git a/static/custom/css/index.css b/static/custom/css/index.css index 87032c8..ec8178e 100644 --- a/static/custom/css/index.css +++ b/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-family: Arial; - font-size: 14px; + font-weight: 400 !important; + font-family: Arial !important; + 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; diff --git a/static/custom/img/icom-confirm.svg b/static/custom/img/icom-confirm.svg new file mode 100644 index 0000000..6ba0d24 --- /dev/null +++ b/static/custom/img/icom-confirm.svg @@ -0,0 +1,4 @@ + + + +