You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@aries.apache.org by oz...@apache.org on 2010/06/03 11:14:34 UTC
svn commit: r950917 - in
/incubator/aries/trunk/samples/goat/goat-web/src/main/resources/web/goat:
Relationship.js elements/RelationshipElement.js elements/TriangleDecorator.js
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();
-}
});