[英]Adding Colors to bpmn-js viewer
I'm currently using bpmn-js viewer library to display BPMN 2.0 diagrams on my website. 我目前正在使用bpmn-js查看器库在我的网站上显示BPMN 2.0图。 The problem occurs when I want to add colours to my displayed diagram. 当我想向显示的图表中添加颜色时,会出现问题。 I checked this bpmn-js colors example and implemented the following code: 我检查了这个bpmn-js颜色示例,并实现了以下代码:
<script>
var bpmnViewer;
function openDiagram(bpmnXML, height) {
bpmnViewer = new BpmnJS({
container: '#canvas',
height: height
});
bpmnViewer.importXML(bpmnXML, function (err) {
if (err) {
return console.error('could not import BPMN 2.0 diagram', err);
}
var canvas = bpmnViewer.get('canvas');
var overlays = bpmnViewer.get('overlays');
var elementRegistry = bpmnViewer.get('elementRegistry');
var modeling = bpmnViewer.get('modeling');
var elementToColor = elementRegistry.get('_6-127');
modeling.setColor(elementToColor, {
stroke: 'green',
fill: 'rgba(0, 80, 0, 0.4)'
});
...
});
}
</script>
When using bpmn-viewer.development.js lib (v2.5.0), colors don't work, but when using bpmn-modeler.development.js lib (v2.5.1) everything works as expected. 使用bpmn-viewer.development.js lib(v2.5.0)时,颜色不起作用,但是使用bpmn-modeler.development.js lib(v2.5.1)时,一切正常。 But with the use of the modeler library we also get editor option on showed diagram (which I don't want to have). 但是,通过使用建模器库,我们还可以在显示的图表上获得编辑器选项(我不想这样做)。
So which is the best way to add color to my diagrams, which I want to have just for viewing and don't want any edit options? 那么,哪一种是为图表添加颜色的最佳方法呢?我只是想查看它,而不想要任何编辑选项?
Do I need to add some js code to viewer library (to enable color feature) or to modify modeler library (to disable edit options) and how to do one or another? 我是否需要向查看器库中添加一些js代码(以启用颜色功能)或修改建模器库(以禁用编辑选项),以及如何做一个或另一个?
The "best" way is hard to define here. 这里很难定义“最佳”方式。 Assuming "best" means as few dependencies and modules as possible and as flexible as possible, then your best option would be method 3 from the the colors example of the bpmn-js-examples repo: 假设“最佳”意味着尽可能少的依赖项和模块,并且尽可能灵活,那么最佳选择将是bpmn-js-examples回购的颜色示例中的方法3:
bpmnViewer.importXML(bpmnXML, function (err) {
if (err) {
return console.error('could not import BPMN 2.0 diagram', err);
}
var canvas = bpmnViewer.get('canvas');
canvas.addMarker('UserTask_XYZ', 'highlight');
});
where highlight is a defined css class: 其中高亮是已定义的CSS类:
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: green !important; /* color elements as green */
}
Advantages: 好处:
you really only require the canvas
module. 您实际上只需要canvas
模块。 This is also required by the viewer, so no additional modules required. 查看器也需要这样做,因此不需要其他模块。
your styles are separated from the js code. 您的样式与js代码分开。 If you want to change your "theme" you will only change / tweak the css while the js code keeps untouched. 如果要更改“主题”,则只需更改/调整CSS,而JS代码保持不变。 (Keep styling out of your JS code as much as you can!) (请尽量避免使用JS代码!)
you can also use canvas.removeMarker(id, classname)
in combination with canvas.addMarker
to create some interactive styles. 您还可以结合使用canvas.removeMarker(id, classname)
和canvas.addMarker
来创建一些交互式样式。
Disadvantages: 缺点:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.