incubator-aries-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From o...@apache.org
Subject svn commit: r950917 - in /incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat: Relationship.js elements/RelationshipElement.js elements/TriangleDecorator.js
Date Thu, 03 Jun 2010 09:14:34 GMT
Author: ozzy
Date: Thu Jun  3 09:14:33 2010
New Revision: 950917

URL: http://svn.apache.org/viewvc?rev=950917&view=rev
Log:
ARIES-328 TriangleDecorator updates

Modified:
    incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/Relationship.js
    incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/RelationshipElement.js
    incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/TriangleDecorator.js

Modified: incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/Relationship.js
URL: http://svn.apache.org/viewvc/incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/Relationship.js?rev=950917&r1=950916&r2=950917&view=diff
==============================================================================
--- incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/Relationship.js
(original)
+++ incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/Relationship.js
Thu Jun  3 09:14:33 2010
@@ -42,23 +42,26 @@ getKey : function(){
 	return this.key;
 },
 update : function(sscRelationship){
-	//console.log("Updating relationship "+this.key+" with new data");
+	console.log("Updating relationship "+this.key+" with new data");
 	
-	//console.log("Removing old elements..");
+	console.log("Removing old elements..");
+    console.log(this.relationshipElements);
     //remove the old relationship elements .. 
 	dojo.forEach(this.relationshipElements, function(relationshipElement){
+        console.log("Removing.. ");
+        console.log(relationshipElement);
 		relationshipElement.removeSelf();
 		//delete relationshipElement;
 	},this);
 	
 	//new array...
-	//console.log("forgetting about the removed relationship elts");
+	console.log("forgetting about the removed relationship elts");
 	this.relationshipElements=new Array();
 	
-	//console.log("switching to the new sscRelationship...");
+	console.log("switching to the new sscRelationship...");
 	this.sscRelationship = sscRelationship;
 	
-	//console.log("kicking self to rebuild relationship elts");
+	console.log("kicking self to rebuild relationship elts");
 	this.activate();
 },
 activate : function(){
@@ -83,18 +86,18 @@ activate : function(){
 										// this.typeOffset=10;
 										r
 												.addDecorator(new goat.elements.TriangleDecorator(
-														this.theme));
+														this.theme,surface));
 									} else if (this.sscRelationship.type == "serviceImport") {
 										// this.stroke = '#8080F0';
 										// this.typeOffset=-10;
 										r
 												.addDecorator(new goat.elements.TriangleDecorator(
-														this.theme));
+														this.theme,surface));
 									} else if (this.sscRelationship.type == "Service") {
 										//		this.stroke = '#8080F0';
 										//		this.typeOffset=-10;
 										var d = new goat.elements.TriangleDecorator(
-												this.theme);
+												this.theme,surface);
 										r.addDecorator(d);
 									}
 

