vue项目中使用bpmn为节点添加颜色的方法


Posted in Javascript onApril 30, 2020

内容概述

bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples

本文主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前情提要

上文我们已经实现了在外部更改节点名。此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色。例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求。效果:

vue项目中使用bpmn为节点添加颜色的方法

方式1:modeling.setColor

modeling.setColor接受两个参数:参数1:节点实例,可以是单个元素,也可是多个节点组成的数组,参数2:class类

let modeling = this.bpmnModeler.get('modeling');
modeling.setColor(节点实例, {
 stroke: 'green',
 fill: 'yellow'
});

方式2:Overlay

个人理解,overlay是通过定位方式在元素正上方添加一层带颜色的蒙板

const $overlayHtml = $('<div class="highlight-overlay">').css({
 width: shape.width,
 height: shape.height
});
overlays.add(节点id, {
 position: {top: 0, left: 0},
 html: $overlayHtml
});

highlight-overlay:css中声明好的class类名

overlays.add将创建好的蒙板定位到指定节点位置,此时节点id就是目标节点的唯一身份!

注意事项

上述两种方式均能实现为节点添加颜色。但方式2有一点副作用,如果此时你为节点注册了点击事件,在节点被点击的时候要做某些处理。此时方式2会使节点点击事件失效。

原因:方式2中,此时节点上方有一层蒙板,并且和节点等宽等高,相当于节点被蒙板完全覆盖。所以点击节点的时候,点击的是蒙版,不是节点。

不要慌,有解决办法!此时为蒙板注册了点击事件,将点击节点要做的操作给蒙板也来一份,哈哈

import $ from 'jquery'; // 引入jquery
$(".djs-container").on("click", ".djs-overlays", (e) => {
 const parentEle = e.target.parentElement.parentElement;
 const shapeId = parentEle.getAttribute('data-container-id');
 const temp = this.nodeList.filter(
 (item) => item.id === shapeId
 )[0];
 // 此时temp就是蒙板下方的节点,要点击节点做什么,此刻尽管拿去用
 ........
});

后续

上文代码都是片段,特此附上完整代码:老规矩:data中的chart变量流程图xml文件数据,由于行数过多,附在了附件中(点我!点我),使用时,将附件内容复制过来,赋值给chart即可运行!

<template>
 <div class="containerBox">
 <div id="container"></div>
 <div style="margin-left: 200px">看我!我是点击的节点名称啊~
  <span style="color: #eaae00">{{nodeName}}</span>
 </div>
 </div>
</template>
<script>
 import BpmnModeler from 'bpmn-js/lib/Modeler';
 import camundaExtension from './resources/camunda';
 import {tempDetail, saveCanvas} from '@api/processConfig';
 import $ from 'jquery';

 export default {
 name: 'index',
 data() {
  return {
  containerEl: null,
  bpmnModeler: null,
  nodeName: '',
  nodeList: [],
  // chart变量流程图xml文件数据,由于行数过多,附在了附件中,使用时,将附件整个赋值给chart即可
  chart: ''
  };
 },
 mounted() {
  this.containerEl = document.getElementById('container');
  this.bpmnModeler = new BpmnModeler({
  container: this.containerEl,
  moddleExtensions: {camunda: camundaExtension}
  });
  this.showChart();
 },
 methods: {
  // 流程图回显
  showChart() {
  this.bpmnModeler.importXML(this.chart, (err) => {
   if (!err) {
   this.addEventBusListener();
   this.setNodeColor();
   }
  });
  },
  setNodeColor() {
  // 目的:为第一个节点添加绿色,为第二个节点添加黄色
  // 实现步骤:1、找到页面里所有节点
  const elementRegistry = this.bpmnModeler.get('elementRegistry');
  this.nodeList = elementRegistry.filter (
   (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask'
  );
  // 此时得到的userTaskList 便是流程图中所有的节点的集合
  console.log(this.nodeList);
  // 步骤2 :为节点添加颜色
  // 方式1 :modeling.setColor(参数1:节点,可以是单个元素实例,也可是多个节点组成的数组,参数2:class类);
  let modeling = this.bpmnModeler.get('modeling');
  modeling.setColor(this.nodeList[0], {
   stroke: 'green',
   fill: 'yellow'
  });
  // 方式2 :添加蒙板
  const overlays = this.bpmnModeler.get('overlays');
  const shape = elementRegistry.get(this.nodeList[1].id);
  if (shape) {
   const $overlayHtml = $('<div class="highlight-overlay">').css({
   width: shape.width,
   height: shape.height
   });
   overlays.add(this.nodeList[1].id, {
   position: {top: 0, left: 0},
   html: $overlayHtml
   });
  }
  // 此方法为了解决方式2造成的节点点击事件失效问题,如果采用方式1,可忽略此方法
  this.overlayClick();
  },
  overlayClick() {
  $(".djs-container").on("click", ".djs-overlays", (e) => {
   const parentEle = e.target.parentElement.parentElement;
   const shapeId = parentEle.getAttribute('data-container-id');
   const temp = this.nodeList.filter(
   (item) => item.id === shapeId
   )[0];
   this.nodeName = temp ? temp.businessObject.name : '';
  });
  },
  addEventBusListener() {
  const eventBus = this.bpmnModeler.get('eventBus');
  // 为节点注册点击事件,点击节点,下方显示点击的节点名称
  eventBus.on('element.click', (e) => {
   const {element} = e;
   if (!element.parent) return;
   if (!e || element.type === 'bpmn:Process') {
   return false;
   } else {
   this.nodeName = element.businessObject.name;
   }
  });
  }
 }
 };
</script>
<style lang="scss">
 .containerBox {
 height: calc(100vh - 220px);
 position: relative;

 #container {
  height: calc(100% - 50px);
 }
 .highlight-overlay {
  background-color: green;
  opacity: 0.4;
  border-radius: 10px;
 }
 }
</style>

到此这篇关于vue项目中使用bpmn为节点添加颜色的方法的文章就介绍到这了,更多相关vue bpmn节点颜色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
VSCode搭建Vue项目的方法
Apr 30 #Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 #Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 #Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 #Javascript
详解Vue串联过滤器的使用场景
Apr 30 #Javascript
You might like
PHP面向对象法则
2012/02/23 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
舞蹈毕业生的自我评价
2014/03/05 职场文书
个人创业事迹材料
2014/12/30 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
离婚案件被告代理词
2015/05/23 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
python tqdm用法及实例详解
2021/06/16 Python
python常见的占位符总结及用法
2021/07/02 Python