bpmn-js介绍:
https://github.com/bpmn-io
1.导入流程图
var bpmnModeler = new BpmnJS({
container: '#canvas',
keyboard: {
bindTo: window
}
});
bpmnModeler.importXML(bpmnXML, function (err) {
if (err) {
return console.error('could not import BPMN 2.0 diagram', err);
}
var canvas = bpmnModeler.get('canvas');
canvas.zoom('fit-viewport');
});
2.导出流程图XML
bpmnModeler.saveXML({ format: true }, function (err, xml) {
if (err) {
return console.error('could not save BPMN 2.0 diagram', err);
}
xmldata = xml;
});
3.读取节点属性
ar eventBus = bpmnModeler.get('eventBus');
eventBus.on('element.click', function(evt) {
$('#hidNode').val(evt.element.id);
$('#hidNodeType').val(evt.element.type);
$('#hidNodeName').val(evt.element.businessObject.name);
})
4.更新节点名称
var modeling = bpmnModeler.get('modeling');
var shape = bpmnModeler.get('elementRegistry').get(nodeId);
modeling.updateProperties(shape, { name: "新名称" });
5.改变节点颜色
var elementToColor = bpmnModeler.get('elementRegistry').get('StartEvent_1');
var modeling = bpmnModeler.get('modeling');
modeling.setColor([elementToColor], {
stroke: 'green',
fill: 'rgba(0, 80, 0, 0.4)'
});
待整理……