class YJColorPicker {
constructor(options = {}) {
let _this = this
let RInput
let GInput
let BInput
let AInput
let config = {
el: options.el,
size: "mini",
isLog: false,
disabled: options.disabled || false, //是否禁止打开颜色选择器
alpha: false, //是否开启透明度
clickDefineColor: clickDefineColor,
hasClear: true,
openPickerAni: 'opacity',
defaultColor: options.defaultColor,
pickerInputChange: pickerInputChange,
startMainCallback: (t) => {
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
setTimeout(() => {
customizeStyle()
}, 0);
}
}
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 (AInput) {
c = c.withAlpha(AInput.value)
this.pickAlphaInputValue = AInput.value
}
color = c.toCssHexString()
if (typeof options.sure == 'function') {
options.sure(color)
}
customizeStyle()
}
}
if (options.clear) {
config.clear = () => {
if (AInput) {
AInput.value = this.pickAlphaInputValue = 1
}
this.colorPicker.config.defaultColor = ''
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
if (config.defaultColor) {
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 || !_this.colorPicker.picker) {
return
}
let isSubtract = false
let box = _this.colorPicker.box
let picker = _this.colorPicker.picker
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
// console.log('picker.style.display.opacity', picker.style.display.opacity)
// picker.style.display = 'none'
// }
// console.log('===========================================')
// console.log((y + box.offsetHeight + 4), height, window.innerHeight)
// if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
// console.log(y, height)
// picker.style.top = y - height + 'px'
// }
// else {
// picker.style.top = (y + box.offsetHeight + 4) + 'px'
// }
picker.style.left = x + 'px'
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 pickPen = document.createElement('div')
pickPen.className = 'icon-pen-box'
pickPen.innerHTML = ''
/** 为完成、暂时隐藏 *///////
pickPen.style.display = 'none'
pickPen.style.cursor = 'unset'
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)
RInput.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)
}
RInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
GInput.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)
}
GInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
BInput.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)
}
BInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
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 color-alpha'
pickAlpha.innerHTML = `
`
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
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)
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)
}
AInput.value = parseInt(value * 100) / 100
}
})
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
}
else {
AInput.value = CesiumColor ? parseInt(Number(CesiumColor.alpha.toFixed(2)) * 100) / 100 : 1
}
_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')
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 = ''
addColorBtn.className = 'yj-pre-collect-color add'
let subtractColorBtn = document.createElement('div')
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)
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 = ''
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 (AInput) {
c = c.withAlpha(AInput.value)
}
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 = ''
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) {
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'
}
}
})
}
height = picker.offsetHeight
if (picker.style.display === 'none') {
picker.style.display = 'block'
height = picker.offsetHeight
picker.style.display = 'none'
}
if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
picker.style.top = y - height + 'px'
}
else {
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 (AInput) {
let c = Cesium.Color.fromCssColorString(color)
AInput.value = parseInt(Number(c.alpha.toFixed(2)) * 100) / 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
}
}
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 colorRgbaToHsba(e) {
var t = e.slice(e.indexOf("(") + 1, e.lastIndexOf(")")).split(",")
, r = t.length < 4 ? 1 : Number(t[3])
, n = Number(t[0]) / 255
, o = Number(t[1]) / 255
, i = Number(t[2]) / 255
, a = void 0
, s = void 0
, l = void 0
, c = Math.min(n, o, i)
, d = l = Math.max(n, o, i)
, u = d - c;
if (d === c)
a = 0;
else {
switch (d) {
case n:
a = (o - i) / u + (o < i ? 6 : 0);
break;
case o:
a = 2 + (i - n) / u;
break;
case i:
a = 4 + (n - o) / u
}
a = Math.round(60 * a)
}
s = 0 === d ? 0 : 1 - c / d;
return s = Math.round(100 * s),
l = Math.round(100 * l),
{
h: a,
s: s,
b: l,
a: r
}
}
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]
}
}
}
}
window.YJColorPicker = YJColorPicker
export default YJColorPicker