// 监听节点选择变化(bpmnModeler.value是我创建的bpmn模型)
bpmnModeler.value.on('selection.changed', (e: any) => {
let modeling = bpmnModeler.value.get('modeling');//获取建模模块
const element = e.newSelection[0];
console.log(element);//这是你当前选择的节点
// 如果这个节点存在
if (element) {
// 修改名字
// element.businessObject.name='修改命名1';//第一种修改名字的方法(直接找到属性修改)
modeling.updateProperties(element, { name: '修改命名2' })//第二种修改名字的方法(使用modeling)
// 修改颜色1
modeling.setColor(element, {
fill: null,//这里也可以设置颜色,设置上就是内部填充的颜色
stroke: 'red',//这个是外面那一圈的颜色
})
// 修改负责人
modeling.updateProperties(element, { 'flowable:assignee': '负责人id' })
}
})
修改颜色方案2
//通过id获取元素并加上类名,通过类名设置css样式达到预期效果
//js部分
const canvas = bpmnModeler.value.get('canvas');
canvas.addMarker('节点id', 'highlight');
//css部份
.highlight.djs-shape .djs-visual> :nth-child(1) {
fill: blue !important;
stroke: blue !important;
fill-opacity: 0.2 !important;
}