diagram-js customize 5. ContextPadProvider

e-tipsmemo.hatenablog.com

つぎはContextPadProvider

といっても今回もソースコードを分離する程度

ExampleContextPadProvider.jsの実装を/lib/features/context-pad/に移す。
ほぼコピペ

ContextPadProvider.js

import {
    assign,
    forEach,
    isArray
} from 'min-dash';

export default class ContextPadProvider{
    constructor(connect, contextPad, modeling){


        this._connect = connect;
        this._modeling = modeling;

        contextPad.registerProvider(this);
    }

    getContextPadEntries(element){
        var modeling = this._modeling;
        var connect = this._connect;

        var actions = {};

        function removeElement(){
            modeling.removeElements([ element ]);
        }
    
        function startConnect(event, element, autoActivate) {
            connect.start(event, element, autoActivate);
        }

        assign(actions, {
            'delete': {
                group: 'edit',
                className: 'context-pad-icon-remove',
                title: 'Remove',
                action: {
                  click: removeElement,
                  dragstart: removeElement
                }
            },
            'connect': {
                group: 'edit',
                className: 'context-pad-icon-connect',
                title: 'Connect',
                action: {
                  click: startConnect,
                  dragstart: startConnect
                }
            }
        });

        return actions;

    }

}

ContextPadProvider.$inject = [
    'connect',
    'contextPad',
    'modeling'
];

index.js

import DirectEditingModule from 'diagram-js-direct-editing';
import ContextPadModule from 'diagram-js/lib/features/context-pad';
import SelectionModule from 'diagram-js/lib/features/selection';
import ConnectModule from 'diagram-js/lib/features/connect';
import CreateModule from 'diagram-js/lib/features/create';

import ContextPadProvider from './ContextPadProvider';

export default {
  __depends__: [
    DirectEditingModule,
    ContextPadModule,
    SelectionModule,
    ConnectModule,
    CreateModule,
  ],
  __init__: [ 'contextPadProvider' ],
  contextPadProvider: [ 'type', ContextPadProvider ]
};

本当はこのすべてに依存しているわけではなさそうだが、とりあえず動いているのでヨシ(?)

エレコム マウスパッド リストレスト一体型 疲労低減 "COMFY" ソフト(ブラック) MP-095BK

diagram-js customize 4. PaletteProvider

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

diagram-js customize 3. CONNECTION/SHAPE_STYLE

e-tipsmemo.hatenablog.com
まず、前回スタイルがピンク色だったが、ここの色を変えるには

1.BaseRenderのスタイルを上書き
2.app/lib/draw/Renderに新しくdiagram-js/BaseRenderを継承したRender Classをつくっていろいろとやる。

とあるが、2は今は面倒なので(あとで追加する)
1の方法をとる

diagram-jsを継承したModeler ClassにはRender Classを得る関数があるのでそれを使う。
app.jsに追記

var defaultRenderer = modeler.get('defaultRenderer');
var styles = modeler.get('styles');
// override default stroke color
defaultRenderer.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
defaultRenderer.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });

黒になった。

次はPaletteProvider

diagram-js customize 2. Viewer

e-tipsmemo.hatenablog.com
Viewer.js

import Diagram from 'diagram-js';

import {
  assign,
  find,
  isFunction,
  isNumber,
  omit
} from 'min-dash';

import {
  domify,
  query as domQuery,
  remove as domRemove
} from 'min-dom';

var DEFAULT_OPTIONS = {
    width: '100%',
    height: '100%',
    position: 'relative'
};

export default class Viewer{// extends Diagram{
  constructor(options){
    var parentcontainer = options['canvas'].container;
    this.container = this.createContainer(options);
    this.attachTo(parentcontainer);
    var baseModules = options.modules || this.getModules();
    var additionalModules = options.additionalModules || [];
    var diagramModules = [].concat(baseModules, additionalModules);

    var diagramOption = {
      canvas: {container: this.container},
      modules: diagramModules
    };
   
    Diagram.call(this ,diagramOption);
  }

