Added edge bend. Small edges fixes.

lang/en/home.php

@@ -138,4 +138,6 @@
 
     $g_lang["start_traversal"]  = "Select start traversal vertex";
     $g_lang["traversal_order"]  = "Traversal order: ";
+
+    $g_lang["curve_edge"]       = "Edge bend";
 ?>

lang/ru/home.php

@@ -141,4 +141,6 @@
 
     $g_lang["start_traversal"]  = "Выбирете начальную вершину обхода";
     $g_lang["traversal_order"]  = "Порядок обхода: ";
+
+    $g_lang["curve_edge"]       = "Изгиб дуги";
 ?>

script/Appilcation.js

@@ -197,9 +197,33 @@ Application.prototype.setRenderPath = function(renderPath)
     }
 }
 
-Application.prototype.RedrawEdge = function(context, edge)
+Application.prototype.GetBaseArcDrawer = function(context, edge)
 {
     var arcDrawer = new BaseEdgeDrawer(context);
+    
+    if (edge.model.type == EdgeModels.cruvled)
+    {
+        var curvedArcDrawer = new CurvedArcDrawer(context, edge.model);
+
+        arcDrawer = new BaseEdgeDrawer(context, 
+                                        {
+                                            drawArc             : curvedArcDrawer, 
+                                            startArrowDiretion  : curvedArcDrawer,
+                                            finishArrowDiretion : curvedArcDrawer,
+                                            textCenterObject    : curvedArcDrawer,
+                                            getPointOnArc       : curvedArcDrawer
+                                        }
+                                      );
+    }
+    
+    return arcDrawer;
+}
+
+Application.prototype.RedrawEdge = function(context, edge)
+{
+    var curvedArcDrawer = new CurvedArcDrawer(context, edge.model)
+    var arcDrawer       = this.GetBaseArcDrawer(context, edge);
+    
     var commonStyle      = new CommonEdgeStyle(context);
     var selectedStyles   = selectedEdgeStyles;
     
@@ -222,7 +246,8 @@ Application.prototype._RedrawEdgeWithStyle = function(edge, style, arcDrawer, co
 
 Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
 {
-    var arcDrawer        = new ProgressArcDrawer(context, new BaseEdgeDrawer(context), progress);
+    var progressDraw     = new ProgressArcDrawer(context, this.GetBaseArcDrawer(context, edge), progress);
+    var arcDrawer        = new BaseEdgeDrawer(context, {drawObject : progressDraw});
     var commonStyle      = new CommonEdgeStyle(context);
     var selectedStyles   = selectedEdgeStyles;
 
@@ -237,7 +262,6 @@ Application.prototype.RedrawEdges = function(context)
     }
 }
 
-
 Application.prototype.RedrawNodes = function(context)
 {
     var graphDrawer = new BaseVertexDrawer(context);
@@ -374,12 +398,38 @@ Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight)
 		useWeight = true;
 	}
 	weight = (!isNaN(parseInt(weight, 10)) && weight >= 0) ? weight : 1;
-	return this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight, useWeight));
+	var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight, useWeight));
+    
+    // Make cruvled for pair.
+    var edgeObject = this.graph.edges[edge];
+    if (edgeObject.hasPair)
+    {
+        if (edgeObject.model.default)
+            edgeObject.model.type = EdgeModels.cruvled; 
+        
+        var pairEdge = this.FindEdge(graph2.id, graph1.id);
+        if (pairEdge.model.default)
+            pairEdge.model.type = EdgeModels.cruvled; 
+    }
+    
+    return edge;
 }
 
 Application.prototype.DeleteEdge = function(edgeObject)
 {
+    var vertex1 = edgeObject.vertex1;
+    var vertex2 = edgeObject.vertex2;
+    var hasPair = edgeObject.hasPair;
+    
 	this.graph.DeleteEdge(edgeObject);
+    
+    // Make line for pair.
+    if (hasPair)
+    {
+        var edgeObject = this.FindEdge(vertex2.id, vertex1.id);
+        if (edgeObject.model.default)
+            edgeObject.model.type = EdgeModels.line;
+    }
 }
 
 Application.prototype.DeleteVertex = function(graphObject)

script/BaseEdge.js

