次にPaletteProvider
bpmn-jsを習って、
app/lib/features/palette
を以下のように構成。
index.jsはappからimportするときの読み込まれる?
jsでファイルを分割するときの手法っぽい
import PaletteModule from 'diagram-js/lib/features/palette'; import CreateModule from 'diagram-js/lib/features/create'; import SpaceToolModule from 'diagram-js/lib/features/space-tool'; import LassoToolModule from 'diagram-js/lib/features/lasso-tool'; import HandToolModule from 'diagram-js/lib/features/hand-tool'; import GlobalConnectModule from 'diagram-js/lib/features/global-connect'; import translate from 'diagram-js/lib/i18n/translate'; import PaletteProvider from './PaletteProvider'; export default { __depends__: [ PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate ], __init__: [ 'paletteProvider' ], paletteProvider: [ 'type', PaletteProvider ] };
PaletteProvider.js
bpmn-jsはclass構文を使っていないが、こっちはできるだけこの構文を使っていくつもり。
export defaultがないと外部ファイルから使えないらしい
import { assign } from "min-dash"; export default class PaletteProvider{ constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate){ this._create = create; this._elementFactory = elementFactory; this._lassoTool = lassoTool; this._palette = palette; this._globalConnect = globalConnect; this._translate = translate; this._spaceTool = spaceTool; this._handTool = handTool; palette.registerProvider(this); } getPaletteEntries(){ var actions = {}; var create = this._create, elementFactory = this._elementFactory, lassoTool = this._lassoTool; assign(actions, { 'lasso-tool':{ group: 'tools', className: 'palette-icon-lasso-tool', title: 'Active Lasso Tool', action: { click: function(event){ lassoTool.activateSelection(event); } } }, 'tool-separator': { group: 'tools', separator: true }, 'create-shape': { group: 'create', className: 'palette-icon-create-shape', title: 'Create Shape', action: { click: function() { var shape = elementFactory.createShape({ width: 200, height: 80 }); create.start(event, shape); } } } }); return actions; }; }; PaletteProvider.$inject = [ 'palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate' ];
registerProviderはdiagram-js/palette.jsの関数を呼び出す。
初期化時にgetPaletteEntriesが呼ばれる。
ここはdiagram-js-exampleのExamplePaletteProvider.jsをコピーして
あとで拡張性が高そうなbpmn-jsの書き方に寄せた。
このdiagram-js関連のプログラムはすべてdependency injectionという設計で行われているらしく
クラスを拡張してコンストラクタの引数の順番で
必要なモジュールを構文で指定する必要があるのだと思う。
// constructor( // palette, // create, // elementFactory, // spaceTool, // lassoTool, // handTool, // globalConnect, // translate) PaletteProvider.$inject = [ 'palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate' ];
最後にModeler.jsで追加しているModuleを自作のほうに切り替える。
// import PaletteModule from 'diagram-js/lib/features/palette'; // palette //import ExamplePaletteProvider from './ExamplePaletteProvider'; import PaletteModule from './lib/features/palette'
ここに自分オリジナルの形を追加していくのはelementFactoryやRenderが必要になってくる
いまのところはpalette-icon-create-shapeのwidthとheightを変更できることを確認する。