0

現在、bpmn-js ビューアー ライブラリを使用して、自分の Web サイトに 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');
});

ハイライトは、定義された 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 プロパティと混同しないようにするには時間がかかる場合があります。
于 2018-09-22T12:37:14.223 に答える