流程编辑器bpmnjs的改造2：将设计器的功能和应用分离开来

这个编辑器来自git上的一个基于若依系统整合Activiti的开源项目，地址是：https://gitee.com/study_badcat/ry_mp_activiti.git，这里对作者说声抱歉，第一章忘了说。

我希望这个设计器尽可能独立，不要每次都要重新编译才能适配新的项目，因此，将设计器的功能和使用分别放到index.js和前端页面上。index.js代码实现编辑器的基本功能：

import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from '../resources/properties-panel/provider/activiti';
import activitiModdleDescriptor from '../resources/activiti.json';
import customTranslate from '../resources/customTranslate/customTranslate';
import customControlsModule from '../resources/customControls';
import diagramXML from '../resources/newDiagram.bpmn';
//数据库信息模型
window.TProcessModel={};
//工作流属性
window.pocessShape;
//当前选中的task
window.currentTaskShape;
//最近创建的task
window.addedTask;
//缩放比例
var scale=1.0;
window.initBpmnDesigner=function(container,canvas,propertiesPanelID)
{ 
// 添加翻译组件
var customTranslateModule = {
  translate: ['value', customTranslate]
};
window.bpmnModeler = new BpmnModeler({
  container: canvas,
  propertiesPanel: {
parent: propertiesPanelID
  },
  additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
customControlsModule,
customTranslateModule
  ],
  moddleExtensions: {
activiti:activitiModdleDescriptor
  }
});
clickTask();
shapeAdded();
rootChangeReSetForm();
}
//新建文件
window.addnewModel=function(){
createDiagram(diagramXML, bpmnModeler);
};
//加载模型数据
window.loadModel=function(bpmnXml){
createDiagram(bpmnXml, bpmnModeler);
};
//取得模型数据
window.getProcessModel=function(){
return TProcessModel;
};
//设置模型数据
window.setProcessModel=function(newProcessModel){
createDiagram(newProcessModel.values, bpmnModeler);
TProcessModel=newProcessModel;
};
//加载流程实例，用颜色标记进度
window.loadInstance=function(bpmnXml,colorSet){
var colorList=getColorList(colorSet);
createDiagram(bpmnXml, bpmnModeler);
setTimeout(function () {
for (var i in colorList) {
  setColor(colorList[i],bpmnModeler);
}
 }, 200);
};
//导出SVG
window.saveSVG=async function() {
try {
const result = await bpmnModeler.saveSVG();
const { svg } = result;
var svgBlob = new Blob([svg], {
type: "image/svg+xml"
});
var downloadLink = document.createElement("a");
downloadLink.download = "bpmn.svg";
downloadLink.innerHTML = "Get BPMN SVG";
downloadLink.href = window.URL.createObjectURL(svgBlob);
downloadLink.onclick = function(event) {
document.body.removeChild(event.target);
};
downloadLink.style.visibility = "hidden";
document.body.appendChild(downloadLink);
downloadLink.click();
} catch (err) {
console.log(err);
}
};
//导出XML
window.saveXML=async function() {
try {
const result = await bpmnModeler.saveXML({ format: true });
const { xml } = result;
var xmlBlob = new Blob([xml], {
  type: "application/bpmn20-xml;charset=UTF-8,"
});
var downloadLink = document.createElement("a");
downloadLink.download = "diagram.bpmn20.xml";
downloadLink.innerHTML = "Get BPMN XML";
downloadLink.href = window.URL.createObjectURL(xmlBlob);
downloadLink.onclick = function(event) {
document.body.removeChild(event.target);
};
downloadLink.style.visibility = "hidden";
document.body.appendChild(downloadLink);
downloadLink.click();
} catch (err) {
console.log(err);
}
};
//根据XML创建编辑器对象
window.createDiagram=async function(xml, bpmnModeler){
try {
const result = await bpmnModeler.importXML(xml);
//取得模型的关键信息
var elementRegistry = bpmnModeler.get('elementRegistry');
var processElement=elementRegistry.filter((item) => item.type === "bpmn:Process");
if(processElement.length>0){
window.pocessShape=processElement[0];
var object = window.pocessShape.businessObject;
window.TProcessModel={};
window.TProcessModel.processKey=isEmpty(object.id)?"":object.id;
window.TProcessModel.deptId=isEmpty(object.deptmentId)?"":object.deptmentId;
window.TProcessModel.name=isEmpty(object.name)?"":object.name;
window.TProcessModel.formId=isEmpty(object.formKey)?"":object.formKey;
if(document.getElementById("modelName")!=null){
document.getElementById("modelName").innerHTML=isEmpty(object.name)?"":object.name;
}
}
fitviewport();
} catch (err) {
console.log(err.message, err.warnings);
}
};
//撤销
window.undo=function undo(){
const command=bpmnModeler.get('commandStack');
command.undo();
};
//重做
window.redo=function(){
const command=bpmnModeler.get('commandStack');
command.redo();
};
//缩放
window.zoom=function(radio){
var newScale=!radio?1.0:scale+radio;
bpmnModeler.get('canvas').zoom(newScale);
scale=newScale;
};
//适合画布
window.fitviewport=function(){
var canvas = bpmnModeler.get("canvas");
scale=canvas.zoom("fit-viewport", "auto");
};
//文件内容编码
function setEncoded(link, name, data) {
const encodedData = encodeURIComponent(data);
if (data) {
link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
link.download = name;
}
};
//判断字符串是否为空
function isEmpty(str) {
if(str== null || str== "" || str== "undefined") {
return true;
} else {
return false;
}
}
//设置颜色
function setColor(json,bpmnModeler) {
var modeling = bpmnModeler.get('modeling');
var elementRegistry = bpmnModeler.get('elementRegistry')
var elementToColor = elementRegistry.get(json.name);
if(elementToColor){
modeling.setColor([elementToColor], {
stroke: json.stroke,
fill: json.fill
});
}
}
//根据节点设置取得节点颜色
function getColorList(data){
var ColorJson=[]
for(var k in data['highLine']){
var par={
"name": data['highLine'][k],
"stroke":"green",
"fill":"green"
}
ColorJson.push(par)
}
for(var k in data['highPoint']){
var par={
"name": data['highPoint'][k],
"stroke":"gray",
"fill":"#eae9e9"
}
ColorJson.push(par)
}
for(var k in data['iDo']){
var par={
"name": data['iDo'][k],
"stroke":"green",
"fill":"#a3d68e"
}
ColorJson.push(par)
}
for(var k in data['waitingToDo']){
var par={
"name": data['waitingToDo'][k],
"stroke":"green",
"fill":"yellow"
}
ColorJson.push(par)
}
return ColorJson
}
//如果是点击了用户任务节点，则保存对象到变量
function clickTask() {
const eventBus = bpmnModeler.get('eventBus')
var elementRegistry = bpmnModeler.get('elementRegistry')
const eventTypes = ['element.click'];
eventTypes.forEach(function(eventType) {
eventBus.on(eventType, function(e) {
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
window.addedTask=window.pocessShape=window.currentTaskShape=null;
if(shape.type == 'bpmn:UserTask'){
window.currentTaskShape=shape;
}else if(shape.type == 'bpmn:Process'){
window.pocessShape=shape;
}
})
})
}
//更改了流程属性，保存新的值
function rootChangeReSetForm() {
const eventBus = bpmnModeler.get('eventBus')
var elementRegistry = bpmnModeler.get('elementRegistry')
const eventTypes = ['element.changed'];
eventTypes.forEach(function(eventType) {
eventBus.on(eventType, function(e) {
if (e && e.element.type == 'bpmn:Process'){
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
var object = shape.businessObject;
var object = window.pocessShape.businessObject;
window.TProcessModel.processKey=isEmpty(object.id)?"":object.id;
window.TProcessModel.deptId=isEmpty(object.deptmentId)?"":object.deptmentId;
window.TProcessModel.name=isEmpty(object.name)?"":object.name;
window.TProcessModel.formId=isEmpty(object.formKey)?"":object.formKey;
if(document.getElementById("modelName")!=null){
document.getElementById("modelName").innerHTML=isEmpty(object.name)?"":object.name;
}
}
})
})
}
//添加了新用户任务到画布，则保存对象到变量
function shapeAdded() {
const eventBus = bpmnModeler.get('eventBus')
var elementRegistry = bpmnModeler.get('elementRegistry');
const eventTypes = ['shape.added'];
eventTypes.forEach(function(eventType) {
eventBus.on(eventType, function(e) {
var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
window.addedTask=window.pocessShape=window.currentTaskShape=null;
if(shape.type == 'bpmn:UserTask'){
window.addedTask=shape;
}
})
})
}

里面的一些前端document的调用是我测试时候加上的，很乱，没来得及整理，就这样吧。

这样前端就可以：

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="./index.js"></script>
<script>
$(function(){
$.getScript("./index.js",function(){
window.initBpmnDesigner($('#js-drop-zone'),$('#js-canvas'),'#js-properties-panel');
window.addnewModel();
});
});
//导出XML
function exportXml(){
this.saveXML();
}
</script>

类似这样通过设计器的按钮调用编辑器的功能了，不知道说明白了没有。