e-tipsmemo.hatenablog.com
前回はリファレンスとなるbpmn-js-exampleを実行できるようになったので
今度はdiagram-jsのexampleに機能を追加する。
e-tipsmemo.hatenablog.com
public 以下のindex.htmlを必要に応じてbpmn-jsに寄せた。
<html> <head> <link rel="stylesheet" href="css/diagram-js.css"> <link rel="stylesheet" href="css/app.css" /> <style> .palette-icon-lasso-tool { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-dasharray%3D%225%2C%205%22%20width%3D%2246%22%20height%3D%2246%22%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2226%22%20height%3D%2226%22%2F%3E%3C%2Fsvg%3E'); } .palette-icon-create-shape { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20width%3D%2246%22%20height%3D%2246%22%3E%3Crect%20x%3D%2210%22%20y%3D%2213%22%20width%3D%2226%22%20height%3D%2220%22%2F%3E%3C%2Fsvg%3E'); } .context-pad-icon-remove { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20width%3D%2246%22%20height%3D%2246%22%3E%3Cline%20x1%3D%225%22%20y1%3D%225%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%225%22%20x2%3D%225%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E') !important; } .context-pad-icon-connect { background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20width%3D%2246%22%20height%3D%2246%22%3E%3Cline%20x1%3D%2215%22%20y1%3D%225%22%20x2%3D%225%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E') !important; } </style> </head> <body> <div id="container"></div> <script src="./js/bundle-app.js"></script> </body> </html>
cssはbpmn-jsのものをコピー
追加のスタイルはPaletteProvider部分にあるアイコンをSVGでそのまま書いてあるのでコピペ
divが実際にdiagramが描かれる要素の親になる。
scriptはwebpackが吐き出すjsを指定する。
diagram-jsのサンプルはappがdiagram classをインスタンス化してモジュールなどを追加していたが、
bpmn-jsに倣って、
Modeler class → Viewer class → diagram classと継承していって、
app.jsからはModeler classのインスタンスを作るときに、diagramの親要素を指定するだけにする。
app,js
import Modeler from './Modeler'; var modeler = new Modeler({ container: '#container', });
Modeler.js
import Viewer from './Viewer'; import SelectionModule from 'diagram-js/lib/features/selection'; // select elements import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'; // zoom canvas import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'; // scroll canvas import ModelingModule from 'diagram-js/lib/features/modeling'; // basic modeling (create/move/remove shapes/connections) import MoveModule from 'diagram-js/lib/features/move'; // move shapes import OutlineModule from 'diagram-js/lib/features/outline'; // show element outlines import LassoToolModule from 'diagram-js/lib/features/lasso-tool'; // lasso tool for element selection import PaletteModule from 'diagram-js/lib/features/palette'; // palette import CreateModule from 'diagram-js/lib/features/create'; // create elements import ContextPadModule from 'diagram-js/lib/features/context-pad'; // context pad for elements, import ConnectModule from 'diagram-js/lib/features/connect'; // connect elements import RulesModule from 'diagram-js/lib/features/rules'; // rules import ExampleContextPadProvider from './ExampleContextPadProvider'; import ExamplePaletteProvider from './ExamplePaletteProvider'; import ExampleRuleProvider from './ExampleRuleProvider'; var ExampleModule = { __init__: [ 'exampleContextPadProvider', 'examplePaletteProvider', 'exampleRuleProvider' ], exampleContextPadProvider: [ 'type', ExampleContextPadProvider ], examplePaletteProvider: [ 'type', ExamplePaletteProvider ], exampleRuleProvider: [ 'type', ExampleRuleProvider ] }; export default class Modeler extends Viewer{ constructor(options){ var options = { canvas:{ container: options.container }, modules:[ SelectionModule, ZoomScrollModule, MoveCanvasModule, ModelingModule, MoveModule, OutlineModule, LassoToolModule, PaletteModule, CreateModule, ContextPadModule, ConnectModule, RulesModule, ExampleModule ] }; super(options); } }
必要なモジュールはdiagram-js exampleのapp.jsをそのまま持ってくる。
つぎはViewer.jsについて