cmmnjs的前端实践：2、添加普通节点和准入/准出条件

在前端开发中，cmmnjs模型和bpmnjs模型有许多类似可参照的地方，本文聚焦于cmmnjs的使用，与bpmn中类似的点将不做赘述。主要说明cmmn和bpmn的不同之处和节点的相关操作。

示例：项目地址，基于vue实现，但cmmnjs相关逻辑与框架无关，可直接迁移至其它框架。

代码中涉及到功能模块的部分，将直接以对应模块名称代替，实际开发时需要通过cmmnModeler.get('模块名')获取。

一、查节点

在前文中，说明了xml文件中的基本结构，可知一个任务节点 -> 一个planItem+它的定义。

在cmmn中可以通过elementRegistry.get(id)方法去获取节点。需要注意的是，此时获取到的是planItem，shape.type为cmmn:PlanItem。真正的节点类型和对应属性，需要在对应的定义shape.businessObject.definitionRef中获取。

二、添加普通节点

在bpmn中，所有节点都可以通过elementFactory.createShape创建，而在cmmn中，因为存在前文提到的容器和定义的概念，需要根据不同的节点类型，分别调用createPlanItemShape、createCriterionShape等方法去创建。

此外，也可以通过elementFactory.create方法，传入类型参数去创建，部分节点属性可以直接在此时指定。

go 复制代码

// 方法一 
const ele = elementFactory.createPlanItemShape('cmmn:HumanTask');
// 方法二，第一个参数为shape/connetion，代表节点/连线
const ele = elementFactory.create('shape', {
    type: 'cmmn:PlanItem', // 容器类型
    definitionType: "cmmn:HumanTask", // 定义类型
    hidden: true, // 节点创建后隐藏，画布上不显示，此属性不会保存到xml文件中
});

创建好节点后，再通过modeling.createShape将节点添加到画布上。

php 复制代码

// 参数 ele要添加的节点、位置、target要添加节点的双亲节点
modeling.createShape(ele, { x: 500, y: 300 }, target);

bpmn中可以通过autoPlace功能自动判定元素放置位置，但cmmn中没有类似功能，需要手动指定元素位置，否则会因为找不到位置而报错。将ele在控制台中打印出来，可以看到对应的shape元素为

在elementFactory.create方法中，参数type和definitionType分别指定的就是shape.type和shape.businessObject.definitionRef.$type。

除了createShape外，还可以通过modeling.appendShape(target,shape,position)方法添加节点。区别在于，appendShape会在target和shape间创建一条连线。在这个方法中，target代表的是与shape相连接的节点，但注意target和shape间自动创建的连线可能没有用处。例如目标和添加节点均为task时，会生成association类型的连线（一般用于连接元素与注释信息），对流程无实际意义，反而会影响流程解析。

三、添加准入/准出条件

和普通节点不同，条件节点只会作为某个节点的附属存在，因为它代表的是这个节点的激活/结束条件，本身不能作为单独的节点。以准入条件为例，创建方式如下：

php 复制代码

 // 方法一
  const entryEle = elementFactory.createCriterionShape("cmmn:EntryCriterion");  
  // 方法二 准入条件不存在definitionRef，不需要指定definitionType
  const entryEle = elementFactory.create('shape', {
    type: 'cmmn:EntryCriterion',
  });
  // target指需要添加条件的目标节点
  modeling.createShape(
    entryEle,
    { x: target.x, y: target.y + target.height / 2 },
    target,
    {
      attach: true,
    }
  // 创建完成后指定条件节点的目标
  modeling.updateAttachment(entryEle, target);

可以看到，创建方式与普通节点类似。但需要传入第4个参数，指定attach=true，将其作为目标节点的附属。

如果创建时没有指定，也可以在创建后通过modeling.updateAttachment方法更改指定。假如没有指定目标节点，虽然画布上会出现对应的条件节点，但并不会生成对应的哨兵。也就是在生成的xml文件中，条件节点只会存在于画布元素中，而不会被流程解析。