addModelerListener () {
       // 监听 modeler
      const bpmnjs = this.bpmnModeler
      const that = this
      const events = ['shape.added', 'shape.move.end', 'shape.removed']
      events.forEach(function(event) {
        that.bpmnModeler.on(event, e => {
          var elementRegistry = bpmnjs.get('elementRegistry')
          var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
          if (event === 'shape.added') {
            console.log('新增了shape')
          } else if (event === 'shape.move.end') {
            console.log('移动了shape')
          } else if (event === 'shape.removed') {
            console.log('删除了shape')
这个方法是放在 将字符串转换成图显示出来 之后, 用于给元素绑定事件.
其中就有用到elementRegistry.
所以如果是在html中, 你就可以用这种方式来获取bpmn properties:
	<div id="canvas"></div>
<script>
	var bpmnJS = new BpmnJS({
  	container: '#canvas'
  });
  bpmnJS.importXML(xmlStr, function(err) {
  	if (!err) {
  		var elementRegistry = bpmnJs.get('elementRegistry')
      var startEventElement = elementRegistry.get('StartEvent_1y45yut'),
          startEvent = startEventElement.businessObject;
     	console.log(startEvent.name) // 开始
</script>

export default class CustomRenderer extends BaseRenderer {
	drawShape (parentNode, element) {
		// element.businessObject
		// or 解构
		// const { businessObject } = element
3. 如何修改bpmn properties🤔️?
你在bpmn文件中, 可能会看到这样一段代码:
<bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_1" targetRef="Task_1" name="FOO &gt; BAR?">
      <bpmn:conditionExpression xsi:type="bpmn:tFormalExpression"><![CDATA[${foo > bar}]]></bpmn:conditionExpression>
    </bpmn:sequenceFlow>
里面的xsi:type、sourceRef这些属性是啥啊🤔️? 我怎么知道哪类标签有哪些属性🤔️?
你其实可以在官方给的这个bpmn.json中查找到:
《meta-model descriptor》
设置的话可以根据以下方法:
var moddle = bpmnJS.get('moddle');
// 创建一个BPMN element , 并且载入到导出的xml里
var newCondition = moddle.create('bpmn:FormalExpression', {
  body: '${ value > 100 }'
});
// 写入属性, 但是不支持撤销 
sequenceFlow.conditionExpression = newCondition;
上面👆的这种方式是不支持撤销的, 如果你想要能够 撤销/重新 的话, 你可以通过以下这种方式:
var modeling = bpmnJS.get('modeling');
modeling.updateProperties(sequenceFlowElement, {
  conditionExpression: newCondition
});
也就是通过modeling.updateProperties()这个方法.
这个modeling好像是需要引入的, 反正如果我是使用DNS 远程的引入下面的这个js好像就会报错Uncaught Error: No provider for "modeling"!.
<script src="https://unpkg.com/[email protected]/dist/bpmn-viewer.development.js"></script>
当然如果你是使用npm 下载的话就没有这个问题了.
这个方法的第一个参数是一个 diagram element, 也就是前面我们提到的用elementRegistry获取到的对象.
第二个参数是要修改的属性, 它是一个Map结构.
4. 使用updateProperties方法
例如🌰, 我想在点击某个类型为bpmn:Task的节点的时候, 修改它的name属性, 我可以这么做:
给节点添加点击事件
判断节点类型为bpmn:Task , 只对这种类型的节点做后续处理
使用updateProperties更新name
    createNewDiagram () {
        // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
                // console.error(err)
            } else {
                // 这里是成功之后的回调, 可以在这里做一系列事情
                this.success()
    success () {
        this.addModelerListener() // 添加监听事件
    addModelerListener () {
    		const eventBus = this.bpmnModeler.get('eventBus')
      	const modeling = this.bpmnModeler.get('modeling')
      	const elementRegistry = this.bpmnModeler.get('elementRegistry');
      	const eventTypes = ['element.click', 'element.changed'];
      	eventTypes.forEach(function(eventType) {
          	eventBus.on(eventType, function (e) {
              	if (!e || !e.element) {
                  console.log('无效的e', e)
                  return
              	if (eventType === 'element.click') {
                  console.log('点击了element', e)
                  var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
                  if (shape.type === 'bpmn:Task') {
                    modeling.updateProperties(shape, {
                    	name: '我是修改后的Task名称'
当然你也可以一次性修改多个属性:
modeling.updateProperties(startEventElement, {
	name: '我是修改后的虚线节点',
	isInterrupting: false
我通过查找前面的 meta-model descriptor 知道StartEvent还有一个isInterrupting属性, 于是试着修改它, 结果竟然成功了, 将开始节点变为了虚线为边框的节点:
当然你也可以加一些除了meta-model descriptor里的一些自定义属性:
modeling.updateProperties(shape, {
	name: '我是修改后的虚线节点',
	isInterrupting: false,
	customText: '我是自定义的text属性'
只不过, 它们会被放到$attrs中:
并且这种方式, 也是可以直接修改到bpmn文件中的:
这一章节主要是向大家介绍了一下bpmn properties的概念以及操作方式...其实在这之前, 我甚至不知道怎么给xml标签上添加属性, 也甚至不知道updateProperties怎么使用😂...
还好皮厚的我不耻下问, 在群里问了一些小伙伴...
哈哈哈, 手动艾特感谢 @网易-付超老哥 还有@李岱老哥 , 在研究bpmn.js属性上面给我的帮助, 当然我也知道很多小伙伴希望我能快点更上一篇关于properties-panel的内容...
但今天真的有点累了... 容我先缓一缓, 咱明天再更行不😁.
(嗯...不行也得行, 我说了算...)
系列全部目录请查看此处:  《全网最详bpmn.js教材目录》
最后, 如果你也对bpmn.js 感兴趣可以进我们的bpmn.js交流群👇👇👇, 共同学习, 共同进步.
关注霖呆呆(LinDaiDai)的公众号, 选择 其它 菜单中的 bpmn.js群 即可😊.