cl
2024-02-23 73bc0656dc15cd9cc95c6f4f51949ef0437088ce
提交 | 用户 | 时间
71e81e 1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4   
5   <link rel="stylesheet" href="style.css" type="text/css" media="screen">
6   <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
7   <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
8   
9   <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
10   <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
11   <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
12   
13   <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
14   <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
15   <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
16   <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
17   <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
18   <script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
19   <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
20   
21   <style type="text/css" media="screen">
22     
23   </style>
24 </head>
25 <body>
26 <div class="wrapper">
27   <div id="pb1"></div>
28   <div id="overlayBox" >
29     <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
30     <div id="diagramHolder" class="diagramHolder"></div>
31     <div class="diagram-info" id="diagramInfo"></div>
32   </div>
33 </div>
34 <script language='javascript'>
35 var DiagramGenerator = {};
36 var pb1;
37 $(document).ready(function(){
38   var query_string = {};
39   var query = window.location.search.substring(1);
40   var vars = query.split("&");
41   for (var i=0;i<vars.length;i++) {
42     var pair = vars[i].split("=");
43     query_string[pair[0]] = pair[1];
44   } 
45   
46   var processDefinitionId = query_string["processDefinitionId"];
47   var processInstanceId = query_string["processInstanceId"];
48   
49   console.log("Initialize progress bar");
50   
51   pb1 = new $.ProgressBar({
52     boundingBox: '#pb1',
53     label: 'Progressbar!',
54     on: {
55       complete: function() {
56         console.log("Progress Bar COMPLETE");
57         this.set('label', 'complete!');
58         if (processInstanceId) {
59           ProcessDiagramGenerator.drawHighLights(processInstanceId);
60         }
61       },
62       valueChange: function(e) {
63         this.set('label', e.newVal + '%');
64       }
65     },
66     value: 0
67   });
68   console.log("Progress bar inited");
69   
70   ProcessDiagramGenerator.options = {
71     diagramBreadCrumbsId: "diagramBreadCrumbs",
72     diagramHolderId: "diagramHolder",
73     diagramInfoId: "diagramInfo",
74     on: {
75       click: function(canvas, element, contextObject){
76         var mouseEvent = this;
77         console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
78
79         if (contextObject.getProperty("type") == "callActivity") {
80           var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
81           var processDefinitons = contextObject.getProperty("processDefinitons");
82           var processDefiniton = processDefinitons[0];
83           console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);
84
85           // Load processDefinition
86         ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
87         }
88       },
89       rightClick: function(canvas, element, contextObject){
90         var mouseEvent = this;
91         console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
92       },
93       over: function(canvas, element, contextObject){
94         var mouseEvent = this;
95         //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
96
97         // TODO: show tooltip-window with contextObject info
98         ProcessDiagramGenerator.showActivityInfo(contextObject);
99       },
100       out: function(canvas, element, contextObject){
101         var mouseEvent = this;
102         //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
103
104         ProcessDiagramGenerator.hideInfo();
105       }
106     }
107   };
108   
109   var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
110   var shortenedUrl = window.document.location.href.replace(baseUrl, "");
111   baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));
112   
113   ActivitiRest.options = {
114     processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?",
115     processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
116     processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
117   };
118   
119   if (processDefinitionId) {
120     ProcessDiagramGenerator.drawDiagram(processDefinitionId);
121     
122   } else {
123     alert("processDefinitionId parameter is required");
124   }
125 });
126
127
128 </script>
129 </body>
130 </html>