文章目录
一、自定义工具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);
}