e-tipsmemo

ごった煮

diagram-js customize 4. PaletteProvider

次にPaletteProvider
f:id:katakanan:20190615153523p:plain

bpmn-jsを習って、
app/lib/features/palette
を以下のように構成。
f:id:katakanan:20190615161552p:plain

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を変更できることを確認する。

f:id:katakanan:20190615162916p:plain