我们下载了 Camunda Modeler 的源代码，我们创建了一个类似于此的自定义调色板
export default class CustomPalette {
constructor(bpmnFactory, create, elementFactory, palette, translate) {
this.bpmnFactory = bpmnFactory;
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
palette.registerProvider(this);
}
getPaletteEntries(element) {
const {
bpmnFactory,
create,
elementFactory,
translate
} = this;
function createServiceTask(event) {
const shape = elementFactory.createShape({
type: 'bpmn:ServiceTask'
});
create.start(event, shape);
}
function createCustomServiceTask(templateId, serviceTaskName) {
return function(event) {
const businessObject = bpmnFactory.create('bpmn:ServiceTask', {
name: serviceTaskName,
"camunda:modelerTemplate": templateId
});
const shape = elementFactory.createShape({
type: 'bpmn:ServiceTask',
businessObject: businessObject
});
create.start(event, shape);
}
}
}
}
CustomPalette.$inject = [
'bpmnFactory',
'create',
'elementFactory',
'palette',
'translate'
];
如果你看上面你会看到这条线
className: 'bpmn-icon-service-task',
这似乎定义了用于它的图标。在项目中搜索该字符串时，我在 dist\css\bpmn.css 中遇到了一个实例
.bpmn-icon-service-task:before { content: '\e856'; } /* 'î¡–' */
但是我不明白 \e856 真正引用了什么或如何在此处为自定义图标添加条目
在我看来，这content: '\e165'是某种约定或定义的过程。