@@ -34,6 +34,7 @@ BaseEdge.prototype.SaveToXML = function ()
            "text=\""       + this.text + "\" " +
            "arrayStyleStart=\""       + this.arrayStyleStart + "\" " +
            "arrayStyleFinish=\""       + this.arrayStyleFinish + "\" " +
+           this.model.SaveToXML() + 
 		"></edge>";       
 }
 
@@ -51,6 +52,8 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph)
     this.text      =    xml.attr("text") == null ? "" : xml.attr("text");
     this.arrayStyleStart      =   xml.attr("arrayStyleStart") == null ? "" : xml.attr("arrayStyleStart");
     this.arrayStyleFinish      =  xml.attr("arrayStyleFinish") == null ? "" : xml.attr("arrayStyleFinish");
+    
+    this.model.LoadFromXML(xml);
 }
 
 BaseEdge.prototype.GetPixelLength = function ()
@@ -84,3 +87,77 @@ BaseEdge.prototype.GetFinishEdgeStyle = function ()
 {
     return (this.arrayStyleFinish != "" ? this.arrayStyleFinish : (this.isDirect ? "arrow" : ""));
 }
+
+BaseEdge.prototype.HitTest = function (pos)
+{
+    var positions = this.GetEdgePositionsShift();
+    return this.model.HitTest(positions[0], positions[1], pos);
+}
+
+BaseEdge.prototype.GetEdgePositionsShift = function()
+{
+    var pairShift = this.vertex1.model.diameter * 0.25;
+    var shift     = (this.hasPair ? pairShift : 0);
+    
+    if (shift == 0 || this.model.type == EdgeModels.cruvled)
+    {
+        return this.GetEdgePositions();
+    }
+    else
+    {
+        var position1 = this.vertex1.position;
+        var position2 = this.vertex2.position;
+        var diameter1 = this.vertex1.model.diameter;
+        var diameter2 = this.vertex2.model.diameter;
+        
+        var direction = position1.subtract(position2);
+        direction.normalize(1.0);
+        var normal = direction.normal();
+        direction = direction.multiply(0.5);
+        position1 = position1.subtract(normal.multiply(shift));
+        position2 = position2.subtract(normal.multiply(shift));
+        diameter1 = Math.sqrt(diameter1 * diameter1 - shift * shift);
+        diameter2 = Math.sqrt(diameter2 * diameter2 - shift * shift);
+        var res = [];
+        res.push(position1.subtract(direction.multiply(diameter1)));
+        res.push(position2.subtract(direction.multiply(-diameter2)));
+        return res;
+    }  
+}
+
+BaseEdge.prototype.GetEdgePositions = function()
+{
+    var position1 = this.vertex1.position;
+    var position2 = this.vertex2.position;
+    var diameter1 = this.vertex1.model.diameter;
+    var diameter2 = this.vertex2.model.diameter;
+
+    var direction = position1.subtract(position2);
+    
+    var direction1 = direction;
+    var direction2 = direction;
+    var d1        = diameter1;
+    var d2        = -diameter2;
+    
+    if (this.model.type == EdgeModels.cruvled)
+    {
+        var dist   = position1.distance(position2);
+        var point1  = this.model.GetCurvedPoint(position1, position2, 10.0 / dist);
+        direction1  = position1.subtract(point1);
+        
+        var point2  = this.model.GetCurvedPoint(position1, position2, 1.0 - 10.0 / dist);
+        direction2  = position2.subtract(point2);
+        
+        d2         = diameter2;
+    }
+
+    direction1.normalize(1.0);
+    direction1 = direction1.multiply(0.5);
+    direction2.normalize(1.0);
+    direction2 = direction2.multiply(0.5);
+
+    var res = [];
+    res.push(position1.subtract(direction1.multiply(d1)));
+    res.push(position2.subtract(direction2.multiply(d2)));
+    return res;
+}

script/BaseEdgeDrawer.js

@@ -14,7 +14,6 @@ function CommonEdgeStyle()
 	this.loopShiftAngel = Math.PI / 6;
 }
 
