Bpmn.js 进阶指南之Rules操作校验规则(三)
在前两篇文章 Bpmn.js 进阶指南之Rules操作校验规则(一) 和 Bpmn.js 进阶指南之Rules操作校验规则(二) 中，已经完整的解析了 bpmn.js 中的默认操作规则，以及整个规则模块的运作流程。这篇文章主要讲如何使用操作规则来自定义规则、影响页面内容。
1. 自定义规则
以 bpmn.js 的 AlignElements 元素对齐模块为例，自定义规则的规则定义和注册部分其实比较简单。
// 定义 规则初始化构造函数
export default function BpmnAlignElements(eventBus) {
RuleProvider.call(this, eventBus);
}
// 注入 EventBus 事件总线依赖
BpmnAlignElements.$inject = [ 'eventBus' ];
// 继承 RuleProvider
inherits(BpmnAlignElements, RuleProvider);
// 实现 init 初始化方法，注册 elements.align 操作校验规则
BpmnAlignElements.prototype.init = function() {
this.addRule('elements.align', function(context) {
// 1. 获取上下文菜单中的元素实例数组
var elements = context.elements;
// 2. 筛选元素，排除 label、connection、root 类型的元素
var filteredElements = filter(elements, function(element) {
return !(element.waypoints || element.host || element.labelTarget);
});
// 3. 筛选出在同一父元素中的元素
filteredElements = getParents(filteredElements);
// 4. 判断符合条件的元素个数，如果小于2则不能进行对齐操作
if (filteredElements.length < 2) {
return false;
}
// 5. 符合条件，返回一个可以转为 true 的值
return filteredElements;
});
};当然，这里也可以用 class 方式实现，个人也比较推荐 class 方式：
export default class BpmnAlignElements extends RuleProvider {
constructor(eventBus) {
super(eventBus);
}
init() {
this.addRule('elements.align', function (context) {
// ...
});
}
}之后，在导出为一个 AdditionalModule 格式的模块：
// align-elements/index.ts
import BpmnAlignElements from './BpmnAlignElements';
export default {
__init__: [bpmnAlignElements],
bpmnAlignElements: ['type', BpmnAlignElements]
}至此，自定义操作规则就结束了，在 Modeler 实例化完成之后，可以看到事件总线模块已经注册了一个 commandStack.elements.align.canExecute 事件。
2. 规则使用
使用已定义的规则，一般情况下有两种用途：
- 在某个事件/操作发生时进行判断，组织非法操作。这种方式通常是没有办法明显的体现在页面上的
- 根据规则，动态控制某个菜单的选项。这种方式一般用在 Palette，ContextPad 和 PopupMenu 上，通过对应的 Provider 来实现。
2.1 阻止操作
阻止某些操作的进行，一般不会让用户直接从页面上看到任何差异。
以 Palette 创建一个 StartEvent 节点为例，在点击节点图标开始拖拽的过程中，会同时触发 darg.move 和 create.move 两个事件，在这个期间，每次触发 create.move 都会在监听回调函数中判断元素是否可以创建。
核心逻辑如下：
eventBus.on([ 'create.move', 'create.hover' ], function(event) {
// 获取事件上下文数据，拿到需要创建的 elements 元素实例数组
const context = event.context,
elements = context.elements,
hover = event.hover,
source = context.source,
hints = context.hints || {};
// 如果不是 hover 状态，则直接返回，由 create.end 事件的监听回调来处理
if (!hover) {
context.canExecute = false;
context.target = null;
return;
}
// 计算当前位置
const position = {
x: event.x,
y: event.y
};
// 判断是否可以正常执行创建操作
const canExecute = context.canExecute = hover && canCreate(elements, hover, position, source, hints);
// 如果是正处于 hover 状态，则根据是否可以在当前位置创建/挂载设置对应的画布样式等
if (hover && canExecute !== null) {
context.target = hover;
if (canExecute && canExecute.attach) {
setMarker(hover, MARKER_ATTACH);
} else {
setMarker(hover, canExecute ? MARKER_NEW_PARENT : MARKER_NOT_OK);
}
}
})这里只处理了 create.move 事件过程中的判断，主要用来改变画布样式，提示用户当前是否可以正常操作得到预想的结果。
在用户抬起鼠标按键结束拖拽过程时，则是由 create.end 事件的回调函数来进行处理。
在 Create 模块的源码中，官方是通过分别设置两个回调来处理的，分别用于结束 hover 状态和正式执行创建操作。核心逻辑如下：
// 1. 设置不同事件下的状态，结束 hover
eventBus.on([ 'create.end', 'create.out', 'create.cleanup' ], function(event) {
const hover = event.hover;
if (hover) {
setMarker(hover, null);
}
});
// 2. 正式执行创建操作
eventBus.on('create.end', function(event) {
const context = event.context,
source = context.source,
shape = context.shape,
elements = context.elements,
target = context.target,
canExecute = context.canExecute,
attach = canExecute && canExecute.attach,
connect = canExecute && canExecute.connect,
hints = context.hints || {};
// 如果是禁止创建或者没有目标元素的时候直接返回 false
if (canExecute === false || !target) {
return false;
}
// 设置创建位置
const position = {
x: event.x,
y: event.y
};
// 创建元素并添加到画布上
if (connect) {
shape = modeling.appendShape(source, shape, position, target, {
attach: attach,
connection: connect === true ? {} : connect,
connectionTarget: hints.connectionTarget
});
} else {
elements = modeling.createElements(elements, position, target, {...hints, attach});
shape = find(elements, (element) => !isConnection(element));
}
// 更新上下文
assign(context, { elements, shape });
assign(event, { elements, shape });
});而其中核心的 canCreate 方法，除了校验是否有目标元素、是否是连线类元素之外，就是通过调用 rules.allowed(‘shape.attach’), rules.allowed(‘shape.create’), rules.allowed(‘elements.create’) 等规则来进行判断的
综上，整个创建过程中主要是在 create.move（也就是拖拽过程中）阶段进行的操作规则校验，并将校验结果保存到事件总线的上下文数据中；而 create.end 则是单纯的根据上下文中的规则校验结果，判断是否执行元素创建。
? 如果需要扩展该创建规则，可以通过注册 create.move 事件的监听函数，并设置较高的优先级来保证优先执行，可以设置上下文数据对象中的 hover 为 false 直接结束创建过程。
也可以通过继承 Create 构造函数，扩展 canCreate 方法来实现规则的扩展。
2.2 改变菜单
规则模块不仅可以用来阻止操作，也可以用来改变原有的菜单项。
这个过程需要配合对应的菜单项构造器 Provider 来实现。
这里我们假设有这样一个需求：在开始节点被选中时不显示 ContextPad 上下文菜单选项，在结束节点上的上下文菜单中禁止显示删除按钮。
因为这里需要把原有的 ContextPad 的一些选项禁用或者移除，所以只能是创建一个新的 ContextPadProvider 去覆盖官方原始构造器。但是为了减少代码量，可以直接继承官方构造器进行改造
// 配置禁止删除规则
class CustomDeleteRules extends RuleProvider {
constructor(eventBus) {
super(eventBus);
}
init() {
this.addRule('elements.delete', function (context) {
const elements = context.elements
const endEvents = elements.filter(el => el.type === "bpmn:EndEvent")
if(endEvents.length) {
return false
}
return context
});
}
}
// 1. 继承原始构造器
class RewriteContextPadProvider extends ContextPadProvider {
constructor(
config: any,
injector: Injector,
eventBus: EventBus,
contextPad: ContextPad,
modeling: Modeling,
elementFactory: ElementFactory,
connect: Connect,
create: Create,
popupMenu: PopupMenu,
canvas: Canvas,
rules: Rules,
translate: Translate
) {
super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate)
// 2. 保留原有的菜单项入口
this._getContextPadEntries = super.getContextPadEntries
}
// 3. 实现自己的菜单项配置
getContextPadEntries(element: Base) {
// 3.1 开始节点没有菜单项
if(element.type === 'bpmn:StartEvent') {
return {}
}
// 3.2 其他节点保留原始菜单项
const actions = this._getContextPadEntries(element)
// 3.3 判断是否可以执行删除规则（this._rules 继承自 ContextPadProvider）
baseAllowed = this._rules.allowed('elements.delete', {
elements: [element]
});
if(baseAllowed) {
delete actions.delete
}
// 3.4 返回菜单项
return actions
}
}
![Cannot use import statement outside a module [React TypeScript 错误的处理方法]](https://www.zadmei.com/wp-content/uploads/2022/10/office-ga13a58a41_1280.jpg)
