improving event drawing shapes

This commit is contained in:
Fernando Ontiveros
2011-03-01 03:45:19 +00:00
parent c81092d389
commit 6ccd61d3e0
6 changed files with 168 additions and 152 deletions

View File

@@ -17,8 +17,8 @@
$oHeadPublisher->addExtJsScript('bpmn/EventEmptyStart'); $oHeadPublisher->addExtJsScript('bpmn/EventEmptyStart');
$oHeadPublisher->addExtJsScript('bpmn/EventMessageStart'); $oHeadPublisher->addExtJsScript('bpmn/EventMessageStart');
$oHeadPublisher->addExtJsScript('bpmn/EventTimerStart');
//$oHeadPublisher->addExtJsScript('bpmn/EventRuleStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventRuleStart');
//$oHeadPublisher->addExtJsScript('bpmn/EventTimerStart');
//$oHeadPublisher->addExtJsScript('bpmn/EventSignalStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventSignalStart');
//$oHeadPublisher->addExtJsScript('bpmn/EventMulStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventMulStart');
//$oHeadPublisher->addExtJsScript('bpmn/EventLinkStart'); //$oHeadPublisher->addExtJsScript('bpmn/EventLinkStart');

View File

@@ -29,19 +29,6 @@ this.graphics.fillEllipse(x_cir2,y_cir2,this.getWidth()-6,this.getHeight()-6);
this.graphics.setColor("#adae5e"); this.graphics.setColor("#adae5e");
this.graphics.drawEllipse(x_cir2,y_cir2,this.getWidth()-6,this.getHeight()-6); 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.setColor("#adae5e");
//this.graphics.drawEllipse(x_cir3,y_cir3,this.getWidth()-20,this.getHeight()-20); //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 this.graphics.drawLine(this.getWidth()/2.2,this.getHeight()/2,this.getWidth()/1.6,this.getHeight()/2); //horizontal line

View File

