Activiti Model Editor

Activiti Model Editor组件

我的 了解Activiti Explorer及其Vaadin实现方式博文里提到Activiti Explorer使用的是Vaadin架构，但是Activiti 模型编辑器组件却没用使用Vaadin架构，而是采用Angular.JS的MVC模式。Activiti 模型编辑器组件的客户端代码位于Activiti\modules\activiti-webapp-explorer2\src\main\webapp\editor-app\。

该目录下的editor.html是Activiti Modeler Editor的主界面HTML代码

其中palette区是通过Angular.JS使用stencilsets\bpmn2.0\icons下多个子目录内的PNG图像形成的多组列表。其节点层次关系获取相关代码为：

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

editor.html中的视图与两个控制器进行了绑定:

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

保存模型操作

保存模型操作，是通过toolbar-default-actions.js中的SaveModel方法完成的，它需要将三部分信息传给服务器：

• 模型的元数据：例如模型名称、分类、创建时间、最后一次更新时间等等
• 模型JSON数据：将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",