diff options
| -rw-r--r-- | javascripts/graph.js | 51 |
1 files changed, 38 insertions, 13 deletions
diff --git a/javascripts/graph.js b/javascripts/graph.js index f38f66d..55a450b 100644 --- a/javascripts/graph.js +++ b/javascripts/graph.js @@ -98,11 +98,13 @@ Raphael.fn.aNode = function(x, y, r, isFinal, hasSelfConn, res.push(dragger); // outer circle var co = this.path(this.circlePath(x, y, r)).attr({stroke:'none'}); + co["_type"] = "waypoint"; res.push(co); if (isFinal) { // inner circle var ci = this.path(this.circlePath(x, y, r/1.2)).attr({ stroke:'#fff', 'stroke-width':strokeWidth, cx: x, cy: y}); + ci["_type"] = "inner_circle"; }; // self connection if (hasSelfConn) { @@ -111,6 +113,8 @@ Raphael.fn.aNode = function(x, y, r, isFinal, hasSelfConn, var selfConn = this.path('M'+p1.x+','+p1.y+ ' C'+(p1.x-r)+','+(p1.y-2.5*r)+' '+ (p2.x+r)+','+(p1.y-2.5*r)+' '+p2.x+','+p2.y); + selfConn.attr({ cx: p1.x, cy: p1.y }); + selfConn["_type"] = "selfConn"; res.push(selfConn.attr({'stroke-width': strokeWidth, stroke: strokeColor})); // another path for animation (connected to the center of co) @@ -128,15 +132,15 @@ Raphael.fn.aNode = function(x, y, r, isFinal, hasSelfConn, " L" + ahRef.x + " " + ahRef.y ).attr({stroke:strokeColor, fill:strokeColor} ).rotate((112+ahAngle), ahRef.x, ahRef.y); + ah["_type"] = "selfConnArrowHead"; + ah.attr({ cx: ahRef.x, cy: ahRef.y }); res.push(ah); // label on self connection - var label = this.text( - selfConn.getPointAtLength( - selfConn.getTotalLength()/2).x, - selfConn.getPointAtLength( - selfConn.getTotalLength()/2).y-labelFontSize/1.25, - labelText - ).attr({font: this.getFont("Helvetica"), 'font-size': labelFontSize}); + var lx = selfConn.getPointAtLength(selfConn.getTotalLength()/2).x; + var ly = selfConn.getPointAtLength(selfConn.getTotalLength()/2).y-labelFontSize/1.25; + var label = this.text(lx, ly, labelText).attr({font: this.getFont("Helvetica"), 'font-size': labelFontSize}); + label["_type"] = "selfConnLabel"; + label.attr({ cx: lx, cy: ly }); res.push(label); }; if (isFinal) { @@ -165,13 +169,16 @@ function graph() { var start = function () { for (var i = nodeById[this.id].node.length - 1; i >= 0; i--) { var n = nodeById[this.id].node[i]; + if (n["_type"] && ["selfConn", "selfConnArrowHead", "selfConnLabel"].indexOf(n["_type"])!=-1) { + n.animate({ opacity : 0 }, 250, function () { this.hide() }); + } n.attrs.ox = n.attrs.cx; n.attrs.oy = n.attrs.cy; } this.animate({r: nodeRadiusHi, opacity: nodeOpacityHi}, 500, ">"); }, move = function (dx, dy) { - for (var i = nodeById[this.id].node.length - 1; i >= 0; i--){ + for (var i = nodeById[this.id].node.length - 1; i >= 0; i--) { var n = nodeById[this.id].node[i]; var ox = n.attrs.ox; var oy = n.attrs.oy; @@ -184,12 +191,30 @@ function graph() { r.safari(); }, up = function () { - if (nodeById[this.id].node.length == 4) { // inner circle - var inner = nodeById[this.id].node[3]; - inner.translate(inner.attrs.cx-inner.attrs.ox, inner.attrs.cy-inner.attrs.oy); + var n = nodeById[this.id]; + for (var i = n.node.length - 1; i >= 0; i--) { + if (n.node[i]["_type"] && n.node[i]["_type"]=="inner_circle") { + var inner = nodeById[this.id].node[i]; + inner.translate(inner.attrs.cx-inner.attrs.ox, inner.attrs.cy-inner.attrs.oy); + } else if (n.node[i]["_type"] && n.node[i]["_type"]=="waypoint") { + var waypoint = n.node[i]; + waypoint.translate(waypoint.attrs.cx-waypoint.attrs.ox, waypoint.attrs.cy-waypoint.attrs.oy); + } else if (n.node[i]["_type"] && n.node[i]["_type"]=="selfConn") { + var selfConn = n.node[i]; + selfConn.translate(selfConn.attrs.cx-selfConn.attrs.ox, selfConn.attrs.cy-selfConn.attrs.oy); + selfConn.show().animate({ opacity : 1 }, 1000); + } else if (n.node[i]["_type"] && n.node[i]["_type"]=="selfConnArrowHead") { + var selfConnArrowHead = n.node[i]; + selfConnArrowHead.translate(selfConnArrowHead.attrs.cx-selfConnArrowHead.attrs.ox, selfConnArrowHead.attrs.cy-selfConnArrowHead.attrs.oy); + selfConnArrowHead.show().animate({ opacity : 1 }, 1000); + } else if (n.node[i]["_type"] && n.node[i]["_type"]=="selfConnLabel") { + var selfConnLabel = n.node[i]; + selfConnLabel.translate(selfConnLabel.attrs.cx-selfConnLabel.attrs.ox, selfConnLabel.attrs.cy-selfConnLabel.attrs.oy); + selfConnLabel.show().animate({ opacity : 1 }, 1000); + } else { + // + } } - var waypoint = nodeById[this.id].node[2] - waypoint.translate(waypoint.attrs.cx-waypoint.attrs.ox, waypoint.attrs.cy-waypoint.attrs.oy); this.animate({r:nodeRadius, opacity:nodeOpacity}, 500, ">"); }; |