全网最详bpmn.js教材-Color篇

前言

👣

Q: bpmn.js是什么? 🤔️

”

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

👣

Q: 我为何要写该系列的教材? 🤔️

”

由于公司业务的须要于是要在项目中使用到bpmn.js,可是因为bpmn.js的开发者是国外友人, 所以国内对这方面的教材不多, 也没有详细的文档. 因此不少使用方式不少坑都得本身去找.在将其琢磨完以后, 决定写一系列关于它的教材来帮助更多bpmn.js的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是本身对其的一种巩固.

首先先说明一点吧，bpmn.js主要是为画工做流作规则引擎用的，因此若是您的工做中并不涉及到这一块的话能够不用浪费时间阅读本篇文章。固然若是您为此感兴趣的话能够移步bpmn-chinese-document看看它的介绍，若是你对它不感兴趣对我感兴趣的话能够移步个人我的博客niubility-coding-js (好惨没一个Star)😄。

因为是系列的文章, 因此更新的可能会比较频繁, 您要是无心间刷到了且不是您所须要的还请谅解😊.

求赞👍求心❤️. 更但愿能对你有一点小小的帮助.

完整目录及GitHub地址：bpmn-chinese-document

Color篇

好久没写bpmn.js系列的教材了...😄，写起来仍是感受挺亲切的。

这篇文章主要是介绍一下在bpmn.js中修改节点颜色的各类场景和方式，算是bpmn.js交流群群里的一个热门问点吧。另外文章中我会以几个经常使用类型的节点做为案例来进行讲解，好比StartEvent、Task、EndEvent这几种类型，其它类型的修改和案例中的大同小异，还请自行扩展。

由于我一直相信授人予鱼不如授人予渔，这才是一篇教程真正能带给你的东西。咱们在实际开发中确定会遇到各类各样不一样的需求，不可能每篇教程都能恰好符合你的业务要求，因此我能作的只是保证你能有必定的bpmn.js使用基础并在此基础上有本身的思考。

好了话很少说咯，来看看，经过阅读你能够学习到：

• 修改 palette左侧工具栏中的节点颜色
• 修改 renderer渲染在页面上的节点颜色
• 修改 contextPad上的节点颜色
• 在渲染完成以后用户手动触发修改节点颜色

来几张张效果图看看：

(这狗血的画质...)

由于内容很少，因此就没有另起一个案例项目。

如下全部案例都整理在bpmn-properties-panel里面。Color篇的展现主要是在custom-color这个页面下，代码是放在components/custom-color.vue中。

修改palette左侧工具栏中的节点颜色

左侧工具栏修改节点颜色很简单，只须要找到对应节点的类名在css中修改就能够了。

例如我修改了案例中的开始节点。

1. 找到开始节点的类名

2. 在一个全局样式中修改它

若是你和我同样不想要全部的palette都被修改颜色，能够指定某一个页面下进行修改，方式是给你生成bpmn图的容器添加一个类名：

custom-color.vue

<div class="containers bpmn-color" ref="content">
  <div class="canvas" ref="canvas"></div>
</div>
复制代码

例如我这里只修改custom-color页面中的palette

给它加上bpmn-color这个类名。

而后在全局的/styles/bpmn-custom-color.css中修改类的样式：

.bpmn-color .bpmn-icon-start-event-none:before {
  color: #12c2e9;
}
.bpmn-color .bpmn-icon-task:before {
  color: #c471ed;
}
.bpmn-color .bpmn-icon-end-event-none:before {
  color: #f64f59;
}
复制代码

3. 将自定义的样式引入到 main.js中

最后一步就是要把咱们自定义的样式引入到main.js里，这里有一个要注意的就是自定义的样式要放在bpmn.js自带的样式下面：

main.js

import Vue from 'vue'

import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import './styles/bpmn-custom-color.css' // 自定义样式
复制代码

如今保存打开页面就能够看到效果了。

不过这个只能修改图像边框的颜色，由于这个图像本质就是一个icon字体，因此能够用color这个属性来控制字体的颜色。而字体颜色的范围是由这个icon图像自己决定的，也就是说若是这个字体它自己就是个圆环，那color也就只能修改它的圆边框；若是这个字体自己就是个完整的圆，那color确定也就能修改整个圆了。

修改renderer渲染在页面上的节点颜色

光有左侧工具栏的修改还不够，最主要的是要渲染的时候能修改成本身想要的颜色。

例如你的需求多是在进行初始化的时候，就须要根据节点的类型来将节点修改成不一样的颜色。

好比StartEvent修改成红色，Task修改成蓝色等等。

这时候咱们须要用到以前在自定义renderer篇中提到过的「在默认的Renderer基础上修改」。对renderer不懂的小伙伴必定要先阅读自定义renderer篇才行。

在此我假设你已经彻底了解了renderer。

那么咱们知道一个元素可否成功在页面上渲染，关键的代码就是在CustomRenderer中重写drawShape这个方法。

而这个方法其实依赖的是这段代码：

//CustomRenderer.js

drawShape(parentNode, element) {
    let shape = this.bpmnRenderer.drawShape(parentNode, element)
    return shape
}
复制代码

