全网最详bpmn.js教程：自定义contextPad篇

ContextPad：为流程图建模增添灵活性的强大工具

引言

在设计复杂流程图时，上下文敏感的工具可以显著提升建模体验。在bpmn.js中，contextPad正是这样一个工具，它通过在画布上显示元素的上下文菜单，为流程图建模提供了无缝且高效的交互。

contextPad是什么？

ContextPad是一个容器，用于显示与选定元素相关的菜单项。它位于选定元素的右上角，允许建模人员快速访问常用的操作，例如创建新元素、删除元素和修改元素属性。

自定义contextPad

为了满足特定建模需求，contextPad可以根据需要进行自定义。在创建流程图实例时，您可以指定contextPad的配置选项。这些选项包括：

• entries ：一个包含要添加到contextPad的菜单项的数组。
• position ：一个字符串，指定contextPad的位置（顶部、右侧、底部或左侧）。
• autoActivate ：一个布尔值，指定是否在元素选中时自动激活contextPad。

contextPad菜单项的结构

每个contextPad菜单项由以下几个部分组成：

• action ：指定菜单项操作的字符串。
• title ：显示在菜单项中的字符串。
• className ：应用于菜单项的CSS类。
• imageUrl ：指向菜单项图标的URL。

contextPad的常见用法

ContextPad通常用于完成以下常见的建模任务：

• 创建新元素：添加新元素到流程图，如任务、网关和事件。
• 删除元素：从流程图中移除选定的元素。
• 修改元素属性：编辑选定元素的属性，如名称和颜色。
• 连接元素：将两个元素连接起来以创建流程图中的流。
• 分组元素：将选定的元素分组在一起，以保持流程图的整洁和有序。
• 取消分组元素：将已分组的元素取消分组。

实例：使用contextPad完成常见建模任务

以下是如何使用contextPad完成常见建模任务的示例：

创建新任务：

1. 选择流程图中的一个元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“创建任务”菜单项。
4. 一个新的任务将被添加到流程图中。

删除元素：

1. 选择要删除的元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“删除”菜单项。
4. 选定的元素将从流程图中删除。

修改元素属性：

1. 选择要修改的元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“属性”菜单项。
4. 一个属性对话框将被打开，您可以修改元素的属性。
5. 单击“确定”按钮以保存更改。

连接元素：

1. 选择要连接的第一个元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“连接”菜单项。
4. 将鼠标悬停在要连接的第二个元素上。
5. 单击鼠标左键以创建连接。

分组元素：

1. 选择要分组的元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“分组”菜单项。
4. 选定的元素将被分组起来。

取消分组元素：

1. 选择已分组的元素。
2. 右键单击选定的元素。
3. 在弹出的contextPad中，选择“取消分组”菜单项。
4. 选定的元素将被取消分组。

结论

ContextPad是bpmn.js中的一个强大的工具，通过提供上下文相关的菜单项，它极大地简化了流程图建模。通过自定义contextPad并利用其广泛的用法，您可以显著提高建模效率并创建更复杂和实用的流程图。

常见问题解答

1. contextPad可以在多个元素上同时显示吗？
   否，contextPad只能为一次选定的单个元素显示菜单项。

2. 是否可以禁用contextPad？
   是的，可以通过将autoActivate选项设置为false来禁用contextPad。

3. 如何添加自定义的contextPad菜单项？
   在contextPad选项的entries属性中添加一个包含action、title、className和imageUrl属性的对象。

4. contextPad是否与其他bpmn.js插件兼容？
   通常情况下，contextPad与其他bpmn.js插件兼容，但可能会根据插件的具体实现而有所不同。

5. 有哪些最佳实践可以有效地使用contextPad？

   • 仅添加与所选元素相关的菜单项。
   • 根据任务频率对菜单项进行组织。
   • 使用清晰简洁的菜单项标题。
   • 利用图标以直观地表示菜单项操作。