amis/examples/components/EChartsEditor/Common.tsx

1292 lines
30 KiB
TypeScript
Raw Normal View History

2020-10-29 19:52:25 +08:00
/**
* @file
*/
/**
* name title name title.name
* @param name
* @param label
*/
export const createHierarchy = (name: string, controls: any[]) => {
return {
name: name,
type: 'combo',
label: '',
noBorder: true,
multiLine: true,
items: controls
};
};
/**
* 便
* @param name
* @param label
*/
export const color = (
name: string,
label: string,
defaultColor?: string,
labelRemark?: string
) => {
return {
type: 'color',
format: 'rgba',
pipeIn: (value: any) => {
if (
typeof value === 'undefined' &&
defaultColor &&
defaultColor !== 'null'
) {
return defaultColor;
}
return value;
},
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined,
name: name,
label: label
};
};
2020-10-30 17:58:23 +08:00
/**
* true switch inline
* @param name
* @param label
*/
export const trueSwitch = (
name: string,
label: string,
labelRemark?: string
) => {
2020-10-30 17:58:23 +08:00
return {
type: 'switch',
name: name,
mode: 'inline',
className: 'w-full',
2020-10-30 17:58:23 +08:00
label: label,
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined,
2020-10-30 17:58:23 +08:00
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return true;
}
return value;
}
};
};
/**
* false switch inline
* @param name
* @param label
*/
export const falseSwitch = (
name: string,
label: string,
labelRemark?: string
) => {
2020-10-30 17:58:23 +08:00
return {
type: 'switch',
name: name,
mode: 'inline',
className: 'w-full',
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined,
2020-10-30 17:58:23 +08:00
label: label
};
};
/**
* select
* @param name
* @param label
* @param options
*/
export const select = (
name: string,
label: string,
options: any[],
labelRemark?: string
) => {
2020-10-30 17:58:23 +08:00
return {
type: 'select',
name: name,
label: label,
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined,
2020-10-30 17:58:23 +08:00
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return options[0];
}
return value;
},
options: options
};
};
/**
* fieldSet
* @param label
* @param controls
* @param collapsed
*/
export const fieldSet = (
label: string,
controls: any[],
collapsed: boolean = false
) => {
return {
type: 'fieldSet',
title: label,
collapsable: true,
collapsed: collapsed,
mountOnEnter: true,
body: controls
2020-10-30 17:58:23 +08:00
};
};
/**
*
* @param visibleOn
* @param controls
*/
export const visibleOn = (visibleOn: string, controls: any[]) => {
return {
type: 'container',
visibleOn: visibleOn,
body: controls
2020-10-30 17:58:23 +08:00
};
};
/**
* 便
* @param name
* @param label
* @param isInteger
*/
export const number = (
name: string,
label: string,
labelRemark?: string,
defaultNumber?: number,
min: number = -1e4,
max: number = 1e4,
step: number = 1
) => {
const control: any = {
type: 'input-number',
name: name,
label: label
};
if (labelRemark) {
control.labelRemark = {
type: 'remark',
content: labelRemark
};
}
if (typeof defaultNumber !== 'undefined') {
control.pipeIn = (value: any) => {
if (typeof value === 'undefined') {
return defaultNumber;
}
return value;
};
}
control.min = min;
control.max = max;
control.step = step;
return control;
};
/**
*
* @param name
* @param label
* @param labelRemark
* @param defaultText
*/
export const text = (
name: string,
label: string,
labelRemark?: string,
defaultText?: string
) => {
const control: any = {
type: 'input-text',
name: name,
label: label
};
if (labelRemark) {
if (labelRemark) {
control.labelRemark = {
type: 'remark',
content: labelRemark
};
}
}
if (typeof defaultText !== 'undefined') {
control.pipeIn = (value: any) => {
if (typeof value === 'undefined') {
return defaultText;
}
return value;
};
}
return control;
};
/**
* left/top auto
2020-10-29 19:52:25 +08:00
* @param name
* @param label
* @param labelForRadio
* @param keywordList
*/
export const viewportControl = (
2020-10-29 19:52:25 +08:00
name: string,
label: string,
labelForRadio: string,
keywordList: string[]
) => {
return [
{
type: 'button-group',
name: name,
label: labelForRadio,
options: [
{
label: '关键字',
value: keywordList[0]
},
{
label: '数字',
value: 2
},
{
label: '百分比',
value: 3
}
],
pipeIn: value => {
if (typeof value === 'undefined') {
return keywordList[0];
}
if (typeof value === 'string') {
if (value.indexOf('%') !== -1) {
return 3;
} else {
return keywordList[0];
}
} else if (typeof value === 'number') {
return 2;
} else {
return keywordList[0];
}
},
pipeOut: value => {
2020-10-29 19:52:25 +08:00
if (value === 1) {
return keywordList[0];
} else if (value === 2) {
return 0;
} else if (value === 3) {
return '0%';
} else {
return keywordList[0];
}
}
},
{
type: 'select',
name: name,
label: label,
options: keywordList,
2020-11-02 19:39:21 +08:00
visibleOn: `(typeof this.${name} === "undefined") || ((typeof this.${name} === "string") && (this.${name}.indexOf("%") === -1))`
2020-10-29 19:52:25 +08:00
},
{
type: 'input-number',
2020-10-29 19:52:25 +08:00
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `(typeof this.${name} === "number")`
2020-10-29 19:52:25 +08:00
},
{
type: 'input-text',
2020-10-29 19:52:25 +08:00
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `(typeof this.${name} === "string") && (this.${name}.indexOf("%") !== -1)`
2020-10-29 19:52:25 +08:00
}
];
};
2020-10-30 17:58:23 +08:00
/**
*
2020-11-01 22:35:09 +08:00
* @param label
2020-10-30 17:58:23 +08:00
* @param label
*/
2020-11-01 22:35:09 +08:00
export const viewport = (scope: string, label: string) => {
2020-10-30 17:58:23 +08:00
return {
type: 'fieldSet',
title: '离容器边距',
collapsable: true,
collapsed: true,
mountOnEnter: true,
body: [
2020-10-30 17:58:23 +08:00
...viewportControl(
2020-11-02 19:39:21 +08:00
`${scope}left`,
`${label}离容器左侧的距离`,
'左侧距离值类型',
['auto', 'left', 'center', 'right']
),
...viewportControl(
`${scope}top`,
`${label}离容器上侧的距离`,
'上侧距离值类型',
['auto', 'top', 'middle', 'bottom']
),
...viewportControl(
`${scope}right`,
2020-10-30 17:58:23 +08:00
`${label}离容器右侧的距离`,
'右侧距离值类型',
['auto']
),
...viewportControl(
2020-11-02 19:39:21 +08:00
`${scope}bottom`,
2020-10-30 17:58:23 +08:00
`${label}离容器下侧的距离`,
'下侧距离值类型',
['auto']
)
]
};
};
/**
* 便
* @param label
*/
export const width = (label: string) => {
return keywordOrNumber('width', `${label}的宽度`, '宽度的单位', ['auto']);
};
/**
* 便
* @param label
*/
export const height = (label: string) => {
return keywordOrNumber('height', `${label}的高度`, '高度的单位', ['auto']);
};
/**
* padding 便
* @param label
*/
export const padding = (label: string) => {
return numberOrArray('padding', label + '内边距', '单独设置每个内边距');
};
2020-10-30 17:58:23 +08:00
/**
* orient 便
* @param label
*/
export const origin = (label: string) => {
return select('origin', `${label}列表的布局朝向`, ['horizontal', 'vertical']);
};
/**
* formatter 便
* @param label
*/
export const formatter = (label: string) => {
return {
type: 'input-text',
2020-10-30 17:58:23 +08:00
name: 'formatter',
label: `格式化${label}文本`
};
};
/**
* selectedMode 便
* @param label
*/
export const selectedMode = (label: string) => {
return booleanOrKeyword('selectedMode', `${label}选择的模式`, [
{label: '单选', value: 'single'},
{label: '多选', value: 'multiple'}
]);
};
2020-11-02 19:39:21 +08:00
/**
*
* @param scope
*/
export const animation = (scope?: string, collapsed: boolean = true) => {
let prefix = '';
if (scope) {
prefix = `${scope}.`;
}
const easing = [
'linear',
'quadraticIn',
'quadraticOut',
'quadraticInOut',
'cubicIn',
'cubicOut',
'cubicInOut',
'quarticIn',
'quarticOut',
'quarticInOut',
'quinticIn',
'quinticOut',
'quinticInOut',
'sinusoidalIn',
'sinusoidalOut',
'sinusoidalInOut',
'exponentialIn',
'exponentialOut',
'exponentialInOut',
'circularIn',
'circularOut',
'circularInOut',
'elasticIn',
'elasticOut',
'elasticInOut',
'backIn',
'backOut',
'backInOut',
'bounceIn',
'bounceOut',
'bounceInOut'
];
return fieldSet('动画', [
trueSwitch(`${prefix}animation`, '是否开启动画'),
visibleOn(`this.${prefix}animation`, [
number(
`${prefix}animationThreshold`,
'是否开启动画的阈值',
'当单个系列显示的图形数量大于这个阈值时会关闭动画',
2000
),
number(
`${prefix}animationDuration`,
'初始动画的时长',
'支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果,不过只能写代码',
1000
),
select(`${prefix}animationEasing`, '初始动画的缓动效果', easing),
number(
`${prefix}animationDelay`,
'初始动画的延迟',
'初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果',
0
)
]),
number(
`${prefix}animationDurationUpdate`,
'数据更新动画的时长',
'支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果',
200
),
select(`${prefix}animationEasingUpdate`, '数据更新动画的缓动效果', easing),
number(
`${prefix}animationDelayUpdate`,
'数据更新动画的延迟',
'支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果'
)
]);
};
/**
* icon
*/
export const icon = (label: string) => {
return keywordOrString(
'icon',
`${label}的 icon`,
'切换类型为 url',
[
'circle',
'rect',
'roundRect',
'triangle',
'diamond',
'pin',
'arrow',
'none'
],
'image://http://',
`可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
URL
'image://http://xxx.xxx.xxx/a/b.png'
URL dataURI
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
'path://' 使齿 SVG PathData Adobe Illustrator `
);
};
2020-10-30 17:58:23 +08:00
/**
* padding
* @param name
* @param label
* @param labelForSwitch
* @param defaultNumber
* @param defaultArray
*/
export const numberOrArray = (
name: string,
label: string,
labelForSwitch: string,
defaultNumber: number = 5,
defaultArray = [0, 0, 0, 0]
) => {
return [
{
type: 'group',
body: [
{
type: 'input-number',
name: name,
2020-11-02 19:39:21 +08:00
hiddenOn: `Array.isArray(this.${name})`,
label: label
},
{
type: 'switch',
name: name,
label: labelForSwitch,
pipeIn: (value: any) => {
return Array.isArray(value);
},
pipeOut: (value: any, oldValue: any) => {
return value ? defaultArray : defaultNumber;
}
}
]
},
{
type: 'input-array',
name: name,
label: label,
labelRemark:
'设置两个值将分别是上下、左右;设置四个值则分别是上、右、下、左',
2020-11-02 19:39:21 +08:00
visibleOn: `Array.isArray(this.${name})`,
minLength: 2,
maxLength: 4,
items: {
type: 'input-number'
}
}
];
};
/**
* padding
* @param name
* @param label
* @param labelForSwitch
* @param labelRemark remark
* @param defaultNumber
* @param defaultArray
*/
export const vector = (
name: string,
label: string,
labelForSwitch: string,
labelRemark?: string,
defaultNumber: number = 0,
defaultArray = [0, 0, 0, 0]
) => {
return [
2020-11-01 22:35:09 +08:00
{
type: 'input-array',
2020-11-01 22:35:09 +08:00
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `Array.isArray(this.${name})`,
2020-11-01 22:35:09 +08:00
minLength: 2,
maxLength: 4,
items: {
type: 'input-number'
2020-11-01 22:35:09 +08:00
}
},
{
type: 'group',
body: [
{
type: 'input-number',
name: name,
2020-11-02 19:39:21 +08:00
hiddenOn: `Array.isArray(this.${name})`,
2020-11-01 22:35:09 +08:00
label: label
},
{
type: 'switch',
name: name,
label: labelForSwitch,
pipeIn: (value: any) => {
return Array.isArray(value);
},
pipeOut: (value: any) => {
return value ? defaultArray : defaultNumber;
},
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined
}
]
}
];
};
/**
*
*/
2020-11-01 22:35:09 +08:00
export const shadowControls = (scope: string) => {
return {
type: 'fieldSet',
title: '阴影',
collapsable: true,
collapsed: true,
mountOnEnter: true,
body: [
2020-11-02 19:39:21 +08:00
color(`${scope}shadowColor`, '阴影颜色'),
number(`${scope}shadowBlur`, '阴影模糊大小'),
number(`${scope}shadowOffsetX`, '阴影水平方向上的偏移距离'),
number(`${scope}shadowOffsetY`, '阴影垂直方向上的偏移距离')
]
};
};
/**
* fontWeight normal 100
* @param name
* @param label
* @param labelForSwitch
* @param keywordList
*/
export const keywordOrNumber = (
name: string,
label: string,
labelForSwitch: string,
keywordList: string[],
defaultNumber: number = 100
) => {
2020-10-30 17:58:23 +08:00
return {
type: 'group',
body: [
2020-10-30 17:58:23 +08:00
{
type: 'switch',
label: labelForSwitch,
name: name,
pipeIn: (value: any, data) => {
if (typeof data[name] === 'undefined') {
return false;
}
2020-10-30 17:58:23 +08:00
return typeof data[name] !== 'string';
},
2020-10-30 17:58:23 +08:00
pipeOut: (value: any, oldValue: any, data: any) => {
if (value) {
return defaultNumber;
} else {
return keywordList[0];
}
}
},
{
type: 'input-number',
2020-10-30 17:58:23 +08:00
name: name,
2020-11-02 19:39:21 +08:00
visibleOn: `typeof(this.${name}) === 'number'`,
2020-10-30 17:58:23 +08:00
label: label
},
{
type: 'select',
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `typeof(this.${name}) === 'undefined' || typeof(this.${name}) === 'string'`,
2020-10-30 17:58:23 +08:00
options: keywordList
}
]
};
};
/**
*
2020-10-30 17:58:23 +08:00
* @param name
* @param label
* @param labelForSwitch
* @param keywordList
* @param remark
2020-10-30 17:58:23 +08:00
*/
export const keywordOrString = (
2020-10-30 17:58:23 +08:00
name: string,
label: string,
labelForSwitch: string,
keywordList: string[],
defaultString: string = '',
remark?: string
2020-10-30 17:58:23 +08:00
) => {
return {
type: 'group',
body: [
2020-10-30 17:58:23 +08:00
{
type: 'switch',
label: labelForSwitch,
name: name,
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return false;
2020-10-30 17:58:23 +08:00
}
return keywordList.indexOf(value) === -1;
},
2020-10-30 17:58:23 +08:00
pipeOut: (value: any, oldValue: any, data: any) => {
if (value) {
return defaultString;
} else {
return keywordList[0];
2020-10-30 17:58:23 +08:00
}
},
labelRemark: remark
2020-10-30 17:58:23 +08:00
},
{
type: 'input-text',
2020-10-30 17:58:23 +08:00
name: name,
2020-11-02 19:39:21 +08:00
visibleOn: `this.${name} && ${JSON.stringify(
keywordList
2020-11-02 19:39:21 +08:00
)}.indexOf(this.${name}) === -1`,
2020-10-30 17:58:23 +08:00
label: label
},
{
type: 'select',
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `typeof(this.${name}) === 'undefined' || ${JSON.stringify(
keywordList
2020-11-02 19:39:21 +08:00
)}.indexOf(this.${name}) !== -1`,
2020-10-30 17:58:23 +08:00
options: keywordList
}
]
};
};
2020-11-02 19:39:21 +08:00
/**
*
* TODO: 这样会造成配置项 double
* @param name
* @param label
* @param labelForSwitch
* @param keywordList
* @param controls
*/
export const objectOrArray = (
name: string,
labelForSwitch: string,
controls: any[]
) => {
return [
{
type: 'switch',
label: labelForSwitch,
mode: 'inline',
name: name,
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return false;
}
return Array.isArray(value);
},
pipeOut: (value: any, oldValue: any, data: any) => {
if (value) {
if (data[name]) {
return [data[name]];
}
return [{}];
} else {
if (data[name] && Array.isArray(data[name])) {
return data[name][0];
}
return {};
}
}
},
{
type: 'combo',
name: name,
label: '',
noBorder: true,
multiLine: true,
visibleOn: `typeof(this.${name}) === 'undefined' || !Array.isArray(this.${name})`,
multiple: false,
items: controls
2020-11-02 19:39:21 +08:00
},
{
type: 'combo',
name: name,
label: '',
noBorder: true,
multiLine: true,
visibleOn: `Array.isArray(this.${name})`,
multiple: true,
items: controls
2020-11-02 19:39:21 +08:00
}
];
};
/**
*
* @param label
*/
2020-11-01 22:35:09 +08:00
export const commonStyle = (scope: string, label: string) => {
return [
2020-11-02 19:39:21 +08:00
color(`${scope}backgroundColor`, `${label}背景色,默认透明`),
color(`${scope}borderColor`, `${label}的边框颜色`),
number(`${scope}borderWidth`, `${label}的边框线宽`),
2020-11-01 22:35:09 +08:00
...numberOrArray(
2020-11-02 19:39:21 +08:00
`${scope}borderRadius`,
2020-11-01 22:35:09 +08:00
'圆角半径',
'单独设置每个圆角半径'
),
shadowControls(scope)
];
};
/**
*
* @param name
* @param label
* @param keywordList
*/
export const booleanOrKeyword = (
name: string,
label: string,
keywordList: any[],
defaultBoolean: boolean = true
) => {
return {
type: 'select',
name: name,
label: label,
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return defaultBoolean ? 'true' : 'false';
}
return value;
},
pipeOut: (value: any) => {
if (value === 'true') {
return true;
} else if (value === 'false') {
return false;
} else {
return value;
}
},
options: [
{label: '开启', value: 'true'},
{label: '关闭', value: 'false'},
...keywordList
]
};
};
/**
* enum
* @param name
* @param label
* @param keywordList
*/
export const enumControl = (
name: string,
label: string,
keywordList: any[],
defaultValue: string,
labelRemark?: string
) => {
return {
type: 'select',
name: name,
label: label,
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined,
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
defaultValue;
}
if (value === true) {
return 'true';
}
if (value === false) {
return 'false';
}
return value;
},
pipeOut: (value: any) => {
if (value === 'true') {
return true;
} else if (value === 'false') {
return false;
} else {
return value;
}
},
options: keywordList
};
};
/**
*
* @param name
* @param label
* @param labelForSwitch
* @param keywordList
*/
export const numberOrPercentage = (
name: string,
label: string,
labelForSwitch: string,
labelRemark?: string,
defaultPercent: string = '1%',
defaultNumber: number = 100
) => {
return [
{
type: 'group',
body: [
{
type: 'switch',
label: labelForSwitch,
name: name,
pipeIn: (value: any) => {
if (typeof value === 'undefined') {
return false;
}
return typeof value !== 'string';
},
pipeOut: (value: any) => {
if (value) {
return defaultNumber;
} else {
return defaultPercent;
}
},
labelRemark: labelRemark
? {
type: 'remark',
content: labelRemark
}
: undefined
},
{
type: 'input-number',
name: name,
2020-11-02 19:39:21 +08:00
visibleOn: `typeof(this.${name}) === 'number'`,
label: label
},
{
type: 'input-text',
name: name,
label: label,
2020-11-02 19:39:21 +08:00
visibleOn: `typeof(this.${name}) === 'undefined' || typeof(this.${name}) === 'string'`
}
]
}
];
};
/**
*
2020-11-01 22:35:09 +08:00
* @param scope
*/
2020-11-01 22:35:09 +08:00
export const textStyleControls = (scope: string, label: string) => {
return createHierarchy(scope, [
{
type: 'fieldSet',
title: label,
collapsable: true,
body: [
color('color', `${label}文字的颜色`),
2020-10-30 17:58:23 +08:00
select('fontStyle', `${label}文字字体的风格`, [
'normal',
'italic',
'oblique'
]),
keywordOrNumber(
'fontWeight',
`${label}文字字体的粗细`,
'字体粗细格式使用数字',
['normal', 'bold', 'bolder', 'lighter']
),
{
type: 'input-text',
name: 'fontFamily',
label: `${label}文字的字体`,
options: [
'Arial',
'Bookman',
'Candara',
'Courier New',
'Courier',
'Garamond',
'Georgia',
'Helvetica',
'Impact',
'Microsoft YaHei',
'Monaco',
'monospace',
'Palatino',
'Roboto',
'sans-serif',
'serif',
'Times New Roman',
'Verdana'
]
},
number('fontSize', `${label}文字的字体大小`),
number('lineHeight', `${label}行高`),
// TODO用处不大要不别支持了
numberOrPercentage('width', '文字块宽度', '宽度使用数字'),
numberOrPercentage('height', '文字块高度', '高度使用数字'),
color('textBorderColor', '文字本身的描边颜色'),
number('textBorderWidth', '文字本身的描边宽度'),
color('textShadowColor', '文字本身的阴影颜色'),
number('textShadowBlur', '文字本身的阴影长度'),
number('textShadowOffsetX', '文字本身的阴影 X 偏移'),
number('textShadowOffsetY', '文字本身的阴影 Y 偏移')
// TODO: rich 暂时不支持
]
}
]);
};
2020-11-01 22:35:09 +08:00
// 对于一些没正确识别的 label 手动处理
const FIX_LABEL = {
symbolKeepAspect: '是否在缩放时保持该图形的长宽比',
pageIcons: '图例控制块的图标',
pageIconColor: '翻页按钮的颜色',
pageIconInactiveColor: '翻页按钮不激活时(即翻页到头时)的颜色',
pageIconSize: '翻页按钮的大小',
scrollDataIndex: '图例当前最左上显示项的 dataIndex',
pageButtonItemGap: '图例控制块中,按钮和页信息之间的间隔',
pageButtonGap: '图例控制块和图例项之间的间隔',
pageButtonPosition: '图例控制块的位置',
2020-11-02 19:39:21 +08:00
pageFormatter: '图例控制块中,页信息的显示格式',
appendToBody: '是否添加为 HTML 的 <body> 的子节点'
2020-11-01 22:35:09 +08:00
};
/**
*
* @param name
* @param option
*/
2020-11-01 22:35:09 +08:00
const buildOneOption = (scope: string, name: string, option: any) => {
if (name.indexOf('<') !== -1) {
return;
}
if (name.indexOf('.0') != -1) {
return;
}
if (name.indexOf('.1') != -1) {
return;
}
const desc = option.desc.trim();
const uiControl = option.uiControl;
if (!desc) {
console.warn('must have desc', name);
return false;
}
const descSplit = desc.split('。');
let label = descSplit[0]
.trim()
.replace('<p>', '')
2020-11-02 19:39:21 +08:00
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&#39;/g, '')
.replace(/<\/?[^>]+(>|$)/g, '');
let remark =
descSplit.length > 1 ? descSplit[1].trim().replace('</p>', '') : '';
// 有些描述太长了,再通过逗号拆分一下
const labelSplitComma = label.split('');
if (labelSplitComma.length > 1) {
label = labelSplitComma[0];
remark = labelSplitComma[1] + remark;
}
2020-11-01 22:35:09 +08:00
if (name in FIX_LABEL) {
label = FIX_LABEL[name];
}
2020-11-01 22:35:09 +08:00
remark = `${name}${remark}`;
2020-11-02 19:39:21 +08:00
name = scope + name;
if (!uiControl || !uiControl.type) {
// 这种可能只有 desc
return text(name, label, remark);
}
const uiControlType = uiControl.type;
if (uiControlType === 'boolean') {
if (uiControl.default) {
return trueSwitch(name, label, remark);
} else {
return falseSwitch(name, label, remark);
}
} else if (uiControlType === 'color') {
return color(name, label, uiControl.default, remark);
} else if (uiControlType === 'number' || uiControlType === 'angle') {
const defaultValue =
typeof uiControl.default === 'undefined' ? 0 : +uiControl.default;
const min = typeof uiControl.min === 'undefined' ? -1e4 : +uiControl.min;
const max = typeof uiControl.max === 'undefined' ? 1e4 : +uiControl.max;
2020-11-02 19:39:21 +08:00
const step = typeof uiControl.step === 'undefined' ? 1 : +uiControl.step;
return number(name, label, remark, defaultValue, min, max, step);
} else if (uiControlType === 'percent') {
return numberOrPercentage(name, label, '使用绝对值', remark);
} else if (uiControlType === 'enum') {
2020-11-02 19:39:21 +08:00
if (uiControl.options) {
return enumControl(
name,
label,
uiControl.options.split(',').map((item: string) => item.trim()),
uiControl.default,
remark
);
} else {
console.warn('enum do not have options, fallback to text', name);
return text(name, label, remark);
}
} else if (uiControlType === 'vector') {
return vector(name, label, '单独设置', remark);
} else if (uiControlType === 'percentvector') {
// TODO: 可能需要特殊处理
// return vector(name, label, '单独设置', remark);
} else if (uiControlType === 'text') {
// return text(name, label, remark, uiControl.default);
} else {
console.warn('unknow type', name, uiControlType);
}
};
2020-11-01 22:35:09 +08:00
export const buildGroupOptions = (
scope: string,
parentName: string,
options: any
) => {
let controls = [];
for (const name in options) {
if (name.startsWith(parentName + '.')) {
2020-11-01 22:35:09 +08:00
const control = buildOneOption(scope, name, options[name]);
if (control) {
if (Array.isArray(control)) {
controls = controls.concat(control);
} else {
controls.push(control);
}
}
}
}
return controls;
};
/**
* ECharts
2020-11-02 19:39:21 +08:00
* @param scope combo便 debug
* @param options
*/
2020-11-01 22:35:09 +08:00
export const buildOptions = (scope: string, options: any) => {
const commonStyleKeys = new Set([
'backgroundColor',
'borderColor',
'borderWidth',
'borderRadius'
]);
const viewportKeys = new Set(['left', 'top', 'right', 'bottom']);
// 没啥用的
const uselessKeys = new Set(['id', 'z', 'zlevel']);
let controls = [];
// 有些属性有深层结构,对它们进行特殊处理,使用 fieldSet 来自动折叠
const groupKeys = new Set();
for (const name in options) {
if (name.indexOf('.') !== -1) {
groupKeys.add(name.split('.')[0]);
}
}
for (const name in options) {
// if (!name.startsWith('label.padding')) {
2020-11-01 22:35:09 +08:00
// continue; // 用于开发时单独测试某个属性
// }
// 这些样式单独处理或忽略
if (
commonStyleKeys.has(name) ||
viewportKeys.has(name) ||
uselessKeys.has(name)
) {
continue;
}
if (
name.startsWith('textStyle') ||
name.startsWith('subtextStyle') ||
2020-11-02 19:39:21 +08:00
name.startsWith('pageTextStyle') ||
name.startsWith('animation')
) {
continue;
}
2020-11-01 22:35:09 +08:00
// TODO: 后续单独处理
if (name === 'data' || name === 'tooltip') {
continue;
}
if (groupKeys.has(name)) {
2020-11-01 22:35:09 +08:00
controls.push(
fieldSet(name, buildGroupOptions(scope, name, options), true)
);
}
if (name.indexOf('.') !== -1) {
// 前面已经处理了
continue;
}
2020-11-01 22:35:09 +08:00
const control = buildOneOption(scope, name, options[name]);
if (control) {
if (Array.isArray(control)) {
controls = controls.concat(control);
} else {
controls.push(control);
}
} else {
console.warn('build control error', name);
}
}
return controls;
};