基于mxgraph.js开发的流程图组件
1.fabric.js
在决定使用mxgraph.js开发流程图之前,尝试过用fabric.js来开发,结果发现并没有想象中的那么简单,而且用户体验非常差,下面是体验地址:
workFlow
直到遇到一个致命bug,当我准备加一个双击图形输入文字功能,花了
一点时间捣鼓了一下,通过group组合实现了此功能,但是,第一次双击输入正常,第二次再次双击就出现莫名其妙的情况,最后反馈给作者说下个版本
不准备解决,看了下issues,也发现了类似的问题,此方案就此放弃。
2.GoJs
第二次有人推荐我使用GoJs,看了下功能确实强大,也找到了符合我想要的流程图应用,但是。。。。尝试运行简单的例子同步到Vue,没出什么问题,当同步
一个简单的流程图示例,各种问题,捣鼓了很久还是没能运行成功,最重要的它的api写法简直太难受,此方案也就此放弃。官方示例:
GoJs
3.mxgraph.js
先上图来一波
体验地址:
mxFlow
说一下基础api的使用以及一些坑
1.定义全局Cell样式
this.style = new Object();
this.style[mxConstants.STYLE_DASHED] = 0;//0实线 1虚线
this.style[mxConstants.STYLE_STROKEWIDTH] = 1;//边框宽度
// this.style[mxConstants.STYLE_GRADIENTCOLOR] = 'red';//渐变色
this.style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_WEST;//渐变方向 east-东 west-西 north-北 south-南
this.style[mxConstants.STYLE_FONTFAMILY] = "consolas";//字体
this.style[mxConstants.STYLE_FONTSTYLE] = 0;//1-加粗 2-斜体 4-下划线
this.style[mxConstants.STYLE_HORIZONTAL] = 1;//1-水平 0-垂直
this.style[mxConstants.STYLE_LABEL_POSITION] = "center";//文字居中 结合下面属性控制
this.style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = "middle";//
this.graph.getStylesheet().putDefaultVertexStyle(this.style);//put到全局style中
2.定义全局Edge、label样式
this.style = this.graph.getStylesheet().getDefaultEdgeStyle();
this.style['fontSize'] = this.fontSize;
this.style['verticalAlign'] = 'bottom';
this.style[mxConstants.STYLE_ROUNDED] = true;
this.style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
this.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = "white";//transparent 连线文字背景颜色
this.style[mxConstants.STYLE_ORTHOGONAL_LOOP] = 1;
this.style[mxConstants.STYLE_JETTY_SIZE] = "auto";
3.局部样式
let style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = '../../../static/img/star_200.png';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
this.graph.getStylesheet().putCellStyle('image', style);//自定义背景style
this.graph.insertVertex(this.parent, null, 'star', x, y, 100, 100, 'image');//使用方式
4.修改全局Cell默认样式 Edge同理
let style = this.graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTCOLOR] = this.color;
5.设置单个或者多个Cell样式 Edge同理
this.graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, this.curDirGradient);//第一种方式
this.graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "none", [vertex]);//第二种方式
6.复制
let selectionCells = this.graph.getSelectionCells();
mxClipboard.copy(this.graph, selectionCells);
7.粘贴
mxClipboard.paste(this.graph);
8.剪切
let selectionCells = this.graph.getSelectionCells();
mxClipboard.cut(this.graph, selectionCells);
9.放大
this.graph.zoomIn();
10.缩小
this.graph.zoomOut();
11.撤销与还原
初始化:
this.undoMng = new mxUndoManager();
let listener = (sender, evt) => {
this.undoMng.undoableEditHappened(evt.getProperty('edit'));
};
this.graph.getModel().addListener(mxEvent.UNDO, listener);
his.graph.getView().addListener(mxEvent.UNDO, listener);
撤销:
this.undoMng.undo();
还原:
this.undoMng.redo();
12.组合
let vertex = new mxCell(null, new mxGeometry(0, 0));
vertex.setVertex(true);
this.graph.groupCells(vertex, 0, this.graph.getSelectionCells());
13.分解
this.graph.ungroupCells(this.graph.getSelectionCells());
14.加载xml自定义图形
try {
let req = mxUtils.load(this.staticPath+'xml/basic.xml');//此处路径写成项目资源文件目录
let root = req.getDocumentElement();
let shape = root.firstChild;
while (shape != null) {
if (shape.nodeType == mxConstants.NODETYPE_ELEMENT) {
let name = shape.getAttribute('name');
this.basicItems.push(name);//存储读取的shape名称数组
mxStencilRegistry.addStencil(name, new mxStencil(shape));
}
shape = shape.nextSibling;
}
} catch (e) {
mxUtils.alert('Cannot load' + e);
}
使用方式:
let basic = document.getElementById("basic");
this.basicItems.forEach((name, index) => {
basic.append(this.createItem("", 45, 45, "shape=" + name));
});
createItem方法:
createItem(title, width, height, style) {
let vertex = new mxCell(null, new mxGeometry(0, 0, width, height), style);
vertex.setVertex(true);
let elt = document.createElement('div');
elt.className = 'el-col el-col-8 basic';
// elt.style.overflow = 'hidden';
// Blocks default click action
// mxEvent.addListener(elt, 'click', function(evt)
// {
// mxEvent.consume(evt);
// });
// this.graph.view.scaleAndTranslate(1, 0, 0);
this.graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, "none", [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, 3, [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, "#515151", [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_SHADOW, false, [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER, [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_IMAGE_WIDTH, 48, [vertex]);
this.graph.setCellStyles(mxConstants.STYLE_IMAGE_HEIGHT, 48, [vertex]);
this.graph.addCell(vertex);
let node;
node = this.graph.view.getCanvas().ownerSVGElement.cloneNode(true);
this.graph.getModel().clear();
elt.appendChild(node);
return elt;
},//创建自定义html包裹的svg
15.一些坑
有些全局样式也可以直接修改,(不用像上面那样put)例如:
mxConstants.VERTEX_SELECTION_COLOR = "#29B6F2"; 鼠标框选 不显示背景颜色
new mxRubberband(this.graph);
解决办法添加以下css
div.mxRubberband {
position: absolute;
overflow: hidden;
border-style: solid;
border-width: 1px;
border-color: #0000FF;
background: #3481D7;
} 加载xml自定义图形上面14点已完整说明。
暂时就介绍那么多,还有很多细节设置就下次再说了。
欢迎进群交流(927465926)
基于mxgraph.js开发的流程图组件的更多相关文章
- KoaHub平台基于Node.js开发的Koa 连接支付宝插件代码信息详情
KoaHub平台基于Node.js开发的Koa 链接支付宝插件代码信息详情 easy-alipay alipay payment & notification APIs easy-alipay ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 基于面向对象js的弹窗的组件的开发案例
var aInput = document.getElementsByTagName("input"); 2 aInput[0].onclick = function() { 3 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- KoaHub.JS基于Node.js开发的Koa 生成验证码插件代
ccap node.js generate captcha using c++ library CImg without install any other lib or software node- ...
- 基于AGS JS开发自定义贴图图层
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 记:使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档 第一个问题: 边界留白 就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
- KoaHub平台基于Node.js开发的Koa的连接MongoDB插件代码详情
koa-mongo MongoDB middleware for koa, support connection pool. koa-mongo koa-mongo is a mongodb midd ...
随机推荐
- 【基础算法-ST表】入门 -C++
前言 学了树状数组看到ST表模板跃跃欲试的时候发现完全没思路,因为给出的查询的时间实在太短了!几乎是需要完成O(1)查询.所以ST表到底是什么神仙算法能够做到这么快的查询? ST表 ST表是一个用来解 ...
- 003_STM32程序移植之_W25Q64
1. 测试环境:STM32C8T6 2. 测试模块:W25Q64FLASH模块 3. 测试接口: 1. W25Q64FLASH模块接口: VCC3.3--------------------VCC3. ...
- poi操作excel之: 将NUMERIC转换成TEXT
一.NUMERIC TO TEXT(生成excel)代码生成一个excel文件: public static void generateExcel() throws Exception { XSSFW ...
- [TJOI2019]唱、跳、rap和篮球
嘟嘟嘟 TJ律师函警告 20分暴力比较好拿,因为每一种学生可以理解为无限多,那么总方案数就是\(C_{n} ^ {4}\),然后我们枚举至少讨论cxk的有几组,容斥即可. 需要注意的是,容斥的时候还要 ...
- Cogs 1500. 误差曲线(三分)
误差曲线 ★★ 输入文件:errorcurves.in 输出文件:errorcurves.out 评测插件 时间限制:1 s 内存限制:256 MB [题目描述] Josephina是一名聪明的妹子, ...
- linux下查看内存频率,内核函数,cpu频率
查看CPU: cat /proc/cpuinfo # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理 ...
- maven项目无法查看类库的源码
一个Maven项目有两种类库,分别是JRE System Libaray和Maven Dependencies. JRE System Libaray 一般有两种方法指定. 1.由pom.xml中的m ...
- Ocelot 网关 和 consul 服务发现
服务发现 Consul 一.安装和启动 下载 [Consul](https://www.consul.io/downloads.html) 下载完成后,解压,只有一个consul.exe,把目录添加到 ...
- Ubuntu JDK环境变量
环境变量配置 sudo gedit ~/.bashrc export JAVA_HOME=/usr/local/java/jdk1.8.0_201 export JRE_HOME=${JAVA_HOM ...
- Spring Security整合JWT,实现单点登录,So Easy~!
前面整理过一篇 SpringBoot Security前后端分离,登录退出等返回json数据,也就是用Spring Security,基于SpringBoot2.1.4 RELEASE前后端分离的情况 ...