bpmn.io - 如何搭建BPMN.io开发环境?
问题描述
我想使用 BPMN.io 库来创建 BPMN 建模元素的修改。
如何使用文件夹和设置开发环境bpmn-js
,以便我可以修改任何源文件?bpmn-moddle
diagram-js
请联系gwagner57@googlemail.com
,如果您可以作为有偿工作为我做这件事。
解决方案
此示例通过自定义模块扩展了 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
执照:麻省理工学院
推荐阅读
- python - 如何计算每个像素值的平均值?
- python - 数独验证阻止任何移动尝试
- sql - 具有相似名称的表的多对多关系表名称
- redis - 在redis中存储30M条记录
- objective-c - 在 macOS 的 Cocoa 应用程序中,我使用 NSFileWrapper 将包保存到磁盘。如何让查找器显示我的捆绑包的正确图标?
- python - 如何从 scipy 稀疏块矩阵中取回块?
- java - 如何在java中交换2个对象的字段?
- typescript - 将可区分联合(或对象类型数组)转换为以文字属性为键的映射类型
- angular - 组件中的抽象方法实现具有未定义的依赖关系
- javascript - 不理解 addEventListener 行为