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のスタイルのデフォルトのピンク