Added up text for edges.

i/css/home.css

@@ -86,7 +86,7 @@
 
     #EdgeWeight
     {
-        max-width : 80px;
+        width: 86px;
     }
 
     #EdgeWeightSlider
@@ -355,3 +355,8 @@
 {
     padding-top: 8px;
 }
+
+#EdgeLabelControls
+{
+    padding-top: 4px;   
+}

lang/en/home.php

@@ -174,4 +174,5 @@
     $g_lang["replace_edge"] = "replace current";
     $g_lang["add_edge"] = "add (multigraph)";
     $g_lang["french_add"] = "We have added French translation 🇫🇷";
+    $g_lang["text_above_edge"] = "Text above edge";
 ?>

lang/fr/home.php

@@ -143,4 +143,5 @@
     $g_lang["graph_is_general_message"] = "";
     $g_lang["replace_edge"] = "remplacer l'actuel";
     $g_lang["add_edge"] = "ajout (multigraphe)";
+    $g_lang["text_above_edge"] = "Texte au-dessus du bord";
 ?>

lang/ru/home.php

@@ -176,4 +176,5 @@
 
     $g_lang["graph_is_multi_message"]   = "Мультиграф не поддерживает все алгоритмы";
     $g_lang["graph_is_general_message"] = "";
+    $g_lang["text_above_edge"] = "Текст над дугой";
 ?>

script/Appilcation.js

@@ -502,9 +502,9 @@ Application.prototype.CreateNewGraphEx = function(x, y, vertexEnume)
     return this.graph.AddNewVertex(new BaseVertex(x, y, vertexEnume));
 }
 
-Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist)
+Application.prototype.CreateNewArc = function(graph1, graph2, isDirect, weight, replaceIfExist, upText)
 {
-	var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight), replaceIfExist);
+	var edge = this.AddNewEdge(new BaseEdge(graph1, graph2, isDirect, weight, upText), replaceIfExist);
 
     var edgeObject = this.graph.edges[edge];
     var hasPair    = this.graph.hasPair(edgeObject);

script/BaseEdge.js

@@ -4,7 +4,7 @@
  *
  */
 
-function BaseEdge(vertex1, vertex2, isDirect, weight)
+function BaseEdge(vertex1, vertex2, isDirect, weight, upText)
 {
     this.vertex1    = vertex1;
     this.vertex2    = vertex2;
@@ -17,6 +17,7 @@ function BaseEdge(vertex1, vertex2, isDirect, weight)
     this.useWeight = false;
     this.id        = 0;
     this.model = new EdgeModel();
+    this.upText    = upText;
     
     if (weight !== undefined)
       this.SetWeight(weight);
@@ -32,6 +33,7 @@ BaseEdge.prototype.SaveToXML = function ()
 	       "useWeight=\""  + this.useWeight + "\" " +
 	       "id=\""         + this.id + "\" " +
            "text=\""       + this.text + "\" " +
+           "upText=\""     + this.upText + "\" " +
            "arrayStyleStart=\""       + this.arrayStyleStart + "\" " +
            "arrayStyleFinish=\""       + this.arrayStyleFinish + "\" " +
            this.model.SaveToXML() + 
@@ -64,6 +66,11 @@ 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.upText    = xml.attr('upText');
+    if (typeof this.upText === 'undefined')
+    {
+        this.upText = "";        
+    }
     
     this.model.LoadFromXML(xml);
 }
@@ -90,6 +97,11 @@ BaseEdge.prototype.GetText = function ()
     return this.text.length > 0 ? this.text : (this.useWeight ? this.weight.toString() : "");
 }
 
+BaseEdge.prototype.GetUpText = function ()
+{
+    return this.upText;
+}
+
 BaseEdge.prototype.GetStartEdgeStyle = function ()
 {
     return this.arrayStyleStart;
@@ -160,3 +172,8 @@ BaseEdge.prototype.SetWeight = function(weight)
     this.weight    = Number(weight);
     this.useWeight = useWeight;
 }
