2

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

如何使用文件夹和设置开发环境bpmn-js，以便我可以修改任何源文件？bpmn-moddlediagram-js

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

4

1 回答 1

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
);

使用诸如 Rollup、Browserify 或 Webpack 之类的模块捆绑器将文件打包为浏览器的 UMD。

我们使用汇总来基于此配置捆绑文件：

rollup -c

将捆绑包包含在您的网页中，就像您将包含我们的预打包分发一样：

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

  // ...
</script>

构建此示例：

npm install
npm run all

执照：麻省理工学院

于 2021-02-25T07:32:41.833 回答