增加工具栏提示。

This commit is contained in:
dengqichen 2024-12-13 16:25:36 +08:00
parent ffc8e412d8
commit 692a6030eb
2 changed files with 14 additions and 28 deletions

View File

@ -97,11 +97,12 @@ const WorkflowDesign: React.FC = () => {
// 节点双击事件 // 节点双击事件
graph.on('node:dblclick', ({ node }) => { graph.on('node:dblclick', ({ node }) => {
const nodeType = node.getProp('type'); const nodeType = node.getProp('type');
console.log(nodeType)
// 从节点定义列表中找到对应的定义 // 从节点定义列表中找到对应的定义
const definition = nodeDefinitions.find(def => def.type === nodeType); const nodeDefinition = nodeDefinitions.find(def => def.type === nodeType);
if (definition) { if (nodeDefinition) {
setSelectedNode(node); setSelectedNode(node);
setSelectedNodeDefinition(definition); setSelectedNodeDefinition(nodeDefinition);
setConfigModalVisible(true); setConfigModalVisible(true);
} }
}); });
@ -129,7 +130,7 @@ const WorkflowDesign: React.FC = () => {
const nodeMap = new Map(); const nodeMap = new Map();
// 创建节点 // 创建节点
response.graph.nodes.forEach((workflowDefinitionNode: any) => { response.graph?.nodes?.forEach((workflowDefinitionNode: any) => {
console.log('Creating node with data:', workflowDefinitionNode); // 添加日志 console.log('Creating node with data:', workflowDefinitionNode); // 添加日志
const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions); const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions);
@ -139,7 +140,7 @@ const WorkflowDesign: React.FC = () => {
}); });
// 创建边 // 创建边
response.graph.edges.forEach((edge: any) => { response.graph?.edges?.forEach((edge: any) => {
const sourceNode = nodeMap.get(edge.from); const sourceNode = nodeMap.get(edge.from);
const targetNode = nodeMap.get(edge.to); const targetNode = nodeMap.get(edge.to);
if (sourceNode && targetNode) { if (sourceNode && targetNode) {
@ -190,7 +191,6 @@ const WorkflowDesign: React.FC = () => {
const handleNodeConfigUpdate = (values: any) => { const handleNodeConfigUpdate = (values: any) => {
if (!selectedNode) return; if (!selectedNode) return;
// 更新节点配置 // 更新节点配置
selectedNode.setProp('config', values); selectedNode.setProp('config', values);
// 更新节点显示名称 // 更新节点显示名称

View File

@ -1,18 +1,6 @@
import {Graph} from '@antv/x6'; import {Graph} from '@antv/x6';
import {convertPortConfig} from '../constants'; import {convertPortConfig} from '../constants';
/**
*
*/
const createNodeConfig = (uiGraph: any) => {
return {
inherit: 'rect', // 默认使用矩形
};
};
/** /**
* *
* @param graph X6 Graph实例 * @param graph X6 Graph实例
@ -37,34 +25,32 @@ export const addNodeToGraph = (
} else if (uiGraph.shape === 'diamond') { } else if (uiGraph.shape === 'diamond') {
shape = 'polygon'; shape = 'polygon';
} }
const nodeConfig = createNodeConfig(uiGraph); console.log(nodeDefinition.type, workflowDefinitionNode.type)
// 创建节点 // 创建节点
return graph.addNode({ return graph.addNode({
...nodeConfig, inherit: 'rect',
width: uiGraph.size.width, width: uiGraph.size.width,
height: uiGraph.size.height, height: uiGraph.size.height,
label: {
text: isNew ? workflowDefinitionNode.name : nodeDefinition.name,
fill: '#000000',
fontSize: 12,
},
attrs: { attrs: {
body: { body: {
...uiGraph.style, ...uiGraph.style,
// 如果是菱形,添加多边形的点
...(uiGraph.shape === 'diamond' ? { ...(uiGraph.shape === 'diamond' ? {
refPoints: '0,10 10,0 20,10 10,20', refPoints: '0,10 10,0 20,10 10,20',
} : {}) } : {})
} },
label: {
text: isNew ? nodeDefinition.name : workflowDefinitionNode.name
},
}, },
shape, // 使用映射后的形状 shape, // 使用映射后的形状
...(position && {x: position.x, y: position.y}), ...(position && {x: position.x, y: position.y}),
// 如果是已保存的节点使用其ID和位置 // 如果是已保存的节点使用其ID和位置
...(uiGraph.id && {id: uiGraph.id}), ...(uiGraph.id && {id: uiGraph.id}),
...(uiGraph.graph?.position && {position: uiGraph.graph.position}), ...(uiGraph.graph?.position && {position: uiGraph.graph.position}),
type: uiGraph.type, type: isNew ? nodeDefinition.type : workflowDefinitionNode.type,
code: uiGraph.code, code: uiGraph.code,
ports: convertPortConfig(uiGraph.ports), ports: convertPortConfig(uiGraph.ports),
nodeDefinition: nodeDefinition, nodeDefinition: nodeDefinition,
aaaaaa: "dasdasdsadasdd"
}); });
}; };