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