Merge branch 'develop' of http://xny.yj-3d.com:3000/zh/sdk4.0 into develop
This commit is contained in:
@ -1862,7 +1862,9 @@ class TrajectoryMotion extends Base {
|
||||
// this.options.viewFollowOrientation.roll = Cesium.Math.toDegrees(this.sdk.viewer.camera.roll)
|
||||
// this.options.viewFollowOrientation.direction = this.sdk.viewer.camera.direction
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
let cdoptions = this.deepCopyObj(this.options)
|
||||
cdoptions.host = ''
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(cdoptions)
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
},
|
||||
|
||||
@ -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']
|
||||
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']
|
||||
function setSvg() {
|
||||
let svgElm = document.createElement('svg');
|
||||
svgElm.xmlns = 'http://www.w3.org/2000/svg'
|
||||
|
||||
221
src/Obj/Element/yj-color-picker.js
Normal file
221
src/Obj/Element/yj-color-picker.js
Normal file
@ -0,0 +1,221 @@
|
||||
class YJColorPicker {
|
||||
constructor(options = {}) {
|
||||
let _this = this
|
||||
let pickAlphaInput
|
||||
let config = {
|
||||
el: options.el,
|
||||
size: "mini",
|
||||
isLog: false,
|
||||
disabled: options.disabled || false, //是否禁止打开颜色选择器
|
||||
alpha: false, //是否开启透明度
|
||||
sure: (color) => {
|
||||
if (pickAlphaInput) {
|
||||
let c = Cesium.Color.fromCssColorString(color).withAlpha(pickAlphaInput.value / 100)
|
||||
this.pickAlphaInputValue = pickAlphaInput.value
|
||||
color = c.toCssHexString()
|
||||
}
|
||||
if (options.sure && typeof options.sure == 'function') {
|
||||
options.sure(color)
|
||||
}
|
||||
setTimeout(() => {
|
||||
customizeStyle()
|
||||
}, this.colorPicker.config.pickerAnimationTime);
|
||||
},
|
||||
clear: () => {
|
||||
options.clear()
|
||||
},
|
||||
close: () => {
|
||||
pickAlphaInput.value = this.pickAlphaInputValue
|
||||
},
|
||||
clickDefineColor: clickDefineColor,
|
||||
hasClear: false,
|
||||
defaultColor: options.defaultColor || '#ffffff'
|
||||
}
|
||||
let CesiumColor = Cesium.Color.fromCssColorString(options.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)']
|
||||
}
|
||||
this.colorPicker = new ewColorPicker(config)
|
||||
window.colorPicker = this.colorPicker
|
||||
console.log('this.colorPicker', this.colorPicker, this.colorPicker.$Dom.pickerInput)
|
||||
|
||||
customizeStyle()
|
||||
|
||||
function customizeStyle() {
|
||||
let isSubtract = false
|
||||
let box = _this.colorPicker.$Dom.box
|
||||
let picker = _this.colorPicker.$Dom.picker
|
||||
picker.style.minWidth = '300px'
|
||||
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'
|
||||
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.$Dom.pickerInput
|
||||
pickerInput.parentNode.insertBefore(pickPen, pickerInput)
|
||||
pickerInput.style.width = 'calc(77% - 24px)'
|
||||
|
||||
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 = '39%'
|
||||
pickAlpha.style.width = 'calc(32% - 12px)'
|
||||
pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
|
||||
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._privateConfig.colorValue).withAlpha(pickAlphaInput.value / 100).toCssColorString()
|
||||
}
|
||||
else {
|
||||
CesiumColor = CesiumColor.withAlpha(1)
|
||||
}
|
||||
|
||||
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'
|
||||
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'
|
||||
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', () => {
|
||||
_this.colorPicker.updateColor(c.toCssColorString())
|
||||
clickDefineColor(colorString)
|
||||
})
|
||||
|
||||
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'
|
||||
let colorItemElm = document.createElement('div')
|
||||
colorItemElm.className = 'yj-pre-define-color-item'
|
||||
colorElm.appendChild(colorItemElm)
|
||||
|
||||
let c = Cesium.Color.fromCssColorString(_this.colorPicker.prevInputValue)
|
||||
if (pickAlphaInput) {
|
||||
c = c.withAlpha(pickAlphaInput.value / 100)
|
||||
}
|
||||
let colorString = c.toCssHexString()
|
||||
colorItemElm.style.backgroundColor = colorString
|
||||
colorItemElm.addEventListener('click', () => {
|
||||
_this.colorPicker.updateColor(c.toCssColorString())
|
||||
clickDefineColor(colorString)
|
||||
})
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default YJColorPicker
|
||||
Reference in New Issue
Block a user