From 6ccd61d3e0af56c20686cc6e1e5e9ff9053079ed Mon Sep 17 00:00:00 2001 From: Fernando Ontiveros Date: Tue, 1 Mar 2011 03:45:19 +0000 Subject: [PATCH] improving event drawing shapes --- workflow/engine/methods/bpmn/designer.php | 2 +- .../templates/bpmn/EventBoundaryTimerInter.js | 13 -- .../engine/templates/bpmn/EventEmptyStart.js | 65 +++++---- .../templates/bpmn/EventMessageStart.js | 135 +++++++++--------- .../engine/templates/bpmn/EventTimerStart.js | 103 +++++++------ workflow/engine/templates/bpmn/MyWorkflow.js | 2 +- 6 files changed, 168 insertions(+), 152 deletions(-) diff --git a/workflow/engine/methods/bpmn/designer.php b/workflow/engine/methods/bpmn/designer.php index c82d016ff..1e9c399de 100755 --- a/workflow/engine/methods/bpmn/designer.php +++ b/workflow/engine/methods/bpmn/designer.php @@ -17,8 +17,8 @@ $oHeadPublisher->addExtJsScript('bpmn/EventEmptyStart'); $oHeadPublisher->addExtJsScript('bpmn/EventMessageStart'); + $oHeadPublisher->addExtJsScript('bpmn/EventTimerStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventRuleStart'); - //$oHeadPublisher->addExtJsScript('bpmn/EventTimerStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventSignalStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventMulStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventLinkStart'); diff --git a/workflow/engine/templates/bpmn/EventBoundaryTimerInter.js b/workflow/engine/templates/bpmn/EventBoundaryTimerInter.js index 14c66161f..68ba991f8 100755 --- a/workflow/engine/templates/bpmn/EventBoundaryTimerInter.js +++ b/workflow/engine/templates/bpmn/EventBoundaryTimerInter.js @@ -29,19 +29,6 @@ this.graphics.fillEllipse(x_cir2,y_cir2,this.getWidth()-6,this.getHeight()-6); this.graphics.setColor("#adae5e"); this.graphics.drawEllipse(x_cir2,y_cir2,this.getWidth()-6,this.getHeight()-6); -/* -//drawing clock's minutes lines -this.graphics.setColor("#adae5e"); -//this.graphics.drawEllipse(x_cir3,y_cir3,this.getWidth()-20,this.getHeight()-20); -this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/1.3,this.getHeight()/2); -this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/2,this.getHeight()/4.5); -*/ - - -//var x_cir3=10; -//var y_cir3=10; -//this.graphics.setColor( "#f9faf2" ); -//this.graphics.fillEllipse(x_cir3,y_cir3,this.getWidth()-20,this.getHeight()-20); this.graphics.setColor("#adae5e"); //this.graphics.drawEllipse(x_cir3,y_cir3,this.getWidth()-20,this.getHeight()-20); this.graphics.drawLine(this.getWidth()/2.2,this.getHeight()/2,this.getWidth()/1.6,this.getHeight()/2); //horizontal line diff --git a/workflow/engine/templates/bpmn/EventEmptyStart.js b/workflow/engine/templates/bpmn/EventEmptyStart.js index 7cacc69e2..db4fbc9d5 100755 --- a/workflow/engine/templates/bpmn/EventEmptyStart.js +++ b/workflow/engine/templates/bpmn/EventEmptyStart.js @@ -1,14 +1,15 @@ bpmnEventEmptyStart=function(){ -VectorFigure.call(this); + VectorFigure.call(this); }; + bpmnEventEmptyStart.prototype=new VectorFigure; bpmnEventEmptyStart.prototype.type="bpmnEventEmptyStart"; -bpmnEventEmptyStart.prototype.paint=function(){ -VectorFigure.prototype.paint.call(this); -this.stroke=2; -if(typeof workflow.zoomfactor == 'undefined') - workflow.zoomfactor = 1; - //Set the Task Limitation +bpmnEventEmptyStart.prototype.paint=function() { + VectorFigure.prototype.paint.call(this); + if(typeof workflow.zoomfactor == 'undefined') + workflow.zoomfactor = 1; + + //Set the Limitation if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) { this.originalWidth = 30; this.originalHeight = 30; @@ -16,30 +17,34 @@ if(typeof workflow.zoomfactor == 'undefined') this.orgYPos = this.getY(); this.orgFontSize =this.fontSize; } - this.width = this.originalWidth * workflow.zoomfactor; - this.height = this.originalHeight * workflow.zoomfactor; - -var x_cir = 0; -var y_cir = 0; - -this.graphics.setColor("#c0c0c0"); -this.graphics.fillEllipse(x_cir+4,y_cir+4,this.getWidth(),this.getHeight()); -this.graphics.setStroke(this.stroke); -this.graphics.setColor( "#e4f7df" ); -this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -this.graphics.setColor("#4aa533"); -this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -this.graphics.paint(); - + this.width = this.originalWidth * workflow.zoomfactor; + this.height = this.originalHeight * workflow.zoomfactor; -/*Code Added to Dynamically shift Ports on resizing of shapes - **/ -if(this.output1!=null){ -this.output1.setPosition(this.width/2,this.height); -} -if(this.output2!=null){ -this.output2.setPosition(this.width,this.height/2); -} + var x_cir = 0; + var y_cir = 0; + + //draw the circle + this.graphics.setColor("#d0d0d0"); + this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight()); + this.graphics.setColor( "#F6FFDA" ); + this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(2); + this.graphics.setColor("#97C759"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(1); + this.graphics.setColor("#98C951"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + + this.graphics.paint(); + + + //Code Added to Dynamically shift Ports on resizing of shapes + if(this.output1!=null) { + this.output1.setPosition(this.width/2,this.height); + } + if(this.output2!=null){ + this.output2.setPosition(this.width,this.height/2); + } }; bpmnEventEmptyStart.prototype.setWorkflow=function(_40c5){ diff --git a/workflow/engine/templates/bpmn/EventMessageStart.js b/workflow/engine/templates/bpmn/EventMessageStart.js index 73febb8ec..da889c333 100755 --- a/workflow/engine/templates/bpmn/EventMessageStart.js +++ b/workflow/engine/templates/bpmn/EventMessageStart.js @@ -1,88 +1,89 @@ bpmnEventMessageStart=function(){ -VectorFigure.call(this); -//Setting width and height values as per the zoom ratio -if(typeof workflow.zoomWidth != 'undefined' || typeof workflow.zoomHeight != 'undefined') - this.setDimension(workflow.zoomWidth, workflow.zoomHeight); -else - this.setDimension(30,30); -this.stroke = 3; + VectorFigure.call(this); }; + bpmnEventMessageStart.prototype=new VectorFigure; bpmnEventMessageStart.prototype.type="bpmnEventMessageStart"; bpmnEventMessageStart.prototype.paint=function(){ -VectorFigure.prototype.paint.call(this); -if (this.getWidth() < 30 || this.getHeight() < 30) { - this.setDimension(30, 30); - } -var x_cir = 0; -var y_cir = 0; + VectorFigure.prototype.paint.call(this); + if(typeof workflow.zoomfactor == 'undefined') + workflow.zoomfactor = 1; -this.graphics.setColor("#c0c0c0"); -this.graphics.fillEllipse(x_cir+5,y_cir+5,this.getWidth(),this.getHeight()); + //Set the Limitation + if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) { + this.originalWidth = 30; + this.originalHeight = 30; + this.orgXPos = this.getX(); + this.orgYPos = this.getY(); + this.orgFontSize =this.fontSize; + } + this.width = this.originalWidth * workflow.zoomfactor; + this.height = this.originalHeight * workflow.zoomfactor; + + var x_cir = 0; + var y_cir = 0; + + //draw the circle + this.graphics.setColor("#d0d0d0"); + this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight()); + this.graphics.setColor( "#F6FFDA" ); + this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(2); + this.graphics.setColor("#97C759"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(1); + this.graphics.setColor("#98C951"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -this.graphics.setStroke(this.stroke); -this.graphics.setColor( "#e4f7df"); -this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -this.graphics.setColor("#4aa533"); -this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -this.graphics.setStroke(0); -//var x=new Array(12,12,35,35,23.5,12); -//var y=new Array(16,33,33,17,26,17); -var x=new Array(this.getWidth()/3.75,this.getWidth()/3.75,this.getWidth()/1.28,this.getWidth()/1.28,this.getWidth()/1.91,this.getWidth()/3.75); -var y=new Array(this.getHeight()/2.64,this.getHeight()/1.36,this.getHeight()/1.36,this.getHeight()/2.8,this.getHeight()/1.7,this.getHeight()/2.8); -this.graphics.setColor( "#4aa533" ); -//this.graphics.fillPolygon(x,y); -this.graphics.setColor("#4aa533"); -this.graphics.drawPolygon(x,y); -//var x_tri=new Array(12,23.5,35); -//var y_tri=new Array(13,22,13); -var x_tri=new Array(this.getWidth()/3.75,this.getWidth()/1.91,this.getWidth()/1.28); -var y_tri=new Array(this.getHeight()/3.46,this.getHeight()/2.04,this.getHeight()/3.46); -this.graphics.setColor( "#e4f7df" ); -//this.graphics.fillPolygon(x_tri,y_tri); -this.graphics.setColor("#4aa533"); -this.graphics.drawPolygon(x_tri,y_tri); -this.graphics.paint(); + //draw the mail icon + var cw = this.getWidth(); + var ch = this.getHeight(); + var x = new Array( cw*0.25, cw*0.25, cw*0.78, cw*0.78, cw*0.52, cw*0.25, cw*0.25, cw*0.78); + var y = new Array( ch*0.31, ch*0.71, ch*0.71, ch*0.32, ch*0.52, ch*0.32, ch*0.31, ch*0.31); + this.graphics.setColor("#4aa533"); + this.graphics.drawPolygon(x,y); -/*Code Added to Dynamically shift Ports on resizing of shapes - **/ -if(this.input1!=null){ -this.input1.setPosition(0,this.height/2); -} -if(this.output1!=null){ -this.output1.setPosition(this.width/2,this.height); -} -if(this.input2!=null){ -this.input2.setPosition(this.width/2,0); -} -if(this.output2!=null){ -this.output2.setPosition(this.width,this.height/2); -} + this.graphics.paint(); + + /*Code Added to Dynamically shift Ports on resizing of shapes + **/ + if(this.input1!=null){ + this.input1.setPosition(0,this.height/2); + } + if(this.output1!=null){ + this.output1.setPosition(this.width/2,this.height); + } + if(this.input2!=null){ + this.input2.setPosition(this.width/2,0); + } + if(this.output2!=null){ + this.output2.setPosition(this.width,this.height/2); + } }; bpmnEventMessageStart.prototype.setWorkflow=function(_40c5){ -VectorFigure.prototype.setWorkflow.call(this,_40c5); -if(_40c5!=null){ + VectorFigure.prototype.setWorkflow.call(this,_40c5); + if(_40c5!=null){ var eventPortName = ['output1','output2']; var eventPortType = ['OutputPort','OutputPort']; var eventPositionX= [this.width/2,this.width]; var eventPositionY= [this.height,this.height/2]; - + for(var i=0; i< eventPortName.length ; i++){ - eval('this.'+eventPortName[i]+' = new '+eventPortType[i]+'()'); //Create New Port - eval('this.'+eventPortName[i]+'.setWorkflow(_40c5)'); //Add port to the workflow - eval('this.'+eventPortName[i]+'.setName("'+eventPortName[i]+'")'); //Set PortName - eval('this.'+eventPortName[i]+'.setZOrder(-1)'); //Set Z-Order of the port to -1. It will be below all the figure - eval('this.'+eventPortName[i]+'.setBackgroundColor(new Color(255, 255, 255))'); //Setting Background of the port to white - eval('this.'+eventPortName[i]+'.setColor(new Color(255, 255, 255))'); //Setting Border of the port to white - eval('this.addPort(this.'+eventPortName[i]+','+eventPositionX[i]+', '+eventPositionY[i]+')'); //Setting Position of the port - } -} + eval('this.'+eventPortName[i]+' = new '+eventPortType[i]+'()'); //Create New Port + eval('this.'+eventPortName[i]+'.setWorkflow(_40c5)'); //Add port to the workflow + eval('this.'+eventPortName[i]+'.setName("'+eventPortName[i]+'")'); //Set PortName + eval('this.'+eventPortName[i]+'.setZOrder(-1)'); //Set Z-Order of the port to -1. It will be below all the figure + eval('this.'+eventPortName[i]+'.setBackgroundColor(new Color(255, 255, 255))'); //Setting Background of the port to white + eval('this.'+eventPortName[i]+'.setColor(new Color(255, 255, 255))'); //Setting Border of the port to white + eval('this.addPort(this.'+eventPortName[i]+','+eventPositionX[i]+', '+eventPositionY[i]+')'); //Setting Position of the port + } + } }; bpmnEventMessageStart.prototype.getContextMenu=function(){ -if(this.id != null){ - this.workflow.handleContextMenu(this); -} + if(this.id != null){ + this.workflow.handleContextMenu(this); + } }; diff --git a/workflow/engine/templates/bpmn/EventTimerStart.js b/workflow/engine/templates/bpmn/EventTimerStart.js index 18ef084a1..22feeb57c 100755 --- a/workflow/engine/templates/bpmn/EventTimerStart.js +++ b/workflow/engine/templates/bpmn/EventTimerStart.js @@ -1,50 +1,73 @@ bpmnEventTimerStart=function(){ -VectorFigure.call(this); -//Setting width and height values as per the zoom ratio -if(typeof workflow.zoomWidth != 'undefined' || typeof workflow.zoomHeight != 'undefined') - this.setDimension(workflow.zoomWidth, workflow.zoomHeight); -else - this.setDimension(30,30); -this.stroke = 2; + VectorFigure.call(this); }; + bpmnEventTimerStart.prototype=new VectorFigure; bpmnEventTimerStart.prototype.type="bpmnEventTimerStart"; bpmnEventTimerStart.prototype.paint=function(){ -VectorFigure.prototype.paint.call(this); -var x_cir1=0; -var y_cir1=0; + VectorFigure.prototype.paint.call(this); + if(typeof workflow.zoomfactor == 'undefined') + workflow.zoomfactor = 1; -this.graphics.setColor("#c0c0c0"); -this.graphics.fillEllipse(x_cir1+5,y_cir1+5,this.getWidth(),this.getHeight()); -this.graphics.setStroke(this.stroke); -this.graphics.setColor( "#e4f7df" ); -this.graphics.fillEllipse(x_cir1,y_cir1,this.getWidth(),this.getHeight()); -this.graphics.setColor("#4aa533"); -this.graphics.drawEllipse(x_cir1,y_cir1,this.getWidth(),this.getHeight()); -var x_cir2=5; -var y_cir2=5; -this.graphics.setColor( "#e4f7df" ); -this.graphics.fillEllipse(x_cir2,y_cir2,this.getWidth()-10,this.getHeight()-10); -this.graphics.setColor("#4aa533"); -this.graphics.drawEllipse(x_cir2,y_cir2,this.getWidth()-10,this.getHeight()-10); -this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/1.3,this.getHeight()/2); //horizontal line -this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/2,this.getHeight()/4.5); //vertical line -this.graphics.paint(); + //Set the Limitation + if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) { + this.originalWidth = 30; + this.originalHeight = 30; + this.orgXPos = this.getX(); + this.orgYPos = this.getY(); + this.orgFontSize =this.fontSize; + } + this.width = this.originalWidth * workflow.zoomfactor; + this.height = this.originalHeight * workflow.zoomfactor; + + var x_cir = 0; + var y_cir = 0; + + //draw the circle + this.graphics.setColor("#d0d0d0"); + this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight()); + this.graphics.setColor( "#F6FFDA" ); + this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(2); + this.graphics.setColor("#97C759"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); + this.graphics.setStroke(1); + this.graphics.setColor("#98C951"); + this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); -/*Code Added to Dynamically shift Ports on resizing of shapes - **/ -if(this.input1!=null){ -this.input1.setPosition(0,this.height/2); -} -if(this.output1!=null){ -this.output1.setPosition(this.width/2,this.height); -} -if(this.input2!=null){ -this.input2.setPosition(this.width/2,0); -} -if(this.output2!=null){ -this.output2.setPosition(this.width,this.height/2); -} + //draw the clock + var cw = this.getWidth(); + var ch = this.getHeight(); + this.graphics.setColor("#98C951"); + this.graphics.drawEllipse(cw*0.15, ch*0.15, ch*0.7, ch*0.7 ); + + var x = new Array( cw*0.60, cw*0.50, cw*0.75, 0.5); + var y = new Array( ch*0.31, ch*0.50, ch*0.50, 0.5); + this.graphics.setColor("#4aa533"); + //this.graphics.drawPolygon(x,y); + this.graphics.drawLine( cw*0.60, ch*0.31, cw*0.50, ch*0.50); + this.graphics.drawLine( cw*0.75, ch*0.50, cw*0.50, ch*0.50); + + + //this.graphics.setColor("#4aa533"); + //this.graphics.drawEllipse(x_cir2,y_cir2,this.getWidth()-10,this.getHeight()-10); + //this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/1.3,this.getHeight()/2); //horizontal line + //this.graphics.drawLine(this.getWidth()/2,this.getHeight()/2,this.getWidth()/2,this.getHeight()/4.5); //vertical line + this.graphics.paint(); + + //Code Added to Dynamically shift Ports on resizing of shapes/ + if(this.input1!=null){ + this.input1.setPosition(0,this.height/2); + } + if(this.output1!=null){ + this.output1.setPosition(this.width/2,this.height); + } + if(this.input2!=null){ + this.input2.setPosition(this.width/2,0); + } + if(this.output2!=null){ + this.output2.setPosition(this.width,this.height/2); + } }; bpmnEventTimerStart.prototype.setWorkflow=function(_40c5){ diff --git a/workflow/engine/templates/bpmn/MyWorkflow.js b/workflow/engine/templates/bpmn/MyWorkflow.js index 1ab781c6c..8d2d62f64 100755 --- a/workflow/engine/templates/bpmn/MyWorkflow.js +++ b/workflow/engine/templates/bpmn/MyWorkflow.js @@ -584,7 +584,7 @@ MyWorkflow.prototype.AddEventStartContextMenu=function(oShape) type:'bpmnEventRuleStart', scope:oShape, handler: MyWorkflow.prototype.toggleShapes - }, { + }/*, { text: 'Signal', type:'bpmnEventSignalStart', scope:oShape,