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 = $('<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 $ 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>
View Code

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

可爱的你可能还需要

作者:Lemoncool
更多:没有办法维护原创版权,欢迎关注我的公粽号:前端便利贴,文章更早、更全,免费获取完整代码
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.
posted @ 2020-04-30 14:42  Lemoncool  阅读(4585)  评论(4编辑  收藏  举报