Bpmn.js在无界山工单中的实践
Bpmn.js由 Camunda 团队研发的一个 BPMN 2.0渲染工具包和web建模器。使得可以在浏览器中创建、嵌入和扩展 BPMN 图。单独使用或将其集成到web应用中。创建bpmn
bpmn.js 内部依赖于 bpmn-moddle (浏览器中对BPMN 2.0 XML的读/写支持) 和 diagram-js (图表渲染和编辑工具包)
很多时候我们需要监听用户的操作并给予相应的反馈，例如在bpmn-js中我们需要监听到流程的变化，并实时将数据补充到a标签中，用到了如下代码
[if !supportLists]l [endif]canvas.destroy
[if !supportLists]l [endif]canvas.init
[if !supportLists]l [endif]canvas.viewbox.changed
[if !supportLists]l [endif]canvas.viewbox.changing
[if !supportLists]l [endif]connect.end
[if !supportLists]l [endif]connection.added
[if !supportLists]l [endif]connection.changed
[if !supportLists]l [endif]connection.remove
[if !supportLists]l [endif]connection.removed
[if !supportLists]l [endif]...
更多可以参考官网demo
通过modeling的updateProperties方法可以修改节点属性，例如这里修改节点name为ops-coffee.cn
更多Modeling Api可点查看
用于在BPMN 模型中添加注释和自定义操作。BPMN Annotate 允许用户在 BPMN 模型中添加注释，包括自定义文本、标记和元数据。这些注释可以帮助用户更好地理解模型，并提供额外的业务信息或指示。BPMN Embed 允许用户将自定义操作嵌入到 BPMN 模型中，例如添加额外的业务逻辑、条件或指令。这些操作可以在业务流程执行期间进行访问和执行，以提高业务流程的可定制性和灵活性。
创建自定义Palette和ContextPad
你可以通过BPMN 模型元素上添加新的属性或元素。例如，你可以为任务节点添加自定义的属性，如优先级、标签等。
完成了自定义Palette,那ContextPad与自定义Palette相差不大，下面链接中都有示例demo代码
在选中任务节点时要配置更多的属性就需使用属性面板，属性面板扩展可通过bpmn-js-properties-panel，添加了编辑基础属性（通用和 Camunda）的功能，默认导出一下 Module
[if !supportLists]l [endif]BpmnPropertiesPanelModule // 基础侧边栏渲染入口
[if !supportLists]l [endif]BpmnPropertiesProviderModule // 侧边栏属性编辑表单构造器
[if !supportLists]l [endif]CamundaPlatformPropertiesProviderModule // Camunda平台执行相关的属性
[if !supportLists]l [endif]ZeebePropertiesProviderModule // Camunda Cloud 执行相关属性
在bpmn-js-properties-Panel 的 1.x 版本进行了颠覆性的更新，不仅重写了 UI 界面，1.x 版本之前的部分 API 和属性编辑栏构造函数都进行了重写，并将属性栏 DOM 构建与更新方式改写为 React JSX Hooks 与 Components 的形式，迁移到了 @bpmn-io/properties-panel 仓库中,使用时请需注意版本
additionalModules 需要同时引入 BpmnPropertiesPanelModule 与 BpmnPropertiesProviderModule ，否则不能正常使用。完成上述则可以实现一个简单的配置面板
这里与引入基础属性侧边栏相比，增加了一下几点配置项：
虽然官方提供了基础的属性设置和camunda 属性编辑面板，但是基础属性对日常业务支持不足以及camunda 属性内部对更新和读取都与 camunda 流程引擎做了强关联，所以在没有使用 camunda 流程引擎的时候，如何去支持业务和拓展元素属性就成了必须要解决的问题,而对于这个问题，bpmn-io 官方也编写了一个示例项目properties-panel-extension。
那我们接下来也对这块进行一个示例说明，在创建自定义的属性编辑面板之前，需要先定义相关的自定义属性，这里我们以flowable 流程引擎对应的属性为例。
我们对StartEvent 节点进行了扩展，增加了 spell 属性。
第二步：创建属性对应的PropertiesProviderModule
第三步：实现自定义属性栏分组与Spell 属性编辑组件
第四步：引入自定义属性构造器MagicPropertiesProvider
那最终的实现如下：
