bpmn.js Modeling API 列表

原内容位于官方github的examples下，这里给整理出来并部分进行了中文翻译以方便查看，可以借助浏览器的搜索功能进行快速检索，Chrome下搜索快捷键ctrl+F，Mac下搜索快捷键Command+F

Introduction - 介绍

javascript">/**
 * After creating a new instance of bpmn-js you can access any module of bpmn-js using
 * modeler#get.
 *
 * The modules used in this example are:
 *
 * * ElementFactory: Creates new shapes and connections.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to create a new shape, add it to the diagram, and
 * connect it to an existing shape.
 */

// (1) 获取modules
const elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 根据ID获取Process和shape
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// (3) 新建Shape
const task = elementFactory.createShape({ type: 'bpmn:Task' });

// (4) 添加新的shape到当前流程图
modeling.createShape(task, { x: 400, y: 100 }, process);

// You can now access the new task through the element registry
console.log(elementRegistry.get(task.id)); // Shape { "type": "bpmn:Task", ... }

// (5) 创建连线
modeling.connect(startEvent, task);

Business Objects - 业务对象

javascript">/**
 * Business objects are the model objects that hold all the BPMN-related properties of a shape or
 * connection. They can be accessed through an element's `businessObject` property. Not all model
 * objects are visible as shapes or connections. An event definition for example is a model object
 * that is part of an event shape's business object.
 *
 * The entire BPMN model can be found here: https://github.com/bpmn-io/bpmn-moddle/blob/master/resources/bpmn/json/bpmn.json
 *
 * The modules used in this example are:
 *
 * * BpmnFactory: Creates new business objects.
 * * ElementFactory: Creates new shapes and connections.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to create a new business object representing a shape,
 * add it to the diagram, and connect it to an existing shape.
 */

// (1) 获取modules
const bpmnFactory = modeler.get('bpmnFactory'),
      elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 根据ID获取Process和shape
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// You can access the start event's business object
console.log(startEvent.businessObject); // { "$type": "bpmn:StartEvent", ... }

// (3) 通过BPMN factory的方式来创建对象
const taskBusinessObject = bpmnFactory.create('bpmn:Task', { id: 'Task_1', name: 'Task' });

// (4) 使用刚刚创建的业务对象创建一个新的shape
const task = elementFactory.createShape({ type: 'bpmn:Task', businessObject: taskBusinessObject });

// (5) 添加新的shape到当前流程图
modeling.createShape(task, { x: 400, y: 100 }, process);

// Using the `id` property we specified you can now access the new task through the element registry
console.log(elementRegistry.get('Task_1')); // Shape { "type": "bpmn:Task", ... }

Creating Shapes - 创建形状

javascript">/**
 * Now that we have created our first shapes let's create some more complex shapes.
 *
 * The modules used in this example are:
 *
 * * BpmnFactory: Creates new business objects.
 * * ElementFactory: Creates new shapes and connections.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to create some more shapes including a BoundaryEvent and
 * a SubProcess.
 */

// (1) 获取modules
const bpmnFactory = modeler.get('bpmnFactory'),
      elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 根据ID获取Process和shape
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// (3) 创建一个service task类型的shape
const serviceTask = elementFactory.createShape({ type: 'bpmn:ServiceTask' });

// (4) 使用appendShape将新的service task类型的shape添加到现有流程图中
modeling.appendShape(startEvent, serviceTask, { x: 400, y: 100 }, process);

// (5) 创建一个boundary event边界事件类型的shape
const boundaryEvent = elementFactory.createShape({ type: 'bpmn:BoundaryEvent' });

// (6) 将新边界事件添加到流程图中，并将其附加到serviceTask
modeling.createShape(boundaryEvent, { x: 400, y: 140 }, serviceTask, { attach: true });

// (7) 创建sub process子流程类型的对象
const eventSubProcessBusinessObject = bpmnFactory.create('bpmn:SubProcess', {
  triggeredByEvent: true,
  isExpanded: true
});

// (8) 创建SubProcess子流程shape，并进行属性设置
const eventSubProcess = elementFactory.createShape({
  type: 'bpmn:SubProcess',
  businessObject: eventSubProcessBusinessObject,
  isExpanded: true
});

// (9) 将sub process子流程添加到流程中
modeling.createShape(eventSubProcess, { x: 300, y: 400 }, process);

// (10) 创建eventDefinitionType的计时器启动事件
const timerStartEvent = elementFactory.createShape({
  type: 'bpmn:StartEvent',
  eventDefinitionType: 'bpmn:TimerEventDefinition'
});

