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 相关文章推荐
JavaScript插入动态样式实现代码
Feb 22 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
详解JS数值Number类型
Feb 07 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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 的几个配置文件函数
2006/12/21 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Flask之请求钩子的实现
2018/12/23 Python
详解Python字典的操作
2019/03/04 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
浅析Python的命名空间与作用域
2020/11/25 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis