javascript - 向 bpmn-js 查看器添加颜色
问题描述
我目前正在使用 bpmn-js 查看器库在我的网站上显示 BPMN 2.0 图。当我想为显示的图表添加颜色时会出现问题。我检查了这个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>
使用bpmn-viewer.development.js lib (v2.5.0) 时,颜色不起作用,但使用bpmn-modeler.development.js lib (v2.5.1) 时,一切正常。但是通过使用建模器库,我们还可以在显示的图表上获得编辑器选项(我不想拥有)。
那么,这是为我的图表添加颜色的最佳方式,我只想拥有它来查看并且不想要任何编辑选项?
我是否需要将一些 js 代码添加到查看器库(以启用颜色功能)或修改建模器库(以禁用编辑选项)以及如何做一个或另一个?
解决方案
在这里很难定义“最佳”方式。假设“最佳”意味着尽可能少的依赖项和模块并且尽可能灵活,那么您最好的选择是来自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');
});
其中 highlight 是定义的 CSS 类:
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: green !important; /* color elements as green */
}
优点:
你真的只需要
canvas
模块。这也是查看器所需要的,因此不需要额外的模块。您的样式与 js 代码是分开的。如果你想改变你的“主题”,你只会在 js 代码保持不变的情况下改变/调整 css。(尽可能多地在您的 JS 代码中设置样式!)
您还可以
canvas.removeMarker(id, classname)
结合使用canvas.addMarker
来创建一些交互式样式。
缺点:
- 因为您将设置 svg 元素的样式,所以您必须处理不同的 css 属性。如果您不熟悉 svg 样式,则可能需要一些时间才能将其与一般 css 属性混淆。
推荐阅读
- sql-server - 缩小已删除大部分数据的 SQL Server 数据库
- node.js - Nginx 负载平衡不适用于 NodeJS?
- c# - 如何在 dot net core 中修改默认的本地 JWT 身份验证
- javascript - Javascript 使用 map() 和 Iterator 将对象数组分离为多个数组
- wildcard - 如何使用 cloudant 选择器查询在字符串向量中执行通配符搜索
- c# - 足部扫描图像中用于旋前检测的足部压力点
- qt - QList
从 C++ 发送并在 QML 中接收是未定义的 - python - 导入问题使 AWS 上的 pySpark 卡在运行状态
- javascript - 将 24 小时转换为 12 小时
- oracle - 接收错误右括号缺少执行 PL/SQL 块的错误