e-tipsmemo

ごった煮

diagram-js example とbpmn-js の再構築②

前回はdiagram-jsのexampleを実行したので、
次はbpmn-jsの差分を追加して起動できるかを確かめる。
動作とコードの確認をするためなので不要なファイルが残っていてもあまり気にしない。

github.com
bpmn-jsをcloneする。

lib以下をdiagram-jsのapp以下にコピーする.
f:id:katakanan:20190531235340p:plain

lib以下にあるものはすべてdiagram-jsのモジュールを
inheritして拡張されたモジュール群となる。

また、適用されるstyleに追加のものがあるので
bpmn-font/dist/css at master · bpmn-io/bpmn-font · GitHub
あたりから引っこ抜いてきたcssファイル群を
public\css以下に置いた。
f:id:katakanan:20190601000131p:plain

github.com

modelerサンプルを参考にapp.jsと、
public以下のindex.htmlを書き換える。

app.js

import $ from 'jquery';

import VModeler from './lib/Modeler';

var container = $('#js-drop-zone');

var modeler = new VModeler({
  container: '#js-canvas',
});
 
function createNewDiagram() {
  modeler.createDiagram(function(err){

    if (err) {
      container
        .removeClass('with-diagram')
        .addClass('with-error');

      container.find('.error pre').text(err.message);

      console.error(err);
    } else {
      container
        .removeClass('with-error')
        .addClass('with-diagram');
    }

  });
}

function main()
{
  createNewDiagram();
}

main();

modelerのサンプルはbpmnファイルを読み込むような動きも可能になっているが不要なので
最初からcreateNewDiagramを呼んでbpmn-modelerが実行されるようにした。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>bpmn-js modeler demo</title>

  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
  <div class="content" id="js-drop-zone">
  <div class="canvas" id="js-canvas"></div>
  </div>
  <script src="./js/bundle-app.js"></script>

</html>

とりあえずこれで、lib以下に手を加えるとブラウザざ自動更新されるbpmn-js-modelerが動いた(気がする)。
これとは別に自分のlibを作るプロジェクトをdiagram-jsから用意して、
bpmn-jsの動作をブラウザのデバッガーやconsoleなどを追記して確認し、欲しい機能をパクリながら実装していく。

f:id:katakanan:20190601001124p:plain

ちなみにbpmnというのは
Business Process Management Initiative
の略で、。。
ja.wikipedia.org

BPMNによるビジネスプロセスモデリング入門

BPMNによるビジネスプロセスモデリング入門