-
 function SelectedEdgeStyle0()
 {
 	CommonEdgeStyle.apply(this, arguments);  
@@ -83,42 +82,67 @@ var selectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(),
 	new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
 
 
-function BaseEdgeDrawer(context)
+function BaseEdgeDrawer(context, drawObjects = null)
 { 
   this.context = context;
+    
+  this.drawObject = null;
+  this.drawArc = null;
+  this.startArrowDiretion  = null;
+  this.finishArrowDiretion = null;
+  this.textCenterObject    = null;
+  this.getPointOnArc       = null;   
+    
+  if (drawObjects)
+  {
+    if (drawObjects.hasOwnProperty("drawObject"))
+      this.drawObject = drawObjects.drawObject;
+    if (drawObjects.hasOwnProperty("drawArc"))
+      this.drawArc = drawObjects.drawArc;
+    if (drawObjects.hasOwnProperty("startArrowDiretion"))
+      this.startArrowDiretion = drawObjects.startArrowDiretion;
+    if (drawObjects.hasOwnProperty("finishArrowDiretion"))
+      this.finishArrowDiretion = drawObjects.finishArrowDiretion;
+    if (drawObjects.hasOwnProperty("textCenterObject"))
+      this.textCenterObject = drawObjects.textCenterObject;
+    if (drawObjects.hasOwnProperty("getPointOnArc"))
+      this.getPointOnArc = drawObjects.getPointOnArc;
+  }
 }
 
 BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle) 
 {
+  if (this.drawObject && this.drawObject != this)
+  {
+    this.drawObject.Draw(baseEdge, arcStyle);
+    return;
+  }
+    
   this.SetupStyle(baseEdge, arcStyle);
     
-  var length = baseEdge.model.width * 4;
+  var lengthArrow = baseEdge.model.width * 4;
-  var width  = baseEdge.model.width * 2;
+  var widthArrow  = baseEdge.model.width * 2;
   var position1 = baseEdge.vertex1.position;
   var position2 = baseEdge.vertex2.position;
   var direction = position1.subtract(position2); 
-  var pairShift = baseEdge.vertex1.model.diameter * 0.25;
-  var realShift = (baseEdge.hasPair ? pairShift : 0);
   direction.normalize(1.0);
-  var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
+  var positions = baseEdge.GetEdgePositionsShift();
-	baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, baseEdge.vertex2.model.diameter, realShift);
   
-  var hasStartStyle = !position1.equals(position2) && baseEdge.GetStartEdgeStyle() != "";
+  var hasStartStyle  = !position1.equals(position2) && baseEdge.GetStartEdgeStyle() != "";
   var hasFinishStyle = !position1.equals(position2) && baseEdge.GetFinishEdgeStyle() != "";
     
-  this.DrawArc (positions[0].subtract(direction.multiply(hasStartStyle  ? -length / 2 : 0.0)), 
+  this.DrawArc (positions[0], positions[1], arcStyle);
-                positions[1].subtract(direction.multiply(hasFinishStyle ? -length / 2 : 0.0)), arcStyle);
 
   this.context.fillStyle = this.context.strokeStyle;
   this.context.lineWidth = 0;
 
   if (hasStartStyle)
   {
-    this.DrawArrow(positions[0], positions[1], length, width);
+    this.DrawArrow(positions[0], this.GetStartArrowDiretion(positions[0], positions[1], lengthArrow), lengthArrow, widthArrow);
   }
   if (hasFinishStyle)
   {
-    this.DrawArrow(positions[1], positions[0], length, width);
+    this.DrawArrow(positions[1], this.GetFinishArrowDiretion(positions[0], positions[1], lengthArrow), lengthArrow, widthArrow);
   }
     
   this.SetupStyle(baseEdge, arcStyle);
