如何自己实现一个丝滑的流程图绘制工具（八) 创建节点的文本标签

背景

节点的文本标签不希望是通过节点编辑实现，而是拿到节点名字渲染上去，包括连接线

第一版

createLabel(element, name, parent) {
      const modeling = this.bpmnModeler.get('modeling')
      let labelCenter = {}
      // 连接线上的标签
      if (element.type === 'bpmn:SequenceFlow') {
        labelCenter = {
          x: (element.waypoints[0].x + element.waypoints[element.waypoints.length - 1].x) / 2,
          y: (element.waypoints[0].y + element.waypoints[element.waypoints.length - 1].y) / 2 - 5
        }
        const businessObject = element.businessObject
        if (!element.labels.length) {
          modeling.createLabel(setLabel(element, name), labelCenter, {
            id: `${businessObject.id}_label`,
            businessObject: businessObject,
            di: element.di,
            width: 80
          })
        } else {
          modeling.updateLabel(element, name)
        }
      } else {
        const renderer = this.bpmnModeler.get('customRender')
        if (!element.businessObject.$parent) {
          element.businessObject.$parent = parent
        }
        element.businessObject.name = name
        const circleElement = document.querySelector(`g[data-element-id="${element.id}"]`)
        if (!circleElement) return
        const p = circleElement.querySelector('.djs-visual')
        renderer.drawShape(p, element)
      }
    }

第二版是比较符合规则简单

 createLabel(element, name) {
      const modeling = this.bpmnModeler.get('modeling')
      // 使用 modeling API 添加标签
      modeling.updateLabel(element, name)
    }