You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
16 KiB
354 lines
16 KiB
import { |
|
VerticalLayout, |
|
Layout, |
|
AbsoluteLayout, |
|
shortcut, |
|
Widget, |
|
isNotNull, |
|
extend, |
|
isNotEmptyString, |
|
array2String, |
|
map, |
|
count, |
|
string2Array, |
|
filter, |
|
isArray, |
|
Cache, |
|
Queue, |
|
i18nText, |
|
emptyFn |
|
} from "@/core"; |
|
import { Label, Combo, TextItem } from "@/base"; |
|
import { PopupPanel } from "../layer"; |
|
import { CustomColorChooser } from "./colorchooser.custom"; |
|
import { ColorChooserPopup } from "./colorchooser.popup"; |
|
import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker"; |
|
|
|
/** |
|
* @author windy |
|
* @version 2.0 |
|
* Created by windy on 2020/11/10 |
|
*/ |
|
@shortcut() |
|
export class HexColorChooserPopup extends Widget { |
|
static xtype = "bi.hex_color_chooser_popup"; |
|
|
|
static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
|
|
|
props = { |
|
baseCls: "bi-color-chooser-popup", |
|
width: 300, |
|
recommendColorsGetter: emptyFn, // 推荐色获取接口 |
|
simple: false, // 简单模式, popup中没有自动和透明 |
|
}; |
|
|
|
render() { |
|
const o = this.options; |
|
const hasRecommendColors = isNotNull(o.recommendColorsGetter()); |
|
|
|
return [ |
|
{ |
|
type: VerticalLayout.xtype, |
|
items: [ |
|
{ |
|
el: { |
|
type: VerticalLayout.xtype, |
|
hgap: 15, |
|
items: [ |
|
extend( |
|
{ |
|
type: o.simple |
|
? "bi.simple_hex_color_picker_editor" |
|
: "bi.hex_color_picker_editor", |
|
value: o.value, |
|
height: o.simple ? 36 : 70, |
|
listeners: [ |
|
{ |
|
eventName: ColorPickerEditor.EVENT_CHANGE, |
|
action: (...args) => { |
|
this.setValue(this.colorEditor.getValue()); |
|
this._dealStoreColors(); |
|
this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.colorEditor = _ref; |
|
}, |
|
}, |
|
o.editor |
|
), |
|
{ |
|
el: { |
|
type: HexColorPicker.xtype, |
|
cls: "bi-border-bottom bi-border-right", |
|
items: [this._digestStoreColors(this._getStoreColors())], |
|
height: 22, |
|
value: o.value, |
|
listeners: [ |
|
{ |
|
eventName: ColorPicker.EVENT_CHANGE, |
|
action: (...args) => { |
|
this.setValue(this.storeColors.getValue()[0]); |
|
this._dealStoreColors(); |
|
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.storeColors = _ref; |
|
}, |
|
}, |
|
tgap: 10, |
|
height: 22, |
|
}, |
|
{ |
|
el: hasRecommendColors |
|
? { |
|
type: VerticalLayout.xtype, |
|
items: [ |
|
{ |
|
type: Label.xtype, |
|
text: i18nText("BI-Basic_Recommend_Color"), |
|
textAlign: "left", |
|
height: 24, |
|
}, |
|
{ |
|
type: HexColorPicker.xtype, |
|
cls: "bi-border-bottom bi-border-right", |
|
items: [this._digestStoreColors(o.recommendColorsGetter())], |
|
height: 22, |
|
value: o.value, |
|
listeners: [ |
|
{ |
|
eventName: ColorPicker.EVENT_CHANGE, |
|
action: (...args) => { |
|
this.setValue(this.recommendColors.getValue()[0]); |
|
this._dealStoreColors(); |
|
this.fireEvent( |
|
ColorChooserPopup.EVENT_CHANGE, |
|
...args |
|
); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.recommendColors = _ref; |
|
}, |
|
} |
|
], |
|
} |
|
: { type: Layout.xtype }, |
|
tgap: hasRecommendColors ? 10 : 0, |
|
height: hasRecommendColors ? 47 : 0, |
|
}, |
|
{ |
|
el: { |
|
type: Layout.xtype, |
|
cls: "bi-border-top", |
|
}, |
|
vgap: 10, |
|
height: 1, |
|
}, |
|
{ |
|
type: AbsoluteLayout.xtype, |
|
items: [ |
|
{ |
|
el: { |
|
type: HexColorPicker.xtype, |
|
space: true, |
|
value: o.value, |
|
listeners: [ |
|
{ |
|
eventName: ColorPicker.EVENT_CHANGE, |
|
action: (...args) => { |
|
this.setValue(this.colorPicker.getValue()[0]); |
|
this._dealStoreColors(); |
|
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.colorPicker = _ref; |
|
}, |
|
}, |
|
top: 0, |
|
left: 0, |
|
right: 0, |
|
bottom: 1, |
|
} |
|
], |
|
height: 80, |
|
} |
|
], |
|
}, |
|
}, |
|
{ |
|
el: { |
|
type: Combo.xtype, |
|
cls: "bi-border-top", |
|
container: null, |
|
direction: "right,top", |
|
isNeedAdjustHeight: false, |
|
el: { |
|
type: TextItem.xtype, |
|
cls: "color-chooser-popup-more bi-list-item", |
|
textAlign: "center", |
|
height: 24, |
|
textLgap: 10, |
|
text: `${i18nText("BI-Basic_More")}...`, |
|
}, |
|
popup: { |
|
type: PopupPanel.xtype, |
|
buttons: [i18nText("BI-Basic_Cancel"), i18nText("BI-Basic_Save")], |
|
title: i18nText("BI-Custom_Color"), |
|
el: { |
|
type: CustomColorChooser.xtype, |
|
value: o.value, |
|
editor: o.editor, |
|
ref: _ref => { |
|
this.customColorChooser = _ref; |
|
}, |
|
}, |
|
stopPropagation: false, |
|
bgap: -1, |
|
rgap: 1, |
|
lgap: 1, |
|
minWidth: 227, |
|
listeners: [ |
|
{ |
|
eventName: PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, |
|
action: (index, ...args) => { |
|
switch (index) { |
|
case 0: |
|
this.more.hideView(); |
|
break; |
|
case 1: { |
|
const color = this.customColorChooser.getValue(); |
|
// farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 |
|
if (isNotEmptyString(color)) { |
|
this.setValue(color); |
|
this._dealStoreColors(); |
|
} |
|
this.more.hideView(); |
|
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); |
|
break; |
|
} |
|
default: |
|
break; |
|
} |
|
}, |
|
} |
|
], |
|
}, |
|
listeners: [ |
|
{ |
|
eventName: Combo.EVENT_AFTER_POPUPVIEW, |
|
action: () => { |
|
this.customColorChooser.setValue(this.getValue()); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.more = _ref; |
|
}, |
|
}, |
|
tgap: 10, |
|
height: 24, |
|
} |
|
], |
|
}, |
|
{ |
|
type: AbsoluteLayout.xtype, |
|
items: [ |
|
{ |
|
el: { |
|
type: Layout.xtype, |
|
cls: "disable-mask", |
|
invisible: !o.disabled, |
|
ref: (ref) => { |
|
this.mask = ref; |
|
}, |
|
}, |
|
left: 0, |
|
right: 0, |
|
top: 0, |
|
bottom: 0, |
|
} |
|
], |
|
} |
|
]; |
|
} |
|
|
|
// 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 |
|
mounted() { |
|
const o = this.options; |
|
if (isNotNull(o.value)) { |
|
this.setValue(o.value); |
|
} |
|
} |
|
|
|
_setEnable(enable) { |
|
super._setEnable(...arguments); |
|
this.mask.setVisible(!enable); |
|
} |
|
|
|
_dealStoreColors() { |
|
const color = this.getValue(); |
|
const colors = this._getStoreColors(); |
|
const que = new Queue(12); |
|
que.fromArray(colors); |
|
que.remove(color); |
|
que.unshift(color); |
|
const array = que.toArray(); |
|
Cache.setItem("colors", array2String(array)); |
|
this.setStoreColors(array); |
|
} |
|
|
|
_digestStoreColors(colors) { |
|
const items = map(colors.slice(0, 12), (i, color) => { |
|
return { |
|
value: color, |
|
}; |
|
}); |
|
count(colors.length, 12, i => { |
|
items.push({ |
|
value: "empty", |
|
disabled: true, |
|
}); |
|
}); |
|
|
|
return items; |
|
} |
|
|
|
_getStoreColors() { |
|
const o = this.options; |
|
const colorsArray = string2Array(Cache.getItem("colors") || ""); |
|
|
|
return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true)); |
|
} |
|
|
|
_isRGBColor(color) { |
|
return isNotEmptyString(color) && color !== "transparent"; |
|
} |
|
|
|
setStoreColors(colors) { |
|
if (isArray(colors)) { |
|
this.storeColors.populate([this._digestStoreColors(colors)]); |
|
// BI-66973 选中颜色的同时选中历史 |
|
this.storeColors.setValue(this.getValue()); |
|
} |
|
} |
|
|
|
setValue(color) { |
|
this.colorEditor.setValue(color); |
|
this.colorPicker.setValue(color); |
|
this.storeColors.setValue(color); |
|
this.recommendColors && this.recommendColors.setValue(color); |
|
} |
|
|
|
getValue() { |
|
return this.colorEditor.getValue(); |
|
} |
|
}
|
|
|