增加工具栏提示。
This commit is contained in:
parent
ffc8e412d8
commit
692a6030eb
@ -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);
|
||||||
// 更新节点显示名称
|
// 更新节点显示名称
|
||||||
|
|||||||
@ -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"
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue
Block a user