@@ -140,6 +164,12 @@ BaseEdgeDrawer.prototype.SetupStyle = function(baseEdge, arcStyle)
 
 BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
 {
+  if (this.drawArc && this.drawArc != this)
+  {
+      this.drawArc.DrawArc(position1, position2, arcStyle);
+      return;
+  }
+    
   if (position1.equals(position2))
   {
     this.context.beginPath();
@@ -160,13 +190,8 @@ BaseEdgeDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
 
 BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcStyle, hasPair)
 { 
-  var textShift  = Math.min(12 / position1.subtract(position2).length(), 0.4);
+  var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
-  var centerPoint = Point.interpolate(position1, position2, 0.5 + (hasPair ? textShift : 0));
+        
-  if (position1.equals(position2))
-  {
-    centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
-    centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
-  }
   this.context.font         = "bold 16px sans-serif";
   this.context.textBaseline = "middle";
   this.context.lineWidth    = arcStyle.textStrockeWidth;
@@ -186,60 +211,74 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
 	this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
 }
 
-BaseEdgeDrawer.prototype.GetArcPositions = function(position1, position2, diameter1, diameter2)
+BaseEdgeDrawer.prototype.DrawArrow = function(position, direction, length, width) 
 {
-  var direction = position1.subtract(position2); 
-  direction.normalize(1.0);
-  direction = direction.multiply(0.5);
-  
-  var res = [];
-  res.push(position1.subtract(direction.multiply(diameter1)));
-  res.push(position2.subtract(direction.multiply(-diameter2)));
-  return res;
-}
-
-BaseEdgeDrawer.prototype.GetArcPositionsShift = function(position1, position2, diameter1, diameter2, shift)
-{
-    if (shift == 0)
-    {
-        return this.GetArcPositions(position1, position2, diameter1, diameter2);
-    }
-    else
-    {
-        var direction = position1.subtract(position2);
-        direction.normalize(1.0);
-        var normal = direction.normal();
-        direction = direction.multiply(0.5);
-        position1 = position1.subtract(normal.multiply(shift));
-        position2 = position2.subtract(normal.multiply(shift));
-        diameter1 = Math.sqrt(diameter1 * diameter1 - shift * shift);
-        diameter2 = Math.sqrt(diameter2 * diameter2 - shift * shift);
-        var res = [];
-        res.push(position1.subtract(direction.multiply(diameter1)));
-        res.push(position2.subtract(direction.multiply(-diameter2)));
-        return res;
-    }  
-}
-
-BaseEdgeDrawer.prototype.DrawArrow = function(position1, position2, length, width) 
-{
-  var direction = position1.subtract(position2); 
-  direction.normalize(1.0);
   var normal = direction.normal();
   
-  var pointOnLine = position1.subtract(direction.multiply(length));
+  var pointOnLine = position.subtract(direction.multiply(length));
   var point1 = pointOnLine.add(normal.multiply(width));
   var point2 = pointOnLine.add(normal.multiply(-width));
   
   this.context.beginPath();
-  this.context.moveTo(position1.x, position1.y);
+  this.context.moveTo(position.x, position.y);
   this.context.lineTo(point1.x, point1.y);
   this.context.lineTo(point2.x, point2.y);
-  this.context.lineTo(position1.x, position1.y);
+  this.context.lineTo(position.x, position.y);
   this.context.closePath();
   this.context.fill();
 }
 
+BaseEdgeDrawer.prototype.GetStartArrowDiretion = function(position1, position2, lengthArrow) 
+{
+    if (this.startArrowDiretion && this.startArrowDiretion != this)
+    {
+      return this.startArrowDiretion.GetStartArrowDiretion(position1, position2, lengthArrow);
+    }
+    
+    var direction = position1.subtract(position2);
+    direction.normalize(1.0);
+    return direction;
+}
+
+BaseEdgeDrawer.prototype.GetFinishArrowDiretion = function(position1, position2, lengthArrow) 
+{
+    if (this.finishArrowDiretion && this.finishArrowDiretion != this)
+    {
+      return this.finishArrowDiretion.GetFinishArrowDiretion(position1, position2, lengthArrow);
+    }
+
+    var direction = position2.subtract(position1);
+    direction.normalize(1.0);
+    return direction;
+}
+
+BaseEdgeDrawer.prototype.GetTextCenterPoint = function (position1, position2, hasPair, arcStyle)
+{
+  if (this.textCenterObject && this.textCenterObject != this)
+  {
+    return this.textCenterObject.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
+  }
+    
+  var textShift   = Math.min(12 / position1.subtract(position2).length(), 0.4);
+  var centerPoint = Point.interpolate(position1, position2, 0.5 + (hasPair ? textShift : 0));
+  if (position1.equals(position2))
+  {
+    centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+    centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+  } 
+    
+  return centerPoint;
+}
+
+BaseEdgeDrawer.prototype.GetPointOnArc = function (position1, position2, procent)
+{
+    if (this.getPointOnArc && this.getPointOnArc != this)
+    {
+      return this.getPointOnArc.GetPointOnArc(position1, position2, procent);
+    }
+    
+  return Point.interpolate(position1, position2, procent);
+}
 
 function ProgressArcDrawer(context, baseDrawer, progress)
 {
@@ -259,10 +298,7 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
     
     this.context.lineWidth = 10;
     
-    var pairShift = baseEdge.vertex1.model.diameter * 0.25;
+    var positions = baseEdge.GetEdgePositionsShift();
-    var realShift = (baseEdge.hasPair ? pairShift : 0);
-    var positions = this.GetArcPositionsShift(baseEdge.vertex1.position,
-                                              baseEdge.vertex2.position, baseEdge.vertex1.model.diameter, baseEdge.vertex2.model.diameter, realShift);
     var progressSize = 10;
     
     if (positions[0].equals(positions[1]))
@@ -277,8 +313,8 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
     }
     else
     {
-        var startPosition = Point.interpolate(positions[0], positions[1], this.progress);
+        var startPosition  = this.baseDrawer.GetPointOnArc(positions[0], positions[1], this.progress);
-        var vectorOffset = positions[0].subtract(positions[1]).normalizeCopy(progressSize);
+        var vectorOffset   = positions[0].subtract(positions[1]).normalizeCopy(progressSize);
         var finishPosition = startPosition.add(vectorOffset);
         
         this.context.beginPath();
@@ -290,7 +326,66 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
 }
 
 
+function CurvedArcDrawer(context, model)
+{
+    this.context = context;
+    this.model   = model;
+}
 
+CurvedArcDrawer.prototype = Object.create(BaseEdgeDrawer.prototype);
 
+CurvedArcDrawer.prototype.DrawArc = function(position1, position2, arcStyle)
+{
+  if (position1.equals(position2))
+  {
+    this.context.beginPath();
+    this.context.arc(position1.x - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, 
+                     position1.y - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop, arcStyle.sizeOfLoop, 0, 2 * Math.PI);
+    this.context.closePath();
+    this.context.stroke();
+  }
+  else
+  {
+    var points = this.model.GetBezierPoints(position1, position2);
+    var firstBezierPoint  = points[0];  
+    var secondBezierPoint = points[1];
+    
+    this.context.beginPath();
+    this.context.moveTo(position1.x, position1.y);
+    this.context.bezierCurveTo(firstBezierPoint.x, firstBezierPoint.y, secondBezierPoint.x, secondBezierPoint.y, position2.x, position2.y);
+    this.context.stroke(); 
+  }
+}
 
+CurvedArcDrawer.prototype.GetStartArrowDiretion = function(position1, position2, lengthArrow) 
+{
+    var dist = position1.distance(position2);
+    var direction = position1.subtract(this.model.GetCurvedPoint(position1, position2, lengthArrow / dist));
+    direction.normalize(1.0);
+    return direction;
+}
 
+CurvedArcDrawer.prototype.GetFinishArrowDiretion = function(position1, position2, lengthArrow) 
+{
+    var dist      = position1.distance(position2);
+    var direction = position2.subtract(this.model.GetCurvedPoint(position1, position2, 1.0 - lengthArrow / dist));
+    direction.normalize(1.0);
+    return direction;
+}
+
+CurvedArcDrawer.prototype.GetTextCenterPoint = function (position1, position2, hasPair, arcStyle)
+{
+  var centerPoint = this.model.GetCurvedPoint(position1, position2, 0.5)
+  if (position1.equals(position2))
+  {
+    centerPoint.y = centerPoint.y - Math.cos(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+    centerPoint.x = centerPoint.x - Math.sin(arcStyle.loopShiftAngel) * arcStyle.sizeOfLoop * 2;
+  } 
+    
+  return centerPoint;
+}
+
+CurvedArcDrawer.prototype.GetPointOnArc = function (position1, position2, procent)
+{   
+  return this.model.GetCurvedPoint(position1, position2, procent);
+}

script/EdgeModel.js

@@ -3,7 +3,145 @@
  *
  */
 
+var EdgeModels = {"line": 0, "cruvled" : 1};
+                
 function EdgeModel()
 {
     this.width = 4;
+    this.type  = EdgeModels.line;
+    this.curvedValue = EdgeModel.prototype.defaultCruved;
+    this.default = true;
+}
+
+EdgeModel.prototype.defaultCruved = 0.1;
+
+EdgeModel.prototype.SaveToXML = function ()
+{
+    return "model_width=\"" + this.width + "\" " +
+	       "model_type=\""  + this.type   + "\" " +
+	       "model_curvedValue=\""  + this.curvedValue + "\" "
+           "model_default=\""  + this.default + "\" ";
+}
+
+EdgeModel.prototype.LoadFromXML = function (xml, graph)
+{
+	this.width = xml.attr('model_width') == null ? this.width : parseFloat(xml.attr("model_width"));
+	this.type  = xml.attr('model_type')  == null ? this.type  : xml.attr("model_type");
+	this.curvedValue  = xml.attr('model_curvedValue')  == null ? this.curvedValue : parseFloat(xml.attr("model_curvedValue"));
+    this.default = xml.attr('model_default') == null ? this.default : parseFloat(xml.attr("model_default"));
+}
+
+EdgeModel.prototype.GetCurvedPoint = function(position1, position2, t)
+{
+    var points = this.GetBezierPoints(position1, position2);
+    var firstBezierPoint  = points[0];  
+    var secondBezierPoint = points[1];
+    
+    var B0_t = Math.pow(1-t, 3);
+    var B1_t = 3 * t * Math.pow(1-t, 2);
+    var B2_t = 3 * t*t * (1-t)
+    var B3_t = t*t*t;
+    
+    var ax = position1.x;
+    var ay = position1.y;
+    var dx = position2.x;
+    var dy = position2.y;
+    var bx = firstBezierPoint.x;
+    var by = firstBezierPoint.y;
+    var cx = secondBezierPoint.x;
+    var cy = secondBezierPoint.y;
+    
+    var px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx);
+    var py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy);
+    
+    return new Point(px_t, py_t);
+}
+
+EdgeModel.prototype.GetBezierPoints = function(position1, position2)
+{
+    var direction = position2.subtract(position1); 
+    var delta     = direction.length();
+    direction.normalize(1.0);  
+    var normal = direction.normal();
+    
+    var deltaOffsetPixels = delta * this.curvedValue;
+    var yOffset = normal.multiply(deltaOffsetPixels);
+    var firstBezierPointShift  = (direction.multiply(delta * 0.2)).add(yOffset); 
+    var secondBezierPointShift = (direction.multiply(-delta * 0.2)).add(yOffset); 
+    var firstBezierPoint  = position1.add(firstBezierPointShift);  
+    var secondBezierPoint = position2.add(secondBezierPointShift);
+    
+    return [firstBezierPoint, secondBezierPoint];
+}
+
+
+EdgeModel.prototype.HitTest = function(position1, position2, mousePos)
+{
+    if (this.type == EdgeModels.line)
+        return this.HitTestLine(position1, position2, mousePos);
+    else if (this.type == EdgeModels.cruvled)
+        return this.HitTestCurved(position1, position2, mousePos);
+    
+    return false;
+}
+
+
+EdgeModel.prototype.HitTestLine = function(position1, position2, mousePos, factor = 1.0)
+{
+    var pos1 = position1;
+    var pos2 = position2;
+    var pos0 = mousePos;
+		
+    var r1  = pos0.distance(pos1);
+    var r2  = pos0.distance(pos2);
+    var r12 = pos1.distance(pos2);
+		
+    if (r1 >= (new Point(r2, r12)).length() || r2 >= (new Point(r1,r12)).length())
+    {
+    }
+    else		
+    { 
+        var distance = ((pos1.y - pos2.y) * pos0.x + (pos2.x - pos1.x) * pos0.y + (pos1.x * pos2.y - pos2.x * pos1.y)) / r12;
+
+        if (Math.abs(distance) <= this.width * 1.5 * factor)
+        {
+            return true;
+        }
+    }
+    
+    return false;
+}
+
+EdgeModel.prototype.HitTestCurved = function(position1, position2, mousePos)
+{
+    var interval_count = position1.distance(position2) / 100 * 30;
+    
+    var start = position1;
+    for (var i = 0; i < interval_count; i ++)
+    {
+        var finish = this.GetCurvedPoint(position1, position2, i / interval_count);
+        
+        if (this.HitTestLine(start, finish, mousePos, 2.0))
+            return true;
+        
+        start = finish;
+    }
+    
+    return false;
+}
+
+EdgeModel.prototype.ChangeCurvedValue = function (delta)
+{
+    if (this.type == EdgeModels.line)
+    {
+        this.type = EdgeModels.cruvled;
+        this.curvedValue = 0.0;
+    }
+
+    this.curvedValue = this.curvedValue + delta;
+    
+    if (Math.abs(this.curvedValue) <= 0.01)
+        this.type = EdgeModels.line;
+    
+    this.default = false;
 }

