BPMN.JS及其常见API[算得上很全啦]

常见API

老版

在bpmn.js中，有许多常见的API可用于创建、编辑和操作BPMN图。以下是一些常见的API：

BpmnViewer:

用于展示BPMN图的查看器。它提供了importXML方法，用于将BPMN XML导入并渲染成图形。常见的方法包括：[与BpmnModeler合并]

• importXML(xml: string, callback: Function): 导入BPMN XML并在回调函数中渲染图形。

• get('canvas'): 获取画布对象，用于访问图形的底层画布。

• on(event: string, callback: Function): 监听事件，例如element.click、shape.added等。

BpmnModeler:

用于创建和编辑BPMN图的建模器。除了BpmnViewer的方法外，还有一些常见的方法：

• saveXML(options: Object, callback: Function): 将当前编辑的BPMN图保存为XML格式，并在回调函数中返回XML内容。

• destroy(): 销毁建模器，释放资源。

ElementRegistry:

用于管理BPMN元素的注册表。常见的方法包括：

• get(elementId: string): 根据元素ID获取元素对象。

• forEach(callback: Function): 遍历注册的所有元素并执行回调函数。

Canvas:

用于绘制BPMN图形的画布对象。常见的方法包括：

• addShape(shape: Object, parent: Object, position: Object): 在画布上添加形状。

  zoom(zoomLevel: number): 缩放画布。

  scroll(delta: {dx: number, dy: number}): 滚动画布。

Moddle :

BPMN.js 中的一个组件，用于定义和解析 BPMN 模型的元数据。Moddle 使用 XML Schema 来定义 BPMN 元素和属性的结构，并提供了一个框架，使得可以轻松地创建、解析和验证 BPMN 模型。

1. 定义 BPMN 模型结构：通过 XML Schema 定义 BPMN 元素和属性的结构，从而构建 BPMN 模型的元数据。

2. 创建 BPMN 模型实例：基于定义的结构，您可以创建符合 BPMN 规范的模型实例，这些模型实例可以用于表示各种业务流程。

3. 解析和验证 BPMN 模型：使用 Moddle，您可以解析从外部源获取的 BPMN 模型数据，并对其进行验证，以确保其符合定义的模式。

总的来说，Moddle 是 BPMN.js 的核心组件之一，用于处理 BPMN 模型的元数据，包括定义、创建、解析和验证

Modeling ：

是用于操作 BPMN 模型的核心组件之一。它提供了一组 API，允许开发者通过编程方式修改和编辑 BPMN 图。

设置属性（Set Properties）：

• updateProperties(element, properties)：更新指定元素的属性，可以修改元素的名称、类型、参与者等。

• updateLabel(label, newLabel)：更新指定标签的文本内容。

创建元素（Create Elements）：

• createShape(type, position, parent, attrs)：创建指定类型的 BPMN 元素，可以指定元素的位置、父元素以及其他属性。

• createConnection(source, target, waypoints, attrs)：创建连接线，连接两个 BPMN 元素，可以指定连接线的路径和其他属性。

调整大小（Resize Elements）：

• resizeShape(shape, newBounds)：调整指定形状的大小，可以改变形状的宽度和高度。

删除元素（Remove Elements）：

• removeElements(elements)：删除指定的元素，可以删除 BPMN 元素及其关联的连接线。

EventBus:

在 BPMN.js 中，bpmnModeler.get('eventBus') 返回的是一个事件总线（EventBus）对象，它用于在 BPMN 模型器（BpmnModeler）中处理和触发各种事件。

事件总线是 BPMN.js 中用于管理和处理事件的机制。通过事件总线，您可以监听各种模型器中发生的事件，并在适当的时候执行相应的操作。一些常见的操作包括在元素创建、移动、更新等事件发生时执行特定的逻辑。

以下是一些您可以使用事件总线执行的操作：

1. 监听事件：使用 on() 方法可以监听特定类型的事件，如元素创建、更新、删除等。

2. 触发事件：使用 fire() 方法可以触发自定义事件，这些事件可以被其他部分的代码监听并作出响应。

3. 取消监听：使用 off() 方法可以取消对特定事件的监听。

4. 批量执行：可以使用 batch() 方法来批量执行一组操作，这样可以提高性能并减少不必要的刷新。

总之，事件总线提供了一种灵活且强大的机制，用于在 BPMN 模型器中处理各种事件和操作。

新版

最新版的 bpmn-js 提供了一系列常见的 API，用于处理 BPMN 图的导入、查看、编辑和保存等操作。以下是一些常见的 API：

