为camunda建模器中的自定义调色板添加自定义图标

Question

我们下载了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);
}
}
return {
'test-separator' : {
group: 'test',
separator: true
},
'create.report-success': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Report Success'),
action: {
dragstart: createCustomServiceTask('com.test.workflow.camunda.SuccessDelegate', 'Report Success'),
click: createCustomServiceTask('com.test.workflow.camunda.SuccessDelegate', 'Report Success')
}
},
'create.report-failure': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Report Failure'),
action: {
dragstart: createCustomServiceTask('com.test.workflow.camunda.FailDelegate', 'Report Failure'),
click: createCustomServiceTask('com.test.workflow.camunda.FailDelegate', 'Report Failure')
}
},
'create.perform-device-control-check': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Perform Device Control Check'),
action: {
dragstart: createCustomServiceTask('com.test.test.delegate.camunda.PerfomrDeviceControlCheck', 'Perform Device Control Check'),
click: createCustomServiceTask('com.test.test.delegate.camunda.PerfomrDeviceControlCheck', 'Perform Device Control Check')
}
},
'create.perform-device-control-commands': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Perform Device Control Commands'),
action: {
dragstart: createCustomServiceTask('com.test.test.delegate.camunda.PerformDeviceControlCommands', 'Perform Device Control Commands'),
click: createCustomServiceTask('com.test.test.delegate.camunda.PerformDeviceControlCommands', 'Perform Device Control Commands')
}
},
'create.validate-room': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Validate Room'),
action: {
dragstart: createCustomServiceTask('com.test.test.delegate.camunda.ValidateRoom', 'Validate Room'),
click: createCustomServiceTask('com.test.test.delegate.camunda.ValidateRoom', 'Validate Room')
}
},
'create.perform-device-control-result-verification': {
group: 'test',
className: 'bpmn-icon-service-task',
title: translate('Test - Perform Device Control Result Verification'),
action: {
dragstart: createCustomServiceTask('com.test.test.delegate.camunda.PerformDeviceControlResultVerification', 'Perform Device Control Result Verification'),
click: createCustomServiceTask('com.test.test.delegate.camunda.PerformDeviceControlResultVerification', 'Perform Device Control Result Verification')
}
}
}
}
}
CustomPalette.$inject = [
'bpmnFactory',
'create',
'elementFactory',
'palette',
'translate'
];

如果你往上看，你会看到这条线

className: 'bpmn-icon-service-task',

这似乎定义了用于它的图标。在项目中搜索该字符串时我在dist\css\bpmn.css 中遇到一个实例

.bpmn-icon-service-task:before { content: 'e856'; } /* 'î¡–' */

然而，我不明白\e856真正引用了什么，也不明白如何在这里为自定义图标添加条目

在我看来，这个CCD_ 1是某种约定或定义的过程。

Answer 1

