In fact, Bpmn configuration information and update a lot of ways can be viewed through the console, combined with the source code can basically complete 80% of the customized content, this article is mainly used to record the author recently encountered in the development process of some attributes and API.

A user task node configured with multiple properties

Focus on attributes/content

shape: {
		id: "Node id".type: "Node type".x: "X-coordinate".y: "Y-coordinate".width: "Width".height: "Height".businessObject: {
            	$type: "Consistent with superior type".documentation: "Element document".extensionElements: "Contains listeners, input and output, extended properties, etc.".formKey: "Bind form key".id: "Same as the superior ID".name: "Node name".$attrs: {}, // Custom attributes
                $parent: {} // Parent element},outgoing: refs[], // Directly connected exit element (usually connection line)
        incoming: refs[] // Directly connected source element (usually connection line)
}
Copy the code

Attribute analysis

// Primitive instances and utility class instances
this.modeler = new BpmnModeler(options);
const eventBus = this.modeler.get("eventBus");
const modeling = this.modeler.get("modeling");
const elementRegistry = this.modeler.get("elementRegistry");
const bpmnFactory = this.modeler.get("bpmnFactory");
const moddle = this.modeler.get("moddle");
// Get the selected element (here to listen for mouse click events)
eventBus.on("element.click".(e) = > {
         if(! e || ! e.element)return;
 		this.element = e.element;
       });
// Make sure the element is valid
const shape = this.modeler.get("elementRegistry").get(this.element.id);
Copy the code

1. Basic information

  1. Shape.id: Unique identifier of a node. New nodes are automatically generated, and automatically generated nodes start with a fixed word
  2. Shape.type: Node type
  3. Shape.businessObject: Binding property of a node, often used for business flow; Native support attributes are synchronously updated within the XML node; Without get/set methods, vue2. X doesn’t seem to listen for changes directly
  4. Shape.order: Not yet
  5. Shape.parent: Parent element, andbusinessObjectWithin the$parentconsistent

2. BusinessObject

Contains most of the node’s configuration information and custom properties, which can be updated using the updateProperties method

modeling.updateProperties(shape, {
   name: "Node 1".myConfig: { nodeName: "nodeName1"}});Copy the code

Native support attributes are synchronized to shape.Businessobject and updated to XML nodes; User-defined attributes are updated to shape.businessobject. $attrs and converted to {[key: string]: string} to be updated as attributes of XML node tags.

For example, myConfig above will be updated to…

2.1 documentationElements in the document

BusinessObject.documentation: ModdleElement[]

// Variables and utility classes are declared above
// Create the element document
const DOC  = bpmnFactory.create("bpmn:Documentation", { text: "Test Elements document" })
// Update to node
modeling.updateProperties(shape, {
	documentation: [ DOC ]
})
Copy the code
2.2 extensionElementsThe extension configuration

Contains two attributes: $type: “BPMN :ExtensionElements” and values: ModdleElement[]

Commonly used types of values inside contain have [” camunda: InputOutput “, “camunda: Properties”, “camunda: ExecutionListener”, “camunda: TaskListener”, “camunda:FormData” ]

  1. camunda:InputOutputInput and output

To be tested, the process is similar to creating extended attributes

  1. camunda:PropertiesExtended attributes
// 1. Create an extended attribute
const exCamProperty = bpmnFactory.create("camunda:Property", {
    name: "clickAdd".value: "definedWithJS"
});
console.log("exCamProperty", exCamProperty);
// 2. Create a group of extended properties (default panel has only one, containing several extended properties)
const exProperties = bpmnFactory.create("camunda:Properties", { values: []});console.log("exProperties", exProperties);
// 3. Create an extension configuration item for the node
const extensions = bpmnFactory.create("bpmn:ExtensionElements", { values: []});console.log("extensions", extensions);
// Assemble data
exProperties.values.push(exCamProperty);
extensions.values.push(exProperties);
// Update to node
this.modeling.updateProperties(element, {
	extensionElements: extensions
});

// The updated result (XML)
// <userTask id="Activity_1owrwsz">
// 
      
// 
      
// 
      
// 
// 
// </userTask>
Copy the code
  1. camunda:ExecutionListenerListener – Performs listening

To be tested, the process is similar to creating extended attributes

  1. camunda:TaskListenerListener – Task listener

To be tested, the process is similar to creating extended attributes

  1. camunda:FormDataThe form

To be tested, the process is similar to creating extended attributes

Two conditional configuration connections

The basic information is similar to the node

Attribute analysis

BusinessObject

1. BusinessObject.ConditionExpression

The line corresponds to the conditional expression/script configuration

// Variables and utility classes are declared above
// Create a condition
const conditionExpression  = moddle.create("bpmn:FormalExpression", { body: "${ handle == 'pass' }" })
// Update to node
modeling.updateProperties(shape, {
	conditionExpression: conditionExpression
})
Copy the code
2. BusinessObject.sourceRef

Join the wire source element

3. BusinessObject.targetRef

Join the line target element

Afterword.

Due to the demands of the job (which is not really necessary), Open source BPMN Process Designer is a Process editor based on bPMN-js + Vue 2.x + ElementUI, preview at MiyueFE blog, welcome fork and star.