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

(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )

内容概述

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

本文主要包括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 "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>

上一篇：JavaScript变量Dom对象的所有属性
下一篇：VSCode搭建Vue项目的方法