原内容位于官方github的examples下，这里给整理出来并部分进行了中文翻译以方便查看，可以借助浏览器的搜索功能进行快速检索，Chrome下搜索快捷键ctrl+F，Mac下搜索快捷键Command+F
Introduction - 介绍
/**
* 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 - 业务对象
/**
* 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 - 创建形状
/**
* 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 - 连线形状
/**
* 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 - 合作开发
/**
* 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 - 编辑元素
/**
* 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
});
评论区