script/EventHandlers.js

@@ -57,26 +57,10 @@ BaseHandler.prototype.GetSelectedArc = function(pos)
 	// Selected Arc.
     for (var i = 0; i < this.app.graph.edges.length; i ++)
     {
-		var pos1 = this.app.graph.edges[i].vertex1.position;
+        var edge = this.app.graph.edges[i];
-		var pos2 = this.app.graph.edges[i].vertex2.position;
+        
-		var pos0 = new Point(pos.x, pos.y);
+        if (edge.HitTest(new Point(pos.x, pos.y)))
-		
+            return edge;
-		var r1  = pos0.distance(pos1);
-		var r2  = pos0.distance(pos2);
-		var r12 = pos1.distance(pos2);
-		
-		if (r1 >= (new Point(r2, r12)).length() || r2 >= (new Point(r1,r12)).length())
-		{
-		}
-		else		
-		{ 
-			var distance = ((pos1.y - pos2.y) * pos0.x + (pos2.x - pos1.x) * pos0.y + (pos1.x * pos2.y - pos2.x * pos1.y)) / r12;
-
-			if (Math.abs(distance) <= this.app.graph.edges[i].model.width * 1.5)
-			{
-				return this.app.graph.edges[i];
-			}
-		}
 	}
 
 	
@@ -217,9 +201,10 @@ function DefaultHandler(app)
 {
 	BaseHandler.apply(this, arguments);
 	this.message = g_textsSelectAndMove;
+    
+    this.bindedRename   = false;
 }
 
