背景
最近做的项目中有流程设计的需求，且要求设计器具有可嵌套子流程功能，业务比较复杂，当时没有找到合适的设计器，后来选型cytoscapejs，用vue架构了一个流程设计器，不过相对而言太复杂，业务特征太明显，故计划年后做出版较为通用的流程设计器，且增加演示动画功能（待完善）。本文是对目前所做设计器的一个展示。后续还会继续完善。
基于cytoscape.js的流程设计器。演示文档 Demo。已纳入SoDiao豪华套餐。(▽)
优点如下：
1. 支持实/虚线、连线弯曲、撤销重做、放大缩小;
2. 可导出 json/png/jpg 文档；
3. toolbar自定义；
4. 允许在流程中嵌套**子流程**；
5. 支持只读、设计两种模式（敬请期待）;
6. 支持设置**流程动画**（敬请期待）;
7. ……后续再完善……
在此，感谢 easyicon.net 提供的图标。
1. 预览-Preview
预览效果如下：
2. 安装使用-Install
npm 安装
推荐使用 npm 安装
npm i flow-chart-editor -S
可在页面中引用
import FCE from "flow-chart-editor";
var fce=new FCE({
el: document.getElementById("fce"),//初始化节点
toolbars: [{//自定义toolbar
name: "rectangle",//节点名称
icon: "images/rectangle.png",//toolbar的图片
className: "",//自定义样式
title: "矩形",//title值
exec(evt, clickType, obj) {//选中该节点后，点击编辑区域后被触发事件
const label = prompt("请输入节点名称："),
data = { id: new Date().getTime(), label: label };
if (!label) return;
if (clickType === "node") {
data.parent = obj.id;
}
this.addNode(data, "rectangle");
}
},
"animation"]//这里FCE内置的一种制作流程动画组件
});
脚本引用
<!DOCTYPE html>
<html>
<head>
<title>flow-chart-editor流程设计器</title>
<link href="css/cytoscape-context-menus.css" rel="stylesheet">
<link href="css/fce.1.0.0.min.css?a643cc98a261f0b1586b" rel="stylesheet">
<script type="text/javascript" src="js/lib/cytoscape.js"></script>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/konva.min.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-node-resize.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-grid-guide.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-edgehandles.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-context-menus.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-edge-bend-editing.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-undo-redo.js"></script>
<script type="text/javascript" src="js/lib/cytoscape-view-utilities.js"></script>
<script type="text/javascript" src="js/fce.1.0.0.min.js?a643cc98a261f0b1586b"></script>
</head>
<body>
<div id="fce"></div>
<script>
var fce=new FCE({
el: document.getElementById("fce"),//初始化节点
toolbars: [{//自定义toolbar
name: "rectangle",//节点名称
icon: "images/rectangle.png",//toolbar的图片
className: "",//自定义样式
title: "矩形",//title值
exec(evt, clickType, obj) {//选中该节点后，点击编辑区域后被触发事件
const label = prompt("请输入节点名称："),
data = { id: new Date().getTime(), label: label };
if (!label) return;
if (clickType === "node") {
data.parent = obj.id;
}
this.addNode(data, "rectangle");
}
},
"animation"]//这里FCE内置的一种制作流程动画组件
});
</script>
</body>
</html>
3. 二次开发-Build
二次开发前请确保已经安装node及webpack。在控制台中执行 npm run <target>，其中：
dev：开发模式，执行后可直接访问http://localhost:9110/直接调试。build：执行打包，dist 中的文件会重新打包。
4. 文档-Document
//todo 稍后完善。
5. 依赖-Dependencies
6. 错误提交-Bug
- 可邮件至dd@sodiao.org；
- 可以在github中的ISS中提交；
7. 捐赠-Donation
表示您对本项目的支持
8. 许可证-LICENSE
MIT.
欢迎下载适用！