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,
|
|
};
|
|
}
|