123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- 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'
- }
- }
- }
|