import '@antv/x6-vue-shape'; import { Graph, Shape, Addon, FunctionExt, Dnd } from '@antv/x6'; // 拖拽生成四边形或者圆形 export const startDragToGraph = (graph, type, e) => { const dnd = new Dnd({ target: graph, validateNode: (droppingNode, options) => { return true; // 可以根据需要添加验证逻辑 }, }); const node = type === 'Start' ? graph.createNode({ width: 100, height: 60, attrs: { label: { text: '开始', fill: '#1890ff', fontSize: 14, textWrap: { width: -10, height: -10, ellipsis: true, }, }, body: { stroke: '#1890ff', strokeWidth: 1, fill: '#ffffff', rx: 18, ry: 18 }, nodeData: getNodeData(type) }, ports: ports, }) : type === 'End' ? graph.createNode({ width: 100, height: 60, attrs: { label: { text: '结束', fill: '#000000', fontSize: 14, textWrap: { width: -10, height: -10, ellipsis: true, }, }, body: { stroke: '#000000', strokeWidth: 1, fill: '#ffffff', rx: 18, ry: 18 }, nodeData: getNodeData(type) }, ports: ports }) : type === 'Rect' ? graph.createNode({ width: 100, height: 60, attrs: { label: { text: '任务节点', fill: '#000000', fontSize: 14, textWrap: { width: -10, height: -10, ellipsis: true, }, }, body: { stroke: '#000000', strokeWidth: 1, fill: '#ffffff', }, nodeData: getNodeData(type) }, ports: ports }) : type === 'Circle' ? graph.createNode({ shape: 'ellipse', width: 100, height: 100, attrs: { label: { text: '循环节点', fill: '#000000', fontSize: 14, textWrap: { width: -20, height: -10, ellipsis: true, }, }, body: { stroke: '#000000', strokeWidth: 1, fill: '#ffffff', }, nodeData: getNodeData(type) }, ports: ports }) : graph.createNode({ shape: 'polygon', x: 40, y: 40, width: 120, height: 120, attrs: { label: { text: '条件节点', fill: '#000000', fontSize: 14, textWrap: { width: -50, height: '70%', ellipsis: true, }, }, body: { fill: '#ffffff', stroke: '#000000', refPoints: '0,10 10,0 20,10 10,20', strokeWidth: 1, }, nodeData: getNodeData(type) }, ports: ports }) dnd.start(node, e); }; const ports = { groups: { // 输入链接桩群组定义 top: { position: 'top', attrs: { circle: { r: 4, magnet: true, stroke: '#2D8CF0', strokeWidth: 2, fill: '#fff', }, }, }, // 输出链接桩群组定义 bottom: { position: 'bottom', attrs: { circle: { r: 4, magnet: true, stroke: '#2D8CF0', strokeWidth: 2, fill: '#fff', }, }, }, left: { position: 'left', attrs: { circle: { r: 4, magnet: true, stroke: '#2D8CF0', strokeWidth: 2, fill: '#fff', }, }, }, right: { position: 'right', attrs: { circle: { r: 4, magnet: true, stroke: '#2D8CF0', strokeWidth: 2, fill: '#fff', }, }, }, }, items: [ { id: 'port1', group: 'top', }, { id: 'port2', group: 'bottom', }, { id: 'port3', group: 'left', }, { id: 'port4', group: 'right', } ], }; // 自定义参数存放处 const getNodeData = (type) => { return { type: type, flowNode: { entityId: '', itemId: '', flowNodeType: '', groupIdentify: '', childFlowIdentify: '', //子流程 methodName: '', methodParams: '', methodType: '', hasMethodParams: false, methodExp: '', flowJudges: [], // isJudgeNode: '0' } } }