-
 // inheritance.
 DefaultHandler.prototype = Object.create(BaseHandler.prototype);
 // Current drag object.
@@ -230,10 +215,8 @@ DefaultHandler.prototype.selectedObject = null;
 DefaultHandler.prototype.pressed = false;
 // Prev position.
 DefaultHandler.prototype.prevPosition = false;
-// Is binded event for rename
+// Cuvled change value.
-DefaultHandler.prototype.bindedRename = false;
+DefaultHandler.prototype.curvedValue    = 0.1;
-// Is binded event for edit edge
-DefaultHandler.prototype.editEdgeRename = false;
 
 DefaultHandler.prototype.MouseMove = function(pos) 
 {
@@ -307,48 +290,58 @@ DefaultHandler.prototype.MouseUp = function(pos)
     }
     else if (this.selectedObject != null && (this.selectedObject instanceof BaseEdge))
     {
-        this.message = g_textsSelectAndMove + " <button type=\"button\" id=\"editEdge\" class=\"btn btn-default btn-xs\" style=\"float:right;z-index:1;position: relative;\">" + g_editWeight + "</button>";
+        this.message = g_textsSelectAndMove
+        + "<span style=\"float:right;\"><button type=\"button\" id=\"incCurvel\" class=\"btn btn-default btn-xs\"> + </button>"
+        + " " + g_curveEdge + " "
+        + "<button type=\"button\" id=\"decCurvel\" class=\"btn btn-default btn-xs\"> - </button>"
+        + "&nbsp &nbsp<button type=\"button\" id=\"editEdge\" class=\"btn btn-default btn-xs\" style=\"z-index:1;position: relative;\">" + g_editWeight + "</button></span>";
         var handler = this;
-        if (!this.editEdgeRename)
+        $('#message').unbind();
-        {
+        $('#message').on('click', '#editEdge', function(){
-            $('#message').unbind();
+                         var direct = false;
-            $('#message').on('click', '#editEdge', function(){
+                         var dialogButtons = {};
-                             var direct = false;
+
-                             var dialogButtons = {};
+                         dialogButtons[g_save] = function() {
-                             
+
-                             dialogButtons[g_save] = function() {
+                            handler.app.DeleteObject(handler.selectedObject);
-                             
+                            handler.selectedObject = handler.app.graph.edges[handler.app.CreateNewArc(handler.selectedObject.vertex1, handler.selectedObject.vertex2, handler.selectedObject.isDirect, document.getElementById('EdgeWeight').value)];
-                                handler.app.DeleteObject(handler.selectedObject);
+
-                                handler.selectedObject = handler.app.graph.edges[handler.app.CreateNewArc(handler.selectedObject.vertex1, handler.selectedObject.vertex2, handler.selectedObject.isDirect, document.getElementById('EdgeWeight').value)];
+                            handler.needRedraw = true;
-                             
+                            handler.app.redrawGraph();
-                                handler.needRedraw = true;
+
-                                handler.app.redrawGraph();
+                            userAction("ChangeWeight");
-                             
+                            $( this ).dialog( "close" );
-                                userAction("ChangeWeight");
+                         };
-                                $( this ).dialog( "close" );
+
-                             };
+                         document.getElementById('EdgeWeight').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : g_noWeight;
-   
+                         document.getElementById('EdgeWeightSlider').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : 0;
-                             document.getElementById('EdgeWeight').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : g_noWeight;
+
-                             document.getElementById('EdgeWeightSlider').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : 0;
+                         $( "#addEdge" ).dialog({
-                             
+                                                resizable: false,
-                             $( "#addEdge" ).dialog({
+                                                height: "auto",
-                                                    resizable: false,
+                                                width:  "auto",
-                                                    height: "auto",
+                                                modal: true,
-                                                    width:  "auto",
+                                                title: g_editWeight,
-                                                    modal: true,
+                                                buttons: dialogButtons,
-                                                    title: g_editWeight,
+                                                dialogClass: 'EdgeDialog',
-                                                    buttons: dialogButtons,
+                                                open: function () {
-                                                    dialogClass: 'EdgeDialog',
+                                                $(handler).off('submit').on('submit', function () {
-                                                    open: function () {
+                                                                         return false;
-                                                    $(handler).off('submit').on('submit', function () {
+                                                                         });
-                                                                             return false;
+                                                }
-                                                                             });
+                                                });
-                                                    }
+                         });
-                                                    });
+
-                             });
+        $('#message').on('click', '#incCurvel', function(){
-            
+            handler.selectedObject.model.ChangeCurvedValue(DefaultHandler.prototype.curvedValue);
-            this.editEdgeRename = true;
+            handler.needRedraw = true;
-        }
+            handler.app.redrawGraph();
+        });
+        $('#message').on('click', '#decCurvel', function(){
+            handler.selectedObject.model.ChangeCurvedValue(-DefaultHandler.prototype.curvedValue);
+            handler.needRedraw = true;
+            handler.app.redrawGraph();
+        });
     }
 }
 

