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

背景

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

createLabel(element, name, parent) {
      const modeling = this.bpmnModeler.get('modeling')
      let labelCenter = {}
      // 连接线上的标签
      if (element.type === 'bpmn:SequenceFlow') {
        let xData = element.waypoints.map(item => item.x)
        xData = sortedUniq(xData).reduce((pre, next) => {
          return pre + next
        }, 0)
        let yData = element.waypoints.map(item => item.y)
        yData = sortedUniq(yData).reduce((pre, next) => {
          return pre + next
        }, 0)
        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: name.length > 6 ? 80 : name.length * 11
          })
        } else {
          modeling.updateLabel(element, name)
        }
      } else {
        const renderer = this.bpmnModeler.get('customRender')
        if (!element.businessObject.$parent) {
          element.businessObject.$parent = parent
        }
        console.log(name, 'name')

        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)
      }
    }