如何设置BPMN.io开发环境？

Question

我想使用BPMN.io库来创建对BPMN建模元素的修改。

如何设置包含bpmn-js、bpmn-moddle和diagram-js文件夹的开发环境，以便可以修改任何源文件？

请联系gwagner57@googlemail.com，如果你可以为我做这件事作为一份有偿工作。

Answer 1

此示例通过自定义模块扩展了bpmn-js查看器，并展示了如何使用Rollup生成该自定义查看器的UMD包。

创建Viewer或Modeler的子类，具体取决于要扩展的变量：

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 CustomLoggingModule from './features/logging';


/**
 * A viewer that includes mouse navigation and other goodies.
 *
 * @param {Object} options
 */
function CustomViewer(options) {
  Viewer.call(this, options);
}

inherits(CustomViewer, Viewer);

module.exports = CustomViewer;

向您的自定义bpmn-js原型添加其他模块：

CustomViewer.prototype._customModules = [
  ZoomScrollModule,
  MoveCanvasModule,
  CustomLoggingModule
];

CustomViewer.prototype._modules = [].concat(
  Viewer.prototype._modules,
  CustomViewer.prototype._customModules
);

使用模块捆绑程序将文件打包为供浏览器使用的UMD，例如Rollup、Browserify或Webpack。

我们使用rollup来捆绑基于此配置的文件：

rollup -c

在您的网页中包含该捆绑包，就像包含我们的预包发行版一样：

<script src="dist/custom-viewer.bundled.js"></script>
<script>
  var viewer = new CustomBpmnJS({
    container: '#canvas'
  });

  // ...
</script>

构建此示例：

npm install
npm run all

许可证:麻省理工学院