Making relationship arrows a solid line

mindplot/src/main/javascript/ConnectionLine.js

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

mindplot/src/main/javascript/ControlPoint.js

@@ -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);

mindplot/src/main/javascript/MindmapDesigner.js

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

mindplot/src/main/javascript/RelationshipLine.js

@@ -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";

web2d/pom.xml

@@ -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>

web2d/src/main/javascript/Toolkit.js

@@ -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();

web2d/src/main/javascript/peer/svg/CurvedLinePeer.js

@@ -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?" "
+    var path = "M"+this._x1+","+this._y1
-                   +"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
                 +" 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);
 };
 

web2d/src/test/javascript/render/curvedLine.html

@@ -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>