前回はdiagram-jsのexampleを実行したので、
次はbpmn-jsの差分を追加して起動できるかを確かめる。
動作とコードの確認をするためなので不要なファイルが残っていてもあまり気にしない。
github.com
bpmn-jsをcloneする。
lib以下をdiagram-jsのapp以下にコピーする.
lib以下にあるものはすべてdiagram-jsのモジュールを
inheritして拡張されたモジュール群となる。
また、適用されるstyleに追加のものがあるので
bpmn-font/dist/css at master · bpmn-io/bpmn-font · GitHub
あたりから引っこ抜いてきたcssファイル群を
public\css以下に置いた。
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などを追記して確認し、欲しい機能をパクリながら実装していく。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
- この商品を含むブログを見る
ちなみにbpmnというのは
Business Process Management Initiative
の略で、。。
ja.wikipedia.org
- 作者: 加藤正人
- 出版社/メーカー: ソフトリサーチセンター
- 発売日: 2006/07
- メディア: 単行本
- 購入: 1人 クリック: 7回
- この商品を含むブログ (7件) を見る
