ActivitiModelEditor

Activiti Model Editor组件

1. stencil-controller.js
2. Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\main\StencilsetRestResource.java
3. Activiti\modules\activiti-webapp-explorer2\src\main\resources\stencilset.json

• stencil-controller.js&＃xff1a;处理对canvas中BPMN元素的操作&＃xff0c;很多处理是通过editor目录下的QRYX库完成的
• toolbar-controller.js&＃xff1a;处理对工具栏的操作&＃xff0c;很多处理由configuration\toolbar-default-actions.js完成

保存模型操作

• 模型的元数据&＃xff1a;例如模型名称、分类、创建时间、最后一次更新时间等等
• 模型JSON数据&＃xff1a;将canvas内的图像数据转换成JSON数据UTF8字符串
  

  {"resourceId": 53,"properties": { "process_id": "process", "name": "", "documentation": "", "process_author": "", "process_version": "", "process_namespace": "http://www.activiti.org/processdef", "executionlisteners": "", "eventlisteners": ""},"stencil": { "id": "BPMNDiagram"},"childShapes": [ {  "resourceId": "sid-4F7484B9-11EC-4FCE-8950-FEFFB723D88B",  "properties": {   "overrideid": "",   "name": "",   "documentation": "",   "executionlisteners": "",   "initiator": "",   "formkeydefinition": "",   "formproperties": ""  },  "stencil": {   "id": "StartNoneEvent"  },  "childShapes": [],  "outgoing": [   {    "resourceId": "sid-B589A0D9-FA79-4C12-95B7-253E72480384"   }  ],  "bounds": {   "lowerRight": {    "x": 259,    "y": 139   },   "upperLeft": {    "x": 229,    "y": 109   }  },  "dockers": [] }, {  "resourceId": "sid-1A762474-62B9-4F3D-A81C-1ADD46AF7D2F",  "properties": {   "overrideid": "",   "name": "",   "documentation": "",   "asynchronousdefinition": "false",   "exclusivedefinition": "false",   "executionlisteners": "",   "multiinstance_type": "None",   "multiinstance_cardinality": "",   "multiinstance_collection": "",   "multiinstance_variable": "",   "multiinstance_condition": "",   "isforcompensation": "false",   "usertaskassignment": "",   "formkeydefinition": "",   "duedatedefinition": "",   "prioritydefinition": "",   "formproperties": "",   "tasklisteners": ""  },  "stencil": {   "id": "UserTask"  },  "childShapes": [],  "outgoing": [   {    "resourceId": "sid-4134C10E-B589-42FF-AACC-463D35D52016"   }  ],  "bounds": {   "lowerRight": {    "x": 746,    "y": 172   },   "upperLeft": {    "x": 646,    "y": 92   }  },  "dockers": [] }, {  "resourceId": "sid-B22A5CAB-94D0-419E-BB1E-E8538C6A7283",  "properties": {   "overrideid": "",   "name": "",   "documentation": "",   "executionlisteners": ""  },  "stencil": {   "id": "EndNoneEvent"  },  "childShapes": [],  "outgoing": [],  "bounds": {   "lowerRight": {    "x": 1089,    "y": 138   },   "upperLeft": {    "x": 1061,    "y": 110   }  },  "dockers": [] }, {  "resourceId": "sid-B589A0D9-FA79-4C12-95B7-253E72480384",  "properties": {   "overrideid": "",   "name": "",   "documentation": "",   "conditionsequenceflow": "",   "executionlisteners": "",   "defaultflow": "false"  },  "stencil": {   "id": "SequenceFlow"  },  "childShapes": [],  "outgoing": [   {    "resourceId": "sid-1A762474-62B9-4F3D-A81C-1ADD46AF7D2F"   }  ],  "bounds": {   "lowerRight": {    "x": 645.5626565925471,    "y": 131.10730365650525   },   "upperLeft": {    "x": 259.12484340745283,    "y": 124.26769634349473   }  },  "dockers": [   {    "x": 15,    "y": 15   },   {    "x": 50,    "y": 40   }  ],  "target": {   "resourceId": "sid-1A762474-62B9-4F3D-A81C-1ADD46AF7D2F"  } }, {  "resourceId": "sid-4134C10E-B589-42FF-AACC-463D35D52016",  "properties": {   "overrideid": "",   "name": "",   "documentation": "",   "conditionsequenceflow": "",   "executionlisteners": "",   "defaultflow": "false"  },  "stencil": {   "id": "SequenceFlow"  },  "childShapes": [],  "outgoing": [   {    "resourceId": "sid-B22A5CAB-94D0-419E-BB1E-E8538C6A7283"   }  ],  "bounds": {   "lowerRight": {    "x": 1060.676003953202,    "y": 130.93202152143962   },   "upperLeft": {    "x": 746.595480421798,    "y": 124.30235347856038   }  },  "dockers": [   {    "x": 50,    "y": 40   },   {    "x": 14,    "y": 14   }  ],  "target": {   "resourceId": "sid-B22A5CAB-94D0-419E-BB1E-E8538C6A7283"  } }],"bounds": { "lowerRight": {  "x": 1200,  "y": 1050 }, "upperLeft": {  "x": 0,  "y": 0 }},"stencilset": { "url": "stencilsets/bpmn2.0/bpmn2.0.json", "namespace": "http://b3mn.org/stencilset/bpmn2.0#"},"ssextensions": []
  }

