import React, { useRef, useEffect, useState } from "react";
|
import { Button, message } from 'antd';
|
import { last } from "lodash";
|
|
export const GraphTools = ({ graphRef, isReady }) => {
|
|
let codeContent = "";
|
|
const exportData = () => {
|
const graph = graphRef.current;
|
if (isReady) {
|
const data = graph.toJSON();
|
console.log(data);
|
// 这里你可以将数据发送到服务器或保存到本地
|
|
const edges = [];
|
const nodes = [];
|
let rootNode = null;
|
data.cells.forEach((item) => {
|
if (item.shape == "edge") {
|
edges.push(item)
|
} else {
|
nodes.push(item)
|
if (item.data.root) {
|
rootNode = item;
|
}
|
}
|
})
|
|
if (rootNode == null) {
|
message.warning('请设置程序入口组件');
|
return;
|
}
|
|
console.log(getDescendants(rootNode, nodes, graph));
|
|
transCode(rootNode, nodes, graph)
|
// nodeDFS(rootNode, nodes, graph, codeContent)
|
// console.log(codeContent);
|
}
|
}
|
|
const transCode = (rootNode, nodes, graph) => {
|
let codeContent = "";
|
const descendants = [];
|
let stack = [rootNode];
|
|
let existLogicNode = [];
|
let values = nodeDFS(rootNode, nodes, graph);
|
|
let cpValues = JSON.parse(JSON.stringify(values))
|
console.log(cpValues);
|
|
let groupCode = {};
|
let logicGroupSearch = {};
|
let currentLogic = null;
|
cpValues.forEach((value) => {
|
if(value.data.isLogic) {
|
let tmp = {};
|
if(currentLogic == null) {
|
tmp = {
|
id: value.id,
|
parent: null
|
}
|
}else{
|
tmp = {
|
id: value.id,
|
parent: currentLogic
|
}
|
}
|
currentLogic = value.id;
|
logicGroupSearch[value.id] = tmp;
|
}
|
})
|
|
console.log(logicGroupSearch);
|
|
let codeContentTmp = "";
|
while (values.length > 0) {
|
const current = values.pop();
|
const connectedEdges = graph.getConnectedEdges(current);//取边
|
|
connectedEdges.forEach((edge) => {
|
//过滤从自身节点出去的边
|
if (edge.source.cell != current.id) {
|
//取上一节点
|
let lastNode = null;
|
nodes.forEach((node) => {
|
if (node.id == edge.source.cell) {
|
lastNode = node;
|
}
|
})
|
|
if (lastNode != null) {
|
//判断节点是否逻辑节点
|
if (lastNode.data.isLogic) {
|
let nestedCode = `
|
//**********${current.attrs.text.text}-start**********//
|
${current.data.codeContent}
|
//**********${current.attrs.text.text}-end**********//
|
`;
|
codeContentTmp = "\n" + nestedCode + codeContentTmp;
|
|
let nestedIfCode = "";
|
if (existLogicNode.indexOf(lastNode.id) == -1) {
|
//判断边逻辑值
|
if (edge.data.logicBool == true) {
|
nestedIfCode = `
|
//**********逻辑判断-${lastNode.attrs.text.text}-start**********//
|
if (${lastNode.data.codeContent}) {
|
${codeContentTmp}
|
// }
|
// //**********逻辑判断-${lastNode.attrs.text.text}-end**********//
|
`;
|
} else {
|
nestedIfCode = `
|
//**********逻辑判断-${lastNode.attrs.text.text}-start**********//
|
if (!(${lastNode.data.codeContent})) {
|
${codeContentTmp}
|
// }
|
// //**********逻辑判断-${lastNode.attrs.text.text}-end**********//
|
`;
|
}
|
existLogicNode.push(lastNode.id);
|
|
groupCode[lastNode.id + "-true"] = nestedIfCode;
|
} else {
|
nestedIfCode = `
|
//**********逻辑判断-${lastNode.attrs.text.text}-start**********//
|
else {
|
${codeContentTmp}
|
// }
|
// //**********逻辑判断-${lastNode.attrs.text.text}-end**********//
|
`;
|
|
groupCode[lastNode.id + "-false"] = nestedIfCode;
|
}
|
|
|
codeContent += nestedIfCode;
|
codeContentTmp = "";
|
|
console.log(lastNode, current, true, codeContent);
|
} else {
|
if (current.data.codeContent != null && !current.data.isLogic) {
|
let nestedCode = `
|
//**********${current.attrs.text.text}-start**********//
|
${current.data.codeContent}
|
//**********${current.attrs.text.text}-end**********//
|
`;
|
codeContentTmp = "\n" + nestedCode + codeContentTmp;
|
}
|
}
|
}
|
}
|
})
|
|
}
|
|
console.log(groupCode);
|
console.log(codeContent);
|
|
}
|
|
// const transCode = (rootNode, nodes, graph) => {
|
// let codeContent = "";
|
// const descendants = [];
|
// let stack = [rootNode];
|
|
// let count = 0;
|
// while (stack.length > 0) {
|
// const current = stack.pop();
|
// descendants.push(current);
|
|
// const children = getChildren(current, nodes, graph);
|
// stack.push(...children);
|
|
// // 输出代码
|
// if (!current.data.isLogic) {
|
// const connectedEdges = graph.getConnectedEdges(current);//取边
|
// connectedEdges.forEach((edge) => {
|
// //过滤从自身节点出去的边
|
// if(edge.source.cell != current.id){
|
// //取上一节点
|
// let lastNode = null;
|
// nodes.forEach((node) => {
|
// if(node.id == edge.source.cell){
|
// lastNode = node;
|
// }
|
// })
|
|
// if(lastNode != null) {
|
// //判断节点是否逻辑节点
|
// if(lastNode.data.isLogic){
|
// console.log(lastNode);
|
// let nestedIfCode = "";
|
// if(lastNode.data.logicBool == 'true') {
|
// nestedIfCode = `
|
// if (${lastNode.data.codeContent}) {
|
// ${current.data.codeContent}
|
// }
|
// `;
|
// }else{
|
// nestedIfCode = `
|
// if (!(${lastNode.data.codeContent})) {
|
// ${current.data.codeContent}
|
// }
|
// `;
|
// }
|
|
|
// codeContent += "\n" + nestedIfCode;
|
// console.log(codeContent);
|
// }else{
|
// if (current.data.codeContent != null) {
|
// codeContent += "\n" + current.data.codeContent;
|
// }
|
// }
|
// }
|
// }
|
// console.log(current);
|
// })
|
// } else {
|
// // if (current.data.codeContent != null) {
|
// // codeContent += "\n" + current.data.codeContent;
|
// // }
|
|
// // const connectedEdges = graph.getConnectedEdges(current);
|
// // console.log(connectedEdges);
|
// // stack = []
|
// // let test = []
|
// // connectedEdges.forEach((edge) => {
|
// // nodes.forEach((item) => {
|
// // if (item.id === edge.target.cell && item.id != current.id) {
|
// // test.push(item);
|
// // }
|
// // })
|
// // });
|
// // console.log(test);
|
// // console.log();
|
// // let nestedIfCode = `
|
// // if (true}) {
|
// // ${current.data.codeContent}
|
// // }
|
// // `;
|
|
// // codeContent += "\n" + nestedIfCode;
|
// // console.log(codeContent);
|
// }
|
|
// }
|
|
// console.log(codeContent);
|
// }
|
|
const nodeDFS = (node, nodes, graph) => {
|
let values = [];
|
if (graph) {
|
const connectedEdges = graph.getConnectedEdges(node);
|
const children = [];
|
|
console.log(node);
|
connectedEdges.forEach((edge) => {
|
nodes.forEach((item) => {
|
if (item.id === edge.target.cell && item.id != node.id) {
|
children.push(item);
|
}
|
})
|
});
|
|
console.log(connectedEdges);
|
if (children.length != 0) {
|
console.log(children);
|
children.forEach((node) => {
|
console.log(node);
|
values.push(node);
|
values = values.concat(nodeDFS(node, nodes, graph))
|
})
|
}
|
}
|
|
return values;
|
}
|
|
const getChildren = (node, nodes, graph) => {
|
const connectedEdges = graph.getConnectedEdges(node);
|
const children = [];
|
|
connectedEdges.forEach((edge) => {
|
nodes.forEach((item) => {
|
if (item.id === edge.target.cell && item.id != node.id) {
|
children.push(item);
|
}
|
})
|
});
|
|
return children;
|
}
|
|
const getDescendants = (node, nodes, graph) => {
|
const descendants = [];
|
const stack = [node];
|
|
let count = 0;
|
while (stack.length > 0) {
|
const current = stack.pop();
|
descendants.push(current);
|
|
const children = getChildren(current, nodes, graph);
|
stack.push(...children);
|
}
|
|
return descendants;
|
}
|
|
return (
|
<>
|
<Button type="primary" onClick={exportData}>
|
导出数据
|
</Button>
|
</>
|
);
|
}
|
