向 bpmn-js 查看器添加颜色

Question

我目前正在使用 bpmn-js 查看器库在我的网站上显示 BPMN 2.0 图。当我想为显示的图表添加颜色时，问题就出现了。我检查了这个 bpmn-js colors 示例并实现了以下代码：

<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-[=25 时=] lib (v2.5.1) 一切正常。但是通过使用建模器库，我们还可以在显示的图表上获得编辑器选项（我不想拥有）。

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

我是否需要向查看器库添加一些 js 代码（以启用颜色功能）或修改建模器库（以禁用编辑选项）以及如何做？

Answer 1

"best" 方式在这里很难定义。假设 "best" 意味着尽可能少的依赖项和模块并且尽可能灵活，那么您最好的选择是 colors example of the 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');
});

其中突出显示已定义 css class:

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

优点：

你真的只需要 canvas 模块。这也是查看器需要的，因此不需要额外的模块。
你的样式和js代码是分开的。如果你想改变你的 "theme" 你只会改变/调整 css 而 js 代码保持不变。（尽可能多地在 JS 代码中保留样式！）
您还可以将 canvas.removeMarker(id, classname) 与 canvas.addMarker 结合使用来创建一些交互样式。

缺点：

因为您要设置 svg 元素的样式，所以您将不得不处理不同的 css 属性。如果您不熟悉 svg 样式，可能需要一些时间才能将其与一般 css 属性混淆。

向 bpmn-js 查看器添加颜色

Adding Colors to bpmn-js viewer

javascript

bpmn.io