Modified: incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/RelationshipElement.js
URL: http://svn.apache.org/viewvc/incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/RelationshipElement.js?rev=950917&r1=950916&r2=950917&view=diff
==============================================================================
--- incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/RelationshipElement.js
(original)
+++ incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/RelationshipElement.js
Thu Jun  3 09:14:33 2010
@@ -89,7 +89,6 @@ constructor: function(surface, name, typ
 },
 addDecorator: function(decorator) {
 	decorator.setStroke(this.stroke);
-	decorator.setSurface(this.surface);
 	this.decorators.push(decorator);
 },
 setStroke: function(){	
@@ -111,10 +110,10 @@ setStroke: function(){	
 	}
 },
 updateVisibility: function(){
-	if(this.removed){
+	//if(this.removed){
 		//console.log("uv EEK.. this line should be dead.. and its aliiiiiive "+this.type+" from
"+this.fromComponent.id+" to "+this.toComponent.id);
 		//console.log(this);
-	}
+	//}
 	
 	this.visible = (!this.fromComponent.hidden) && (!this.toComponent.hidden);
 	
@@ -123,9 +122,12 @@ updateVisibility: function(){
 			// No need to erase a line which doesn't exist ...
 		}else{
 			this.line.setShape({x1: -1000, y1: -1000, x2: -1000, y2: -1000});
+
+            //console.log("Hiding decorators..");
 			dojo.forEach(this.decorators, function(decorator){
+                //console.log("Hiding decorator..");
 				decorator.makeInvisible();
-			});
+			},this);
 
 		}
 	}else{
@@ -134,11 +136,12 @@ updateVisibility: function(){
 },
 updateLine: function(){
 	if(this.removed){
-		//console.log("ul EEK.. this line should be dead.. and its aliiiiiive "+this.type+" from
"+this.fromComponent.id+" to "+this.toComponent.id);
-		//console.log(this);
+		console.log("ul EEK.. this line should be dead.. and its aliiiiiive "+this.type+" from
"+this.fromComponent.id+" to "+this.toComponent.id);
+		console.log(this);
 	}
 	
 	if(this.visible){
+        //console.log("Updating VISIBLE line from "+this.fromComponent.id+" to "+this.toComponent.id);
 		var fromx = this.fromComponent.x + (this.fromComponent.width / 2) + this.typeOffset;
 		var fromy = this.fromComponent.y + (this.fromComponent.height / 2)+ this.typeOffset;
 		var tox = this.toComponent.x + (this.toComponent.width / 2)+ this.typeOffset;
@@ -150,31 +153,38 @@ updateLine: function(){
 		}else{
 			this.line.setShape({x1: fromx, y1: fromy, x2: tox, y2: toy});
 		}
-		
-		// Use a normal for loop since we'd have to hitch context with a
-		// dojo.forEach
-			if (this.decorators != null) {
-				for ( var i = 0; i < this.decorators.length; i++) {
-					this.decorators[i].lineUpdated(this.line);
-				}
-			}
 
-			// Our line should be underneath any decorations
-			this.line.moveToBack();
-		}
+        if (this.decorators != null) {
+            dojo.forEach(this.decorators, function(decorator){
+                decorator.lineUpdated(this.line);
+            },this);
+        }
+
+        // Our line should be underneath any decorations
+        this.line.moveToBack();
+	}
 	
 },
 removeSelf: function(){
 	//console.log("Line from "+this.fromComponent.id+" to "+this.toComponent.id+" being removed");
-	//console.log(this);
+    //console.log(this);
 	if(!this.removed){
 		this.removed = true;
 		
 		//console.log("Line from "+this.fromComponent.id+" to "+this.toComponent.id+" being removed
from surface");
-		this.surface.remove(this.line);
+        //console.log(this);
+        if(this.line!=null) {
+            this.surface.remove(this.line);
+        }
+
+        //console.log("Removing decorators..");
 		dojo.forEach(this.decorators, function(decorator){
+            //console.log("Asking...");
+            //console.log(decorator);
+            //console.log("..to remove itself");
 			decorator.removeSelf();
 		});
+        this.decorators = new Array();
 		//console.log("Line from "+this.fromComponent.id+" to "+this.toComponent.id+" being marked
as deleted");
 		
 		//console.log("Removing line subscriptions to components.");
@@ -201,16 +211,19 @@ onComponentHidden: function(component){
 	this.updateVisibility();
 },
 onComponentClick: function(component){
+    //console.log("OnClick "+component.id);
 	if(this.removed){
-		//console.log("occ EEK.. this line should be dead.. and its aliiiiiive "+this.type+" from
"+this.fromComponent.id+" to "+this.toComponent.id);
+		console.log("occ EEK.. this line should be dead.. and its aliiiiiive "+this.type+" from
"+this.fromComponent.id+" to "+this.toComponent.id);
 	}
-	
-	dojox.gfx.fx.animateStroke({
-	    shape: this.line,
-	    duration: 500,
-	    color: {start: "#FF3030", end: this.stroke},
-	    width: {start: 3, end: 2},
-	    join:  {values: ["miter", "bevel", "round"]}
-	}).play();	
+
+    if(this.line!=null) {
+        dojox.gfx.fx.animateStroke({
+            shape: this.line,
+            duration: 500,
+            color: {start: "#FF3030", end: this.stroke},
+            width: {start: 3, end: 2},
+            join:  {values: ["miter", "bevel", "round"]}
+        }).play();	
+    }
 }
 });

Modified: incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/TriangleDecorator.js
URL: http://svn.apache.org/viewvc/incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/TriangleDecorator.js?rev=950917&r1=950916&r2=950917&view=diff
==============================================================================
--- incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/TriangleDecorator.js
(original)
+++ incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat/elements/TriangleDecorator.js
Thu Jun  3 09:14:33 2010
@@ -26,18 +26,13 @@ dojo.require("goat.configuration.Theme")
 
 dojo.declare("goat.elements.TriangleDecorator", [], {
 
-	// relationship properties.
-	fromComponent : null,
-	toComponent : null,
-	name : null,
-	type : null,
-
 	// object properties
 	surface : null,
-	typeOffset : 0,
 
 	// gfx objects
 	line : null,
+    triangle : null,
+    trianglegroup : null,
 
 	// internals
 	stroke : null,
@@ -46,33 +41,37 @@ dojo.declare("goat.elements.TriangleDeco
 	// am I deleted?
 	removed : false,
 
-	// for the up and coming relationship aspect info..
-	aspects : null,
+    // am I hidden?
+    hidden : false,
 
-	constructor : function(theme) {
+	constructor : function(theme, surface) {
 		this.theme = theme;
+        this.surface = surface;
+        this.trianglegroup = this.surface.createGroup();
 	},
 	makeInvisible : function() {
-		this.triangle.setShape( {
-			x1 : -1000,
-			y1 : -1000,
-			x2 : -1000,
-			y2 : -1000
-		});
-	},
-	setSurface : function(newSurface) {
-		this.surface = newSurface;
-	},
-	setStroke : function(newStroke) {
+        //console.log("Hiding triangle..");
+        if(this.trianglegroup!=null) {
+            this.surface.remove(this.trianglegroup);
+            this.hidden=true;
+        }
+   	},
+   	setStroke : function(newStroke) {
 		this.stroke = newStroke;
 	},
 	lineUpdated : function(line) {
-		if (this.removed) {
+		//if (this.removed) {
 			// console.log("ul EEK.. this line should be dead.. and its
 			// aliiiiiive "+this.type+" from "+this.fromComponent.id+" to
 			// "+this.toComponent.id);
 			// console.log(this);
-		}
+		//}
+
+        if(this.hidden) {
+            //console.log("Unhiding triangle..");
+            this.hidden=false;
+            this.surface.add(this.trianglegroup);
+        }
 
 		if (line != null) {
 			var shape = line.getShape();
@@ -81,118 +80,93 @@ dojo.declare("goat.elements.TriangleDeco
 			var tox = shape.x2;
 			var toy = shape.y2;
 
-			// A somewhat awkwardly named method ...
-			var triangleSize = this.theme.getTriangleSize();
-			var deltax = tox - fromx;
-			var deltay = toy - fromy;
-			// Do a square root to work out the line length
-			// Will this hurt us on performance? An approximation would do
-			// if so ...
-			var lineLength = Math.sqrt(deltax * deltax + deltay * deltay);
-			// Assume the triangles are equilateral
-			var divider = lineLength / triangleSize;
-			// The triangle starts in the middle of the line
-			var tx1 = (fromx + tox) / 2;
-			var ty1 = (fromy + toy) / 2;
-			var tx2 = tx1 - deltax / divider + deltay / divider;
-			var ty2 = ty1 - deltay / divider - deltax / divider;
-			var tx3 = tx1 - deltax / divider - deltay / divider;
-			var ty3 = ty1 - deltay / divider + deltax / divider;
-
-			if (this.triangle == null) {
-				this.triangle = this.surface.createPolyline( [ {
-					x : tx1,
-					y : ty1
-				}, {
-					x : tx2,
-					y : ty2
-				}, {
-					x : tx3,
-					y : ty3
-				}, {
-					x : tx1,
-					y : ty1
-				} ]);
-				this.triangle.setStroke(this.stroke);
-
-			} else {
-				this.triangle.setShape( [ {
-					x : tx1,
-					y : ty1
-				}, {
-					x : tx2,
-					y : ty2
-				}, {
-					x : tx3,
-					y : ty3
-				}, {
-					x : tx1,
-					y : ty1
-				} ]);
-
-				if (this.theme.shouldUseLinearShading()) {
-					this.triangle.setFill( {
-						type : "linear",
-						x1 : tx1,
-						y1 : ty1,
-						x2 : tx2,
-						y2 : ty2,
-						colors : [ {
-							offset : 0,
-							color : this.theme.getServiceBackgroundColor()
-						}, {
-							offset : 1,
-							color : "white"
-						} ]
-					});
-				} else {
-					this.triangle.setFill(this.theme
-							.getServiceBackgroundColor());
+            //avoid processing self-referential relationships
+            //not ideal, but serves the purpose until it's done differently.
+            if(fromx!=tox && fromy!=toy) {
+    
+    			// A somewhat awkwardly named method ...
+    			var triangleSize = this.theme.getTriangleSize();
+    			var deltax = tox - fromx;
+    			var deltay = toy - fromy;
+    			// Do a square root to work out the line length
+    			// Will this hurt us on performance? An approximation would do
+    			// if so ...
+    			var lineLength = Math.sqrt(deltax * deltax + deltay * deltay);
+    			// Assume the triangles are equilateral
+    			var divider = lineLength / triangleSize;
+    			// The triangle starts in the middle of the line
+    			var tx1 = (fromx + tox) / 2;
+    			var ty1 = (fromy + toy) / 2;
+    			var tx2 = tx1 - deltax / divider + deltay / divider;
+    			var ty2 = ty1 - deltay / divider - deltax / divider;
+    			var tx3 = tx1 - deltax / divider - deltay / divider;
+    			var ty3 = ty1 - deltay / divider + deltax / divider;
+        
+    			if (this.triangle == null) {
+    				this.triangle = this.trianglegroup.createPolyline( [ {
+    					x : tx1,
+    					y : ty1
+    				}, {
+    					x : tx2,
+    					y : ty2
+    				}, {
+    					x : tx3,
+    					y : ty3
+    				}, {
+    					x : tx1,
+    					y : ty1
+    				} ]);
+    				this.triangle.setStroke(this.stroke);
+    
+    			} else {
+    				this.triangle.setShape( [ {
+    					x : tx1,
+    					y : ty1
+    				}, {
+    					x : tx2,
+    					y : ty2
+    				}, {
+    					x : tx3,
+    					y : ty3
+    				}, {
+    					x : tx1,
+    					y : ty1
+    				} ]);
+                }
+    
+                if (this.theme.shouldUseLinearShading()) {
+                    this.triangle.setFill( {
+                        type : "linear",
+                        x1 : tx1,
+                        y1 : ty1,
+                        x2 : tx2,
+                        y2 : ty2,
+                        colors : [ {
+                            offset : 0,
+                            color : this.theme.getServiceBackgroundColor()
+                        }, {
+                            offset : 1,
+                            color : "white"
+                        } ]
+                    });   
+                 } else {
+                    this.triangle.setFill(this.theme
+                            .getServiceBackgroundColor());
+    
+                }
+            }
 
-				}
-			}
 		}
 	},
 	removeSelf : function() {
 		if (!this.removed) {
 			this.removed = true;
-
-			this.surface.remove(this.triangle);
-			// console.log("Line from "+this.fromComponent.id+" to
-			// "+this.toComponent.id+" being marked as deleted");
+            if(this.triangle!=null) {
+                this.surface.remove(this.trianglegroup);
+                this.trianglegroup=null;
+                // console.log("Line from "+this.fromComponent.id+" to
+                // "+this.toComponent.id+" being marked as deleted");
+            }
 		}
-	},
-	getKey : function() {
-		var key = "" + this.fromComponent.id + "!" + this.toComponent.id + "!"
-				+ this.type + "!" + this.name;
-	},
-	onComponentMove : function(component) {
-		this.updateLine();
-	},
-	onComponentHidden : function(component) {
-		this.updateVisibility();
-	},
-	onComponentClick : function(component) {
-		if (this.removed) {
-			// console.log("occ EEK.. this line should be dead.. and its
-	// aliiiiiive "+this.type+" from "+this.fromComponent.id+" to
-	// "+this.toComponent.id);
-}
-
-dojox.gfx.fx.animateStroke( {
-	shape : this.triangle,
-	duration : 500,
-	color : {
-		start : "#FF3030",
-		end : this.stroke
-	},
-	width : {
-		start : 3,
-		end : 2
-	},
-	join : {
-		values : [ "miter", "bevel", "round" ]
 	}
-}).play();
-}
 });



Mime
View raw message