@@ -1,14 +1,15 @@
bpmnEventEmptyStart=function(){ bpmnEventEmptyStart=function(){
VectorFigure.call(this); VectorFigure.call(this);
}; };
bpmnEventEmptyStart.prototype=new VectorFigure; bpmnEventEmptyStart.prototype=new VectorFigure;
bpmnEventEmptyStart.prototype.type="bpmnEventEmptyStart"; bpmnEventEmptyStart.prototype.type="bpmnEventEmptyStart";
bpmnEventEmptyStart.prototype.paint=function(){ bpmnEventEmptyStart.prototype.paint=function() {
VectorFigure.prototype.paint.call(this); VectorFigure.prototype.paint.call(this);
this.stroke=2; if(typeof workflow.zoomfactor == 'undefined')
if(typeof workflow.zoomfactor == 'undefined')
workflow.zoomfactor = 1; workflow.zoomfactor = 1;
//Set the Task Limitation
//Set the Limitation
if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) { if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) {
this.originalWidth = 30; this.originalWidth = 30;
this.originalHeight = 30; this.originalHeight = 30;
@@ -19,27 +20,31 @@ if(typeof workflow.zoomfactor == 'undefined')
this.width = this.originalWidth * workflow.zoomfactor; this.width = this.originalWidth * workflow.zoomfactor;
this.height = this.originalHeight * workflow.zoomfactor; this.height = this.originalHeight * workflow.zoomfactor;
var x_cir = 0; var x_cir = 0;
var y_cir = 0; var y_cir = 0;
this.graphics.setColor("#c0c0c0"); //draw the circle
this.graphics.fillEllipse(x_cir+4,y_cir+4,this.getWidth(),this.getHeight()); this.graphics.setColor("#d0d0d0");
this.graphics.setStroke(this.stroke); this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight());
this.graphics.setColor( "#e4f7df" ); this.graphics.setColor( "#F6FFDA" );
this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
this.graphics.setColor("#4aa533"); this.graphics.setStroke(2);
this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); this.graphics.setColor("#97C759");
this.graphics.paint(); 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 //Code Added to Dynamically shift Ports on resizing of shapes
**/ if(this.output1!=null) {
if(this.output1!=null){ this.output1.setPosition(this.width/2,this.height);
this.output1.setPosition(this.width/2,this.height); }
} if(this.output2!=null){
if(this.output2!=null){ this.output2.setPosition(this.width,this.height/2);
this.output2.setPosition(this.width,this.height/2); }
}
}; };
bpmnEventEmptyStart.prototype.setWorkflow=function(_40c5){ bpmnEventEmptyStart.prototype.setWorkflow=function(_40c5){

View File

@@ -1,68 +1,69 @@
bpmnEventMessageStart=function(){ bpmnEventMessageStart=function(){
VectorFigure.call(this); 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;
}; };
bpmnEventMessageStart.prototype=new VectorFigure; bpmnEventMessageStart.prototype=new VectorFigure;
bpmnEventMessageStart.prototype.type="bpmnEventMessageStart"; bpmnEventMessageStart.prototype.type="bpmnEventMessageStart";
bpmnEventMessageStart.prototype.paint=function(){ bpmnEventMessageStart.prototype.paint=function(){
VectorFigure.prototype.paint.call(this); VectorFigure.prototype.paint.call(this);
if (this.getWidth() < 30 || this.getHeight() < 30) { if(typeof workflow.zoomfactor == 'undefined')
this.setDimension(30, 30); workflow.zoomfactor = 1;
//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;
} }
var x_cir = 0; this.width = this.originalWidth * workflow.zoomfactor;
var y_cir = 0; this.height = this.originalHeight * workflow.zoomfactor;
this.graphics.setColor("#c0c0c0"); var x_cir = 0;
this.graphics.fillEllipse(x_cir+5,y_cir+5,this.getWidth(),this.getHeight()); var y_cir = 0;
this.graphics.setStroke(this.stroke); //draw the circle
this.graphics.setColor( "#e4f7df"); this.graphics.setColor("#d0d0d0");
this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight());
this.graphics.setColor("#4aa533"); this.graphics.setColor( "#F6FFDA" );
this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight()); this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
this.graphics.setStroke(0); this.graphics.setStroke(2);
//var x=new Array(12,12,35,35,23.5,12); this.graphics.setColor("#97C759");
//var y=new Array(16,33,33,17,26,17); this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
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); this.graphics.setStroke(1);
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("#98C951");
this.graphics.setColor( "#4aa533" ); this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
//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();
/*Code Added to Dynamically shift Ports on resizing of shapes //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);
this.graphics.paint();
/*Code Added to Dynamically shift Ports on resizing of shapes
**/ **/
if(this.input1!=null){ if(this.input1!=null){
this.input1.setPosition(0,this.height/2); this.input1.setPosition(0,this.height/2);
} }
if(this.output1!=null){ if(this.output1!=null){
this.output1.setPosition(this.width/2,this.height); this.output1.setPosition(this.width/2,this.height);
} }
if(this.input2!=null){ if(this.input2!=null){
this.input2.setPosition(this.width/2,0); this.input2.setPosition(this.width/2,0);
} }
if(this.output2!=null){ if(this.output2!=null){
this.output2.setPosition(this.width,this.height/2); this.output2.setPosition(this.width,this.height/2);
} }
}; };
bpmnEventMessageStart.prototype.setWorkflow=function(_40c5){ bpmnEventMessageStart.prototype.setWorkflow=function(_40c5){
VectorFigure.prototype.setWorkflow.call(this,_40c5); VectorFigure.prototype.setWorkflow.call(this,_40c5);
if(_40c5!=null){ if(_40c5!=null){
var eventPortName = ['output1','output2']; var eventPortName = ['output1','output2'];
var eventPortType = ['OutputPort','OutputPort']; var eventPortType = ['OutputPort','OutputPort'];
var eventPositionX= [this.width/2,this.width]; var eventPositionX= [this.width/2,this.width];
@@ -77,12 +78,12 @@ if(_40c5!=null){
eval('this.'+eventPortName[i]+'.setColor(new Color(255, 255, 255))'); //Setting Border 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.addPort(this.'+eventPortName[i]+','+eventPositionX[i]+', '+eventPositionY[i]+')'); //Setting Position of the port
} }
} }
}; };
bpmnEventMessageStart.prototype.getContextMenu=function(){ bpmnEventMessageStart.prototype.getContextMenu=function(){
if(this.id != null){ if(this.id != null){
this.workflow.handleContextMenu(this); this.workflow.handleContextMenu(this);
} }
}; };

