import React from "react";
import GraphNode from "./GraphNode";
import GraphEdge from "./GraphEdge";
import { initGraph } from './creatGraph'
import registerTools from './registerTools'
import eventBus from '../script/event'
import CraftOtype from '../script/craftOtype';
let icon = ``
export default class CraftView extends React.Component {
graph = null;
craft = null;
constructor() {
super();
this.data = {};
this.state = {
currentProcedure: null,
currentNode: null,
}
}
componentWillUnmount() {
if (this.graph) {
this.graph.clearCells();
}
eventBus.off('selectDataType');
eventBus.off('nodeMenuHandle')
}
loadCraft(craft) { // 初始化
// if ( !this.graph || !craft) return;
// this.graph.clearCells();
// this.craft = craft;
// const { selection, disabled } = this.props;
// for ( let i=0; i < craft.dag.nodes.length; i++ ) {
// this.graph.addNode(new GraphNode(craft.dag.nodes[i],selection,this.getNodes()))
// }
// for ( let i=0; i < craft.dag.links.length; i++ ) {
// this.graph.addEdge(new GraphEdge(craft.dag.links[i],(selection && !disabled),this.graph))
// }
if (!this.graph || !craft) return;
this.graph.clearCells();
this.craft = craft;
const { selection, disabled } = this.props;
let nodeList = [];
for (const node of craft.dag.nodes) {
nodeList.push(new GraphNode(node, selection, this.getNodes()))
}
this.graph.addNodes(nodeList)
let edgeList = [];
for (const link of craft.dag.links) {
edgeList.push(new GraphEdge(link, (selection && !disabled), this.graph))
}
this.graph.addEdges(edgeList)
}
removeToolTips = () => {
const { selection } = this.props;
if (selection) {
return
}
let tipsDom = document.getElementsByClassName('ant-tooltip');
if (tipsDom && tipsDom.length) {
for (let i = 0; i < tipsDom.length; i++) {
const element = tipsDom[i];
if (element && element.parentNode) {
element.parentNode.removeChild(element);
}
}
}
}
addNode = (procedure) => {
this.graph.addNode(new GraphNode(procedure, true, this.getNodes()))
}
addlink = (link) => {
this.graph.addEdge(new GraphEdge(link, true))
}
updateMultiplicity = (link) => {
let links = this.graph.getEdges();
let currentLink = links.find(el => el.id === link.id);
currentLink.setData(new GraphEdge(link, true))
let dom = document.getElementsByClassName(`mark-item-${link.id}`)[0]
let _multiplicity = link.multiplicity !== undefined ? link.multiplicity : 1;
if (dom) {
dom.innerHTML = `${_multiplicity}`
}
}
getNodes = () => { // 获取所有节点
let nodes = [];
nodes = [].concat([], this.props.dataInfo?.dag?.nodes)
return nodes || [];
}
resetView = () => {
this.graph.zoomTo(1);
this.graph.centerContent() // 居中
}
cleanHistory = () => { // 清掉历史
if (this.graph) {
this.graph.cleanHistory();
}
}
selectProcedure = (procedure) => {
const { selectProcedure } = this.props;
if (typeof selectProcedure == 'function') {
selectProcedure(procedure ? procedure.getProp() : null)
}
}
selectGraph() { // 选中操作
// 单选
this.graph.on('selection:changed', (args) => {
args.added.forEach((cell) => {
this.highlinghtNode(cell)
})
args.removed.forEach((cell) => {
this.unHighlinghtNode(cell)
})
})
// // 点击触发
// this.graph.on('node:click',({node}) => {
// this.selectProcedure(node)
// })
// // 选中/取消 node
this.graph.on('node:selected', ({ node }) => {
this.selectProcedure(node)
this.highlightingEdges(node, true)
})
this.graph.on('node:unselected', ({ node }) => {
this.highlightingEdges(node, false);
this.removeToolTips();
})
this.graph.on('node:mouseenter', ({ cell }) => {
cell.setZIndex(12);
const { disabled } = this.props;
if (disabled) {
cell.removeTool('contextmenu')
}
})
this.graph.on('node:mouseleave', ({ cell }) => {
cell.setZIndex(10);
this.removeToolTips();
})
// // 选中/取消 edge
this.graph.on('edge:selected', ({ edge }) => {
this.highlightingNodes(edge, true)
})
this.graph.on('edge:unselected', ({ edge }) => {
this.highlightingNodes(edge, false)
})
// link 移入/移出
this.graph.on('edge:mouseenter', ({ cell }) => {
cell.attr('lines/stroke', '#f8c1c1');
const { selection, disabled } = this.props;
if (selection && !disabled) {
cell.addTools([
{
name: 'contextmenu',
args: new GraphEdge(cell.getProp(), true).getMenu()
}, {
name: 'target-arrowhead',
args: {
attrs: {
fill: '#ED7824',
},
},
}, {
name: 'source-arrowhead',
args: {
attrs: {
d: 'M 0, 0 m -7, 0 a 7,7 0 1,0 15,0 a 7,7 0 1,0 -15,0',
fill: '#ED7824',
},
},
}
])
}
})
this.graph.on('edge:mouseleave', ({ cell }) => {
cell.attr('lines/stroke', 'transparent');
cell.removeTools();
})
// 点击空白部分
this.graph.on('blank:click', (ev) => {
this.removeToolTips();
this.selectProcedure(null)
})
}
selectHighlinghtNode = (id, center = false) => { // 默认选中当前
let nodes = this.graph.getNodes();
let currentSelectNode = nodes.find(el => el.id === id);
if (currentSelectNode) {
this.highlightingEdges(currentSelectNode, true)
this.highlinghtNode(currentSelectNode);
if (center) { // 以当前cell为中心
this.graph.centerCell(currentSelectNode)
};
}
}
highlinghtNode = (cell, nColor = '#FD8200', eColor = '#FD8200') => { // 高亮
if (cell.isNode()) {
cell.setZIndex(12);
cell.attr('body', {
rx: 8,
ry: 8,
fill: nColor,
filter: {
name: 'highlight',
args: {
color: nColor,
width: 3,
opacity: 1,
}
},
})
} else {
cell.setZIndex(5);
cell.attr('line/stroke', eColor)
cell.attr('line/stroke-width', 4)
this.highlinghtLabel(cell, `active`, true);
}
}
unHighlinghtNode = (cell) => { // 取消高亮
if (cell.isNode()) {
cell.setZIndex(10);
cell.attr('body', {
fill: '#f5f5f5',
filter: {
name: 'highlight',
args: {
color: '#f5f5f5',
width: 2,
opacity: 0,
}
},
})
} else {
cell.setZIndex(2);
cell.attr('line/stroke', '#979797');
cell.attr('line/stroke-width', 2);
this.highlinghtLabel(cell, [`active`], false);
}
}
highlinghtLabel = (cell, classList, flag) => { // 高亮 label
let markDom = document.getElementsByClassName(`mark-item-${cell.id}`)[0];
if (markDom) {
if (flag) {
markDom.classList.add(classList);
} else {
markDom.classList.remove(...classList);
}
}
}
highlightingEdges = (node, flag) => { // 高亮Edges
if (!node) return;
let beforLink = this.graph.getIncomingEdges(node);
let afterLink = this.graph.getOutgoingEdges(node);
if (beforLink && beforLink.length) {
beforLink.forEach(el => {
if (flag) {
el.setZIndex(5);
this.highlinghtNode(el, '#2E6BE6', '#2E6BE6');
this.highlinghtLabel(el, `befor-class`, true);
} else {
this.unHighlinghtNode(el);
this.highlinghtLabel(el, [`after-class`, `befor-class`], false);
}
})
}
if (afterLink && afterLink.length) {
afterLink.forEach(el => {
if (flag) {
el.setZIndex(5);
this.highlinghtNode(el, '#DE2AA2', '#DE2AA2');
this.highlinghtLabel(el, `after-class`, true);
} else {
this.unHighlinghtNode(el);
this.highlinghtLabel(el, [`after-class`, `befor-class`], false);
}
})
}
}
highlightingNodes = (node, flag) => { // 高亮Nodes
if (!node) return;
let lighlinghtNodes = this.graph.getNeighbors(node);
if (lighlinghtNodes && lighlinghtNodes.length) {
lighlinghtNodes.forEach(el => {
if (flag) {
this.highlinghtNode(el)
} else {
this.unHighlinghtNode(el)
}
})
}
}
createLable = (args) => { // 创建配比置
const item = args.edge.getProp()?.link;
const { selectors } = args;
const content = selectors.foContent;
if (content) {
const btn = document.createElement('div');
let _multiplicity = item.multiplicity !== undefined ? item.multiplicity : 1;
btn.className = `multiplicity-box mark-item-${item.id}`;
btn.innerHTML = `${_multiplicity}`;
btn.addEventListener('dblclick', () => {
const { clickMultiplicity } = this.props;
if (typeof clickMultiplicity == 'function') {
clickMultiplicity(item)
}
})
content.appendChild(btn)
}
}
updataProcedureDom = (procedure) => {
let currentDom = document.getElementsByClassName(`procedure-item-${procedure.id}`)[0];
if (!currentDom) {
return console.log('找不到元素!');
}
if (CraftOtype.isCraft(procedure)) {
const title = `
${procedure.qc ? `质` : ``}
${procedure.completion ? `权` : ``}
${procedure.name}
`;
const dataType = `
生产：${procedure?.outputSchema?.dataType?.name || ''}
${procedure.qc ? `
质检：${procedure?.qcSchema?.dataType?.name}
` : ``}
`;
const status = `
${icon}${procedure?.outputSchema?.measure || 0}积分
`;
currentDom.innerHTML = `${title}${dataType}${status}`;
} else {
const otid = procedure?.type?.otid;
const currentType = CraftOtype.getCurrentType(otid);
let typeIcon = `
${currentType?.iconSvg}
${currentType?.activeIconSvg}
`;
const typeName = `${procedure.name}
`;
let tipName = procedure?.outputSchema?.dataType?.name;
if (CraftOtype.isCurrentType(otid, 3)) {
tipName = procedure?.attributes?.dataCount || '0';
}
if (CraftOtype.isCurrentType(otid, 4)) {
tipName = procedure?.attributes?.condition;
}
let templateHtml = tipName ? `${currentType.tipText}：${tipName}
入
入
`;
} else if (isEntry === false) {
typeIcon = `
出
出
`;
}
if (procedure?.attributes?.isEntry) {
templateHtml = ``
// templateHtml = `${currentType.tipText}：${tipName}
${currentType.otherTipText}：${currentLinked ? currentLinked.name : tipName}