script/Graph.js

@@ -90,10 +90,10 @@ Graph.prototype.DeleteEdge = function(edgeObject)
 	var index = this.edges.indexOf(edgeObject);
 	if (index > -1) 
 	{
-		var edgeRevert = this.FindEdge(edgeObject.vertex2, edgeObject.vertex1);
+		var edgeRevert = this.FindEdge(edgeObject.vertex2.id, edgeObject.vertex1.id);
 		if (edgeRevert != null && edgeRevert.isDirect)
 		{
-			edgeRevert.isPair = false;
+			edgeRevert.hasPair = false;
 		}
 		this.edges.splice(index, 1);
 	}

script/texts.js

@@ -95,6 +95,8 @@ var g_hasNotHamiltonianPath = "Graph has not Hamiltonian Path";
 var g_startTraversal = "Select start traversal vector";
 var g_traversalOrder = "Traversal order: ";
 
+var g_curveEdge      = "Curved edge";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -189,4 +191,6 @@ function loadTexts()
     
     g_startTraversal = document.getElementById("startTraversal").innerHTML;
     g_traversalOrder = document.getElementById("traversalOrder").innerHTML;
+    
+    g_curveEdge = document.getElementById("curveEdge").innerHTML;
 }

tpl/home.php

@@ -10,7 +10,7 @@
 
         <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
 	<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
-        <script src="<?= Root("script/example.js?v=13")?>" ></script>
+        <script src="<?= Root("script/example.js?v=14")?>" ></script>
     </head>
 <!--
 <div class="pull-right">
@@ -428,6 +428,8 @@
         
     <p id="startTraversal" class="translation"><?= L('start_traversal')?></p>
     <p id="traversalOrder" class="translation"><?= L('traversal_order')?></p>
+
+    <p id="curveEdge" class="translation"><?= L('curve_edge')?></p>
 </section>
 <!--
 <script>