otf-frontend/client/src/app/shared/models/bpmn.model.ts

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 import Modeler from 'bpmn-js/lib/Modeler';\r
  18 import Viewer from 'bpmn-js/lib/NavigatedViewer';\r
  19 import { FileTransferService } from 'app/shared/services/file-transfer.service';\r
  20 import { Observable } from 'rxjs';\r
  21 import { TestDefinitionService } from 'app/shared/services/test-definition.service';\r
  22 \r
  23 import { saveAs } from 'file-saver';\r
  24 //import { parseString } from 'xml2js';\r
  25 import { HostListener } from '@angular/core';\r
  26 \r
  27 export interface BpmnOptions {\r
  28     mode: 'viewer' | 'modeler',\r
  29     options: {\r
  30         container: any\r
  31     }\r
  32 }\r
  33 \r
  34 export class Bpmn {\r
  35 \r
  36     protected model: any;\r
  37     protected bpmnXml: String;\r
  38     private options: BpmnOptions;\r
  39 \r
  40     constructor(bpmnXml: String, options: BpmnOptions) {\r
  41         //check for required options\r
  42         if (!options.mode) {\r
  43             console.error('Bpmn options require: mode');\r
  44         }\r
  45 \r
  46         this.bpmnXml = bpmnXml;\r
  47         this.options = options;\r
  48 \r
  49         //setup model\r
  50         this.setModel();\r
  51 \r
  52         //render diagram\r
  53         this.renderDiagram();\r
  54     }\r
  55 \r
  56     // Getters\r
  57 \r
  58     public getModel() {\r
  59         return this.model;\r
  60     }\r
  61 \r
  62     public async getBpmnXml() {\r
  63         return new Promise((resolve, reject) => {\r
  64             this.model.saveXML({ format: true }, function (err, xml) {\r
  65                 if(err){\r
  66                     reject(err);\r
  67                 }\r
  68                 resolve(xml);\r
  69             })\r
  70         });\r
  71     }\r
  72 \r
  73     // Setters\r
  74 \r
  75     private setModel(options?) {\r
  76 \r
  77         if (this.model) {\r
  78             return -1;\r
  79         }\r
  80 \r
  81         let op = this.options.options;\r
  82 \r
  83         if (options) {\r
  84             op = options;\r
  85         }\r
  86 \r
  87         if (!op) {\r
  88             console.error('Options for the viewer/modeler must be provided');\r
  89             return -1;\r
  90         }\r
  91 \r
  92         //handle the mode (viewer or modeler)\r
  93         switch (this.options.mode.toLowerCase()) {\r
  94             case 'viewer':\r
  95                 this.model = new Viewer(op);\r
  96                 break;\r
  97 \r
  98             case 'modeler':\r
  99                 this.model = new Modeler(op);\r
 100                 break;\r
 101 \r
 102             default:\r
 103                 console.error('Mode must either be "viewer" or "modeler"');\r
 104                 return;\r
 105         }\r
 106 \r
 107     }\r
 108 \r
 109     public async setBpmnXml(xml) {\r
 110         this.bpmnXml = xml;\r
 111         await this.renderDiagram();\r
 112     }\r
 113 \r
 114     // Methods\r
 115 \r
 116     public async renderDiagram() {\r
 117         return new Promise((resolve, reject) => {\r
 118             if (this.bpmnXml) {\r
 119                 this.model.importXML(this.bpmnXml, (err) => {\r
 120                     if (!err) {\r
 121                         this.model.get('canvas').zoom('fit-viewport');\r
 122                         resolve(true)\r
 123                     } else {\r
 124                         console.error(err);\r
 125                         resolve(false);\r
 126                     }\r
 127                 });\r
 128             }\r
 129         })\r
 130     }\r
 131 \r
 132     public resize() {\r
 133         this.model.get('canvas').zoom('fit-viewport');\r
 134     }\r
 135 \r
 136     public download(saveName?) {\r
 137 \r
 138         this.model.saveXML({ format: true }, function (err, xml) {\r
 139             if (!saveName) {\r
 140                 let parser = new DOMParser();\r
 141                 let xmlDoc = parser.parseFromString(xml.toString(), "text/xml");\r
 142 \r
 143                 let id = xmlDoc.getElementsByTagName("bpmn:process")[0].attributes.getNamedItem("id").value;\r
 144                 \r
 145                 if (id) {\r
 146                     saveName = id;\r
 147                 } else {\r
 148                     saveName = 'workflow';\r
 149                 }\r
 150             }\r
 151 \r
 152             saveName += ".bpmn";\r
 153 \r
 154             let blob = new Blob([xml], { type: "application/xml" });\r
 155             saveAs(blob, saveName);\r
 156         })\r
 157     }\r
 158 \r
 159 }