CSS'content'使用字符的十六进制实体(http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/)。示例十六进制\e856是小数形式的59478(https://www.rapidtables.com/convert/number/decimal-to-hex.html)

Camunda Modeler使用BPMN.io，它使用自己的字体来定义BPMN符号(https://github.com/bpmn-io/bpmn-font)。字体元素(图标(定义如下：https://github.com/bpmn-io/bpmn-font/blob/master/resources/font-config.json

{
"uid": "0a43fd26041da75f0753b52e45a707e9",
"css": "service-task",
"code": 59478,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M214.8 105C107.5 105 20 192.1 20 299.3L20 700.8C20 807.9 107.5 895 214.8 895L785.2 895C892.5 895 980 807.9 980 700.8L980 299.3C980 192.1 892.5 105 785.2 105L214.8 105ZM214.8 165L785.2 165C860.4 165 920 224.4 920 299.3L920 700.8C920 775.6 860.4 835 785.2 835L214.8 835C139.6 835 80 775.6 80 700.8L80 299.3C80 224.4 139.6 165 214.8 165ZM251.4 215.4C251.4 227 251.4 238.6 251.4 250.2 241.5 253 232.5 256.9 224 261.7L199.1 237 152.5 283.9 177.4 308.5C172.6 317.1 168.8 326.3 166.2 335.8L130.9 335.9 130.9 401.9 166.6 401.8C169.8 414.7 176.9 426.3 184 436.7L184 379.8 152.8 379.9 152.8 357.8 183.9 357.7 185.6 348.9C188.1 336 193.2 323.8 200.4 312.8L205.3 305.3 183.5 283.8 199.2 268 221.1 289.6 228.5 284.6C239.8 277.1 252.3 272.1 264.6 269.5L273.4 267.7 273.3 237.4 295.8 237.4 295.7 267.5 304.6 267.5 354.8 267.5C349.2 260.9 326.3 252.3 317.7 249.9L317.9 215.4C293.3 215.4 274.1 215.4 251.4 215.4ZM313.8 278.6L313.8 313.3C304 316.1 294.9 320 286.4 324.8L261.5 300.2 214.9 347 239.8 371.7C235 380.3 231.2 389.4 228.6 399L193.3 399 193.3 465 229 464.9C231.8 474.7 235.7 483.6 240.5 492.1L214.9 517.5 262.1 563.8 287.5 538.5C296.2 543.3 305.4 547.1 315 549.7L315.1 585.6C337.7 585.8 361.9 585.7 381.2 585.7L381.2 549.3C391.1 546.6 400.2 542.6 408.7 537.8L434.1 562.9 480.7 516.1 455.3 491C460.1 482.4 463.8 473.2 466.5 463.6L501 463.4 501 397.5 466.1 397.7C463.3 387.9 459.4 379 454.6 370.5L478.8 346.3 431.7 300 407.6 324.2C398.9 319.4 389.7 315.6 380.1 313L380.3 278.6 313.8 278.6 313.8 278.6ZM335.7 300.5L358.3 300.5 358.1 330.6 367 332.4C379.9 334.9 392.3 339.9 403.3 347.1L410.8 352 431.8 330.9 447.7 346.5 426.6 367.6 431.7 375.1C439.1 386.3 444 398.5 446.8 411L448.6 419.7 479.1 419.5 479.1 441.6 448.8 441.8 447.1 450.6C444.5 463.5 439.5 475.7 432.3 486.7L427.3 494.3 449.6 516.2 434 532 411.6 510 404.2 514.9C392.9 522.3 380.5 527.5 368.1 530L359.3 531.8 359.3 563.8C353.3 563.8 346.7 563.8 337 563.8L336.9 532 328.1 530.3C315.2 527.7 302.8 522.7 291.8 515.5L284.4 510.7 262 532.9 246.1 517.4 268.5 495 263.4 487.5C256 476.3 251 464.2 248.3 451.7L246.4 442.9 215.2 443 215.2 420.9 246.3 420.9 248 412C250.5 399.2 255.6 386.9 262.8 375.9L267.7 368.4 245.9 346.9 261.6 331.1 283.5 352.7 290.9 347.7C302.3 340.3 314.3 335.4 327 332.6L335.8 330.8 335.7 300.5ZM347.4 381C320.2 381 298 403.2 298 430.4 298 457.5 320.2 479.7 347.4 479.7 374.5 479.7 396.7 457.5 396.7 430.4 396.7 403.2 374.5 381 347.4 381ZM347.4 402.9C362.6 402.9 374.8 415.1 374.8 430.4 374.8 445.7 362.6 457.8 347.4 457.8 332.1 457.8 319.9 445.7 319.9 430.4 319.9 415.1 332.1 402.9 347.4 402.9Z",
"width": 1000
},
"search": [
"service-task"
]
},

第1302行定义了所用符号的代码59478https://github.com/bpmn-io/bpmn-font/blob/b366fdef83c700898a664cb32d57d63618b36154/resources/font-config.json#L1302

您可以看到它是如何为SVG定义代码59478的：https://github.com/bpmn-io/bpmn-font/blob/b366fdef83c700898a664cb32d57d63618b36154/resources/font-config.json#L1305

如何https://github.com/bpmn-io/bpmn-font/blob/master/docs/HOWTO.md描述了如何创建字体以及如何扩展字体。

您可能还会发现此概述很有帮助：https://cdn.staticaly.com/gh/bpmn-io/bpmn-font/master/dist/demo.html