向bpmn-js查看器添加颜色

Question

我目前正在使用BPMN查看器库在我的网站上显示BPMN2.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.jslib (v2.5.0)时，颜色不起作用，但是当使用BPMN-Modeler.Development.jslib (v2.5.1)时，一切都按预期工作。但是，通过使用modeler库，我们还可以在显示的图表上获得编辑器选项(我不想要这个选项)。

那么，哪一种方式是为我的图表添加颜色的最佳方式，我只想要查看，而不想要任何编辑选项？

我是否需要向查看器库中添加一些js代码(以启用颜色特性)，还是需要修改modeler库(禁用编辑选项)，以及如何执行其中的操作？

Answer 1

这里很难定义“最好”的方式。假设“最佳”意味着尽可能少的依赖项和模块，并且尽可能灵活，那么您最好的选择是bpmn-js颜色示例回购中的方法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');
});

其中突出显示是定义的css类：

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

优势：

• 您实际上只需要canvas模块。查看器也需要这一点，因此不需要额外的模块。
• 您的样式与js代码分离。如果您想要更改您的“主题”，您将只更改/调整css，而js代码则保持不变。(尽可能多地使用JS代码的样式！)
• 您还可以结合使用canvas.removeMarker(id, classname)和canvas.addMarker创建一些交互样式。

缺点：

• 因为您将对svg元素进行样式化，所以您将不得不使用不同的css属性。如果您刚开始使用svg样式，这可能需要一些时间来避免将它与一般的css属性混淆。