From 9fbfb10898b38324d38508ee1c659800579da4eb Mon Sep 17 00:00:00 2001 From: Erik Amaru Ortiz Date: Fri, 4 Feb 2011 22:45:04 +0000 Subject: [PATCH] bpmn designer improvements --- workflow/engine/methods/bpmn/designer.php | 61 + workflow/engine/methods/bpmn/processmap.php | 13 +- workflow/engine/templates/bpmn/designer.html | 7 + workflow/engine/templates/bpmn/designer.js | 795 +++++++++++++ .../engine/templates/bpmn/processmap.html | 15 +- workflow/engine/templates/bpmn/processmap.js | 1040 ++++------------- 6 files changed, 1089 insertions(+), 842 deletions(-) create mode 100755 workflow/engine/methods/bpmn/designer.php create mode 100755 workflow/engine/templates/bpmn/designer.html create mode 100755 workflow/engine/templates/bpmn/designer.js diff --git a/workflow/engine/methods/bpmn/designer.php b/workflow/engine/methods/bpmn/designer.php new file mode 100755 index 000000000..3e53cc2dd --- /dev/null +++ b/workflow/engine/methods/bpmn/designer.php @@ -0,0 +1,61 @@ +setExtSkin( 'xtheme-gray'); + $oHeadPublisher->addExtJsScript('bpmn/MyWorkflow',true ); //adding a javascript file .js + $oHeadPublisher->addExtJsScript('bpmn/pmosExt', true ); //adding a javascript file .js + $oHeadPublisher->addExtJsScript('bpmn/TaskContext', true ); //adding a javascript file .js + $oHeadPublisher->addExtJsScript('bpmn/ProcessMapContext', true ); //adding a javascript file .js + $oHeadPublisher->addExtJsScript('bpmn/designer', true ); //adding a javascript file .js + $oHeadPublisher->addExtJsScript('bpmn/Annotation' ); + $oHeadPublisher->addExtJsScript('bpmn/FlowConnector'); + $oHeadPublisher->addExtJsScript('bpmn/GroupFigure'); + $oHeadPublisher->addExtJsScript('bpmn/bpmnShapes', true); // + $oHeadPublisher->addExtJsScript('bpmn/LoopingSubProcess'); // + $oHeadPublisher->addExtJsScript('bpmn/LoopingTask'); // + $oHeadPublisher->addExtJsScript('bpmn/Dataobject'); // + $oHeadPublisher->addExtJsScript('bpmn/Pool',true); + $oHeadPublisher->addExtJsScript('bpmn/Lane'); + + $oHeadPublisher->addExtJsScript('bpmn/EventEmptyStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventMessageStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventRuleStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventTimerStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventSignalStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventMulStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventLinkStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventEmptyInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventMessageRecInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventMessageSendInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventTimerInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventBoundaryTimerInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventErrorInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventCompInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventRuleInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventCancelInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventInterSignal'); + $oHeadPublisher->addExtJsScript('bpmn/EventMultipleInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventLinkInter'); + $oHeadPublisher->addExtJsScript('bpmn/EventEmptyEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventMessageEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventErrorEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventCompEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventTerminateEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventEndSignal'); + $oHeadPublisher->addExtJsScript('bpmn/EventMultipleEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventCancelEnd'); + $oHeadPublisher->addExtJsScript('bpmn/EventLinkEnd'); + + $oHeadPublisher->addExtJsScript('bpmn/GatewayInclusive' ); + $oHeadPublisher->addExtJsScript('bpmn/GatewayExclusiveData' ); + $oHeadPublisher->addExtJsScript('bpmn/GatewayExclusiveEvent' ); + $oHeadPublisher->addExtJsScript('bpmn/GatewayParallel' ); + $oHeadPublisher->addExtJsScript('bpmn/GatewayComplex' ); + $oHeadPublisher->addExtJsScript('bpmn/GridPanel'); + $oHeadPublisher->addExtJsScript('bpmn/SubProcess' ); + $oHeadPublisher->addExtJsScript('bpmn/ProcessOptions',true); + + $oHeadPublisher->addContent( 'bpmn/designer'); //adding a html file .html. + $oHeadPublisher->assign('pro_uid', (isset($_GET['PRO_UID']) ? $_GET['PRO_UID']: '')); + G::RenderPage('publish', 'extJs'); + diff --git a/workflow/engine/methods/bpmn/processmap.php b/workflow/engine/methods/bpmn/processmap.php index 93915b928..784e7924a 100755 --- a/workflow/engine/methods/bpmn/processmap.php +++ b/workflow/engine/methods/bpmn/processmap.php @@ -1,6 +1,14 @@ usingExtJs('ux/miframe'); + //$oHeadPublisher->setExtSkin( 'xtheme-gray'); $oHeadPublisher->addExtJsScript('bpmn/MyWorkflow',true ); //adding a javascript file .js $oHeadPublisher->addExtJsScript('bpmn/pmosExt', true ); //adding a javascript file .js @@ -56,5 +64,8 @@ $oHeadPublisher->addExtJsScript('bpmn/ProcessOptions',true); $oHeadPublisher->addContent( 'bpmn/processmap'); //adding a html file .html. + + $oHeadPublisher->assign('pro_title', $process->getProTitle()); + $oHeadPublisher->assign('pro_uid', $process->getProUid()); G::RenderPage('publish', 'extJs'); diff --git a/workflow/engine/templates/bpmn/designer.html b/workflow/engine/templates/bpmn/designer.html new file mode 100755 index 000000000..3c0ae162b --- /dev/null +++ b/workflow/engine/templates/bpmn/designer.html @@ -0,0 +1,7 @@ +
+
+
+
+
+
+
\ No newline at end of file diff --git a/workflow/engine/templates/bpmn/designer.js b/workflow/engine/templates/bpmn/designer.js new file mode 100755 index 000000000..dfccae4d6 --- /dev/null +++ b/workflow/engine/templates/bpmn/designer.js @@ -0,0 +1,795 @@ +Ext.onReady ( function() { + + workflow = new MyWorkflow("paintarea"); + workflow.setEnableSmoothFigureHandling(false); + workflow.scrollArea.width = 2000; + //For Undo and Redo Options + // workflow.getCommandStack().addCommandStackEventListener(new commandListener()); + //Getting process id from the URL using getUrlvars function + //var pro_uid = getUrlVars(); + + if(typeof pro_uid !== 'undefined') { + Ext.Ajax.request({ + url: 'openProcess.php?PRO_UID=' + pro_uid, + success: function(response) { + shapesData = createShapes(response.responseText,this); + createConnection(shapesData); + }, + failure: function(){ + Ext.Msg.alert ('Failure'); + } + }); + } + + + + /********************************************************************************** + * + * Do the Ext (Yahoo UI) Stuff + * + **********************************************************************************/ + var west= { + /*xtype :"panel", + title: 'Palette', + region: 'west', + split: false, + width: 75, + collapsible: false, + margins:'3 0 3 3', + cmargins:'3 3 3 3',*/ + id : 'palette', + title : 'Palette', + region : 'west', + width : 65, + border : false, + autoScroll : true, + collapsible :true, + split :true, + //collapseMode:'mini', + hideCollapseTool: false, + + items:{ + html:'
\n\ +

\n\ +

\n\ +

\n\ +

\n\ +

\n\ +

\n\ + \n\ +
' + } + }; + + var east= { + + id : 'eastPanel', + title : '', + region : 'east', + width : 150, + border : false, + autoScroll : true, + collapsible :true, + split :true, + collapseMode:'mini', + hideCollapseTool: false, + + items:{ + html:'east panel' + } + }; + + var north= { + xtype : "panel", + initialSize: 60, + split:false, + titlebar: false, + collapsible: false, + animate: false, + region : "north" + }; + + var south= { + xtype : "panel", + initialSize: 120, + height: 100, + split:true, + titlebar: false, + collapsible: true, + autoScroll:true, + animate: true, + region : "south", + items: { + region: 'center', + xtype: 'tabpanel', + items: [{ + title: 'Properties', + html: 'Properties' + }, + { + title: 'Debug Console', + html: 'Debug Console' + }] + } + }; + + var center= { + width:100, + height:2000, + xtype : "panel", + //autoScroll:true, + fitToFrame:true, + region : "center", + //bodyStyle: 'background-color:red; overflow:scroll; height:3000px', + + /*bodyCfg: { + tag: 'div', + cls: 'x-panel-body', // Default class not applied if Custom element specified + style: 'height:3000; overflow:scroll;', + html: 'Message' + },*/ + + }; + + var processObj = new ProcessOptions(); + + var main = new Ext.Panel({ + renderTo : "center1", + region : "center", + layout : "border", + autoScroll: true, + height : 1000, + width : 1300, + items : [west, north, center] + }); + + //Getting Process name and setting Title of center region to that processname + /*var urlparams = '?action=load&data={"uid":"'+ pro_uid +'"}'; + Ext.Ajax.request({ + url: "processes_Ajax.php"+ urlparams, + success: function(response) { + var processes = Ext.util.JSON.decode(response.responseText); + main.items.items[2].setTitle(processes.title.label); //items[2]=>center region + }, + failure: function(){ + Ext.Msg.alert ('Failure'); + } + });*/ + + //Get main into workflow object + workflow.main = main; + //items[3]=>'center region' + var centerRegionId = main.items.items[2].body.id; + canvas = Ext.get(centerRegionId); + + //Context Menu of ProcessMap + ProcessMapObj = new ProcessMapContext(); + contextCanvasMenu = new Ext.menu.Menu({ + items: [{ + text: 'Edit Process', + handler: ProcessMapObj.editProcess, + //icon: '/skins/ext/images/gray/shapes/more.gif', + iconCls: 'button_menu_ext ss_sprite ss_page_white_edit', + scope: this + }, { + text: 'Export Process', + handler: ProcessMapObj.exportProcess, + iconCls: 'button_menu_ext ss_sprite ss_script_go', + scope: this + }, { + text: 'Add Task', + handler: ProcessMapObj.addTask, + iconCls: 'button_menu_ext ss_sprite ss_layout_add', + scope: this + }, { + text: 'Add Subprocess', + handler: workflow.subProcess, + iconCls: 'button_menu_ext ss_sprite ss_layout_link', + scope: this + },/* { + text: 'Horizontal Line', + handler: ProcessMapObj.horiLine, + scope: this + }, { + text: 'Vertical Line', + handler: ProcessMapObj.vertiLine, + scope: this + }, { + text: 'Delete All Lines', + handler: ProcessMapObj.delLines, + scope: this + }, */{ + text: 'Process Permission', + iconCls: 'button_menu_ext ss_sprite ss_application_key', + handler: ProcessMapObj.processPermission, + scope: this + },{ + text: 'Process Supervisor', + iconCls: 'button_menu_ext ss_sprite ss_group', + menu: { // <-- submenu by nested config object + items: [ + // stick any markup in a menu + { + text: 'Supervisors', + iconCls: 'button_menu_ext ss_sprite ss_group', + handler: ProcessMapObj.processSupervisors + }, + { + text: 'DynaForm', + iconCls: 'button_menu_ext ss_sprite ss_application_form', + handler: ProcessMapObj.processDynaform + }, + { + text: 'Input Documents', + iconCls: 'button_menu_ext ss_sprite ss_page_white_put', + handler: ProcessMapObj.processIODoc + } + ] + } + },{ + text: 'Case Tracker', + iconCls: 'button_menu_ext ss_sprite ss_exclamation', + + menu: { // <-- submenu by nested config object + items: [ + // stick any markup in a menu + { + text: 'Properties', + iconCls: 'button_menu_ext ss_sprite ss_exclamation', + handler: ProcessMapObj.caseTrackerProperties, + scope:this + }, + { + text: 'Objects', + iconCls: 'button_menu_ext ss_sprite ss_exclamation', + handler: ProcessMapObj.caseTrackerObjects, + scope:this + } + ] + } + }, { + text: 'Process File Manager', + iconCls: 'button_menu_ext ss_sprite ss_folder', + menu: { // <-- submenu by nested config object + items: [ + // stick any markup in a menu + { + text: 'mailTemplates', + iconCls: 'button_menu_ext ss_sprite ss_email', + handler: ProcessMapObj.processFileManager + }, + { + text: 'public', + iconCls: 'button_menu_ext ss_sprite ss_folder_go', + handler: ProcessMapObj.processFileManager + } + ] + } + }] + }); + + canvas.on('contextmenu', function(e) { + e.stopEvent(); + this.workflow.contextX = e.xy[0]; + this.workflow.contextY = e.xy[1]; + var pmosExtObj = new pmosExt(); + //Load all the process Data + pmosExtObj.loadEditProcess(this); + pmosExtObj.loadProcessCategory(this); + this.contextCanvasMenu.showAt(e.getXY()); + }, this); + + canvas.on('click', function(e) { + e.stopEvent(); + this.workflow.contextClicked = false; + if(this.workflow.currentSelection != null) + this.workflow.disablePorts(this.workflow.currentSelection); + //Removes Flow menu + this.workflow.setCurrentSelection(null); + }, this); + + var simpleToolbar = new Ext.Toolbar('toolbar'); + simpleToolbar.addButton({ + text: 'Save', + cls: 'x-btn-text-icon scroll-bottom' + }); + simpleToolbar.addButton({ + text: 'Save As', + cls: 'x-btn-text-icon scroll-bottom' + }); + simpleToolbar.addButton({ + text: 'Undo', + cls: 'x-btn-text-icon' + }); + simpleToolbar.addButton({ + text: 'Redo', + cls: 'x-btn-text-icon' + }); + + var menu = new FlowMenu(workflow); + workflow.addSelectionListener(menu); + workflow.scrollArea = document.getElementById(centerRegionId).parentNode; + + + + + + var dragsource=new Ext.dd.DragSource("x-shapes-task", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnTask" + } + }); + var dragsource=new Ext.dd.DragSource("x-shapes-startEvent", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnEventEmptyStart" + } + }); + var dragsource=new Ext.dd.DragSource("x-shapes-interEvent", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnEventEmptyInter" + } + }); + var dragsource=new Ext.dd.DragSource("x-shapes-endEvent", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnEventEmptyEnd" + } + }); + var dragsource=new Ext.dd.DragSource("x-shapes-gateways", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnGatewayExclusiveData" + } + }); + /*var dragsource=new Ext.dd.DragSource("x-shapes-dataobject", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnDataobject" + } + }); + var dragsource=new Ext.dd.DragSource("x-shapes-pool", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnPool" + } + });*/ + var dragsource=new Ext.dd.DragSource("x-shapes-annotation", { + ddGroup:'TreeDD', + dragData:{ + name: "bpmnAnnotation" + } + }); + + + var droptarget=new Ext.dd.DropTarget(centerRegionId,{ + ddGroup:'TreeDD' + }); + + //Creating Pool + var oPool = new bpmnPool(workflow); + //workflow.addFigure(oPool,100,70); + if(workflow.taskNo == '') + workflow.taskNo= 0; //Initializing Count for the bpmnTask + var count = 0; + this.taskName=''; + droptarget.notifyDrop=function(dd, e, data) + { + if(data.name) + { + var xOffset = workflow.getAbsoluteX(); + var yOffset = workflow.getAbsoluteY(); + if(data.name == 'bpmnTask') + { + workflow.boundaryEvent = false; + } + + + NewShape = eval("new "+data.name+"(workflow)"); + NewShape.x = e.xy[0]; + NewShape.y = e.xy[1]; + NewShape.actiontype = 'addTask'; + + if(data.name == 'bpmnAnnotation') + { + NewShape.actiontype = 'addText'; + workflow.saveShape(NewShape); //Saving task when user drags and drops it + } + if(data.name == 'bpmnTask') + { + NewShape.actiontype = 'addTask'; + workflow.saveShape(NewShape); //Saving Annotations when user drags and drops it + // NewShape.taskName = workflow.taskName; + } + + + + + var scrollLeft = workflow.getScrollLeft(); + var scrollTop = workflow.getScrollTop(); + workflow.addFigure(NewShape,e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop); + return true; + } + } + + + function createConnection(shapes) + { + //var totaltask = shapes[0].length; //shapes[0] is an array for all the tasks + //var totalgateways = shapes[1].length; //shapes[1] is an array for all the gateways + //var totalevents = shapes[2].length; //shapes[2] is an array for all the events + var totalroutes = shapes.routes.length; //shapes[3] is an array for all the routes + + for(var i=0;i<=totalroutes-1;i++) + { + var sourceid = shapes.routes[i][1]; //getting source id for connection from Routes array + var targetid = shapes.routes[i][2]; //getting target id for connection from Routes array + + //After creating all the shapes, check one by one shape id + for(var conn =0; conn < this.workflow.figures.data.length ; conn++) + { + if(typeof this.workflow.figures.data[conn] === 'object') + { + if(sourceid == this.workflow.figures.data[conn].id){ + sourceObj = this.workflow.figures.data[conn]; + } + } + } + + for(var conn =0; conn < this.workflow.figures.data.length ; conn++) + { + if(typeof this.workflow.figures.data[conn] === 'object') + { + //If End Process or Evaluate + if(targetid == '-1' || typeof shapes.routes[i][5] != 'undefined' && shapes.routes[i][5] == 'EVALUATE') + { + targetObj = eval("new bpmnEventEmptyEnd (this.workflow)"); + this.workflow.addFigure(targetObj,sourceObj.x+67,sourceObj.y+60); + break; + } + else if(targetid == this.workflow.figures.data[conn].id ){ + targetObj = this.workflow.figures.data[conn]; + } + } + } + + + //Making Connections + var connObj = new DecoratedConnection(); + connObj.setSource(sourceObj.output1); + connObj.setTarget(targetObj.input2); + connObj.id = shapes.routes[i][0]; + this.workflow.addFigure(connObj); + + } + } + + + + + /*function getUrlVars() + { + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + + for(var i = 0; i < hashes.length; i++) + { + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + var pro_uid = vars["PRO_UID"]; + return pro_uid; + }*/ + + function createShapes(stringData,_4562) + { + + var responsearray = stringData.split("|"); + var jsonstring = new Array(); + var shapes = new Array(); + //var param = new Array(); + var shapeType = new Array(); + + for(var i=0; i<=responsearray.length-1;i++) + { + jsonstring[i] = responsearray[i].split(":"); + var param = jsonstring[i][0].replace(" ",""); + shapeType[i] = param; + switch(param) + { + case 'tasks': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'gateways': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'events': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'annotations': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'process': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'subprocess': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + case 'routes': + shapes[param] = new Array(); + shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); + break; + } + } + workflow.taskNo = 0; + //Create all shapes + for(var j=0;j< shapeType.length;j++) + { + // _4562.workflow.taskNo=0; + + switch(shapeType[j]) + { + case 'tasks': + for(var k=0;k"+msg; + } + + function saveProcess() + { + // console.dir(this.workflow); + + var tasks = new Array(); + var events = new Array(); + var gateways = new Array(); + var annotations = new Array(); + var subprocess = new Array(); + var l=0; + var m=0; + var n=0; + var p=0; + var r=0; + + for(var c = 0; c -
-
-
-
-
-
-
-
-
+
+
+
+
+
+
\ No newline at end of file diff --git a/workflow/engine/templates/bpmn/processmap.js b/workflow/engine/templates/bpmn/processmap.js index 3b53bb49c..5db554abd 100755 --- a/workflow/engine/templates/bpmn/processmap.js +++ b/workflow/engine/templates/bpmn/processmap.js @@ -1,853 +1,229 @@ Ext.onReady ( function() { - workflow = new MyWorkflow("paintarea"); - workflow.setEnableSmoothFigureHandling(false); - workflow.scrollArea.width = 2000; - //For Undo and Redo Options - // workflow.getCommandStack().addCommandStackEventListener(new commandListener()); - //Getting process id from the URL using getUrlvars function - var pro_uid = getUrlVars(); + workflow = new MyWorkflow("paintarea"); + workflow.setEnableSmoothFigureHandling(false); + workflow.scrollArea.width = 2000; + //For Undo and Redo Options + // workflow.getCommandStack().addCommandStackEventListener(new commandListener()); + //Getting process id from the URL using getUrlvars function + - if(typeof pro_uid !== 'undefined') { - Ext.Ajax.request({ - url: 'openProcess.php?PRO_UID=' + pro_uid, - success: function(response) { - shapesData = createShapes(response.responseText,this); - createConnection(shapesData); - }, - failure: function(){ - Ext.Msg.alert ('Failure'); - } - }); - } - - - - /********************************************************************************** - * - * Do the Ext (Yahoo UI) Stuff - * - **********************************************************************************/ - - - - var west= { - xtype :"panel", - title: 'Palette', - region: 'west', - split: false, - width: 75, - collapsible: false, - margins:'3 0 3 3', - cmargins:'3 3 3 3', - items:{ - html:'
\n\ -

\n\ -

\n\ -

\n\ -

\n\ -

\n\ -

\n\ - \n\ -
' - } - }; - - var north= { - xtype : "panel", - initialSize: 60, - split:false, - titlebar: false, - collapsible: false, - animate: false, - region : "north" - - }; - var south= { - xtype : "panel", - initialSize: 120, - height: 100, - split:true, - titlebar: false, - collapsible: true, - autoScroll:true, - animate: true, - region : "south", - items: { - region: 'center', - xtype: 'tabpanel', - items: [{ - title: 'Properties', - html: 'Properties' - }, - { - title: 'Debug Console', - html: 'Debug Console' - }] - } - }; - - var center= { - width:100, - height:200, - xtype : "panel", - titlebar: true, - title : "BPMN Processmap", - autoScroll:true, - fitToFrame:true, - region : "center" - - }; - - - - var processObj = new ProcessOptions(); - - var main = new Ext.Panel({ - tbar: [ - { - text: 'Save', - cls: 'x-btn-text-icon', - iconCls: 'button_menu_ext ss_sprite ss_disk', - handler: function() { - saveProcess(); - } - }, - { - text:'Save as' - }, - - { - text:'Undo', - iconCls: 'button_menu_ext ss_sprite ss_arrow_undo', - handler: function() { - workflow.getCommandStack().undo(); - } - - }, - - { - text:'Redo', - iconCls: 'button_menu_ext ss_sprite ss_arrow_redo', - handler: function() { - workflow.getCommandStack().redo(); - } - }, - - { - xtype: 'tbsplit', - iconCls: 'button_menu_ext ss_sprite ss_application', - text: 'Process', - menu: new Ext.menu.Menu({ - items: [{ - text : 'Dynaform', - iconCls: 'button_menu_ext ss_sprite ss_application_form', - handler : function() { - processObj.addDynaform(); - } - }, - { - text: 'Input Document', - iconCls: 'button_menu_ext ss_sprite ss_page_white_put', - handler : function() { - processObj.addInputDoc(); - } - },{ - text: 'Output Document', - iconCls: 'button_menu_ext ss_sprite ss_page_white_get', - - handler : function() { - processObj.addOutputDoc(); - } - },{ - text: 'Trigger', - iconCls: 'button_menu_ext ss_sprite ss_cog', - handler : function() { - processObj.addTriggers(); - } - }, - { - text: 'Report Table', - iconCls: 'button_menu_ext ss_sprite ss_table', - handler : function() { - processObj.addReportTable(); - } - }, - { - text: 'Database Connection', - iconCls: 'button_menu_ext ss_sprite ss_database_connect', - handler : function() { - processObj.dbConnection(); - } - }] - }) - - }, - { - text:'Zoom In', - iconCls: 'button_menu_ext ss_sprite ss_zoom_in', - handler: function() { - workflow.zoom('in'); - } - }, - { - text:'Zoom Out', - iconCls: 'button_menu_ext ss_sprite ss_zoom_out', - handler: function() { - workflow.zoom('out'); - } - } - ], - renderTo : "center1", - layout : "border", - autoScroll: true, - height : 1000, - width : 1300, - items : [west,north,center] - }); - - //Getting Process name and setting Title of center region to that processname - var urlparams = '?action=load&data={"uid":"'+ pro_uid +'"}'; + if(typeof pro_uid !== 'undefined') { Ext.Ajax.request({ - url: "processes_Ajax.php"+ urlparams, - success: function(response) { - var processes = Ext.util.JSON.decode(response.responseText); - main.items.items[2].setTitle(processes.title.label); //items[2]=>center region - }, - failure: function(){ - Ext.Msg.alert ('Failure'); - } - }); + url: 'openProcess.php?PRO_UID=' + pro_uid, + success: function(response) { + //shapesData = createShapes(response.responseText,this); + //createConnection(shapesData); + }, + failure: function(){ + Ext.Msg.alert ('Failure'); + } + }); + } - //Get main into workflow object - workflow.main = main; - //items[3]=>'center region' - var centerRegionId = main.items.items[2].body.id; - canvas = Ext.get(centerRegionId); + - //Context Menu of ProcessMap - ProcessMapObj = new ProcessMapContext(); - contextCanvasMenu = new Ext.menu.Menu({ + /********************************************************************************** + * + * Do the Ext (Yahoo UI) Stuff + * + **********************************************************************************/ + var west= { + id : 'palette', + title : 'Palette', + region : 'west', + width : 65, + border : false, + autoScroll : true, + collapsible :true, + split :true, + //collapseMode:'mini', + hideCollapseTool: false, + + items:{ + html:'
\n\ +

\n\ +

\n\ +

\n\ +

\n\ +

\n\ +

\n\ + \n\ +
' + } + }; + + var east= { + id : 'eastPanel', + title : '', + region : 'east', + width : 150, + border : false, + autoScroll : true, + collapsible :true, + split :true, + collapseMode:'mini', + hideCollapseTool: false, + + items:{ + html:'east panel' + } + }; + + var north= { + xtype : "panel", + initialSize: 60, + split:false, + titlebar: false, + collapsible: false, + animate: false, + region : "north" + }; + + var south= { + xtype : "panel", + initialSize: 120, + height: 100, + split:true, + titlebar: false, + collapsible: true, + autoScroll:true, + animate: true, + region : "south", + items: { + region: 'center', + xtype: 'tabpanel', items: [{ - text: 'Edit Process', - handler: ProcessMapObj.editProcess, - //icon: '/skins/ext/images/gray/shapes/more.gif', - iconCls: 'button_menu_ext ss_sprite ss_page_white_edit', - scope: this - }, { - text: 'Export Process', - handler: ProcessMapObj.exportProcess, - iconCls: 'button_menu_ext ss_sprite ss_script_go', - scope: this - }, { - text: 'Add Task', - handler: ProcessMapObj.addTask, - iconCls: 'button_menu_ext ss_sprite ss_layout_add', - scope: this - }, { - text: 'Add Subprocess', - handler: workflow.subProcess, - iconCls: 'button_menu_ext ss_sprite ss_layout_link', - scope: this - },/* { - text: 'Horizontal Line', - handler: ProcessMapObj.horiLine, - scope: this - }, { - text: 'Vertical Line', - handler: ProcessMapObj.vertiLine, - scope: this - }, { - text: 'Delete All Lines', - handler: ProcessMapObj.delLines, - scope: this - }, */{ - text: 'Process Permission', - iconCls: 'button_menu_ext ss_sprite ss_application_key', - handler: ProcessMapObj.processPermission, - scope: this - },{ - text: 'Process Supervisor', - iconCls: 'button_menu_ext ss_sprite ss_group', - menu: { // <-- submenu by nested config object - items: [ - // stick any markup in a menu - { - text: 'Supervisors', - iconCls: 'button_menu_ext ss_sprite ss_group', - handler: ProcessMapObj.processSupervisors - }, - { - text: 'DynaForm', - iconCls: 'button_menu_ext ss_sprite ss_application_form', - handler: ProcessMapObj.processDynaform - }, - { - text: 'Input Documents', - iconCls: 'button_menu_ext ss_sprite ss_page_white_put', - handler: ProcessMapObj.processIODoc - } - ] - } - },{ - text: 'Case Tracker', - iconCls: 'button_menu_ext ss_sprite ss_exclamation', - - menu: { // <-- submenu by nested config object - items: [ - // stick any markup in a menu - { - text: 'Properties', - iconCls: 'button_menu_ext ss_sprite ss_exclamation', - handler: ProcessMapObj.caseTrackerProperties, - scope:this - }, - { - text: 'Objects', - iconCls: 'button_menu_ext ss_sprite ss_exclamation', - handler: ProcessMapObj.caseTrackerObjects, - scope:this - } - ] - } - }, { - text: 'Process File Manager', - iconCls: 'button_menu_ext ss_sprite ss_folder', - menu: { // <-- submenu by nested config object - items: [ - // stick any markup in a menu - { - text: 'mailTemplates', - iconCls: 'button_menu_ext ss_sprite ss_email', - handler: ProcessMapObj.processFileManager - }, - { - text: 'public', - iconCls: 'button_menu_ext ss_sprite ss_folder_go', - handler: ProcessMapObj.processFileManager - } - ] - } + title: 'Properties', + html: 'Properties' + }, + { + title: 'Debug Console', + html: 'Debug Console' }] - }); + } + }; - canvas.on('contextmenu', function(e) { - e.stopEvent(); - this.workflow.contextX = e.xy[0]; - this.workflow.contextY = e.xy[1]; - var pmosExtObj = new pmosExt(); - //Load all the process Data - pmosExtObj.loadEditProcess(this); - pmosExtObj.loadProcessCategory(this); - this.contextCanvasMenu.showAt(e.getXY()); - }, this); + var center= { + region: 'center', + width:100, + height:2000, + xtype : "iframepanel", + title : "BPMN Processmap - " + pro_title, - canvas.on('click', function(e) { - e.stopEvent(); - this.workflow.contextClicked = false; - if(this.workflow.currentSelection != null) - this.workflow.disablePorts(this.workflow.currentSelection); - //Removes Flow menu - this.workflow.setCurrentSelection(null); - }, this); + frameConfig:{name:'designerFrame', id:'designerFrame'}, + defaultSrc : 'designer?PRO_UID=' + pro_uid, + loadMask:{msg:'Loading...'}, + bodyStyle:{height: (_BROWSER.screen.height-55) + 'px', overflow:'scroll'}, + width:'1024px' + }; - var simpleToolbar = new Ext.Toolbar('toolbar'); - simpleToolbar.addButton({ + var processObj = new ProcessOptions(); + + var main = new Ext.Panel({ + renderTo : "center1", + region : "center", + layout : "border", + autoScroll: true, + height : 1000, + width : 1300, + items : [north, center], + tbar: [ + { text: 'Save', - cls: 'x-btn-text-icon scroll-bottom' - }); - simpleToolbar.addButton({ - text: 'Save As', - cls: 'x-btn-text-icon scroll-bottom' - }); - simpleToolbar.addButton({ - text: 'Undo', - cls: 'x-btn-text-icon' - }); - simpleToolbar.addButton({ - text: 'Redo', - cls: 'x-btn-text-icon' - }); + cls: 'x-btn-text-icon', + iconCls: 'button_menu_ext ss_sprite ss_disk', + handler: function() { + saveProcess(); + } + }, { + text:'Save as' + }, { + text:'Undo', + iconCls: 'button_menu_ext ss_sprite ss_arrow_undo', + handler: function() { + document.getElementById('designerFrame').contentWindow.workflow.getCommandStack().undo(); + } + }, { + text:'Redo', + iconCls: 'button_menu_ext ss_sprite ss_arrow_redo', + handler: function() { + document.getElementById('designerFrame').contentWindow.workflow.getCommandStack().redo(); + } + }, { + xtype: 'tbsplit', + iconCls: 'button_menu_ext ss_sprite ss_application', + text: 'Process', + menu: new Ext.menu.Menu({ + items: [{ + text : 'Dynaform', + iconCls: 'button_menu_ext ss_sprite ss_application_form', + handler : function() { + processObj.addDynaform(); + } + }, { + text: 'Input Document', + iconCls: 'button_menu_ext ss_sprite ss_page_white_put', + handler : function() { + processObj.addInputDoc(); + } + }, { + text: 'Output Document', + iconCls: 'button_menu_ext ss_sprite ss_page_white_get', - var menu = new FlowMenu(workflow); - workflow.addSelectionListener(menu); - workflow.scrollArea = document.getElementById(centerRegionId).parentNode; - - var dragsource=new Ext.dd.DragSource("x-shapes-task", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnTask" - } - }); - var dragsource=new Ext.dd.DragSource("x-shapes-startEvent", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnEventEmptyStart" - } - }); - var dragsource=new Ext.dd.DragSource("x-shapes-interEvent", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnEventEmptyInter" - } - }); - var dragsource=new Ext.dd.DragSource("x-shapes-endEvent", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnEventEmptyEnd" - } - }); - var dragsource=new Ext.dd.DragSource("x-shapes-gateways", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnGatewayExclusiveData" - } - }); - /*var dragsource=new Ext.dd.DragSource("x-shapes-dataobject", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnDataobject" - } - }); - var dragsource=new Ext.dd.DragSource("x-shapes-pool", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnPool" - } - });*/ - var dragsource=new Ext.dd.DragSource("x-shapes-annotation", { - ddGroup:'TreeDD', - dragData:{ - name: "bpmnAnnotation" - } - }); - - - var droptarget=new Ext.dd.DropTarget(centerRegionId,{ - ddGroup:'TreeDD' - }); - - //Creating Pool - var oPool = new bpmnPool(workflow); - //workflow.addFigure(oPool,100,70); - if(workflow.taskNo == '') - workflow.taskNo= 0; //Initializing Count for the bpmnTask - var count = 0; - this.taskName=''; - droptarget.notifyDrop=function(dd, e, data) - { - if(data.name) - { - var xOffset = workflow.getAbsoluteX(); - var yOffset = workflow.getAbsoluteY(); - if(data.name == 'bpmnTask') + handler : function() { + processObj.addOutputDoc(); + } + }, { + text: 'Trigger', + iconCls: 'button_menu_ext ss_sprite ss_cog', + handler : function() { + processObj.addTriggers(); + } + }, { - workflow.boundaryEvent = false; - } - - - NewShape = eval("new "+data.name+"(workflow)"); - NewShape.x = e.xy[0]; - NewShape.y = e.xy[1]; - NewShape.actiontype = 'addTask'; - - if(data.name == 'bpmnAnnotation') - { - NewShape.actiontype = 'addText'; - workflow.saveShape(NewShape); //Saving task when user drags and drops it - } - if(data.name == 'bpmnTask') - { - NewShape.actiontype = 'addTask'; - workflow.saveShape(NewShape); //Saving Annotations when user drags and drops it - // NewShape.taskName = workflow.taskName; - } - - - - - var scrollLeft = workflow.getScrollLeft(); - var scrollTop = workflow.getScrollTop(); - workflow.addFigure(NewShape,e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop); - return true; - } - } - - - function createConnection(shapes) - { - //var totaltask = shapes[0].length; //shapes[0] is an array for all the tasks - //var totalgateways = shapes[1].length; //shapes[1] is an array for all the gateways - //var totalevents = shapes[2].length; //shapes[2] is an array for all the events - var totalroutes = shapes.routes.length; //shapes[3] is an array for all the routes - - for(var i=0;i<=totalroutes-1;i++) - { - var sourceid = shapes.routes[i][1]; //getting source id for connection from Routes array - var targetid = shapes.routes[i][2]; //getting target id for connection from Routes array - - //After creating all the shapes, check one by one shape id - for(var conn =0; conn < this.workflow.figures.data.length ; conn++) + text: 'Report Table', + iconCls: 'button_menu_ext ss_sprite ss_table', + handler : function() { + processObj.addReportTable(); + } + }, { - if(typeof this.workflow.figures.data[conn] === 'object') - { - if(sourceid == this.workflow.figures.data[conn].id){ - sourceObj = this.workflow.figures.data[conn]; - } - } + text: 'Database Connection', + iconCls: 'button_menu_ext ss_sprite ss_database_connect', + handler : function() { + processObj.dbConnection(); + } } + ] + }) - for(var conn =0; conn < this.workflow.figures.data.length ; conn++) - { - if(typeof this.workflow.figures.data[conn] === 'object') - { - //If End Process or Evaluate - if(targetid == '-1' || typeof shapes.routes[i][5] != 'undefined' && shapes.routes[i][5] == 'EVALUATE') - { - targetObj = eval("new bpmnEventEmptyEnd (this.workflow)"); - this.workflow.addFigure(targetObj,sourceObj.x+67,sourceObj.y+60); - break; - } - else if(targetid == this.workflow.figures.data[conn].id ){ - targetObj = this.workflow.figures.data[conn]; - } - } - } - - - //Making Connections - var connObj = new DecoratedConnection(); - connObj.setSource(sourceObj.output1); - connObj.setTarget(targetObj.input2); - connObj.id = shapes.routes[i][0]; - this.workflow.addFigure(connObj); - + }, { + text:'Zoom In', + iconCls: 'button_menu_ext ss_sprite ss_zoom_in', + handler: function() { + document.getElementById('designerFrame').contentWindow.workflow.zoom('in'); } - } - - - - - function getUrlVars() - { - var vars = [], hash; - var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); - - for(var i = 0; i < hashes.length; i++) - { - hash = hashes[i].split('='); - vars.push(hash[0]); - vars[hash[0]] = hash[1]; + }, { + text:'Zoom Out', + iconCls: 'button_menu_ext ss_sprite ss_zoom_out', + handler: function() { + document.getElementById('designerFrame').contentWindow.workflow.zoom('out'); } - var pro_uid = vars["PRO_UID"]; - return pro_uid; - } - - function createShapes(stringData,_4562) - { - - var responsearray = stringData.split("|"); - var jsonstring = new Array(); - var shapes = new Array(); - //var param = new Array(); - var shapeType = new Array(); - - for(var i=0; i<=responsearray.length-1;i++) - { - jsonstring[i] = responsearray[i].split(":"); - var param = jsonstring[i][0].replace(" ",""); - shapeType[i] = param; - switch(param) - { - case 'tasks': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'gateways': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'events': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'annotations': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'process': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'subprocess': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - case 'routes': - shapes[param] = new Array(); - shapes[param] = Ext.util.JSON.decode(jsonstring[i][1]); - break; - } - } - workflow.taskNo = 0; - //Create all shapes - for(var j=0;j< shapeType.length;j++) - { - // _4562.workflow.taskNo=0; - - switch(shapeType[j]) - { - case 'tasks': - for(var k=0;k"+msg; - } - - function saveProcess() - { - // console.dir(this.workflow); - - var tasks = new Array(); - var events = new Array(); - var gateways = new Array(); - var annotations = new Array(); - var subprocess = new Array(); - var l=0; - var m=0; - var n=0; - var p=0; - var r=0; - - for(var c = 0; c