zeebe BPMN Moddle in angular

由于后端实现工作流相关的功能是用的 zeebe ，因此前端也需要在项目中引入 zeebe BPMN Moddle 拓展实现工作流绘制。记录一下在 Angular 项目中引入 zeebe BPMN Moddle 踩的一些坑。

首先根据 Camunda文档介绍，在 Angular 项目中引入 camunda-bpmn-js，但是文档中并没有介绍要一同安装其他的依赖包，后来在 stackblitz 上面尝试引入，然后不断出现提示需要安装其他的依赖。

图片.png

最终安装了如下图红框中所示的依赖包。

图片.png

在 angular.json中引入插件样式

"styles": [
     "src/styles.scss",
     "node_modules/bpmn-js/dist/assets/diagram-js.css",
     "node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css",
     "node_modules/bpmn-js-properties-panel/dist/assets/properties-panel.css",
     "node_modules/camunda-bpmn-js/dist/assets/camunda-cloud-modeler.css"]

diagram.component.ts

import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
import Modeler from 'camunda-bpmn-js/lib/camunda-cloud/Modeler';
// use zeebe BPMN Moddle extension
import ZeebeExtensionModule from 'zeebe-bpmn-moddle/lib';
// use zeebe BPMN namespace
import { default as zeebeModdleDescriptor } from 'zeebe-bpmn-moddle/resources/zeebe.json';
import DisableCollapsedSubprocessModule from 'bpmn-js-disable-collapsed-subprocess';

export class DiagramComponent implements AfterContentInit, OnChanges, OnInit, OnDestroy {
  private modeler: Modeler;

  ngOnInit() {
    this.modeler = new Modeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      propertiesPanel: {
        parent: '#properties-panel'
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        ZeebeExtensionModule,
        DisableCollapsedSubprocessModule
      ],
      moddleExtensions: {
        zeebe: zeebeModdleDescriptor
      }
    });
  }
}

diagram.component.html

<div class="diagram-container">
    <div id="canvas" #canvas class="canvas"></div>
    <!-- 右侧属性栏 -->
    <div class="properties-panel" id="properties-panel"></div>
</div>

效果图如下所示

图片.png