169 lines
3.8 KiB
TypeScript
169 lines
3.8 KiB
TypeScript
import { message, Form } from 'ant-design-vue/lib';
|
||
import { reactive, watch } from 'vue';
|
||
import { graphG6 } from './useGraph';
|
||
import useI18n from '@/hooks/useI18n';
|
||
|
||
/**图分组内置类型 */
|
||
export const comboTypeOptions = [
|
||
{
|
||
value: 'circle',
|
||
label: '圆形',
|
||
},
|
||
{
|
||
value: 'rect',
|
||
label: '矩形',
|
||
},
|
||
];
|
||
|
||
/**图分组标签文本位置 */
|
||
export const comboPositionOptions = [
|
||
{
|
||
value: 'top',
|
||
label: '上',
|
||
},
|
||
{
|
||
value: 'left',
|
||
label: '左',
|
||
},
|
||
{
|
||
value: 'right',
|
||
label: '右',
|
||
},
|
||
{
|
||
value: 'bottom',
|
||
label: '下',
|
||
},
|
||
{
|
||
value: 'center',
|
||
label: '居中',
|
||
},
|
||
];
|
||
|
||
export default function useCombo() {
|
||
const { t } = useI18n();
|
||
|
||
/**图分组信息状态类型 */
|
||
type ComboStateType = {
|
||
/**图分组原始数据 */
|
||
origin: Record<string, any>;
|
||
/**图分组表单数据 */
|
||
form: Record<string, any>;
|
||
};
|
||
|
||
/**图分组信息状态 */
|
||
let comboState: ComboStateType = reactive({
|
||
origin: {},
|
||
form: {
|
||
id: '',
|
||
type: 'rect',
|
||
parentId: '',
|
||
size: [40, 40],
|
||
padding: [30, 30, 30, 30],
|
||
style: {
|
||
fill: '#ffffff',
|
||
stroke: '#ffffff',
|
||
lineWidth: 1,
|
||
},
|
||
label: '',
|
||
labelCfg: {
|
||
refX: 10,
|
||
refY: 10,
|
||
position: 'top',
|
||
style: {
|
||
fill: '#000000',
|
||
fontSize: 12,
|
||
fontWeight: 500,
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
/**图分组对话分组内表单属性和校验规则 */
|
||
const comboStateForm = Form.useForm(
|
||
comboState.form,
|
||
reactive({
|
||
id: [{ required: true, message: '分组唯一标识 ID' }],
|
||
})
|
||
);
|
||
|
||
/**图分组编辑监听更新视图 */
|
||
watch(comboState.form, combo => {
|
||
const info = JSON.parse(JSON.stringify(combo));
|
||
const comboId = info.id;
|
||
if (comboId) {
|
||
graphG6.value.clearItemStates(comboId, 'selected');
|
||
console.log(info);
|
||
const data = graphG6.value.save();
|
||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||
Object.assign(item, combo);
|
||
// 无父组id时不要设置，避免导致绘制失败
|
||
if (!combo.parentId) {
|
||
Reflect.deleteProperty(item, 'parentId');
|
||
}
|
||
graphG6.value.read(data);
|
||
}
|
||
});
|
||
|
||
/**图分组类型输入限制 */
|
||
function handleComboTypeChange(type: any) {
|
||
// 类型尺寸和边距
|
||
if (type === 'circle') {
|
||
comboState.form.size = 30;
|
||
comboState.form.padding = 30;
|
||
}
|
||
if (type === 'rect') {
|
||
comboState.form.size = [30, 20];
|
||
comboState.form.padding = [10, 20, 10, 20];
|
||
}
|
||
}
|
||
|
||
/**图分组新增或更新 */
|
||
function handleOkcombo() {
|
||
const combo = JSON.parse(JSON.stringify(comboState.form));
|
||
if (!combo.id) {
|
||
message.warn({
|
||
content: `分组元素ID错误`,
|
||
duration: 2,
|
||
});
|
||
return false;
|
||
}
|
||
|
||
const item = graphG6.value.findById(combo.id);
|
||
if (item) {
|
||
const data = graphG6.value.save();
|
||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||
Object.assign(item, combo);
|
||
if (!combo.parentId) {
|
||
Reflect.deleteProperty(item, 'parentId');
|
||
}
|
||
graphG6.value.read(data);
|
||
} else {
|
||
graphG6.value.createCombo(combo, []);
|
||
}
|
||
comboStateForm.resetFields();
|
||
comboState.origin = {};
|
||
return true;
|
||
}
|
||
|
||
/**图分组取消还原 */
|
||
function handleCancelcombo() {
|
||
const origin = JSON.parse(JSON.stringify(comboState.origin));
|
||
if (origin.id) {
|
||
const data = graphG6.value.save();
|
||
const item = data.combos.find((combo: any) => combo.id === origin.id);
|
||
Object.assign(item, origin);
|
||
graphG6.value.read(data);
|
||
comboStateForm.resetFields();
|
||
comboState.origin = {};
|
||
}
|
||
}
|
||
|
||
return {
|
||
comboState,
|
||
comboStateForm,
|
||
handleComboTypeChange,
|
||
handleOkcombo,
|
||
handleCancelcombo,
|
||
};
|
||
}
|