![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
流程设计器
飞天代码
这个作者很懒,什么都没留下…
展开
-
bpmn-js(四) 添加各类网关到设计器中
默认bpmn-js设计器没有添加网关的绘制,但实际业务中会使用网关来控制并发、选择性运转等。第一步:修改PaletteProvider.js文件第二步:添加下面的内容 'create.exclusive-gateway': createAction( 'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor', translate('排他网关') ), 'create.parallel-gateway原创 2021-01-26 19:31:02 · 2239 阅读 · 3 评论 -
bpmn-js 改造(三)给节点添加颜色,给边线加上滚动功能
给节点添加颜色,其实给节点加颜色的方式比较多。我使用的比较粗暴的方式,直接使用jquery,加样式的方式 $("g[data-element-id='"+nodeId+"']").find(".djs-visual rect").css("fill",colors["not-pass-node"]["bgColor"]);其实就是根据节点id找到相应显示rect 设置其中的颜色样式。效果图:给红色边框加上滚动效果;第一步:添加样式信息 @-webkit-keyframes test {原创 2021-01-17 19:48:06 · 3596 阅读 · 2 评论 -
bpmn-js 改造(二)预览状态下添加拖拽功能
流程图查看采用的是BpmnViewer方式来展示流程图,上效果图:问题来了,发现svg图片无法拖拽位置,在设计模式下是可以的,但查看模式不行了。但有些场景是需要进行拖拽的。手动加上拖拽功能,因为我这边修改了大量bpmn-js的源码,所以我采用的是直接在这个源码基础上扩展。找到Viewer.js文件然后在导入的地方加上import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";import MoveCanvasModu原创 2021-01-17 19:41:06 · 2855 阅读 · 0 评论 -
bpmn-js 改造(一)添加会签节点
bpmn-js应该是使用最广最普遍的一个流程设计器。前段时间自己写了个流程设计器,为了更好的完善自己写的设计器,所以拿bpmn-js来进行一次研究。bpmn-js 网上各种帖子,但大部分都是停留在测试、学习层面,基本很少有结合企业业务来扩展的,所以我这里结合业务记录下bpmn-js的使用流程会签:就是流程运转过程中需要提交给多个人进行审批,每个人可以发表意见,而且会签也存在一票否决、比例决策、全票决策等策略。为了实现该功能,第一步应该是要绘制这样一个节点,表示进入到会签,后台根据这个特殊节点进行代码原创 2021-01-10 11:12:19 · 8078 阅读 · 10 评论 -
采用d3开发流程设计器(七)实现撤销、恢复的功能
撤销和恢复一开始是不想做的,但后来感觉这个功能还是有点必要的,就只好加上了。需求:这里就不介绍了,就是个操作的前进后退功能。其实原理蛮简单的,就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。注意这里的参数一定是数据层面的,不能有对象层面的传递。 //添加事件操作监听 this.flowDesCtl.flowStackWatch.push( "window.flowDesCtl.removeNode", "window.flowDesCt原创 2020-06-16 12:54:55 · 821 阅读 · 5 评论 -
采用d3开发流程设计器(六)通过拖拽选中多个节点,然后拖动调整位置
需求:1:当图绘制一半时候,需要对多个节点位置进行调整,通过拖拽选中多个节点,然后进行调整。2、选中多个记录,点击删除来进行多个节点删除。效果图:选中多个节点进行拖拽移动。关键代码:第一步拖拽的时候创建一个临时的rect,并且设置透明度为0.7/** * 初始化一个用于拖拽都rect区块 * @param containerId */FlowDragSelArea.prototype.init=function (containerId) { this.flowDesCtl原创 2020-06-10 16:22:22 · 1455 阅读 · 2 评论 -
采用d3开发流程设计器(五)实现节点间线条的拖拽变换
一晃这设计器也写了快一周了,基本功能已经出来咯。但完全做完应该还需要个把月吧。这节我们介绍下节点间线条的拖拽变换的功能:需求:1、点击线条,会在线条俩端生成2个拖拽节点。2、点击拖拽节点可以变换线条的起始位置或者是结束位置。效果图:点击拖拽节点进行线条位置的变换核心代码:点击线条绘制拖拽节点:/** * 创建激活的link * @private */FlowLink.prototype._createLinkActiveNode = function (d, linkId,原创 2020-06-05 17:31:32 · 1174 阅读 · 2 评论 -
采用d3开发流程设计器(四)实现线条的绘制,以及线条的箭头
前面三节完成了开始、结束、普通节点的拖拽生成,这些都还比较简单,这节来实现下线条都绘制以及拖拽相关功能:需求:1、拖拽生成线条,连接2个节点2、拖拽节点的时候 线条跟着移动3、选中线条变换样式4、右键点击可以删除线条5、线条末端带上箭头效果大概:其中拖拽的时候...原创 2020-06-04 14:26:20 · 1865 阅读 · 2 评论 -
采用d3开发流程设计器(三)添加普通任务节点
1、普通任务节点是流程里面的最常用的节点,这种节点是rect形状需求:普通节点可以进行拖拽普通节点可以进行大小变化普通节点可以拖拽出线条,跟其他节点连接线条可以跟普通节点连接第一次这么深入的玩svg和d3 还是走来蛮多冤枉路,废话不多说了,上效果图吧。这里面设计几个技巧1、text节点和边框拖拽节点和节点rect要实现在一个g里头,这样拖拽事件给g即可,不需要每个元素去监听拖拽。2、拖拽的时候,要对window.d3.event.x进行特殊的计算处理,因为rect节点的宽高都比较大,原创 2020-05-31 23:23:38 · 837 阅读 · 0 评论 -
采用d3开发流程设计器(一)搭建框架和节点拖拽
企业业务里面很少会采用横向组织机构树来展示,一般都是通过纵向组织机构树来进行展示,所以将前俩天写的代码扩展了下,扩展出了纵向组织机构树。原创 2020-05-27 16:51:40 · 1914 阅读 · 3 评论 -
采用d3开发流程设计器(二)添加右键菜单
上一节完成了架子的搭建以及节点的拖拽,这节完成节点菜单右键的操作需求:1、右键点击节点,弹出菜单,选中属性菜单项,右边再弹出菜单配置panel2、点击其他节点或者界面空白处隐藏下拉菜单效果图:点击弹出右边的panel其中的核心代码:第一步:注册右键菜单 node.append("circle") .attr("r", nodeWidth) .attr("fill", nodeColor) .on("click", d => {原创 2020-05-28 09:46:48 · 1754 阅读 · 1 评论