fixing annotation connector, now we are using a connection instead a simple line

This commit is contained in:
Fernando Ontiveros
2011-02-25 20:11:03 +00:00
parent 2d84a01517
commit 65a1373e91
3 changed files with 328 additions and 86 deletions

View File

@@ -44,85 +44,75 @@ ArrowLine.prototype.paint=function(){
this.graphics.drawPolyLine(rotX,rotY);
this.graphics.paint();
};
/*
DottedConnection=function(){
ArrowLine.call(this);
this.sourcePort=null;
this.targetPort=null;
this.lineSegments=[];
this.setColor(new Color(0,0,115));
this.setLineWidth(1);
ArrowLine.call(this);
this.sourcePort=null;
this.targetPort=null;
this.lineSegments=[];
this.setColor(new Color(0,0,115));
this.setLineWidth(1);
};
DottedConnection.prototype=new ConnectionDecorator();
DottedConnection.prototype=new ArrowLine();
DottedConnection.prototype.type="DottedConnection";
DottedConnection.prototype.disconnect=function(){
if(this.sourcePort!==null){
this.sourcePort.detachMoveListener(this);
}
if(this.targetPort!==null){
this.targetPort.detachMoveListener(this);
}
if(this.sourcePort!==null){
this.sourcePort.detachMoveListener(this);
}
if(this.targetPort!==null){
this.targetPort.detachMoveListener(this);
}
};
DottedConnection.prototype.reconnect=function(){
if(this.sourcePort!==null){
this.sourcePort.attachMoveListener(this);
}
if(this.targetPort!==null){
this.targetPort.attachMoveListener(this);
}
if(this.sourcePort!==null){
this.sourcePort.attachMoveListener(this);
}
if(this.targetPort!==null){
this.targetPort.attachMoveListener(this);
}
};
DottedConnection.prototype.isConnector=function(){
return true;
return true;
};
DottedConnection.prototype.isResizeable=function(){
return false;
return false;
};
DottedConnection.prototype.setSource=function(port){
if(this.sourcePort!==null){
this.sourcePort.detachMoveListener(this);
}
this.sourcePort=port;
if(this.sourcePort===null){
return;
}
this.sourcePort.attachMoveListener(this);
this.setStartPoint(port.getAbsoluteX(),port.getAbsoluteY());
if(this.sourcePort!==null){
this.sourcePort.detachMoveListener(this);
}
this.sourcePort=port;
if(this.sourcePort===null){
return;
}
this.sourcePort.attachMoveListener(this);
this.setStartPoint(port.getAbsoluteX(),port.getAbsoluteY());
};
DottedConnection.prototype.getSource=function(){
return this.sourcePort;
return this.sourcePort;
};
DottedConnection.prototype.setTarget=function(port){
if(this.targetPort!==null){
this.targetPort.detachMoveListener(this);
}
this.targetPort=port;
if(this.targetPort===null){
return;
}
this.targetPort.attachMoveListener(this);
this.setEndPoint(port.getAbsoluteX(),port.getAbsoluteY());
if(this.targetPort!==null){
this.targetPort.detachMoveListener(this);
}
this.targetPort=port;
if(this.targetPort===null){
return;
}
this.targetPort.attachMoveListener(this);
this.setEndPoint(port.getAbsoluteX(),port.getAbsoluteY());
};
DottedConnection.prototype.getTarget=function(){
return this.targetPort;
return this.targetPort;
};
DottedConnection.prototype.onOtherFigureMoved=function(_3824){
if(_3824==this.sourcePort){
this.setStartPoint(this.sourcePort.getAbsoluteX(),this.sourcePort.getAbsoluteY());
}
else{
this.setEndPoint(this.targetPort.getAbsoluteX(),this.targetPort.getAbsoluteY());
}
if(_3824==this.sourcePort){
this.setStartPoint(this.sourcePort.getAbsoluteX(),this.sourcePort.getAbsoluteY());
}else{
this.setEndPoint(this.targetPort.getAbsoluteX(),this.targetPort.getAbsoluteY());
}
};
*/
bpmnAnnotation = function (oWorkflow) {
@@ -148,6 +138,27 @@ bpmnAnnotation.prototype.setAnnotationName = function (name) {
this.annotationName = 'Annotation 1';
};
bpmnAnnotation.prototype.coord_converter = function (bound_width, bound_height, text_length) {
//bound_width = this.workflow.currentSelection.width;
//bound_height = this.workflow.currentSelection.height;
input_width = text_length * 6
input_height = 10
temp_width = bound_width - input_width;
temp_width /= 2;
temp_x = temp_width;
temp_height = bound_height - 10;
temp_height /= 2;
temp_y = temp_height;
var temp_coord = new Object();
temp_coord.temp_x = temp_x;
temp_coord.temp_y = temp_y;
return temp_coord;
};
bpmnAnnotation.prototype.paint = function () {
VectorFigure.prototype.paint.call(this);
@@ -290,6 +301,7 @@ bpmnAnnotation.prototype.onDoubleClick = function () {
}
else
this.figure.rectWidth = 150;
//tempcoord = this.workflow.currentSelection.coord_converter(this.workflow.currentSelection.width, this.workflow.currentSelection.height, this.input.value.length)
this.figure.bpmnText.drawStringAnno(this.input.value,20,20,this.figure.rectWidth,'left');
// this.figure.bpmnNewText.drawTextString(this.input.value, this.workflow.currentSelection.width, this.workflow.currentSelection.height, tempcoord.temp_x, tempcoord.temp_y);
this.figure.bpmnText.paint();

View File

@@ -145,33 +145,29 @@ MyWorkflow.prototype.AddTaskContextMenu= function(oShape)
*/
MyWorkflow.prototype.connectionContextMenu=function(oShape)
{
this.canvasEvent = Ext.get(oShape.id);
this.contextEventmenu = new Ext.menu.Menu({
items: [{
text: 'NULL Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Manhatten Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Bezier Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Fan Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Delete Router',
scope: this,
handler:function()
{
MyWorkflow.prototype.deleteRoute(oShape.workflow.currentSelection,0)
}
}]
});
this.canvasEvent = Ext.get(oShape.id);
this.contextEventmenu = new Ext.menu.Menu({
items: [{
text: 'Manhatten Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Bezier Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Fan Router',
scope: this,
handler: MyWorkflow.prototype.toggleConnection
}, {
text: 'Delete Router',
scope: this,
handler:function()
{
MyWorkflow.prototype.deleteRoute(oShape.workflow.currentSelection,0)
}
}]
});
this.canvasEvent.on('contextmenu', function(e) {
e.stopEvent();

View File

@@ -540,6 +540,240 @@ DecoratedConnection.prototype.getContextMenu = function () {
}
};
//dotted connection and its router
DottedConnectionRouter=function(_354a){
if(!_354a){
this.cheapRouter=new ManhattanConnectionRouter();
}else{
this.cheapRouter=null;
}
this.iteration=4;
};
DottedConnectionRouter.prototype=new ConnectionRouter;
DottedConnectionRouter.prototype.type="DottedConnectionRouter";
DottedConnectionRouter.prototype.drawBezier=function(_354b,_354c,t,iter){
var n=_354b.length-1;
var q=new Array();
var _3551=n+1;
for(var i=0;i<_3551;i++){
q[i]=new Array();
q[i][0]=_354b[i];
}
for(var j=1;j<=n;j++){
for(var i=0;i<=(n-j);i++){
q[i][j]=new Point((1-t)*q[i][j-1].x+t*q[i+1][j-1].x,(1-t)*q[i][j-1].y+t*q[i+1][j-1].y);
}
}
var c1=new Array();
var c2=new Array();
for(var i=0;i<n+1;i++){
c1[i]=q[0][i];
c2[i]=q[i][n-i];
}
if(iter>=0){
this.drawBezier(c1,_354c,t,--iter);
this.drawBezier(c2,_354c,t,--iter);
}
else{
for(var i=0;i<n;i++){
_354c.push(q[i][n-i]);
}
}
};
DottedConnectionRouter.prototype.route=function(conn){
if(this.cheapRouter!=null&&(conn.getSource().getParent().isMoving==true||conn.getTarget().getParent().isMoving==true)){
this.cheapRouter.route(conn);
return;
}
var arrayPoints=new Array();
var fromPt=conn.getStartPoint();
var toPt =conn.getEndPoint();
this._route(arrayPoints, conn, toPt, this.getEndDirection(conn), fromPt, this.getStartDirection(conn) );
var _355a=new Array();
this.drawBezier(arrayPoints,_355a,0.5,this.iteration);
conn.addPoint(fromPt);
for(var i=0;i<_355a.length;i++){
conn.addPoint(_355a[i]);
}
conn.addPoint(toPt);
};
DottedConnectionRouter.prototype._route=function(_355c,conn,_355e,_355f,toPt,toDir){
var TOL=0.1;
var _3563=0.01;
var _3564=90;
var UP=0;
var RIGHT=1;
var DOWN=2;
var LEFT=3;
var xDiff=_355e.x-toPt.x;
var yDiff=_355e.y-toPt.y;
var point;
var dir;
if(((xDiff*xDiff)<(_3563))&&((yDiff*yDiff)<(_3563))){
_355c.push(new Point(toPt.x,toPt.y));
return;
}
if(_355f==LEFT){
if((xDiff>0)&&((yDiff*yDiff)<TOL)&&(toDir==RIGHT)){
point=toPt;
dir=toDir;
}else{
if(xDiff<0){
point=new Point(_355e.x-_3564,_355e.y);
}else{
if(((yDiff>0)&&(toDir==DOWN))||((yDiff<0)&&(toDir==UP))){
point=new Point(toPt.x,_355e.y);
}else{
if(_355f==toDir){
var pos=Math.min(_355e.x,toPt.x)-_3564;
point=new Point(pos,_355e.y);
}else{
point=new Point(_355e.x-(xDiff/2),_355e.y);
}
}
}
if(yDiff>0){
dir=UP;
}else{
dir=DOWN;
}
}
}
else{
if(_355f==RIGHT){
if((xDiff<0)&&((yDiff*yDiff)<TOL)&&(toDir==LEFT)){
point=toPt;
dir=toDir;
}else{
if(xDiff>0){
point=new Point(_355e.x+_3564,_355e.y);
}else{
if(((yDiff>0)&&(toDir==DOWN))||((yDiff<0)&&(toDir==UP))){
point=new Point(toPt.x,_355e.y);
}else{
if(_355f==toDir){
var pos=Math.max(_355e.x,toPt.x)+_3564;
point=new Point(pos,_355e.y);
}else{
point=new Point(_355e.x-(xDiff/2),_355e.y);
}
}
}
if(yDiff>0){
dir=UP;
}else{
dir=DOWN;
}
}
}else{
if(_355f==DOWN){
if(((xDiff*xDiff)<TOL)&&(yDiff<0)&&(toDir==UP)){
point=toPt;
dir=toDir;
}
else {
if(yDiff>0){
point=new Point(_355e.x,_355e.y+_3564);
}
else {
if(((xDiff>0)&&(toDir==RIGHT))||((xDiff<0)&&(toDir==LEFT))){
point=new Point(_355e.x,toPt.y);
}
else{
if(_355f==toDir){
var pos=Math.max(_355e.y,toPt.y)+_3564;
point=new Point(_355e.x,pos);
}
else{
point=new Point(_355e.x,_355e.y-(yDiff/2));
}
}
}
if(xDiff>0){
dir=LEFT;
}
else{
dir=RIGHT;
}
}
}
else {
if(_355f==UP){
if(((xDiff*xDiff)<TOL)&&(yDiff>0)&&(toDir==DOWN)){
point=toPt;
dir=toDir;
}
else{
if(yDiff<0){
point=new Point(_355e.x,_355e.y-_3564);
}
else{
if(((xDiff>0)&&(toDir==RIGHT))||((xDiff<0)&&(toDir==LEFT))){
point=new Point(_355e.x,toPt.y);
}
else{
if(_355f==toDir){
var pos=Math.min(_355e.y,toPt.y)-_3564;
point=new Point(_355e.x,pos);
}
else{
point=new Point(_355e.x,_355e.y-(yDiff/2));
}
}
}
if(xDiff>0){
dir=LEFT;
}
else{
dir=RIGHT;
}
}
}
}
}
}
this._route(_355c,conn,point,dir,toPt,toDir);
_355c.push(_355e);
};
DottedConnection = function () {
Connection.call(this);
this.setColor(new Color(0,0,80));
this.setRouter(new DottedConnectionRouter());
this.setRouter(new FanConnectionRouter());
};
DottedConnection.prototype = new Connection();
DottedConnection.prototype.type = "DottedConnection";
DottedConnection.prototype.addPoint=function(p){
p=new Point(parseInt(p.x),parseInt(p.y));
var bgColor = new Color(255,255,255);
var fgColor = new Color(0,0,128);
if(this.oldPoint!=null){
//this.graphics.setColor(new Color(250,250,250));
this.graphics.setColor(bgColor.getHTMLStyle());
this.graphics.setStroke( 2);
this.graphics.drawLine(this.oldPoint.x,this.oldPoint.y,p.x,p.y);
this.graphics.setColor(fgColor.getHTMLStyle());
this.graphics.setStroke( Stroke.DOTTED );
this.graphics.drawLine(this.oldPoint.x,this.oldPoint.y,p.x,p.y);
//this.graphics.drawLine(p.x,p.y,p.x,p.y);
var line=new Object();
line.start=this.oldPoint;
line.end=p;
this.lineSegments.add(line);
}
this.oldPoint=new Object();
this.oldPoint.x=p.x;
this.oldPoint.y=p.y;
};
DottedConnection.prototype.getContextMenu = function () {
if (this.id != null) {
this.workflow.contextClicked = true;
this.workflow.connectionContextMenu(this);
}
};
////////--------------------------------------------------------------------------------------------///////
FlowMenu = function (_39f9) {
this.actionAdd = new ButtonAdd(this);
@@ -656,7 +890,7 @@ FlowMenu.prototype.onOtherFigureMoved = function (_39fd) {
//workflow.setBoundary(workflow.currentSelection);
//Preventing Task from drawing outside canvas Code Ends here
if (_39fd.type == 'DecoratedConnection' || _39fd.workflow.contextClicked == true) {
if (_39fd.type == 'DecoratedConnection' || _39fd.type == 'DottedConnection' || _39fd.workflow.contextClicked == true) {
this.removechild(this.actionAdd);
this.removechild(this.actionInterEvent);
this.removechild(this.actionGateway);