diagram-js customize 6. CustomizeRenderer

今回はBase Renderを継承した自作クラスに切り替える

bpmn-jsを参考にすると、lib/drawに主な3つのファイルがあるので
それを作る。(今回はまだMyRenderUtilは使わない)

四角をつなげる線を引いたりするのに
lib/util/RenderUtilが必要で、
diagram-jsからそれを含めてコピーした。

bpmn-jsのBPMNRendererを参考にdiagram-exampleと同じような動作になるように
必要な関数だけを実装した。

import {
    componentsToPath,
    createLine
  } from '../util/RenderUtil';
  
  import {
    append as svgAppend,
    attr as svgAttr,
    create as svgCreate
  } from 'tiny-svg';
  
  // apply default renderer with lowest possible priority
  // so that it only kicks in if noone else could render
  var HIGH_PRIORITY = 1500;
  import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
  import { pick } from 'min-dash';
  
  export default class MyRenderer extends BaseRenderer {
      constructor(eventBus, styles){
          super(eventBus, HIGH_PRIORITY);
          this.CONNECTION_STYLE = styles.style([ 'no-fill' ], { strokeWidth: 5, stroke: '#000' });
          this.SHAPE_STYLE = styles.style({ fill: 'white', stroke: '#000', strokeWidth: 2 });
      }
  
      canRender(element){
          return true;
      }
  
      drawShape(visuals, element){
        var rect = svgCreate('rect');
        svgAttr(rect, {
          x: 0,
          y: 0,
          width: element.width || 0,
          height: element.height || 0
        });
        svgAttr(rect, this.SHAPE_STYLE);
      
        svgAppend(visuals, rect);

        return rect;
      }
  
      drawConnection(visuals, connection){
          var type = connection.type;
 
          var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
  
          svgAppend(visuals, line);
          return line;
      }
}
  
  MyRenderer.$inject = [
      'eventBus',
      'styles' 
  ];

適当なコミットの時点のものをコピーしてきたので
もしかしたら使ってないメンバ関数もあるかもしれない。
そしてここで、drawShape関数がcanvasに追加する
svgタグの要素を生成しており、svgAttrでスタイル(線の色とか)を決定している。
最後にsvgAppendで親(visuals)に対する子要素として追加される。

e-tipsmemo.hatenablog.com
の記事の2の方法。

import MyRenderer from './MyRenderer';

export default {
  __init__: [ 'MyRenderer' ],
  MyRenderer: [ 'type', MyRenderer ],
};

index.jsはいつも通り

Renderができたので、
Modeler.jsにモジュールを追加する。

import DrawModule from './lib/draw';
....
export default class Modeler extends Viewer{
    constructor(options){
        var options = {
            canvas:{
                container: options.container
            },
            modules:[
                .....
                DrawModule,
                .....
            ]
        };
        super(options);
    }
}

そしてapp.jsのスタイルを上書きするところはもういらない

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

見た目は変わらない。