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

背景

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

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.businessObjectif (!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 = nameconst circleElement = document.querySelector(`g[data-element-id="${element.id}"]`)if (!circleElement) returnconst p = circleElement.querySelector('.djs-visual')renderer.drawShape(p, element)}}