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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP单例模式详细介绍
2015/07/01 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年营销工作总结
2014/11/22 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis