一、自定义工具Palette

处理思路：
可以看到工具区就是基本样式，所以在此基础上加一个class就ok了

• 找到自定义工具CustomPalette

例如这里对开始事件工具进行自定义

bpmn-icon-start-event-none red， red是我们自己添加的

二、自定义样式Palette和PopupMenu

可以用于左边工具区palette和下拉菜单popup-menu

• 在index.scss添加@import "./custom-palette.scss";
  
• custom-palette.scss

.bpmn-icon-start-event-none.red {
  color: red !important;
}
1
2
3

• custom-popup-menu.scss

// gateway
.bpmn-icon-gateway-eventbased {
    display: none !important;
}
1
2
3
4

• 效果
• 
• 

三、自定义图形元素svg样式（包含了节点和连线）

通过additionalModel使用自定义渲染modules/custom-renderer我们可以看到初始样式的设置

import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';

export default function CustomRenderer(eventBus, styles, pathMap, canvas, textRenderer) {
// 设置初始样式配置（stroke线条、fill填充内部、label就是图形内部那个文本）
  const config = {
    defaultFillColor: '',
    defaultStrokeColor: '#000000',
    defaultLabelColor: '#000000'
  };

  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);

}
CustomRenderer.$inject = ['eventBus', 'styles', 'pathMap', 'canvas', 'textRenderer'];

const F = function() {}; // 核心，利用空对象作为中介；
F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

自定义元素颜色

• 在设置dark/light时，使用的方法可以作为我们的参照，这里的theme只有stroke和fill两个属性，无法设置label,从源码中我们可以知道

changePageMode(mode) {
      const theme = mode
        ? {
          // dark
          stroke: '#ffffff',
          fill: '#333333'
        }
        : {
          // light
          stroke: '#000000',
          fill: '#ffffff'
        };
      const elements = this.modeler.get('elementRegistry').getAll();
      this.modeler.get('modeling').setColor(elements, theme);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• this.modeler.get('modeling')参照bpmn-js源码/lib/features/modeling

Modeling.prototype.getHandlers = function() {
  var handlers = BaseModeling.prototype.getHandlers.call(this);

  handlers['element.updateModdleProperties'] = UpdateModdlePropertiesHandler;
  handlers['element.updateProperties'] = UpdatePropertiesHandler;
  handlers['canvas.updateRoot'] = UpdateCanvasRootHandler;
  handlers['lane.add'] = AddLaneHandler;
  handlers['lane.resize'] = ResizeLaneHandler;
  handlers['lane.split'] = SplitLaneHandler;
  handlers['lane.updateRefs'] = UpdateFlowNodeRefsHandler;
  handlers['id.updateClaim'] = IdClaimHandler;
  handlers['element.setColor'] = SetColorHandler; // import SetColorHandler from './cmd/SetColorHandler';
  handlers['element.updateLabel'] = UpdateLabelHandler;

  return handlers;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• SetColorHandler，从这里可以看出它的传参以及setColor()方法的作用就是对指定元素进行颜色渲染

var DEFAULT_COLORS = {
  fill: undefined,
  stroke: undefined
};
//    ......省略
SetColorHandler.prototype.postExecute = function(context) {
  var elements = context.elements,
      colors = context.colors || DEFAULT_COLORS;

  var self = this;

  var di = {};

  if ('fill' in colors) {
    assign(di, {
      'background-color': this._normalizeColor(colors.fill) });
  }

  if ('stroke' in colors) {
    assign(di, {
      'border-color': this._normalizeColor(colors.stroke) });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后就是元素选取了

• elementColorPicker组件

<template>
  <div>
    <div class="block">
          <span class="demonstration">线条颜色</span>
          <el-color-picker v-model="stroke" @change="handleChangeStroke"></el-color-picker>
        </div>
    <div class="block">
          <span class="demonstration">填充颜色</span>
          <el-color-picker v-model="fill" @change="handleChangeFill"></el-color-picker>
        </div>
  </div>
</template>

<script>
export default {
  name: 'ElementColorPicker',
  props: {
    id: String,
    type: String
  },
  data() {
    return {
      documentation: '',
      stroke: '#000000',
      fill: '#ffffff'
    };
  },
  watch: {

  },
  methods: {
    handleChangeStroke(stroke) {
      this.$emit('color', stroke, this.fill, this.id, this.type)
    },
    handleChangeFill(fill) {
      this.$emit('color', this.stroke, fill, this.id, this.type)
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

• 在PropertiesPanel组件加一个自定义组件element-color-picker

<el-collapse-item name="color" key="color">
        <div slot="title" class="panel-tab__title"><i class="el-icon-magic-stick"></i>视觉设置</div>
        <element-color-picker :type="elementType" :id="elementId" @color="handleChangeColor"></element-color-picker>
      </el-collapse-item>
      // 省略.....
handleChangeColor(stroke, fill, id, type) {
      this.$emit('color', stroke, fill, id, type)
    }
1
2
3
4
5
6
7
8

<MyPropertiesPanel :key="`penal-${reloadIndex}`"
      :bpmn-modeler="modeler"
      :prefix="controlForm.prefix"
      :users="users"
      :dictmaps="dictmaps"
      :category="currentBpmn.category"
      @color="handleChangeColor"
      ref="sidePanel"
      class="process-panel" />
// 省略.....
handleChangeColor(stroke, fill, id, type) {
      const theme = {stroke, fill}
      let elements = []
      if(type === 'Process') {
        elements = this.modeler.get('elementRegistry').getAll();
      }else {
        elements = this.modeler.get('elementRegistry').get(id);
      }
      this.modeler.get('modeling').setColor(elements, theme);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果