背景
节点的文本标签不希望是通过节点编辑实现,而是拿到节点名字渲染上去,包括连接线
javascript">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)
}
}