Making relationship arrows a solid line

This commit is contained in:
Pablo Luna 2011-01-23 19:54:40 -03:00
parent 2b81b71cb4
commit cfe833f947
8 changed files with 96 additions and 23 deletions

View File

@ -74,8 +74,7 @@ mindplot.ConnectionLine.getStrokeColor = function()
mindplot.ConnectionLine.prototype.setVisibility = function(value)
{
var line2d = this._line2d;
line2d.setVisibility(value);
this._line2d.setVisibility(value);
};
mindplot.ConnectionLine.prototype.redraw = function()

View File

@ -90,10 +90,10 @@ mindplot.ControlPoint.prototype._mouseMove = function(event, point) {
var topic = null;
if(point==0){
var cords = core.Utils.calculateRelationShipPointCoordinates(this._line.getSourceTopic(),pos);
this._line.getLine().setFrom(cords.x, cords.y);
this._line.setFrom(cords.x, cords.y);
}else{
var cords = core.Utils.calculateRelationShipPointCoordinates(this._line.getTargetTopic(),pos);
this._line.getLine().setTo(cords.x, cords.y);
this._line.setTo(cords.x, cords.y);
}
this._controls[point].x=(pos.x - cords.x);
this._controls[point].y=(pos.y - cords.y);

View File

@ -653,8 +653,8 @@ mindplot.MindmapDesigner.prototype._buildRelationship = function (model) {
relationLine.getLine().setDashed(3,2);
relationLine.getLine().setShowEndArrow(model.getEndArrow());
relationLine.getLine().setShowStartArrow(model.getStartArrow());
relationLine.setShowEndArrow(model.getEndArrow());
relationLine.setShowStartArrow(model.getStartArrow());
relationLine.setModel(model);
//Add Listeners

View File

@ -29,10 +29,24 @@ mindplot.RelationshipLine = function(sourceNode, targetNode, lineType)
this._isInWorkspace = false;
this._controlPointsController = new mindplot.ControlPoint();
var strokeColor = mindplot.ConnectionLine.getStrokeColor.call(this);
this._startArrow = new web2d.Arrow();
this._endArrow = new web2d.Arrow();
this._startArrow.setStrokeColor(strokeColor);
this._startArrow.setStrokeWidth(2);
this._endArrow.setStrokeColor(strokeColor);
this._endArrow.setStrokeWidth(2);
};
objects.extend(mindplot.RelationshipLine, mindplot.ConnectionLine);
mindplot.RelationshipLine.prototype.setStroke = function(color, style, opacity)
{
mindplot.RelationshipLine.superClass.setStroke.call(this, color, style, opacity);
this._startArrow.setStrokeColor(color);
};
mindplot.RelationshipLine.prototype.redraw = function()
{
var line2d = this._line2d;
@ -66,6 +80,9 @@ mindplot.RelationshipLine.prototype.redraw = function()
line2d.moveToBack();
//Positionate Arrows
this._positionateArrows();
// Add connector ...
this._positionateConnector(targetTopic);
@ -76,6 +93,28 @@ mindplot.RelationshipLine.prototype.redraw = function()
this._controlPointsController.redraw();
};
mindplot.RelationshipLine.prototype._positionateArrows = function()
{
this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow);
var tpos = this._line2d.getTo();
this._endArrow.setFrom(tpos.x, tpos.y);
var spos = this._line2d.getFrom();
this._startArrow.setFrom(spos.x, spos.y);
this._endArrow.moveToBack();
this._startArrow.moveToBack();
if(this._line2d.getType() == "CurvedLine"){
var controlPoints = this._line2d.getControlPoints();
this._startArrow.setControlPoint(controlPoints[0]);
this._endArrow.setControlPoint(controlPoints[1]);
} else {
this._startArrow.setControlPoint(this._line2d.getTo());
this._endArrow.setControlPoint(this._line2d.getFrom());
}
};
mindplot.RelationshipLine.prototype.addToWorkspace = function(workspace)
{
workspace.appendChild(this._focusShape);
@ -84,6 +123,9 @@ mindplot.RelationshipLine.prototype.addToWorkspace = function(workspace)
this._line2d.addEventListener('click', this._controlPointControllerListener);
this._isInWorkspace = true;
workspace.appendChild(this._startArrow);
workspace.appendChild(this._endArrow);
mindplot.RelationshipLine.superClass.addToWorkspace.call(this, workspace);
};
@ -96,6 +138,9 @@ mindplot.RelationshipLine.prototype.removeFromWorkspace = function(workspace){
workspace.removeChild(this._controlPointsController);
this._line2d.removeEventListener('click',this._controlPointControllerListener);
this._isInWorkspace = false;
workspace.removeChild(this._startArrow);
workspace.removeChild(this._endArrow);
mindplot.RelationshipLine.superClass.removeFromWorkspace.call(this,workspace);
};
@ -151,5 +196,41 @@ mindplot.RelationshipLine.prototype.isInWorkspace = function(){
return this._isInWorkspace;
};
mindplot.RelationshipLine.prototype.setVisibility = function(value)
{
mindplot.RelationshipLine.superClass.setVisibility.call(this,value);
this._endArrow.setVisibility(value);
this._startArrow.setVisibility(value);
};
mindplot.RelationshipLine.prototype.setShowEndArrow = function(visible){
this._showEndArrow = visible;
if(this._isInWorkspace)
this.redraw();
};
mindplot.RelationshipLine.prototype.setShowStartArrow = function(visible){
this._showStartArrow = visible;
if(this._isInWorkspace)
this.redraw();
};
mindplot.RelationshipLine.prototype.isShowEndArrow = function(){
return this._showEndArrow;
};
mindplot.RelationshipLine.prototype.isShowStartArrow = function(){
return this._showStartArrow;
};
mindplot.RelationshipLine.prototype.setFrom = function(x,y){
this._line2d.setFrom(x,y);
this._startArrow.setFrom(x,y);
};
mindplot.RelationshipLine.prototype.setTo = function(x,y){
this._line2d.setTo(x,y);
this._endArrow.setFrom(x,y);
};
mindplot.RelationshipLine.type = "RelationshipLine";

