vue-cli3中使用mxgraph的一些总结
很欣慰，用mxgGaph开发流程图，锻炼了我的英语阅读能力（这里有一个无奈的苦笑）；
这里先记录一下卡了我两天的一个，怎么形容呢，一个小水坑。不踩不知道，踩了哈哈笑。PS:此处不记录过程，只记录问题，适用于用过此插件并对插件有一定了解的宝宝们。
1、关于mxgraph的自动布局：
a、使用mxgraph的自动布局，要设置节点可编辑，否则布局无效，小水坑呀小水坑，欢乐的小水坑：
b、很多后台流程是有回调，所以节点之间的连线是双向的，这时候用树形布局，就失效了，因为双向的连线不符合树形布局，这时候可以换成mxHierarchicalLayout布局例如这种：
2、关于使用html代码来渲染节点
第一步，设置开启支持html：
第二步，创建节点并添加到画布：
3、节点中使用图片，要设置STYLE_SHAPE 为 SHAPE_LABEL 才可以，以下是一段节点使用图片的样式设置，label在图片下方：
4、在vue-cli3 中， 通过npm安装并使用 mxgraph
项目任务比较紧，这次就偷懒使用了官方脚手架，单页面开发方式，使用vue-router做路由。
网上其他关于vue-cli3 使用 mxgraph的文章中都提到了报错，但是我并没有遇到，这里就贴一下我的整合方式吧：
mxgraph.js中：
vue页面或者组件中：引入mxgraph 并 定义 需要用到的类 
最后，附上mxgraph组件的代码：
<template>
<div class="container" :class="boxClass">
<div id="pannel"></div>
</div>
</template>
<style>
.cirlce{
height: 60px;
width: 60px;
background-color: green;
border-radius: 30px;
font-size: 16px;
color: #fff;
line-height: 60px;
text-align: center;
}
</style>
<script>
import mxgraph from '../../../plugins/mxgraph';
import utils from '../../base/utils';
import { popup } from '../popup/popup';
const {mxHierarchicalLayout,mxConstants,mxCell,mxClient,mxGraph,mxGraphModel,mxGeometry} = mxgraph;
const colorMap = {
'00': '#999', // 正常
'11': 'red' // 失败
}
var graph;
export default {
name: 'workflow',
props: {
boxClass: String,
oriData: Object
},
data() {
return {
}
},
mounted(){
this.init();
},
methods: {
init(){
var container = document.getElementById('pannel');
// Checks if the browser is supported
if(!mxClient.isBrowserSupported()){
// Displays an error message if the browser is not supported.
popup.bubble('error','Browser is not supported!');
return;
}
//init容器
var model = new mxGraphModel();
graph = new mxGraph(container, model);
//设置元素可被连接线连接
graph.setConnectable(false);
//设置元素可编辑,不然无法自动布局
graph.setCellsLocked(false);
//设置两个节点是否可以建立多个连接
graph.setMultigraph(true);
//cell创建支持传入html
graph.setHtmlLabels(true);
//是否允许线单独存在
graph.setAllowDanglingEdges(false);
//设置cell可选中
graph.setCellsSelectable(false);
//设置面板可以扩大
graph.setPanning(false);
/*设置连接线样式*/
var style = graph.getStylesheet().getDefaultEdgeStyle();
//圆角连线
style[mxConstants.STYLE_ROUNDED] = true;
//labelsize
style[mxConstants.STYLE_FONTSIZE] = 18;
//label位置
style[mxConstants.STYLE_SPACING_BOTTOM] = 30;
this.initProcessData();
},
initProcessData(){
const parent = graph.getDefaultParent();
const model = utils.copyObject(this.oriData);
if(model.nodeList.length <= 0)return;
var lines = model.lineList || [];
var nodes = model.nodeList || [];
nodes.map((item)=>{
var info = {
key: item.key,
name: item.name,
state: item.state
}
this.addCell(info, item);
});
lines.map((item)=>{
var sourceCell = this.getCellById(item.source);
var targetCell = this.getCellById(item.target);
if(!sourceCell || !targetCell)return;
var line = graph.insertEdge(graph.getDefaultParent(), item.key, "", sourceCell, targetCell);
this.setCellStyle('strokeColor', colorMap[item.state], [line]);
});
// 自动布局
var layout = new mxHierarchicalLayout(graph,mxConstants.DIRECTION_WEST);
layout.execute(graph.getDefaultParent());
this.adjustPos(); // 调整位置，让流程图剧中
},
adjustPos(){
var bounds = graph.getGraphBounds();
var margin = margin || 10;
graph.container.style.overflow = "hidden";
graph.view.setTranslate(
-bounds.x -(bounds.width - graph.container.clientWidth)/ 2,
-bounds.y - (bounds.height - graph.container.clientHeight) / 2
);
while( (bounds.width + margin * 2) > graph.container.clientWidth
|| (bounds.height + margin * 2) > graph.container.clientHeight ){
graph.zoomOut();
bounds = graph.getGraphBounds();
}
graph.container.style.overflow = "auto";
},
getCellById(id){
var cells = graph.getChildVertices(graph.getDefaultParent());
var nodes = cells.filter((item)=>{
return item.id == id;
});
if(nodes.length > 0)return nodes[0];
},
addCell(info){
/*info{
key,//节点唯一标识
name, //节点label
state:
}*/
if(!info)return;
// 清除默认样式
var style = 'text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;';
// 节点html结构
var html = '<div class="cirlce">'+info.name+'</div>'
// 创建节点
var cell = new mxCell(html, new mxGeometry(0, 0, 65, 85), style);
// 设置cell为节点（在mxgraph中，链接线段也属于一种cell，所以这里新建了cell以后要设置它的类型）
cell.setVertex(true);
// 添加节点到画布
graph.addCell(cell);
if(info.key){
cell.setId(info.key);
}
},
setCellStyle(key, value, cells){
if(!cells)return;
graph.setCellStyles(key, value, cells);
//graph.refresh(cell);
}
},
watch: {
oriData(){
this.initProcessData();
}
}
}
</script>