也就是说是靠this.bpmnRenderer.drawShape这个方法将element对象转换为一个svg形式的节点。

最开始个人想法是在转换以前使用modeling.setColor方法来修改element的相应样式：

//CustomRenderer.js

drawShape(parentNode, element) {
  modeling.setColor(element, {
     fill: null,
     stroke: color
    })
    let shape = this.bpmnRenderer.drawShape(parentNode, element)
    return shape
}
复制代码

但这种方式失败了，打开控制台报了一堆的红色错误，大体就是进入了死循环，浏览器爆栈了。

想了一下其实也好理解，renderer的做用本就是将element进行渲染，可是在这个阶段你又用setColor去修改element的这个属性，那这样确定就会形成递归循环渲染，因此这种作法被我否认了。

以后我想了一下，使用drawShape方法产生的东西会是什么呢？带着好奇我把生成的shape打印出来看了一下，发现他就是一个DOM元素：

// StartEvent
<circle cx="18" cy="18" r="18" style="stroke: black; stroke-width: 2px; fill: rgb(18, 194, 233); fill-opacity: 0.95;"></circle>

// TaskEvent
<rect x="0" y="0" width="100" height="80" rx="10" ry="10" style="stroke: rgb(196, 113, 237); stroke-width: 2px; fill: white; fill-opacity: 0.95;"></rect>
复制代码

既然是DOM元素那可就简单了，只须要用修改DOM元素样式的方法来处理就能够了。

因此其实你能够这样作：

//CustomRenderer.js

drawShape(parentNode, element) {
    let shape = this.bpmnRenderer.drawShape(parentNode, element)
    shape.style.setProperty('fill', 'red')
    return shape
}
复制代码

在生成shape以后使用style.setProperty方法修改想要修改的属性就能够了。

在一个shape中，主要是有这么几种属性能够供咱们修改：

• fill：元素的填充色
• stroke：元素的边框颜色
• strokenWidth：元素边框的宽度

为了方便管理和配置我在CustomRenderer.js中定义了一个配置项，另外封装了一个setShapeProperties方法专门用来处理节点颜色的问题，核心代码就这么些：

const propertiesConfig = {
  'bpmn:StartEvent': {
    fill: '#12c2e9'
  },
  'bpmn:Task': {
    stroke: '#c471ed',
    strokeWidth: 2,
  },
  'bpmn:EndEvent': {
    stroke: '#f64f59',
    fill: '#f64f59'
  }
}

export default class CustomRenderer extends BaseRenderer {
  drawShape(parentNode, element) {
      let shape = this.bpmnRenderer.drawShape(parentNode, element)
      setShapeProperties(shape, element)
      return shape
  }
}

function setShapeProperties (shape, element) {
  const type = element.type // 获取到的类型
  if (propertiesConfig[type]) {
    const properties = propertiesConfig[type]
    Object.keys(properties).forEach(prop => {
      shape.style.setProperty(prop, properties[prop])
    })
  }
}
复制代码

经过PropertiesConfig[type]判断有没有要自定义的元素，有的话就走if判断里。

Object.keys() 方法其实就是获取某个对象下的全部属性名称，好比：

var obj = { a: 1, b: 2 }
console.log(Object.keys(obj)) // ['a', 'b']
复制代码

这个写前端的可能都知道，主要是怕后台人员不了解因此提一嘴。

如今保存刷新页面后就能够看到效果了 😊：

修改contextPad上的节点颜色

contextPad上的节点颜色，事实上和修改palette是同样的。由于它们共用了一个className。所以若是你改了palette上的样式，contextPad上的也会被修改。

在渲染完成以后用户手动触发修改节点颜色

这个功能的主要做用是说，在渲染成功以后，可能须要用户手动去修改某个节点的颜色。

额...这其实在全网最详bpmn.js教材-poperties-panel篇(下)中也说到过了吧，核心方法就是用使用modeling.setColor()方法去修改。

const modeling = this.modeler.get('modeling')
modeling.setColor(element, {
  fill: 'blue',
  stroke: 'red'
})
复制代码

在此再也不重复说了 😁。

另外我在官网也发现了有关于colors的案例，它主要是能配合xml标签上的属性来进行相应颜色的修改，有兴趣的小伙伴能够看一下：

bpmn-js colors

bpmn-js-task-priorities

后语

从2019年12月10日最开始写此教材到如今已经四个月了，bpmn.js交流群也从最开始的3,4我的扩展到了如今的200人，仍是挺欣慰的。

也很感谢群里的一些小伙伴能热心的为新来的小伙伴解答问题提供帮助，我在此代接受过帮助的小伙伴谢谢你们！

不过也但愿能有更多的小伙伴能积极的参与到bpmn-chinese-document的项目中来，也算是为国内bpmn.js的社区贡献一份力吧💪。

最后还请能给bpmn-chinese-document一个Star🌟，编写整理都不易，感谢🙏。

喜欢霖呆呆的小伙还但愿能够关注霖呆呆的公众号 LinDaiDai 或者扫一扫下面的二维码👇👇👇.

我会不定时的更新一些前端方面的知识内容以及本身的原创文章🎉

你的鼓励就是我持续创做的主要动力 😊.

本文使用 mdnice 排版