上市公司网站建设要求,重庆石桥铺网站建设公司,易购商城app,本地做网站图片怎么存项目背景
最近在准备开发工作流引擎相关模块#xff0c;完成表结构设计后开始着手流程设计器的技术选型#xff0c;调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发#xff0c;保证定制化的便捷性#xff0c;相关效果图及项目地址如下
项目地址#xff1a;ht…项目背景
最近在准备开发工作流引擎相关模块完成表结构设计后开始着手流程设计器的技术选型调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发保证定制化的便捷性相关效果图及项目地址如下
项目地址https://gitee.com/code2roc/fast-flow-desgion 需求概述
流程设计器中最基础的两个元素为活动节点和变迁连接我们需要以下基础功能来配合相关接口进行工作流相关设计数据的保存/修改
活动的添加/删除/移动变迁的添加/删除活动/变迁数据的全部读取根据json渲染活动与变迁
相关引入依赖如下表所示
名称功能jsplumb.js设计器主要依赖用于绘制相关图形与动态操作实现jquery.jsjsplumb依赖的库jquery-ui.jsjsplumb依赖的库进行拖拽绑定contextMenu.js实现右击菜单mustache.js模板引擎渲染活动避免字符串拼接
实现思路
活动添加
通过mustache的render方法渲染添加到html后需要调用draggable方法让活动能够进行自由拖动其中grid参数作用是固定每次拖拽移动最小距离便于不同节点经过移动后对齐
script typetext/x-mustache idjnode-templatediv classjnode-panel id{{id}} jnode{{jnode}} styletop:{{top}}px;left:{{left}}pxdiv classjnode-box {{jnodeClass}}{{{jnodeHtml}}}/div/div
/scriptjsPlumb.draggable(id, {containment: parent,grid: [8, 8]
})活动删除
通过jsPlumb.remove方法删除会删除相关活动与连接的变迁参数是活动id通过右键菜单的点击事件获取属性 callback: function(itemKey, opt, rootMenu, originalEvent) {var id $($(opt.$trigger[0]).parent()).attr(id);jsPlumb.remove(id)
}活动移动
在活动拖动的过程中位置进行变化我们需要进行事件监听获取实时位置保存到数据库通过jsPlumb.draggable方法的stop方法注册实现 jsPlumb.draggable(id, {containment: parent,grid: [8, 8],stop: function(event, ui) {var nodeID $(ui.helper.context).attr(id);moveActivity(nodeID, ui.position.left, ui.position.top);}});变迁添加
jsplumb节点可以添加相关锚点连接不同锚点会自动绘制连线在实际操作时连线要求锚点对准操作精度较高不便捷所以我们通过设置节点整体对象为连接对象可实现鼠标放置在活动div范围内进行拖拽连线需要注意makeSource和makeTarget需要同时执行节点才能作为起点与终点
function registAutoConnect(id) {jsPlumb.makeSource(id, {endpoint: Dot,anchor: Continuous})jsPlumb.makeTarget(id, {endpoint: Dot,anchor: Continuous})
}
以上方法是手动在流程设计器中进行操作连接如果我们通过接口获取已有数据需要通过connect方法进行代码渲染变迁
需要注意jsplumb中connection的id为自动生成我们需要通过setAttribute方法对canvas进行id赋值操作才能绑定我要自己的id数据
function addConnect(id, sourceID, targetID) {var connection jsPlumb.connect({source: sourceID,target: targetID});connection.id idjsPlumb.setAttribute(connection.canvas, id, connection.id)
}
通过监听connection事件我们可以知道连接添加完成进行相关接口调用但我们需要区分是我们通过设计器操作还是代码渲染只要判断originalEvent是否存在存在则是通过鼠标操作的 jsPlumb.bind(connection, function(connInfo, originalEvent) {if (originalEvent) {}});变迁删除
通过jsPlumb.detach方法进行变迁的删除默认只删除变迁不删除连接的活动
function deleteConnect(id) {var connects jsPlumb.getAllConnections();for (var i 0; i connects.length; i) {var connect connects[i];if (connect.id id) {jsPlumb.detach(connect)}}
}其它
代码还包含很多其他细节如下所示就不详细赘述了大家可以仔细阅读项目中包含了详细的注释
连接添加控制例如开始节点不能为连接终点结束节点不能为起点导入默认配置控制连线样式各种操作模式指针变换及交互模式流程图整体移动活动/变迁的选中效果及点击空白处取消
