mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-30 12:10:18 +00:00
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
/*
|
|
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
|
*
|
|
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { reactive } from 'vue';
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
import type { FormConfig } from '@tmagic/form';
|
|
import type { MComponent, MNode } from '@tmagic/schema';
|
|
import { toLine } from '@tmagic/utils';
|
|
|
|
import type { PropsState } from '@editor/type';
|
|
import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
|
|
|
|
import BaseService from './BaseService';
|
|
|
|
class Props extends BaseService {
|
|
private state = reactive<PropsState>({
|
|
propsConfigMap: {},
|
|
propsValueMap: {},
|
|
});
|
|
|
|
constructor() {
|
|
super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
|
|
}
|
|
|
|
public setPropsConfigs(configs: Record<string, FormConfig>) {
|
|
Object.keys(configs).forEach((type: string) => {
|
|
this.setPropsConfig(toLine(type), configs[type]);
|
|
});
|
|
this.emit('props-configs-change');
|
|
}
|
|
|
|
/**
|
|
* 为指定类型组件设置组件属性表单配置
|
|
* @param type 组件类型
|
|
* @param config 组件属性表单配置
|
|
*/
|
|
public setPropsConfig(type: string, config: FormConfig) {
|
|
this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
|
|
}
|
|
|
|
/**
|
|
* 获取指点类型的组件属性表单配置
|
|
* @param type 组件类型
|
|
* @returns 组件属性表单配置
|
|
*/
|
|
public async getPropsConfig(type: string): Promise<FormConfig> {
|
|
if (type === 'area') {
|
|
return await this.getPropsConfig('button');
|
|
}
|
|
|
|
return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
|
|
}
|
|
|
|
public setPropsValues(values: Record<string, MNode>) {
|
|
Object.keys(values).forEach((type: string) => {
|
|
this.setPropsValue(toLine(type), values[type]);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 为指点类型组件设置组件初始值
|
|
* @param type 组件类型
|
|
* @param value 组件初始值
|
|
*/
|
|
public setPropsValue(type: string, value: MNode) {
|
|
this.state.propsValueMap[type] = value;
|
|
}
|
|
|
|
/**
|
|
* 获取指定类型的组件初始值
|
|
* @param type 组件类型
|
|
* @returns 组件初始值
|
|
*/
|
|
public async getPropsValue(type: string) {
|
|
if (type === 'area') {
|
|
const value = (await this.getPropsValue('button')) as MComponent;
|
|
value.className = 'action-area';
|
|
value.text = '';
|
|
if (value.style) {
|
|
value.style.backgroundColor = 'rgba(255, 255, 255, 0)';
|
|
}
|
|
return value;
|
|
}
|
|
|
|
return cloneDeep({
|
|
...getDefaultPropsValue(type),
|
|
...(this.state.propsValueMap[type] || {}),
|
|
});
|
|
}
|
|
}
|
|
|
|
export type PropsService = Props;
|
|
|
|
export default new Props();
|