diff --git a/mindplot/src/main/javascript/ConnectionLine.js b/mindplot/src/main/javascript/ConnectionLine.js index fc21c438..5513e8b0 100644 --- a/mindplot/src/main/javascript/ConnectionLine.js +++ b/mindplot/src/main/javascript/ConnectionLine.js @@ -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() diff --git a/mindplot/src/main/javascript/ControlPoint.js b/mindplot/src/main/javascript/ControlPoint.js index 716b5658..e706803a 100644 --- a/mindplot/src/main/javascript/ControlPoint.js +++ b/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); diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js index 6043952a..36063f15 100644 --- a/mindplot/src/main/javascript/MindmapDesigner.js +++ b/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.getLine().setShowStartArrow(model.getStartArrow()); + relationLine.setShowEndArrow(model.getEndArrow()); + relationLine.setShowStartArrow(model.getStartArrow()); relationLine.setModel(model); //Add Listeners diff --git a/mindplot/src/main/javascript/RelationshipLine.js b/mindplot/src/main/javascript/RelationshipLine.js index be910437..cbe3f08e 100644 --- a/mindplot/src/main/javascript/RelationshipLine.js +++ b/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"; \ No newline at end of file diff --git a/web2d/pom.xml b/web2d/pom.xml index e50c0b21..8b81ec61 100644 --- a/web2d/pom.xml +++ b/web2d/pom.xml @@ -92,6 +92,7 @@ ${basedir}/target/tmp/peer/svg/ArialFont-min.js ${basedir}/target/tmp/peer/svg/PolyLinePeer-min.js ${basedir}/target/tmp/peer/svg/CurvedLinePeer-min.js + ${basedir}/target/tmp/peer/svg/ArrowPeer-min.js ${basedir}/target/tmp/peer/svg/TextPeer-min.js ${basedir}/target/tmp/peer/svg/WorkspacePeer-min.js ${basedir}/target/tmp/peer/svg/GroupPeer-min.js @@ -111,6 +112,7 @@ ${basedir}/target/tmp/Line-min.js ${basedir}/target/tmp/PolyLine-min.js ${basedir}/target/tmp/CurvedLine-min.js + ${basedir}/target/tmp/Arrow-min.js ${basedir}/target/tmp/Rect-min.js ${basedir}/target/tmp/Text-min.js ${basedir}/target/tmp/Toolkit-min.js diff --git a/web2d/src/main/javascript/Toolkit.js b/web2d/src/main/javascript/Toolkit.js index fb7ceb63..138e37da 100644 --- a/web2d/src/main/javascript/Toolkit.js +++ b/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(); diff --git a/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js b/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js index 6ab140ee..6830c082 100644 --- a/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js +++ b/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?" " - +"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); }; diff --git a/web2d/src/test/javascript/render/curvedLine.html b/web2d/src/test/javascript/render/curvedLine.html index 43d1ae9b..991b125e 100644 --- a/web2d/src/test/javascript/render/curvedLine.html +++ b/web2d/src/test/javascript/render/curvedLine.html @@ -41,6 +41,7 @@ +