You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
5.1 KiB
130 lines
5.1 KiB
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
|
|
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> |
|
<script src="js/jstools.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script> |
|
|
|
<script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script> |
|
|
|
<script src="js/Color.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script> |
|
<script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script> |
|
|
|
<style type="text/css" media="screen"> |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div class="wrapper"> |
|
<div id="pb1"></div> |
|
<div id="overlayBox" > |
|
<div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div> |
|
<div id="diagramHolder" class="diagramHolder"></div> |
|
<div class="diagram-info" id="diagramInfo"></div> |
|
</div> |
|
</div> |
|
<script language='javascript'> |
|
var DiagramGenerator = {}; |
|
var pb1; |
|
$(document).ready(function(){ |
|
var query_string = {}; |
|
var query = window.location.search.substring(1); |
|
var vars = query.split("&"); |
|
for (var i=0;i<vars.length;i++) { |
|
var pair = vars[i].split("="); |
|
query_string[pair[0]] = pair[1]; |
|
} |
|
|
|
var processDefinitionId = query_string["processDefinitionId"]; |
|
var processInstanceId = query_string["processInstanceId"]; |
|
|
|
console.log("Initialize progress bar"); |
|
|
|
pb1 = new $.ProgressBar({ |
|
boundingBox: '#pb1', |
|
label: 'Progressbar!', |
|
on: { |
|
complete: function() { |
|
console.log("Progress Bar COMPLETE"); |
|
this.set('label', 'complete!'); |
|
if (processInstanceId) { |
|
ProcessDiagramGenerator.drawHighLights(processInstanceId); |
|
} |
|
}, |
|
valueChange: function(e) { |
|
this.set('label', e.newVal + '%'); |
|
} |
|
}, |
|
value: 0 |
|
}); |
|
console.log("Progress bar inited"); |
|
|
|
ProcessDiagramGenerator.options = { |
|
diagramBreadCrumbsId: "diagramBreadCrumbs", |
|
diagramHolderId: "diagramHolder", |
|
diagramInfoId: "diagramInfo", |
|
on: { |
|
click: function(canvas, element, contextObject){ |
|
var mouseEvent = this; |
|
console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
|
|
if (contextObject.getProperty("type") == "callActivity") { |
|
var processDefinitonKey = contextObject.getProperty("processDefinitonKey"); |
|
var processDefinitons = contextObject.getProperty("processDefinitons"); |
|
var processDefiniton = processDefinitons[0]; |
|
console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject); |
|
|
|
// Load processDefinition |
|
ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId); |
|
} |
|
}, |
|
rightClick: function(canvas, element, contextObject){ |
|
var mouseEvent = this; |
|
console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
}, |
|
over: function(canvas, element, contextObject){ |
|
var mouseEvent = this; |
|
//console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
|
|
// TODO: show tooltip-window with contextObject info |
|
ProcessDiagramGenerator.showActivityInfo(contextObject); |
|
}, |
|
out: function(canvas, element, contextObject){ |
|
var mouseEvent = this; |
|
//console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject); |
|
|
|
ProcessDiagramGenerator.hideInfo(); |
|
} |
|
} |
|
}; |
|
|
|
var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/"; |
|
var shortenedUrl = window.document.location.href.replace(baseUrl, ""); |
|
baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/")); |
|
|
|
ActivitiRest.options = { |
|
processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?", |
|
processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?", |
|
processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?" |
|
}; |
|
|
|
if (processDefinitionId) { |
|
ProcessDiagramGenerator.drawDiagram(processDefinitionId); |
|
|
|
} else { |
|
alert("processDefinitionId parameter is required"); |
|
} |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|