This commit is contained in:
dengqichen 2025-10-20 17:50:37 +08:00
parent fa506b4d96
commit 79c9804dbd
8 changed files with 31 additions and 42 deletions

View File

@ -21,7 +21,7 @@ interface NodeConfigModalProps {
}
interface FormData {
config?: Record<string, any>;
configs?: Record<string, any>;
inputMapping?: Record<string, any>;
outputMapping?: Record<string, any>;
}
@ -55,7 +55,7 @@ const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
// 合并默认值和已保存的配置
setFormData({
config: { ...defaultConfig, ...(nodeData.config || {}) },
configs: { ...defaultConfig, ...(nodeData.configs || {}) },
inputMapping: nodeData.inputMapping || {},
outputMapping: nodeData.outputMapping || {},
});
@ -71,7 +71,7 @@ const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
const handleConfigChange = (values: Record<string, any>) => {
setFormData(prev => ({
...prev,
config: values
configs: values
}));
};
@ -101,10 +101,10 @@ const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
children: (
<div style={{ padding: '16px 0' }}>
<BetaSchemaForm
key={`config-${node?.id}-${JSON.stringify(formData.config)}`}
key={`configs-${node?.id}-${JSON.stringify(formData.configs)}`}
layoutType="Form"
columns={convertJsonSchemaToColumns(nodeDefinition.configSchema as any)}
initialValues={formData.config}
initialValues={formData.configs}
onValuesChange={(_, allValues) => handleConfigChange(allValues)}
submitter={false}
/>

View File

@ -178,7 +178,7 @@ export const useWorkflowData = () => {
nodeType: nodeData.nodeType,
nodeName: nodeData.nodeName,
position, // 只保存位置信息
config: nodeData.config || {}, // 节点配置数据
configs: nodeData.configs || {}, // 节点配置数据
inputMapping: nodeData.inputMapping || {}, // 输入映射数据
outputMapping: nodeData.outputMapping || {} // 输出映射数据
};

View File

@ -40,8 +40,8 @@ export const useWorkflowModals = () => {
selectedNode.setData(updatedData);
// 更新节点显示名称如果配置中有nodeName
if (formData.config?.nodeName) {
selectedNode.attr('label/text', formData.config.nodeName);
if (formData.configs?.nodeName) {
selectedNode.attr('label/text', formData.configs.nodeName);
}
setConfigModalVisible(false);

View File

@ -133,7 +133,7 @@
}
.x6-node-selected {
rect {
rect, ellipse {
stroke: #1890ff;
stroke-width: 2px;
}

View File

@ -13,10 +13,10 @@ export const EndEventNode: BaseNodeDefinition = {
// UI 配置 - 节点在画布上的显示样式(现代化设计)
uiConfig: {
shape: 'circle',
shape: 'ellipse',
size: {
width: 60,
height: 60
width: 80,
height: 50
},
style: {
fill: '#f5222d',

View File

@ -13,10 +13,10 @@ export const StartEventNode: BaseNodeDefinition = {
// UI 配置 - 节点在画布上的显示样式(现代化设计)
uiConfig: {
shape: 'circle',
shape: 'ellipse',
size: {
width: 60,
height: 60
width: 80,
height: 50
},
style: {
fill: '#52c41a',

View File

@ -62,7 +62,7 @@ export interface PortGroups {
out?: PortConfig;
}
export type NodeShape = 'rect' | 'circle' | 'diamond';
export type NodeShape = 'rect' | 'circle' | 'ellipse' | 'polygon';
export interface NodeStyle {
fill: string;

View File

@ -11,17 +11,9 @@ export const createNodeFromDefinition = (
) => {
const {uiConfig} = nodeDefinition;
// 根据形状类型设置正确的 shape
let shape = 'rect';
if (uiConfig.shape === 'circle') {
shape = 'circle';
} else if (uiConfig.shape === 'diamond') {
shape = 'polygon';
}
// 创建节点配置
// 创建节点配置 - 直接使用X6原生形状名称
const nodeConfig = {
shape,
shape: uiConfig.shape,
x: position.x,
y: position.y,
width: uiConfig.size.width,
@ -29,7 +21,7 @@ export const createNodeFromDefinition = (
attrs: {
body: {
...uiConfig.style,
...(uiConfig.shape === 'diamond' ? {
...(uiConfig.shape === 'polygon' ? {
refPoints: '0,10 10,0 20,10 10,20',
} : {})
},
@ -46,7 +38,11 @@ export const createNodeFromDefinition = (
data: {
nodeType: nodeDefinition.nodeType,
nodeCode: nodeDefinition.nodeCode,
nodeName: nodeDefinition.nodeName
nodeName: nodeDefinition.nodeName,
// 新创建的节点configs等数据为空
configs: {},
inputMapping: {},
outputMapping: {}
}
};
@ -64,18 +60,10 @@ export const restoreNodeFromData = (
// 从节点定义中获取UI配置兼容旧数据中的uiConfig
const uiConfig = nodeData.uiConfig || nodeDefinition.uiConfig;
// 根据形状类型设置正确的 shape
let shape = 'rect';
if (uiConfig.shape === 'circle') {
shape = 'circle';
} else if (uiConfig.shape === 'diamond') {
shape = 'polygon';
}
// 创建节点配置
// 创建节点配置 - 直接使用X6原生形状名称
const nodeConfig = {
id: nodeData.nodeCode, // 使用保存的ID
shape,
shape: uiConfig.shape,
x: nodeData.position.x,
y: nodeData.position.y,
width: uiConfig.size.width,
@ -83,7 +71,7 @@ export const restoreNodeFromData = (
attrs: {
body: {
...uiConfig.style,
...(uiConfig.shape === 'diamond' ? {
...(uiConfig.shape === 'polygon' ? {
refPoints: '0,10 10,0 20,10 10,20',
} : {})
},
@ -101,9 +89,10 @@ export const restoreNodeFromData = (
nodeType: nodeData.nodeType,
nodeCode: nodeData.nodeCode,
nodeName: nodeData.nodeName,
configs: nodeData.configs,
inputMapping: nodeData.inputMapping,
outputMapping: nodeData.outputMapping
// 统一使用configs字段名
configs: nodeData.configs || {},
inputMapping: nodeData.inputMapping || {},
outputMapping: nodeData.outputMapping || {}
}
};