Bpmn 预览实现自定义效果

本文已参与「新人创作礼」活动，一起开启掘金创作之路

本来今天不打算写了,偶尔看到 LinDaiDai的一个issues github.com/LinDaiDai/b…

相信 只要国内搞bpmn的应该看过 LinDaiDai的博客,我也是在他的基础上学习的,感谢 LinDaiDai 的贡献

废话不多说开搞

参考自定义 Modeler

1. 实现 Viewer 的自定义,然后自定义Viewer中注入CustomModule

import inherits from "inherits";

import Viewer from "bpmn-js/lib/Viewer";

import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
import CustomModule from './custom'

function CustomViewer(options) {
  Viewer.call(this, options);
}

inherits(CustomViewer, Viewer);

CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [
  ZoomScrollModule,
  MoveCanvasModule,
  CustomModule
]);

export {
  CustomViewer
};

2.然后将Modeler 中用到的自定义customRenderer 加载进来

./custom/index.js

import CustomRenderer from '../../customModeler/renderer/CustomRenderer'

export default {

	__init__: ['customRenderer'],
        customRenderer: ['type', CustomRenderer],
}

ok 搞定

效果