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 相关文章推荐
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
javascript canvas实现简易时钟例子
Sep 05 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自动更新新闻DIY
2006/10/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python requests上传文件实现步骤
2020/09/15 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
结构工程研究生求职信
2013/10/13 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
社会发展项目建议书
2014/08/25 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers
js作用域及作用域链工作引擎
2022/07/07 Javascript