bpmn-process-designer基础上进行自定义样式（工具、元素、菜单）

一、自定义工具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;
}

• custom-popup-menu.scss

// gateway .bpmn-icon-gateway-eventbased {
    
    display: none !important;
}

• 效果
• 
• 

三、自定义图形元素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的构造器指向，防止原型链的混乱；

自定义元素颜色

• 在设置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);
    }

• 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;
};

• 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) });
  }

然后就是元素选取了

• 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>

• 在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)
    }

<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);
    }

效果