// (11) 添加新的timerStartEvent事件到当前流程的子流程中
modeling.createShape(timerStartEvent, { x: 200, y: 400 }, eventSubProcess);

// (12) 创建新的group shape，并指定宽和高
const group = elementFactory.createShape({ type: 'bpmn:Group', width: 400, height: 200 });

// (13) 将group shape添加到现有的流程中
modeling.createShape(group, { x: 325, y: 100 }, process);

// (14) 创建两个shape，并指定坐标
// coordinates, not absolute
const messageStartEvent = elementFactory.createShape({
  type: 'bpmn:StartEvent',
  eventDefinitionType: 'bpmn:MessageEventDefinition',
  x: 0,
  y: 22
});

const userTask = elementFactory.createShape({
  type: 'bpmn:UserTask',
  x: 100,
  y: 0
});

// (15) 一次向流程图中添加多个shape
modeling.createElements([ messageStartEvent, userTask ], { x: 300, y: 600 }, process);

Connecting Shapes - 连线形状

javascript">/**
 * Now let's look at the different ways of connecting shapes to each other.
 *
 * The modules used in this example are:
 *
 * * ElementFactory: Creates new shapes and connections.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to create shapes and connect them on two different ways.
 */

// (1) 获取modules
const elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 根据ID获取Process和shape
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// (3) 创建一个shape
const task = elementFactory.createShape({ type: 'bpmn:Task' });

// (4) 添加新的shape到流程图
modeling.createShape(task, { x: 400, y: 100 }, process);

// (5) 用connect连接startEvent到新添加的shape
modeling.connect(startEvent, task);

// (6) 创建一个end event类型的shape
const endEvent = elementFactory.createShape({ type: 'bpmn:EndEvent' });

// (7) 添加新的endEvent类型的shape添加到流程图中
modeling.createShape(endEvent, { x: 600, y: 100 }, process);

// (8) 创建一条新的连线连接task shape到endEvent事件
modeling.createConnection(task, endEvent, { type: 'bpmn:SequenceFlow' }, process);

Collaborations - 合作开发

javascript">/**
 * So far we've worked with processes. Let's have a look at collaborations.
 *
 * The modules used in this example are:
 *
 * * ElementFactory: Creates new shapes and connections.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to create Participants, add them to the diagram (thereby
 * turning the process into a collaboration), create lanes and connect participants
 * using Message Flows.
 */

// (1) 获取modules
const elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 根据ID获取Process和shape
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// (3) 使用createParticipantShape创建一个新的Participant类型是shape
const participant = elementFactory.createParticipantShape({ type: 'bpmn:Participant' });

// (4) 将新参与者添加到流程图中，从而将流程转变为协作流程
modeling.createShape(participant, { x: 400, y: 100 }, process);

// The existing start event is now a child of the participant
console.log(startEvent.parent); // Shape { "type": "bpmn:Participant", ... }

// (5) 创建泳道
const lane = modeling.addLane(participant, 'bottom');

// (6) 创建两个镶嵌的泳道
modeling.splitLane(lane, 2);

// (7) 创建另一个participant类型的shape
const collapsedParticipant = elementFactory
  .createParticipantShape({ type: 'bpmn:Participant', isExpanded: false });

// (8) 添加participant到流程图中
modeling.createShape(collapsedParticipant, { x: 300, y: 500 }, process);

// (9) 通过message消息连接两个participant
modeling.connect(collapsedParticipant, participant);

Editing Elements - 编辑元素

javascript">/**
 * Now, let's have a look at how you can edit existing elements.
 *
 * The modules used in this example are:
 *
 * * BpmnFactory: Creates new business objects.
 * * ElementRegistry: A registry of all shapes and connections of the diagram.
 * * Modeling: The main module for modeling.
 *
 * We will use these modules to update the properties of two existing shapes.
 */

// (1) 获取modules
const bpmnFactory = modeler.get('bpmnFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) 获取shapes
const startEvent = elementRegistry.get('StartEvent_1'),
      exclusiveGateway = elementRegistry.get('ExclusiveGateway_1'),
      sequenceFlow = elementRegistry.get('SequenceFlow_3'),
      task = elementRegistry.get('Task_1');

// (3) 通过updateProperties来更改start event的name属性
modeling.updateProperties(startEvent, { name: 'Foo' });

// (4) 更改网关的defaultFlow属性
modeling.updateProperties(exclusiveGateway, {
  default: sequenceFlow.businessObject
});

// (5) 将任务更改为multi-instance
const multiInstanceLoopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');

modeling.updateProperties(task, {
  loopCharacteristics: multiInstanceLoopCharacteristics
});