+
+BaseEdge.prototype.SetUpText = function(text)
+{
+    this.upText = text;
+}

script/BaseEdgeDrawer.js

@@ -165,6 +165,11 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
   {
 	this.DrawWeight(positions[0], positions[1], baseEdge.GetText(), arcStyle, false);
   }
+
+  if (baseEdge.GetUpText().length > 0)
+  {
+    this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false);
+  }
 }
 
 
@@ -216,13 +221,44 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
   this.context.beginPath();
   this.context.rect(centerPoint.x - widthText / 2 - arcStyle.textPadding / 2, 
                     centerPoint.y - 8 - arcStyle.textPadding / 2, 
-    widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
+                    widthText + arcStyle.textPadding, 16 + arcStyle.textPadding);
   this.context.closePath();
   this.context.fill();
   this.context.stroke ();
 
-	this.context.fillStyle = arcStyle.weightText;	
+  this.context.fillStyle = arcStyle.weightText;	
-	this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
+  this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
+}
+
+BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair)
+{ 
+  var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
+        
+  this.context.font         = "bold 12px sans-serif";
+  this.context.textBaseline = "middle";
+
+  var widthText = this.context.measureText(text).width;
+
+  this.context.fillStyle = arcStyle.strokeStyle;	
+
+  var vectorEdge   = new Point(position2.x - position1.x, position2.y - position1.y);
+  var angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
+  if (angleRadians > Math.PI / 2 || angleRadians < -Math.PI / 2)
+  {
+    vectorEdge   = new Point(position1.x - position2.x, position1.y - position2.y);
+    angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);          
+  }
+  var normalize    = vectorEdge.normal().normalizeCopy(20);
+  this.context.save();
+  this.context.translate(centerPoint.x - normalize.x, centerPoint.y - normalize.y);
+  this.context.rotate(angleRadians);
+  this.context.textAlign = "center";
+  //context.textAlign = "center";
+  //context.fillText("Your Label Here", labelXposition, 0);
+    
+  this.context.fillText(text, 0, 0);
+
+  this.context.restore();
 }
 
 BaseEdgeDrawer.prototype.DrawArrow = function(position, direction, length, width) 

script/EventHandlers.js

