diagram-js customize 1. container

e-tipsmemo.hatenablog.com
前回はリファレンスとなるbpmn-js-exampleを実行できるようになったので
今度はdiagram-jsのexampleに機能を追加する。

f:id:katakanan:20190609190445p:plain
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について