BpmnDiagram

This library was generated with Angular CLI version 15.

Code scaffolding

Run ng generate component component-name --project bpmn-diagram to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project bpmn-diagram.

Note: Don't forget to add --project bpmn-diagram or else it will be added to the default project in your angular.json file.

Build

Run ng build bpmn-diagram to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build bpmn-diagram, go to the dist folder cd dist/bpmn-diagram and run npm publish.

Running unit tests

Run ng test bpmn-diagram to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

快速上手

安装组件

$ npm install bpmn-diagram --save

引入样式

使用全部组件样式

在 angular.json 中引入了

{
  "styles": ["node_modules/bpmn-diagram/bpmn-diagram.css"]
}

引入组件模块

最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。

以下面的 BpmnDiagramModule 模块为例，先引入组件模块：

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BpmnDiagramModule } from "bpmn-diagram";

@NgModule({
  declarations: [AppComponent],
  imports: [BpmnDiagramModule],
})
export class AppModule {}

然后在模板中使用：

<!-- 编辑组件 -->
<app-bpmn-diagram-edit></app-bpmn-diagram-edit>
<!-- 预览组件 -->
<app-bpmn-diagram-preview></app-bpmn-diagram-preview>

Components

bpmn-diagram-edit

// 图标库使用项配置
const iconConfig: BpIconConfig = {
  group: [
    {
      name: "行政区划",
      type: "region",
      icons: [
        {
          code: "PROVINCE_POINT",
        },
        {
          code: "CITY_POINT",
        },
        {
          code: "COUNTY_POINT",
        },
        {
          code: "TOWN_POINT",
        },
      ],
    },
    {
      name: "标记",
      type: "tag",
      icons: [
        {
          code: "EARTHQUAKE_POINT",
        },
        {
          code: "PANORAMA",
        },
        {
          code: "FLOOD_CONTROL_HEADQUARTERS",
        },
      ],
    },
  ],
};

bpmn-diagram-preview

iconConfig

baseUrl

nodeEventConfig