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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
javascript中的继承实例代码
Apr 27 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue中轮训器的使用
Jan 27 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
岗位职责的含义
2013/11/17 职场文书
护理专业求职信
2014/06/15 职场文书
关于安全的广播稿
2014/10/23 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
好好学习保证书
2015/02/26 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle