0

我目前正在使用 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 代码添加到查看器库（以启用颜色功能）或修改建模器库（以禁用编辑选项）以及如何做一个或另一个？

4

1 回答 1

1

在这里很难定义“最佳”方式。假设“最佳”意味着尽可能少的依赖项和模块并且尽可能灵活，那么您最好的选择是来自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 属性混淆。
于 2018-09-22T12:37:14.223 回答