@@ -302,6 +302,7 @@ DefaultHandler.prototype.MouseUp = function(pos)
                          dialogButtons[g_save] = function() {
                         
                            handler.selectedObject.SetWeight(document.getElementById('EdgeWeight').value);
+                           handler.selectedObject.SetUpText(document.getElementById('EdgeLable').value);
                              
                             handler.needRedraw = true;
                             handler.app.redrawGraph();
@@ -313,6 +314,17 @@ DefaultHandler.prototype.MouseUp = function(pos)
                          document.getElementById('EdgeWeight').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : g_noWeight;
                          document.getElementById('EdgeWeightSlider').value = handler.selectedObject.useWeight ? handler.selectedObject.weight : 0;
 
+                        var edgePresets = handler.app.GetEdgePresets();
+                        var presetsStr  = "<span onClick=\"document.getElementById('EdgeWeight').value='" + g_DefaultWeightPreset + "'; document.getElementById('EdgeWeightSlider').value='" + g_DefaultWeightPreset + "';\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + g_DefaultWeightPreset + "</span>";
+
+                        for(var i = 0; i < edgePresets.length; i ++) 
+                        {
+                            var edgePreset = edgePresets[i];
+                            presetsStr += "<span onClick=\"document.getElementById('EdgeWeight').value='" + edgePreset + "'; document.getElementById('EdgeWeightSlider').value=" + edgePreset + ";\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + edgePreset + "</span>";
+                        }        
+                        document.getElementById("EdgesPresets").innerHTML = presetsStr;
+                        document.getElementById('EdgeLable').value = handler.selectedObject.upText;
+            
                          $( "#addEdge" ).dialog({
                                                 resizable: false,
                                                 height: "auto",
@@ -421,7 +433,9 @@ ConnectionGraphHandler.prototype.firstObject = null;
 
 ConnectionGraphHandler.prototype.AddNewEdge = function(selectedObject, isDirect)
 {
-	this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"));
+	this.app.CreateNewArc(this.firstObject, selectedObject, isDirect, document.getElementById('EdgeWeight').value, $("#RadiosReplaceEdge").prop("checked"), document.getElementById('EdgeLable').value);
+    
+    EdgeLable
 	this.SelectFirst();					
 	this.app.NeedRedraw();
 }
@@ -471,6 +485,7 @@ ConnectionGraphHandler.prototype.SelectVertex = function(selectedObject)
             presetsStr += "<span onClick=\"document.getElementById('EdgeWeight').value='" + edgePreset + "'; document.getElementById('EdgeWeightSlider').value=" + edgePreset + ";\" style=\"cursor: pointer\" class=\"defaultWeigth\">" + edgePreset + "</span>";
         }        
         document.getElementById("EdgesPresets").innerHTML = presetsStr;
+        document.getElementById('EdgeLable').value = "";
         
         $( "#addEdge" ).dialog({
             resizable: false,
@@ -1280,7 +1295,7 @@ SetupEdgeStyle.prototype.show = function(index)
         var graphDrawer  = new BaseEdgeDrawer(context);
         var baseVertex1  = new BaseVertex(0, canvas.height / 2, new BaseEnumVertices(this));
         var baseVertex2  = new BaseVertex(canvas.width, canvas.height / 2, new BaseEnumVertices(this));
-        var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10);
+        var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
         
         graphDrawer.Draw(baseEdge, style);
         

tpl/home.php

@@ -215,17 +215,16 @@
     <div id="addEdge">
 		<form>
 		<fieldset>
-              <div>
+              <div id="EdgeWeightControls">
 			  <label id="WeightLabel"><?= L('edge_weight')?>&nbsp; </label> <input type="range" id="EdgeWeightSlider" min="0" max="29" value="0" oninput="document.getElementById('EdgeWeight').value = (this.value > 0 ? this.value : '<?= L('default_weight')?>');" onchange="document.getElementById('EdgeWeight').value = (this.value > 0 ? this.value : '<?= L('default_weight')?>');"> &nbsp; &nbsp;<input type="text" name="edgeWeight" value="<?= L('default_weight')?>" id="EdgeWeight" class="inputBox">
               </div>
 			  <div id="EdgesPresets">
   			  <span onClick="document.getElementById('EdgeWeight').value='<?= L('default_weight')?>'; document.getElementById('EdgeWeightSlider').value=0;" style="cursor: pointer" class="defaultWeigth"><?= L('default_weight')?></span>
   			  <span onClick="document.getElementById('EdgeWeight').value='1'; document.getElementById('EdgeWeightSlider').value=1;" style="cursor: pointer"  class="defaultWeigth">1</span>
-  			  <span onClick="document.getElementById('EdgeWeight').value='3'; document.getElementById('EdgeWeightSlider').value=3;" style="cursor: pointer"  class="defaultWeigth">3</span>
-  			  <span onClick="document.getElementById('EdgeWeight').value='5'; document.getElementById('EdgeWeightSlider').value=5;" style="cursor: pointer"  class="defaultWeigth">5</span>
-			  <span onClick="document.getElementById('EdgeWeight').value='7'; document.getElementById('EdgeWeightSlider').value=7;" style="cursor: pointer"  class="defaultWeigth">7</span>
-			  <span onClick="document.getElementById('EdgeWeight').value='11'; document.getElementById('EdgeWeightSlider').value=11;" style="cursor: pointer"  class="defaultWeigth">11</span>
 			  </div>
+              <div id="EdgeLabelControls">
+			  <label id="EdgeLabel"><?= L('text_above_edge')?></label>&nbsp;&nbsp;<input type="text" name="edgeLable" value="" id="EdgeLable" class="inputBox">
+              </div>
               <div id="NewEdgeAction">
                 <div class="InlineStyle PaddingRight">
                   <input class="form-check-input" type="radio" name="NewEdgeActionValue" id="RadiosReplaceEdge" value="replace" checked>