View File

@ -92,6 +92,7 @@
<include>${basedir}/target/tmp/peer/svg/ArialFont-min.js</include>
<include>${basedir}/target/tmp/peer/svg/PolyLinePeer-min.js</include>
<include>${basedir}/target/tmp/peer/svg/CurvedLinePeer-min.js</include>
<include>${basedir}/target/tmp/peer/svg/ArrowPeer-min.js</include>
<include>${basedir}/target/tmp/peer/svg/TextPeer-min.js</include>
<include>${basedir}/target/tmp/peer/svg/WorkspacePeer-min.js</include>
<include>${basedir}/target/tmp/peer/svg/GroupPeer-min.js</include>
@ -111,6 +112,7 @@
<include>${basedir}/target/tmp/Line-min.js</include>
<include>${basedir}/target/tmp/PolyLine-min.js</include>
<include>${basedir}/target/tmp/CurvedLine-min.js</include>
<include>${basedir}/target/tmp/Arrow-min.js</include>
<include>${basedir}/target/tmp/Rect-min.js</include>
<include>${basedir}/target/tmp/Text-min.js</include>
<include>${basedir}/target/tmp/Toolkit-min.js</include>

View File

@ -75,11 +75,9 @@ web2d.peer.ToolkitVML =
},
createCurvedLine: function()
{
return new web2d.peer.vml.CurvedLinePeer();
},
createCurvedLine: function()
createArrow: function()
{
return new web2d.peer.vml.CurvedLinePeer();
},
createImage: function ()
{
@ -142,6 +140,10 @@ web2d.peer.ToolkitSVG =
{
return new web2d.peer.svg.CurvedLinePeer();
},
createArrow: function()
{
return new web2d.peer.svg.ArrowPeer();
},
createText: function ()
{
return new web2d.peer.svg.TextPeer();

View File

@ -196,13 +196,7 @@ web2d.peer.svg.CurvedLinePeer.prototype._updatePath = function(avoidControlPoint
yp2 = (x32==0?l2*Math.sign(y32):mp2*xp2);
}
var path = (this._showStartArrow?" "
+"M"+this._x1+","+this._y1+" "
+"L"+(xs2+this._x1)+","+(ys2+this._y1)
+"M"+this._x1+","+this._y1+" "
+"L"+(xp2+this._x1)+","+(yp2+this._y1)
:"")+
"M"+this._x1+","+this._y1
var path = "M"+this._x1+","+this._y1
+" C"+(this._control1.x+this._x1)+","+(this._control1.y+this._y1)+" "
+(this._control2.x+this._x2)+","+(this._control2.y+this._y2)+" "
+this._x2+","+this._y2+
@ -211,13 +205,7 @@ web2d.peer.svg.CurvedLinePeer.prototype._updatePath = function(avoidControlPoint
+(this._control1.x+this._x1)+","+(this._control1.y+this._y1+3)+" "
+this._x1+","+(this._y1+3)+" Z"
:""
)+
(this._showEndArrow?" "
+"M"+this._x2+","+this._y2+" "
+"L"+(x+this._x2)+","+(y+this._y2)
+"M"+this._x2+","+this._y2+" "
+"L"+(xp+this._x2)+","+(yp+this._y2)
:"");
);
this._native.setAttribute("d",path);
};

View File

@ -41,6 +41,7 @@
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/PolyLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/CurvedLinePeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArrowPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
<script type="text/javascript" src="../../../../src/main/javascript/peer/vml/GroupPeer.js"></script>