1. Viewer API：

   • BpmnViewer：BPMN 查看器的主类，用于创建一个 BPMN 查看器实例。

   • BpmnViewer#attachTo：将查看器附加到指定的 DOM 元素上。

   • BpmnViewer#importXML：从 XML 导入 BPMN 图。

   • BpmnViewer#destroy：销毁查看器实例。

2. Modeler API：

   • BpmnModeler：BPMN 模型编辑器的主类，用于创建一个 BPMN 模型编辑器实例。

   • BpmnModeler#attachTo：将模型编辑器附加到指定的 DOM 元素上。

   • BpmnModeler#importXML：从 XML 导入 BPMN 图以供编辑。

   • BpmnModeler#saveXML：将当前编辑的 BPMN 图保存为 XML。

   • BpmnModeler#destroy：销毁模型编辑器实例。

3. Events API：

   • BpmnViewer#on：用于监听 BPMN 查看器中的各种事件，如图表加载完成、元素选中等。

   • BpmnModeler#on：用于监听 BPMN 模型编辑器中的各种事件，如模型导入完成、保存成功等。

4. Element API：

   • ElementRegistry：元素注册表，用于获取 BPMN 图中的各种元素。

   • ElementRegistry#get：根据元素 ID 获取特定的 BPMN 元素。

   • ElementRegistry#forEach：遍历 BPMN 图中的所有元素。

这些是最常见的一些 API，用于创建、编辑和查看 BPMN 图。您可以根据需要查看 bpmn-js 的官方文档以获取更详细的信息和用法示例。

 BpmnModeler及其常见属性

在 bpmn-js 中，`BpmnModeler` 是一个 BPMN 模型编辑器的主类，它提供了一些属性来配置和控制编辑器的行为。以下是一些常见的 `BpmnModeler` 属性：

container：

指定模型编辑器要附加到的 DOM 元素。可以是 DOM 元素本身或者是 DOM 元素的选择器。
const modeler = new BpmnModeler({
  container: '#canvas' // 将模型编辑器附加到 id 为 canvas 的 DOM 元素上
});

additionalModules：

用于配置附加的模块，可以扩展模型编辑器的功能。
const modeler = new BpmnModeler({
  additionalModules: [
    customPaletteModule,
    customPropertiesPanelModule
  ]
});

keyboard：

用于配置键盘快捷键的设置。
const modeler = new BpmnModeler({
  keyboard: {
    bindTo: document
  }
});

propertiesPanel：

配置属性面板的相关选项，例如是否启用属性面板、属性面板的位置等。
const modeler = new BpmnModeler({
  propertiesPanel: {
    parent: '#properties'
  }
});

moddleExtensions：

用于配置扩展模型的元数据。
const modeler = new BpmnModeler({
  moddleExtensions: {
    custom: 'http://example.com/custom'
  }
});

BPMN常见元素的属性

在 BPMN（Business Process Model and Notation）中，常见的元素（Element）具有各种属性，这些属性描述了元素的不同方面。以下是一些常见的 BPMN 元素及其常见属性：

1. StartEvent（开始事件）：

   • id：唯一标识符。
   • name：显示的名称。
   • type：类型，例如 None、Timer、Message 等。
   • eventDefinitions：事件定义，例如 TimerEventDefinition、MessageEventDefinition 等。
   • outgoing：指向下一个元素的连接。

2. Task（任务）：

   • id：唯一标识符。
   • name：显示的名称。
   • type：类型，例如 Service、User、Manual 等。
   • assignee：指定任务的执行者。
   • incoming：指向任务的输入连接。
   • outgoing：指向下一个元素的输出连接。

3. Gateway（网关）：

   • id：唯一标识符。
   • name：显示的名称。
   • type：类型，例如 Exclusive、Inclusive、Parallel 等。
   • direction：指定网关的方向，例如 Converging（汇聚）或 Diverging（分支）。
   • incoming：指向网关的输入连接。
   • outgoing：指向下一个元素的输出连接。

4. SequenceFlow（序列流）：

   • id：唯一标识符。
   • sourceRef：指定序列流的起始元素。
   • targetRef：指定序列流的目标元素。
   • conditionExpression：指定序列流的条件表达式。
   • name：显示的名称。

5. EndEvent（结束事件）：

   • id：唯一标识符。
   • name：显示的名称。
   • type：类型，例如 None、Terminate、Message 等。
   • incoming：指向结束事件的输入连接。

这些是 BPMN 中一些常见元素及其常见属性。每种元素还可以具有其他特定于其类型的属性，具体取决于其在 BPMN 模型中的角色和功能。

详细见：https://github.com/bpmn-io/bpmn-moddle/blob/master/resources/bpmn/json/bpmn.json