View File

@@ -1,50 +1,73 @@
bpmnEventTimerStart=function(){ bpmnEventTimerStart=function(){
VectorFigure.call(this); 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;
}; };
bpmnEventTimerStart.prototype=new VectorFigure; bpmnEventTimerStart.prototype=new VectorFigure;
bpmnEventTimerStart.prototype.type="bpmnEventTimerStart"; bpmnEventTimerStart.prototype.type="bpmnEventTimerStart";
bpmnEventTimerStart.prototype.paint=function(){ bpmnEventTimerStart.prototype.paint=function(){
VectorFigure.prototype.paint.call(this); VectorFigure.prototype.paint.call(this);
var x_cir1=0; if(typeof workflow.zoomfactor == 'undefined')
var y_cir1=0; workflow.zoomfactor = 1;
this.graphics.setColor("#c0c0c0"); //Set the Limitation
this.graphics.fillEllipse(x_cir1+5,y_cir1+5,this.getWidth(),this.getHeight()); if(typeof this.limitFlag == 'undefined' || this.limitFlag == false) {
this.graphics.setStroke(this.stroke); this.originalWidth = 30;
this.graphics.setColor( "#e4f7df" ); this.originalHeight = 30;
this.graphics.fillEllipse(x_cir1,y_cir1,this.getWidth(),this.getHeight()); this.orgXPos = this.getX();
this.graphics.setColor("#4aa533"); this.orgYPos = this.getY();
this.graphics.drawEllipse(x_cir1,y_cir1,this.getWidth(),this.getHeight()); this.orgFontSize =this.fontSize;
var x_cir2=5; }
var y_cir2=5; this.width = this.originalWidth * workflow.zoomfactor;
this.graphics.setColor( "#e4f7df" ); this.height = this.originalHeight * workflow.zoomfactor;
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();
/*Code Added to Dynamically shift Ports on resizing of shapes var x_cir = 0;
**/ var y_cir = 0;
if(this.input1!=null){
this.input1.setPosition(0,this.height/2); //draw the circle
} this.graphics.setColor("#d0d0d0");
if(this.output1!=null){ this.graphics.fillEllipse(x_cir+2,y_cir+2,this.getWidth(),this.getHeight());
this.output1.setPosition(this.width/2,this.height); this.graphics.setColor( "#F6FFDA" );
} this.graphics.fillEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
if(this.input2!=null){ this.graphics.setStroke(2);
this.input2.setPosition(this.width/2,0); this.graphics.setColor("#97C759");
} this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
if(this.output2!=null){ this.graphics.setStroke(1);
this.output2.setPosition(this.width,this.height/2); this.graphics.setColor("#98C951");
} this.graphics.drawEllipse(x_cir,y_cir,this.getWidth(),this.getHeight());
//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){ bpmnEventTimerStart.prototype.setWorkflow=function(_40c5){

View File

@@ -584,7 +584,7 @@ MyWorkflow.prototype.AddEventStartContextMenu=function(oShape)
type:'bpmnEventRuleStart', type:'bpmnEventRuleStart',
scope:oShape, scope:oShape,
handler: MyWorkflow.prototype.toggleShapes handler: MyWorkflow.prototype.toggleShapes
}, { }/*, {
text: 'Signal', text: 'Signal',
type:'bpmnEventSignalStart', type:'bpmnEventSignalStart',
scope:oShape, scope:oShape,