• 模型的SVG图像数据&＃xff1a;将canvas中的SVG图像数据经过过滤处理而得

• 通过RepositoryService的saveModel方法将模型的元数据存入数据库的ACT_RE_MODEL表
• 通过RepositoryService的addModelEditorSource方法将模型JSON数据UTF8字符串存入数据库的ACT_GE_BYTEARRAY表
• 通过Apache™ Batik SVG Toolkit将模型的SVG图像数据转换成PNG格式&＃xff0c;通过RepositoryService的addModelEditorSourceExtra方法将PNG图像存入数据库的ACT_GE_BYTEARRAY表

Activiti Explorer操作已保存模型

显示已保存模型

1. 选择模型&＃xff0c;会调用EditorProcessDefinitionPage类的showProcessDefinitionDetail方法
2. EditorProcessDefinitionDetailPanel类的initUI方法调用initProcessDefinitionInfo方法&＃xff0c;它会加入EditorProcessDefinitionInfoComponent实例
3. 在构造EditorProcessDefinitionInfoComponent实例时&＃xff0c;其initImage方法会被调用&＃xff0c;通过RepositoryService的getModelEditorSourceExtra方法获得PNG格式图像&＃xff0c;最终被显示到浏览器界面上。

部署已保存模型

1. 通过RepositoryService的getModelEditorSource方法获得模型JSON数据的UTF8字符串
2. 通过FasterXML/jackson-databind转换成Java对象树
3. 通过Activiti\modules\activiti-json-converter\src\main\java\org\activiti\editor\language\json\converter\BpmnJsonConverter.java将模型JSON数据的Java对象树转换成BpmnModel实例
4. 通过Activiti\modules\activiti-bpmn-converter\src\main\java\org\activiti\bpmn\converter\BpmnXMLConverter.java 将BpmnModel实例转成BPMN XML数据
5. 通过RepositoryService的createDeployment方法将BPMN XML数据进行部署

导出已保存模型

1. 通过RepositoryService的getModelEditorSource方法获得模型数据的JSON字符串
2. 通过FasterXML/jackson-databind转换成Java对象树
3. 通过Activiti\modules\activiti-json-converter\src\main\java\org\activiti\editor\language\json\converter\BpmnJsonConverter.java将模型JSON数据的Java对象树转换成BpmnModel实例
4. 通过Activiti\modules\activiti-bpmn-converter\src\main\java\org\activiti\bpmn\converter\BpmnXMLConverter.java 将BpmnModel实例转成BPMN XML数据

编辑已保存模型

1. Activiti\modules\activiti-webapp-explorer2\src\main\webapp\editor-app\app.js中的监听器处理$includeContentLoaded事件&＃xff0c;调用了fetchModel方法
2. Activiti\modules\activiti-modeler\src\main\java\org\activiti\rest\editor\model\ModelEditorJsonRestResource.java处理该REST请求&＃xff0c;返回由RepositoryService的getModel和getModelEditorSource方法获得Activiti模型元数据和JSON数据

导入BPMN模型

1. 通过Activiti\modules\activiti-bpmn-converter\src\main\java\org\activiti\bpmn\converter\BpmnXMLConverter.java 将BPMN XML数据转换成BpmnModel实例
2. 通过BpmnModel实例生成模型的元数据&＃xff0c;通过RepositoryService的saveModel方法将模型的元数据存入数据库的ACT_RE_MODEL表
3. 通过Activiti\modules\activiti-json-converter\src\main\java\org\activiti\editor\language\json\converter\BpmnJsonConverter.java将BpmnModel实例转换成模型JSON数据的Java对象树&＃xff0c;通过RepositoryService的addModelEditorSource方法将模型JSON数据UTF8字符串存入数据库的ACT_GE_BYTEARRAY表

• 这里BpmnXMLConverter和BpmnJsonConverter用的比较频繁&＃xff0c;而且成对出现。为什么不跳过中间的BpmnModel&＃xff1f;
• 导入BPMN模型为什么不生成PNG图像&＃xff1f;
• 数据库存储的模型数据不采用BPMN XML格式而是采用JSON格式&＃xff0c;很灵活&＃xff0c;可以随意添加Activiti扩展内容。但是如果没有现成的JSON schema&＃xff0c;分析起来够麻烦。