  createContainer(options){
    var container = domify('<div class="js-container"></div>');

    assign(container.style, {
      width: ensureUnit(DEFAULT_OPTIONS.width),
      height: ensureUnit(DEFAULT_OPTIONS.height),
      position: DEFAULT_OPTIONS.position
    });

    return container;
  }

  getModules(){
    return this.modules;
  }

  attachTo(parentNode){
    if(!parentNode){
      throw new Error('parenetNode required');
    }

    if (typeof parentNode === 'string') {
      parentNode = domQuery(parentNode);
    }

    if(parentNode.childNodes.length !== 0)
    {
      parentNode.removeChild(parentNode.childNodes[0]);
    }

    parentNode.appendChild(this.container);
  }

  destroy(){ Diagram.destroy(); }
  clear(){ Diagram.clear(); }

}

function ensureUnit(val) {
  return val + (isNumber(val) ? 'px' : '');
}

ここではdiagramを呼び出すときにOptionを適切な形で渡すためにいろいろとコンストラクタで行っている。
なぜ extends Diagramをしていないかというと
jsでclassを利用して継承を行うと、コンストラクタの中でsuperを呼ぶ前に、thisを利用してメンバ関数(実際はprototype?の関数?)を使えないらしいので、callによってそれと同じような挙動になるようにした。

コンストラクタの中では指定されたキャンバスの中にもう一個js-containerを作成。
DEFAULT_OPTIONを指定。
ここはbpmn-jsのViewerと同じ(はず)
moduleの配列をconcatして、diagram.callに渡す。
これもbpmn-jsのものを抜き出した。

index.htmlはそのままでapp.js, Modeler.js, Viewer.jsを作れば
これでdiagram-js-exampleを再現できるはず。。

でもスタイルが適用されていないので、diagram-js.cssのスタイルのデフォルトのピンク

diagram-js customize 1. container

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について

diagram-js example とbpmn-js の再構築②

前回は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本格入門 ~モダンスタイルによる基礎から現場での応用まで

ちなみにbpmnというのは
Business Process Management Initiative
の略で、。。
ja.wikipedia.org

BPMNによるビジネスプロセスモデリング入門

diagram-js customize 0. font準備

e-tipsmemo.hatenablog.com
diagram-jsからbpmn-jsの再構築した後に、
さて自分のアプリを書く番になると、
PaletteProviderにフォントが必要になるのでその作り方をメモする。

使用するもの

• Inkscape
• Fontello - icon fonts generator

参考

bpmn-font/HOWTO.md at master · bpmn-io/bpmn-font · GitHub

設定

ドキュメントのプロパティでサイズを変更する。( Shift + Ctrl + D )

bpmn-jsのフォントのオリジナルだと2048px X 2048pxのsvgを用意しているがサイズは十分大きければどうでもよさそう。
bpmn-font/source/raw at master · bpmn-io/bpmn-font · GitHub
2048px X 2048 pxに設定した。

描く

整列と配置( Shift + Ctrl + A )を利用してうまいことオブジェクトを配置する。
(基準をページにすればキャンパスにあわせあられる)

真ん中に空洞があるアイコンはオブジェクトを重ねて差分を取るという感じらしい。
Ctrl + A
Ctrl + -
で差分をとって残す。

アウトライン化？

必要かわからないけど
オリジナルのWebフォントをつくろう その１ | ライオーン
ここに書いてあるのをやっておく。
Shift + Ctrl + G
Ctrl + K

表示→表示モード→アウトライン
で確認できる。

保存

プレーンSVGで保存する。

fontello

フォント一個に対して一個のSVGファイルを用意して
それらをすべてFontelloにD & Dする。

なにかwarningが出るが、この時のプレビューで問題なさそうであれば
ダウンロードするフォントを複数選択して右上からDownloadする。

フォントの確認

ダウンロードすると
利用するためのCSSとフォントファイルがある。

VScodeがあればSVG Font Previewを入れるとそのまま見れる。
SVG Font Previewer - Visual Studio Marketplace

あとは微調整とかデザインセンスとか