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 });

f:id:katakanan:20190615153309p:plain
黒になった。

次は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のスタイルのデフォルトのピンク
f:id:katakanan:20190615152220p:plain

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

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

前回はdiagram-jsのexampleを実行したので、
次はbpmn-jsの差分を追加して起動できるかを確かめる。
動作とコードの確認をするためなので不要なファイルが残っていてもあまり気にしない。

github.com
bpmn-jsをcloneする。

lib以下をdiagram-jsのapp以下にコピーする.
f:id:katakanan:20190531235340p:plain

lib以下にあるものはすべてdiagram-jsのモジュールを
inheritして拡張されたモジュール群となる。

また、適用されるstyleに追加のものがあるので
bpmn-font/dist/css at master · bpmn-io/bpmn-font · GitHub
あたりから引っこ抜いてきたcssファイル群を
public\css以下に置いた。
f:id:katakanan:20190601000131p:plain

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などを追記して確認し、欲しい機能をパクリながら実装していく。

f:id:katakanan:20190601001124p:plain

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

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

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

diagram-js customize 0. font準備

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

f:id:katakanan:20190606003010p:plain

設定

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

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

描く

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

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

アウトライン化?

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

表示→表示モード→アウトライン
で確認できる。
f:id:katakanan:20190606005843p:plain

保存

プレーンSVGで保存する。
f:id:katakanan:20190606005926p:plain

fontello

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

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

フォントの確認

ダウンロードすると
利用するためのCSSとフォントファイルがある。
f:id:katakanan:20190606010854p:plain

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

f:id:katakanan:20190606012956p:plain
あとは微調整とかデザインセンスとか

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

diagram-jsを使うと決めたはいいが、ドキュメントはそこまで親切ではない感じなので
わかったことをメモって行く。

e-tipsmemo.hatenablog.com
最初はdiagram-jsのサンプルはgithubにある
シンプルなdiagram-jsからどう言った点を実装すればbpmn-js(のような機能実装)になるかを確認するために
diagram-jsのexampleにbpmn-jsのファイルを追加していって、bpmn-jsが再構築できることを確認する。

github.com
最初はexample以下の部分のものを抜き出して
webpack、webpack-dev-serverで変更があった場合にすぐにリロードされるような環境を整えた。
e-tipsmemo.hatenablog.com

これを踏まえて、node_modules以外のファイルの位置は以下のようにした。
f:id:katakanan:20190530113137p:plain

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack",
    "start": "./node_modules/.bin/webpack --watch & ./node_modules/.bin/webpack-dev-server --hot --inline --progress --colors"
  },
  "devDependencies": {
    "bpmn-moddle": "^5.1.6",
    "diagram-js": "^3.3.0",
    "diagram-js-direct-editing": "^1.4.2",
    "html-webpack-plugin": "^3.2.0",
    "ids": "^1.0.0",
    "inherits": "^2.0.3",
    "jquery": "^3.4.0",
    "raw-loader": "^2.0.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './app/app.js',
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle-app.js'
  },
  devServer:{
    contentBase:'./public',
    publicPath: '/',
    watchContentBase: true,
    openPage: 'index.html',
    open: true,
    port: 3001
  },
  module:{
    rules:[
      {
        test: /\.bpmn$/,
        use: 'raw-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template : "./public/index.html"
    })
  ]
};

これでWSL上から
npm startするとウェブブラウザが立ち上がる。
この状態ではdiagra-jsのサンプルが実行できる(はず

f:id:katakanan:20190531222554p:plain

diagram-js 検討

とあるものが必要なきがしてので、どのように作るのがいいか検討していた。
GUIが欲しかったので
表が得意そうなライブラリが豊富なjavascriptで書くことにして、
javascriptで書くのがつらそうなコアのバックグラウンド処理は
webassemblyとか使おうかなという方針になった。

まずはライブラリを探していた。
作図系ツール・ライブラリまとめ · GitHub
10+ JavaScript libraries to draw your own diagrams (2019 edition)
自分のイメージするGUI操作感からすると、シーケンス図やフローチャート、ブロックダイアグラムといった類

最終的に操作感がよさそうなのとデモの完成度に惹かれて以下のライブラリを使うことにした。
github.com
これ自体は描写部分のシンプルなライブラリで、
描写をもっと拡張したり、オリジナルの要素を追加したいときは
ライブラリのクラス(クラスのようなもの)を継承して実装する。

例として以下のbpmn-jsがdiagram-jsを利用したツール
demo.bpmn.io

f:id:katakanan:20190522140449p:plain
この要素をクリックした右上にContextPadPaletteがあるのがとてもよい。

公式にはdiagram-jsじゃなくてbpmn-jsを使うことを推している気がするが
Walkthrough | bpmn.io

bpmn-jsには
ライセンスが独自でめんどくさい。
読む限りは、基本的に?ロゴを右下に表示しておけばいいきがするが。。
また、bpnm-jsのGUIがすこしだけ自分のイメージとは違うので
diagram-jsから拡張していくことにした。