BPMNJS 在原生HTML中的引入与使用
BPMNJS 在HTML中的引入与使用
在网上看到的大多是基于vue使用BPMN的示例或者教程，竟然没有在HTML使用的示例，有也是很简单的介绍核心库的引入和使用，并没有涉及到扩展库。于是简单看了下，真的是一波三折，坎坎坷坷。不过结局还算是好的，最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到，但是目前的功能应该已经基本符合需求了。
示例展示
BPMNJS 在HTML中的引入与使用
在网上看到的大多是基于vue使用BPMN的示例或者教程，竟然没有在HTML使用的示例，有也是很简单的介绍核心库的引入和使用，并没有涉及到扩展库。于是简单看了下，真的是一波三折，坎坎坷坷。不过结局还算是好的，最终也能在HTML中直接使用BPMNJS了。可能还有一些扩展没有涉及到，但是目前的功能应该已经基本符合需求了。
示例展示
引入步骤
引入BPMNJS(针对某些扩展，需要改造源码)
- 下载：git clone https://github.com/bpmn-io/bpmn-js.git -b v13.2.0
- 安装依赖：npm i
- 打包：npm run distro
- 生成dist文件后，移动到自己的HTML文件夹中，引入js和css
注意：三个模块的引入顺序
引入bpmn-js-properties-panel
- 下载：git clone https://github.com/bpmn-io/bpmn-js-properties-panel.git
- 安装依赖：npm i
- 打包：npm run distro
- 生成dist文件后，移动到自己的HTML文件夹中，引入js和css
注意: css文件使用在线的：https://unpkg.com/bpmn-js-properties-panel@2.1.0/dist/assets/properties-panel.css
引入tiny-svg(后续扩展render会用到)
- 下载：git clone https://github.com/bpmn-io/tiny-svg.git
- 安装依赖：npm i
- 打包：npm run distro
- 生成dist文件后，移动到自己的HTML文件夹中，引入js和css
源码改造
BPMNJS
Modeler.js改造
引用
import DiagramBaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import * as DiagramRenderUtil from 'diagram-js/lib/util/RenderUtil';
扩展
Modeler.DiagramBaseRenderer = DiagramBaseRenderer;
Modeler.DiagramRenderUtil = DiagramRenderUtil;
参考地址
官网: https://bpmn.io/toolkit/bpmn-js
Bpmn.js自定义文件说明: https://blog.csdn.net/weixin_43359503/article/details/113915776
bpmn-js-properties-panel CDN地址：https://www.jsdelivr.com/package/npm/bpmn-js-properties-panel