activity 流程编辑器_最好用的流程编辑器bpmnjs系列之Viewer
最好用的流程编辑器bpmn-js系列文章
上一篇文章『最好用的流程编辑器bpmn-js系列之』介绍了bpmn-js的modeler模式下的一些开发配置,这篇文章将会介绍Viewer模式的使用
以下演示代码基于上一节搭建好的vue环境,使用bpmn版本为当前最新版7.3.0
基本使用
Viewer的使用与Modeler并无太大区别,示例代码如下
<template> <div class="containers"> <div class="canvas" ref="canvas">div> div>template>
<script>import BpmnViewer from "bpmn-js/lib/Viewer";import { xmlStr } from "../mock/xmlStr";export default {name: "ops-coffee", mounted() {this.init(); }, data() {return {bpmnViewer: null,container: null,canvas: null }; },methods: { init() {const canvas = this.$refs.canvas;this.bpmnViewer = new BpmnViewer({container: canvas });this.createNewDiagram(); },async createNewDiagram() {try {const result = await this.bpmnViewer.importXML(xmlStr);const { warnings } = result;console.log(warnings); } catch (err) {console.log(err.message, err.warnings); } } }};script>
屏幕自适应
流程图渲染完成后可能会出现集中在画布左侧/右侧等情形,导致整体不够美观,通过zoom
可以配置自适应画布,保证渲染图位于画布的中间位置
const canvas = this.bpmnViewer.get("canvas");canvas.zoom("fit-viewport", "auto");
自定义颜色设置
bpmn-js提供了三种修改颜色的方式,如果你想在Modeler(编辑)模式下修改颜色,推荐使用setColor
方式,而Viewer(预览)模式则只能通过另外两种overlay
和Marker
方式来实现,以下为bpmn-js提供的三种修改颜色的方法
overlay
Viewer模式下可用
先添加CSS
.highlight-overlay { background-color: green; opacity: 0.4; pointer-events: none;}
然后修改节点颜色
var overlays = viewer.get('overlays'), elementRegistry = viewer.get('elementRegistry');
var shape = elementRegistry.get('Activity_0djl6l0');
var $overlayHtml = $('
')
.css({
width: shape.width,
height: shape.height
});
overlays.add('Activity_0djl6l0', {
position: {
top: 0,
left: 0
},
html: $overlayHtml
});
Marker +
Viewer模式下可用
先添加CSS
.highlight .djs-visual > :nth-child(1) { stroke: green !important; fill: rgba(0, 80, 0, 0.4) !important;}
然后修改节点颜色
var canvas = viewer.get('canvas');canvas.addMarker('Activity_0djl6l0', 'highlight');
setColor
Modeler模式下可用
bpmnModeler.importXML(diagramXML, function(err) { var elementRegistry = bpmnModeler.get('elementRegistry'); var elementToColor = elementRegistry.get('Flow_1xnf3iv');
var modeling = bpmnModeler.get('modeling'); modeling.setColor([ elementToColor ], { stroke: 'green', fill: 'rgba(0, 80, 0, 0.4)' });});
我们的使用示例
Viewer预览模式下,后端传递过来的xml数据里包含了
run_state的标记,标识当前节点的状态,需要根据这个状态给节点渲染上对应的颜色
xml文件大概如下,截取了包含
run_state的一段
<sequenceFlow id="Flow_1d9q74f" sourceRef="Activity_1eq68tk" targetRef="Activity_0o8b5cf" run_state="3" /><scriptTask id="Activity_0o8b5cf" name="脚本节点" run_state="5"> <incoming>Flow_1d9q74fincoming> <outgoing>Flow_0b23d51outgoing>scriptTask><sequenceFlow id="Flow_0b23d51" sourceRef="Activity_0o8b5cf" targetRef="Event_0idqhms" run_state="4" /><intermediateCatchEvent id="Event_0idqhms" name="定时" run_state="6"> <incoming>Flow_0b23d51incoming> <outgoing>Flow_17tttbwoutgoing> <timerEventDefinition id="TimerEventDefinition_1w7apdl" />intermediateCatchEvent><sequenceFlow id="Flow_17tttbw" sourceRef="Event_0idqhms" targetRef="Activity_0qkzn5l" run_state="0" /><manualTask id="Activity_0qkzn5l" name="手动节点" run_state="7"> <incoming>Flow_17tttbwincoming> <outgoing>Flow_0h1ee5ioutgoing>manualTask>
在页面加载完xml后,调用setColor的方法来设置颜色
setColor() { // access viewer components const canvas = this.bpmnViewer.get("canvas");
// 获取到全部节点 const allShapes = this.bpmnViewer.get("elementRegistry").getAll();
//循环节点添加颜色 allShapes.forEach(element => { const shapeId = element.businessObject.id; const shapeAttrs = element.businessObject.$attrs;
// add marker if (element.businessObject.$type != "bpmn:Group") { if (element.businessObject.$type == "bpmn:SequenceFlow") { canvas.addMarker(shapeId, "highlight-2" + shapeAttrs.run_state); } else { canvas.addMarker(shapeId, "highlight-" + shapeAttrs.run_state); } } });}
设置颜色实际上就是通过
addMarker方法给节点设置CSS,因为连线无需设置fill属性,对于连线有特殊的处理,对应的CSS如下
<style>.highlight-0 .djs-visual > :nth-child(1) {stroke: black !important;}.highlight-1 .djs-visual > :nth-child(1) {stroke: black !important;fill: #f8f8f8 !important;}.highlight-2 .djs-visual > :nth-child(1) {stroke: black !important;fill: #cff5fa !important;}.highlight-3 .djs-visual > :nth-child(1) {stroke: black !important;fill: #d7f6ce !important;}/* 连线 */.highlight-20 .djs-visual > :nth-child(1) {stroke: black !important;}.highlight-23 .djs-visual > :nth-child(1) {stroke: green !important;}.highlight-24 .djs-visual > :nth-child(1) {stroke: red !important;}style>
最后渲染完成的样子如下,未来我们的【开源一站式DevOps平台CODO】的流程图展示或许就长这个样子,期待一下吧
Viewer模式下拖动
当流程图比较复杂,节点众多的时候,单单有屏幕自适应可能是不够的,我们还希望流程图可以拖动,bpmn-js的Viewer模式默认并不支持此功能,但提供了
diagram-js插件来实现
使用起来稍微复杂,但根据下边的步骤就能轻松搞定
先在package.json中添加
diagram-js,然后运行npm install
安装diagram-js
"dependencies": { "bpmn-js": "^7.3.0", "diagram-js": "^5.0.0"},
编写自定义Viewer添加
ZoomScrollModule和MoveCanvasModule
模块来扩展默认Viewer的功能,自定义Viewer文件位于src/components/customBpmn/index.js
下,内容如下
import inherits from "inherits";
import Viewer from "bpmn-js/lib/Viewer";
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
function CustomViewer(options) { Viewer.call(this, options);}
inherits(CustomViewer, Viewer);
CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ ZoomScrollModule, MoveCanvasModule]);
export { CustomModeler, CustomViewer };
最后在页面中引用自定义Viewer
import { CustomViewer } from "../components/customBpmn";
并将init初始化方法中的
BpmnViewer替换为CustomViewer
,然后刷新页面就会发现流程图可以拖动啦
写在最后
接触bpmn-js不久,且第一次用VUE,边学边写,文章难免出错,各位多多包含。想要打造一个好用的适合自己的流程编辑器,需要了解的内容比较多,bpmn-js会分多篇文章来介绍,欢迎关注
部分小伙伴对流程编辑器不了解,或是对BPMN不了解,我搭建了个在线的demo,点击文末阅读原文轻松体验,建议PC端打开效果更好
activity 流程编辑器_最好用的流程编辑器bpmnjs系列之Viewer相关推荐
- 大数据产品开发流程规范_大数据开发流程规范化(最新数据流图及相关数据技术分析)...
大数据的开发过程,如图1-1所示. 图 1-1大数据开发通用步骤图 上图只是一个简化后的步骤和流程,实际开发中,有的步骤可能不需要,有的还需要增加步骤,有的流程可能更复杂,因具体情况而定. 下面以Go ...
- python黑色背景编辑器_如何更换python默认编辑器的背景色
初学Python,想必大家拿来练习最多的IDE就是Python自带的IDLE了,但是默认的代码配色及语法高亮主题确实很不适应.下面我们就来看一下修改python默认编辑器背景颜色的方法. 1.首先要找 ...
- c++编辑器_盘点四款PDF编辑器,使用它们,编辑PDF文件没问题!
原标题:盘点四款PDF编辑器,使用它们,编辑PDF文件没问题! 在我们日常学习和日常工作中,我们有时会遇见将PDF文件进行编辑的问题.有时候是添加图片,插入文字,有时候是拆分PDF,修改PDF文件. ...
- python编辑器_推荐一款Python编辑器,集Pycharm和Sublime优点于一身的王者
编程里面的编辑器就像是武林大会里面的高手,每一年都有新秀,黑马出现!比如有练习霸道的天罡之气的榜首Pycharm,力量雄厚霸道战斗力极强,但是对斗气消耗很大,占内存大而且启动速度有点慢!还有练习灵巧的 ...
- java在线编辑器_微软开源在线代码编辑器——Monaco Editor
介绍 Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代码提示,智能建议等功能.供开发人员远程更方便的编写代码.移动浏览器或移动Web框架不支持Mona ...
- 有什么手机python编辑器_好用的Python编辑器有哪些?
当我们学习Python语言的时候,选择一款合适的编辑器是非常重要的,可以更好的提高我们的工作效率,那么好用的Python编辑器有哪些?我们一起来看看吧. Python的编辑器有很多,比如说:Subli ...
- ERP流程入门_从会计分录理解企业基本流程[转]
ERP流程入门_从会计分录理解企业基本流程 本贴写给尚未在企业工作过的朋友!了解企业的基本流程的一个方法是看它的会计分录,我们现在来看一个完整的企业基本流程,它的会计分录是如何做的,其中有些帐户名称可 ...
- 编辑bpmn_最好用的流程编辑器bpmnjs系列之ContextPad
最好用的流程编辑器bpmn-js系列文章 上一篇文章『最好用的流程编辑器bpmn-js系列之Palette』介绍了modeler模式下如何自定义左侧工具栏Palette,这篇文章将会介绍如果自定义Co ...
- flowable工作流 流程变量_互联网架构设计漫谈 (6)-90%的架构师都知道的工作流原理...
工作流是互联网中常见的应用场景,目前国内有很多厂商提供各种各样的工作流引擎.在国际也有一些知名的工作流引擎,比如:jBPM 和 Activiti. 他们都老牌的工作流引擎.同时都遵循BPMN 2.0的 ...
- java流程审批_基于SSM框架下的JAVA企业流程审批系统
每天记录学习,每天会有好心情.*^_^* 今天将为大家分析一个企业流程审批系统(现代企业对资金流的控制十分严格,但是绝大部分企业的费用审批还停滞在手动填单.逐级递交.逐级审批的现状,既没有效率也不利于 ...
最新文章
- The Innovation | Volume 2 Issue3 正式出版
- WAIC 2021 | 中国惠普周信宏:AI基础设施——边缘计算演进及趋势
- Apache应用实例:建立yum服务器
- [BZOJ2017][Usaco2009 Nov]硬币游戏
- 设置对话框的小三角方法
- ともだちいじょう、こいびとみまん
- 【网络流24题】餐巾计划问题(费用流)
- linux根据部署jenkins
- 1、《java就业培训教程》-张孝祥
- php 开源邮件系统,20款 Web Mail PHP开源项目
- 校园wifi免费上网
- 嵌入式驱动开发遇到version magic不匹配解决办法
- AWS、Azure等国外云计算如何迁移到国内阿里云上?
- java put方法_java 实现Put request
- End-to-end 3D Point Cloud Instance Segmentation without Detection
- pocketsphinx 模型库_PocketSphinx声学模型的训练与使用
- 单片机蓝牙烧录_怎么样蓝牙模块给单片机烧程序?
- 大气顶层反射率无量纲_农作物种植面积遥感监测技术规程大蒜.doc
- 【考试记录】Apsara Clouder基础技能认证:实现调用API接口
- java 线框图_十个完全免费的网页原型(线框图)工具
热门文章
- RDMA的原理、传输与Verbs
- [转载]架构指南 : Java1.7+Eclipse luna + Maven 3.2.5 +spring 4.1.4
- ADF12C 一个应用读多个数据库的数据
- 用正则表达式去除标点符号
- 关于空间分析的一点小思考
- Python基础--03
- SQLSERVER中使用函数去掉数据中的空格,批量删除数据中空格、换行符?,替换字段中字符串
- 如何选购晨检机器人_如何选购扫地机器人?吸力/清扫导航/路线规划缺一不可...
- win10右下角的天气怎么关闭
- php7.4报错:Trying to access array offset on value of type null