vue项目中使用bpmn-为节点添加颜色

内容概述

本系列 “vue项目中使用bpmn-xxxx” 分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括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 = $('
').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即可运行！

View Code

想获取完整源码或有问题，欢迎大家关注我的公粽号，扫下面二维码或微信搜“前端便利贴”，即可获取~

可爱的你可能还需要

• vue项目中使用bpmn-番外篇(留言问题总结)
• vue项目中使用bpmn-流程图json属性转xml（七篇更新完成）
• vue项目中使用bpmn-流程图xml文件中节点属性转json结构
• vue项目中使用bpmn-自定义platter
• vue项目中使用bpmn-节点篇(为节点添加点击事件、根据id找节点实例、更新节点名字、获取指定类型的所有节点)
• vue项目中使用bpmn-流程图预览篇
• vue项目中使用bpmn-基础篇