Add text position.

Setting for selection groups.
Fix bugs.

lang/de/home.php

@@ -194,7 +194,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
-    $g_lang['on_up'] = "Above";        
+    $g_lang['on_up'] = "Above";   
+    
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";       
 ?>

lang/el/home.php

@@ -232,7 +232,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
-    $g_lang['on_up'] = "Above";      
+    $g_lang['on_up'] = "Above";
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";     
 ?>

lang/en/home.php

@@ -231,7 +231,12 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['vertex_diameter'] = "Vertex size";         
     
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
-    $g_lang['on_up'] = "Above";    
+    $g_lang['on_up'] = "Above";
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";    
 ?>

lang/es/home.php

@@ -231,7 +231,12 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['vertex_diameter'] = "Vertex size";
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
-    $g_lang['on_up'] = "Above";      
+    $g_lang['on_up'] = "Above";
+    
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";
 ?>

lang/fr/home.php

@@ -199,7 +199,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";    
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
     $g_lang['on_up'] = "Above";    
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";      
 ?>

lang/nl/home.php

@@ -196,7 +196,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";
     
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
     $g_lang['on_up'] = "Above";    
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";      
 ?>

lang/pt/home.php

@@ -197,7 +197,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
     $g_lang['on_up'] = "Above";    
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";      
 ?>

lang/ru/home.php

@@ -232,7 +232,12 @@
     $g_lang['vertex_diameter'] = "Размер вершины";
 
     $g_lang['additional_text_color'] = "Цвет другого текста"; 
-    $g_lang['weight_position'] = "Позиция текста";
     $g_lang['center'] = "По центру";
-    $g_lang['on_up'] = "Сверху";    
+    $g_lang['on_up'] = "Сверху";
+
+    $g_lang['weight_position'] = "Позиция веса";    
+    $g_lang['text_position'] = "Позиция текста";
+    $g_lang['line_style']    = "Стиль дуги";
+    $g_lang['edge_width']    = "Толщина дуги";
+    $g_lang['selected_index'] = "Группа выделения";    
 ?>

lang/sv/home.php

@@ -193,7 +193,12 @@
     $g_lang['vertex_diameter'] = "Vertex size";
 
     $g_lang['additional_text_color'] = "Another text color"; 
-    $g_lang['weight_position'] = "Text position";
     $g_lang['center'] = "Center";
     $g_lang['on_up'] = "Above";    
+
+    $g_lang['weight_position'] = "Weight position";    
+    $g_lang['text_position'] = "Text position";
+    $g_lang['line_style']    = "Edge style";
+    $g_lang['edge_width']    = "Edge width";
+    $g_lang['selected_index'] = "Selection group";    
 ?>

script/Appilcation.js

@@ -1512,7 +1512,7 @@ Application.prototype.LoadUserSettings = function(json)
                         {
                             for(var deepK in parsedSave[entry.field][k])
                             {
-                                if (entry.value[k].ShouldLoad(deepK))
+                                if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
                                     entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
                             }
                         }
@@ -1647,6 +1647,10 @@ Application.prototype.GetSelectionRect = function(rect)
 
 Application.prototype.GetStyle = function(type, styleName, object, index)
 {
+    var correctIndex = index;
+    if (correctIndex == undefined)
+        correctIndex = 0;
+
     if (type == "vertex")
     {
         if (styleName == "common")
@@ -1655,10 +1659,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "selected")
         {
-            if (index == undefined)
+            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[correctIndex];
-                index = 0;
-
-            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[index];
         }
         else if (styleName == "printed")
         {
@@ -1666,10 +1667,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "printedSelected")
         {
-            if (index == undefined)
+            return this.vertexPrintSelectedVertexStyles[correctIndex];
-                index = 0;
-
-            return this.vertexPrintSelectedVertexStyles[index];
         }       
 
         return null;
@@ -1682,7 +1680,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "selected")
         {
-            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[0];
+            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[correctIndex];
         }
         else if (styleName == "printed")
         {
@@ -1690,8 +1688,8 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "printedSelected")
         {
-            return this.edgePrintSelectedStyles[0];
+            return this.edgePrintSelectedStyles[correctIndex];
-        }       
+        }
 
         return null;
     }
@@ -1796,7 +1794,7 @@ Application.prototype.SetDefaultEdgeWidth = function(width)
 
 Application.prototype.GetDefaultEdgeWidth = function(diameter)
 {
-    if (this.defaultVertexSize != null)
+    if (this.defaultEdgeWidth != null)
         return this.defaultEdgeWidth;
     else
         return defaultEdgeWidth;
@@ -1804,7 +1802,7 @@ Application.prototype.GetDefaultEdgeWidth = function(diameter)
 
 Application.prototype.ResetEdgeWidth = function()
 {
-    this.defaultVertexSize = null;
+    this.defaultEdgeWidth = null;
 
     for (i = 0; i < this.graph.edges.length; i ++)
     {

script/BaseEdge.js

@@ -293,7 +293,7 @@ BaseEdge.prototype.getStyleFor = function (index)
     if (index == 0)
       style = globalApplication.GetStyle("edge", "common");
     else
-      style = globalApplication.GetStyle("edge", "selected");
+      style = globalApplication.GetStyle("edge", "selected", undefined, index - 1);
 
     return style;
   }

script/BaseEdgeDrawer.js

@@ -10,6 +10,10 @@
           [16, 4, 4, 4],
         ];
 
+// Common text position
+const WeightTextCenter = 0,
+      WeightTextUp     = 1;
+
  function BaseEdgeStyle()
  {
    this.baseStyles = [];
@@ -34,6 +38,10 @@
      baseStyle.textStrockeWidth = this.textStrockeWidth;
    if (this.hasOwnProperty('lineDash'))
      baseStyle.lineDash = this.lineDash;
+   if (this.hasOwnProperty('additionalTextColor'))
+     baseStyle.additionalTextColor = this.additionalTextColor;
+   if (this.hasOwnProperty('weightPosition'))
+     baseStyle.weightPosition = this.weightPosition;
  
    return baseStyle;
  }
@@ -53,6 +61,8 @@ function CommonEdgeStyle()
  	this.textPadding = 4;
 	this.textStrockeWidth = 2;
   this.lineDash = 0;
+  this.additionalTextColor = '#c7b7c7';
+  this.weightPosition = WeightTextCenter;
 }
 
 CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
@@ -234,15 +244,30 @@ BaseEdgeDrawer.prototype.Draw = function(baseEdge, arcStyle)
   }
     
   this.SetupStyle(baseEdge, arcStyle);
-    
-  if (baseEdge.GetText().length > 0)
-  {
-	this.DrawWeight(positions[0], positions[1], baseEdge.GetText(), arcStyle, false);
-  }
 
-  if (baseEdge.GetUpText().length > 0)
+  if (arcStyle.weightPosition == WeightTextCenter)
   {
-    this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false);
+    if (baseEdge.GetText().length > 0)
+    {
+      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, arcStyle.additionalTextColor, baseEdge.model.width / 2 + 20, null);
+    }
+  }
+  else if (arcStyle.weightPosition == WeightTextUp)
+  {
+    if (baseEdge.GetText().length > 0)
+    {
+      this.DrawUpText(positions[0], positions[1], baseEdge.GetText(), arcStyle, false, arcStyle.weightText, baseEdge.model.width / 2 + 10, "16px");
+    }
+    
+    if (baseEdge.GetUpText().length > 0)
+    {
+      this.DrawUpText(positions[0], positions[1], baseEdge.GetUpText(), arcStyle, false, arcStyle.additionalTextColor, - baseEdge.model.width / 2 - 15, null);
+    }
   }
 }
 
@@ -305,16 +330,16 @@ BaseEdgeDrawer.prototype.DrawWeight = function(position1, position2, text, arcSt
   this.context.fillText(text, centerPoint.x - widthText / 2, centerPoint.y);
 }
 
-BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair)
+BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcStyle, hasPair, color, offset, fontSize)
 { 
   var centerPoint = this.GetTextCenterPoint(position1, position2, hasPair, arcStyle);
         
-  this.context.font         = "bold 12px sans-serif";
+  this.context.font         = fontSize == null ? "bold 12px sans-serif" : "bold " + fontSize + " sans-serif";
   this.context.textBaseline = "middle";
 
   var widthText = this.context.measureText(text).width;
 
-  this.context.fillStyle = arcStyle.strokeStyle;	
+  this.context.fillStyle = color;	
 
   var vectorEdge   = new Point(position2.x - position1.x, position2.y - position1.y);
   var angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);
@@ -323,13 +348,11 @@ BaseEdgeDrawer.prototype.DrawUpText = function(position1, position2, text, arcSt
     vectorEdge   = new Point(position1.x - position2.x, position1.y - position2.y);
     angleRadians = Math.atan2(vectorEdge.y, vectorEdge.x);          
   }
-  var normalize    = vectorEdge.normal().normalizeCopy(20);
+  var normalize    = vectorEdge.normal().normalizeCopy(offset);
   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);
 

script/BaseVertex.js

@@ -94,7 +94,7 @@ BaseVertex.prototype.SetId = function (id)
 
 BaseVertex.prototype.diameterFactor = function ()
 {
-    return 1.0 + (this.mainText.length ? this.mainText.length / 8.0 : 0);
+    return new Point(1.0 + (this.mainText.length ? this.mainText.length / 8.0 : 0), 1.5);
 }
 
 BaseVertex.prototype.IsUndefinedPosition = function ()
@@ -169,7 +169,7 @@ BaseVertex.prototype.getStyleFor = function (index)
     if (index == 0)
       style = globalApplication.GetStyle("vertex", "common");
     else
-      style = globalApplication.GetStyle("vertex", "selected");
+      style = globalApplication.GetStyle("vertex", "selected", undefined, index - 1);
 
     return style;
   }

script/BaseVertexDrawer.js

@@ -217,71 +217,6 @@ function SelectedVertexStyle4()
 
 SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
 
-function SelectedVertexStyle5()
-{
-	BaseVertexStyle.apply(this, arguments);
-
-	this.strokeStyle = '#FF6200';
-	this.mainTextColor  = '#FF6200';
-	this.fillStyle   = '#0F4FA8';
-
-	this.baseStyles.push("selected");
-}
-
-SelectedVertexStyle5.prototype = Object.create(BaseVertexStyle.prototype);
-
-function SelectedVertexStyle6()
-{
-	BaseVertexStyle.apply(this, arguments);
-
-	this.strokeStyle   = '#8CA336';
-	this.mainTextColor = '#8CA336';
-	this.fillStyle     = '#9C344C';
-
-	this.baseStyles.push("selected");
-}
-
-SelectedVertexStyle6.prototype = Object.create(BaseVertexStyle.prototype);
-
-function SelectedVertexStyle7()
-{
-	BaseVertexStyle.apply(this, arguments);
-
-	this.strokeStyle   = '#B59E22';
-	this.mainTextColor = '#B59E22';
-	this.fillStyle     = '#22387A';
-
-	this.baseStyles.push("selected");
-}
-
-SelectedVertexStyle7.prototype = Object.create(BaseVertexStyle.prototype);
-
-function SelectedVertexStyle8()
-{
-	BaseVertexStyle.apply(this, arguments);
-
-	this.strokeStyle   = '#08806C';
-	this.mainTextColor = '#08806C';
-	this.fillStyle     = '#CA980D';
-
-	this.baseStyles.push("selected");
-}
-
-SelectedVertexStyle8.prototype = Object.create(BaseVertexStyle.prototype);
-
-function SelectedVertexStyle9()
-{
-	BaseVertexStyle.apply(this, arguments);
-
-	this.strokeStyle   = '#AA8134';
-	this.mainTextColor = '#AA8134';
-	this.fillStyle     = '#492A73';
-
-	this.baseStyles.push("selected");
-}
-
-SelectedVertexStyle9.prototype = Object.create(BaseVertexStyle.prototype);
-
 function SelectedPrintVertexStyle()
 {
 	BaseVertexStyle.apply(this, arguments);
@@ -296,7 +231,7 @@ function SelectedPrintVertexStyle()
 SelectedPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
 
 var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
-	new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4(), new SelectedVertexStyle5(), new SelectedVertexStyle6(), new SelectedVertexStyle7(), new SelectedVertexStyle8(), new SelectedVertexStyle9()];
+	new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4()];
 
 var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];
 

script/EventHandlers.js

@@ -1390,19 +1390,24 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     var app   = this.app;
     this.forAll = selectedVertexes == null;
     var forAll = this.forAll;
+    var sefl = this;
 
-    var originStyle = (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]);
+    var applyIndex = function(index)
-
-    if (!forAll)
     {
-        originStyle = selectedVertexes[0].getStyleFor(index);
+        self.index = index;
+        self.originStyle = (self.index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[self.index - 1]);
+        if (!forAll)
+        {
+            self.originStyle = selectedVertexes[0].getStyleFor(self.index);
+        }
+        self.style = FullObjectCopy(self.originStyle);    
     }
 
-    var style = FullObjectCopy(originStyle);
+    applyIndex(index);
 
     var fillFields = function()
     {
-        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
+        var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
 
         $( "#vertexFillColor" ).val(fullStyle.fillStyle);
         $( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
@@ -1411,7 +1416,17 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         $( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
         $( "#vertexShape" ).val(fullStyle.shape);
         $( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
-        $( "#commonTextPosition" ).val(fullStyle.commonTextPosition);        
+        $( "#commonTextPosition" ).val(fullStyle.commonTextPosition); 
+        
+        if (self.index > 0)
+        {
+            $( "#VertexSelectedIndexForm" ).show();
+            $( "#vertexSelectedIndex" ).val(self.index);        
+        }
+        else
+        {
+            $( "#VertexSelectedIndexForm" ).hide();        
+        }        
     }
     
     var redrawVertex = function()
@@ -1419,25 +1434,25 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         var fullStyle = style.GetStyle({}, forAll ? undefined : selectedVertexes[0]);
 
         if (fullStyle.fillStyle != $( "#vertexFillColor" ).val())
-            style.fillStyle     = $( "#vertexFillColor" ).val();
+            self.style.fillStyle     = $( "#vertexFillColor" ).val();
 
         if (fullStyle.strokeStyle != $( "#vertexStrokeColor" ).val())
-            style.strokeStyle   = $( "#vertexStrokeColor" ).val();
+            self.style.strokeStyle   = $( "#vertexStrokeColor" ).val();
 
         if (fullStyle.mainTextColor != $( "#vertexTextColor" ).val())
-            style.mainTextColor = $( "#vertexTextColor" ).val();
+            self.style.mainTextColor = $( "#vertexTextColor" ).val();
 
         if (fullStyle.lineWidth != $( "#vertexStrokeSize" ).val())
-            style.lineWidth     = parseInt($( "#vertexStrokeSize" ).val());
+            self.style.lineWidth     = parseInt($( "#vertexStrokeSize" ).val());
 
         if (fullStyle.shape != $( "#vertexShape" ).val())
-            style.shape    = parseInt($( "#vertexShape" ).val());
+            self.style.shape    = parseInt($( "#vertexShape" ).val());
 
         if (fullStyle.upTextColor != $( "#upVertexTextColor" ).val())
-            style.upTextColor = $( "#upVertexTextColor" ).val(); 
+            self.style.upTextColor = $( "#upVertexTextColor" ).val(); 
 
         if (fullStyle.commonTextPosition != $( "#commonTextPosition" ).val())
-            style.commonTextPosition = $( "#commonTextPosition" ).val(); 
+            self.style.commonTextPosition = $( "#commonTextPosition" ).val(); 
 
         var diameter = parseInt($( "#vertexSize" ).val());
         
@@ -1458,12 +1473,20 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         if (!forAll)
             baseVertex.ownStyles = selectedVertexes[0].ownStyles;
         
-        graphDrawer.Draw(baseVertex, style.GetStyle({}, baseVertex));
+        graphDrawer.Draw(baseVertex, self.style.GetStyle({}, baseVertex));
         
         context.restore();
     }
     
-    //var dialogButtons = [];
+    var changeIndex = function()
+    {
+        var index = parseInt($( "#vertexSelectedIndex" ).val());
+        this.index = index;
+        applyIndex(index);
+        fillFields();
+        redrawVertex();
+    }
+
     var applyDiameter = function(diameter)
         {
             if (forAll)
@@ -1488,12 +1511,12 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
                     if (forAll)
                     {
-                        app.ResetVertexStyle(index);
+                        app.ResetVertexStyle(self.index);
                     }
                     else
                     {
                         selectedVertexes.forEach(function(vertex) {
-                            vertex.resetOwnStyle(index);
+                            vertex.resetOwnStyle(self.index);
                           });
                     }
                     app.redrawGraph();
@@ -1507,14 +1530,14 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
                 if (forAll)
                 {
-                    app.SetVertexStyle(index, style);
+                    app.SetVertexStyle(self.index, self.style);
                 }
                 else
                 {
-                    if (JSON.stringify(originStyle) !== JSON.stringify(style))
+                    if (JSON.stringify(self.originStyle) !== JSON.stringify(self.style))
                     {
                         selectedVertexes.forEach(function(vertex) {
-                            vertex.setOwnStyle(index, style);
+                            vertex.setOwnStyle(self.index, self.style);
                         });
                     }
                 }
@@ -1547,6 +1570,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     $( "#vertexShape" ).unbind();
     $( "#vertexSize" ).unbind();
     $( "#commonTextPosition" ).unbind();
+    $( "#vertexSelectedIndex" ).unbind();
     
     $( "#vertexFillColor" ).change(redrawVertex);
     $( "#vertexStrokeColor" ).change(redrawVertex);
@@ -1556,6 +1580,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     $( "#vertexSize" ).change(redrawVertex);
     $( "#upVertexTextColor" ).change(redrawVertex);
     $( "#commonTextPosition" ).change(redrawVertex);
+    $( "#vertexSelectedIndex" ).change(changeIndex);
 }
 
 /**
@@ -1580,41 +1605,66 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
     this.forAll = selectedEdges == null;
     var forAll = this.forAll;
 
-    var originStyle = (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]);
+    var self = this;
 
-    if (!forAll)
+    var applyIndex = function(index)
     {
-        originStyle = selectedEdges[0].getStyleFor(index);
+        self.index = index;
+        var originStyle = (self.index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[self.index - 1]);
+        if (!forAll)
+        {
+            originStyle = selectedEdges[0].getStyleFor(self.index);
+        }
+        self.style = FullObjectCopy(originStyle);    
     }
 
-    var style = FullObjectCopy(originStyle);
+    applyIndex(index);
 
     var fillFields = function()
     {
-        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
+        var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
 
         $( "#edgeFillColor" ).val(fullStyle.fillStyle);
         $( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
         $( "#edgeTextColor" ).val(fullStyle.weightText);
         $( "#edgeStyle" ).val(fullStyle.lineDash);
         $( "#edgeWidth" ).val(forAll ? app.GetDefaultEdgeWidth() : selectedEdges[0].model.width);
+
+        $( "#weightEdgeTextColor" ).val(fullStyle.additionalTextColor);
+        $( "#weightTextPosition" ).val(fullStyle.weightPosition);
+
+        if (self.index > 0)
+        {
+            $( "#EdgeSelectedIndexForm" ).show();
+            $( "#edgeSelectedIndex" ).val(self.index);        
+        }
+        else
+        {
+            $( "#EdgeSelectedIndexForm" ).hide();        
+        }
     }
     
     var redrawVertex = function()
     {
-        var fullStyle = style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
+        var fullStyle = self.style.GetStyle({}, forAll ? undefined : selectedEdges[0]);
 
         if (fullStyle.fillStyle != $( "#edgeFillColor" ).val())
-            style.fillStyle     = $( "#edgeFillColor" ).val();
+            self.style.fillStyle     = $( "#edgeFillColor" ).val();
 
         if (fullStyle.strokeStyle != $( "#edgeStrokeColor" ).val())
-            style.strokeStyle   = $( "#edgeStrokeColor" ).val();
+            self.style.strokeStyle   = $( "#edgeStrokeColor" ).val();
 
         if (fullStyle.weightText != $( "#edgeTextColor" ).val())
-            style.weightText    = $( "#edgeTextColor" ).val();
+            self.style.weightText    = $( "#edgeTextColor" ).val();
 
         if (fullStyle.lineDash != $( "#edgeStyle" ).val())
-            style.lineDash    = $( "#edgeStyle" ).val();
+            self.style.lineDash    = $( "#edgeStyle" ).val();
+
+        if (fullStyle.additionalTextColor != $( "#weightEdgeTextColor" ).val())
+            self.style.additionalTextColor    = $( "#weightEdgeTextColor" ).val();
+
+        if (fullStyle.weightPosition != $( "#weightTextPosition" ).val())
+            self.style.weightPosition    = $( "#weightTextPosition" ).val();
 
         var edgeWidth = parseInt($( "#edgeWidth" ).val());
         
@@ -1640,10 +1690,19 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
         baseEdge.model.width = edgeWidth;
 
-        graphDrawer.Draw(baseEdge, style.GetStyle({}, baseEdge));
+        graphDrawer.Draw(baseEdge, self.style.GetStyle({}, baseEdge));
         
         context.restore();
     }
+
+    var changeIndex = function()
+    {
+        var index = parseInt($( "#edgeSelectedIndex" ).val());
+        this.index = index;
+        applyIndex(index);
+        fillFields();
+        redrawVertex();
+    }    
     
     var applyWidth = function(width)
         {
@@ -1669,12 +1728,12 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
                     if (forAll)
                     {
-                        app.ResetEdgeStyle(index);
+                        app.ResetEdgeStyle(self.index);
                     }
                     else
                     {
                         selectedEdges.forEach(function(edge) {
-                            edge.resetOwnStyle(index);
+                            edge.resetOwnStyle(self.index);
                         });
                     }
                     
@@ -1689,12 +1748,12 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
                 if (forAll)
                 {
-                    app.SetEdgeStyle(index, style);
+                    app.SetEdgeStyle(self.index, self.style);
                 }
                 else
                 {
                     selectedEdges.forEach(function(edge) {
-                        edge.setOwnStyle(index, style);
+                        edge.setOwnStyle(self.index, self.style);
                     });   
                 }                
                 app.redrawGraph();
@@ -1722,13 +1781,19 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
     $( "#edgeStrokeColor" ).unbind();
     $( "#edgeTextColor" ).unbind();
     $( "#edgeStyle" ).unbind();
-    $( "#edgeWidth" ).unbind();    
+    $( "#edgeWidth" ).unbind();
+    $( "#weightEdgeTextColor" ).unbind();
+    $( "#weightTextPosition" ).unbind();
+    $( "#edgeSelectedIndex" ).unbind();    
     
     $( "#edgeFillColor" ).change(redrawVertex);
     $( "#edgeStrokeColor" ).change(redrawVertex);
     $( "#edgeTextColor" ).change(redrawVertex);
     $( "#edgeStyle" ).change(redrawVertex);
     $( "#edgeWidth" ).change(redrawVertex);
+    $( "#weightEdgeTextColor" ).change(redrawVertex);
+    $( "#weightTextPosition" ).change(redrawVertex);    
+    $( "#edgeSelectedIndex" ).change(changeIndex);        
 }
 
 /**

script/Graph.js

@@ -953,7 +953,8 @@ Graph.prototype.getGraphBBox = function (viewportSize)
     for(i = 0; i < this.vertices.length; i++)
     {
         var vertex = this.vertices[i];
-        var deltaVector = new Point(vertex.diameterFactor() * diameter, diameter);
+		var factor = vertex.diameterFactor();
+        var deltaVector = new Point(factor.x * diameter, factor.y * diameter);
         pointMin = pointMin.min(vertex.position.subtract(deltaVector));
         pointMax = pointMax.max(vertex.position.add(deltaVector));
     }

tpl/home.php

@@ -427,7 +427,7 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="commonTextPosition" class="col-sm-5 col-form-label"><?= L('weight_position') ?></label>
+            <label for="commonTextPosition" class="col-sm-5 col-form-label"><?= L('text_position') ?></label>
             <div class="col-sm-5">
               <select id="commonTextPosition">
                 <option value="0"><?= L('center') ?></option>
@@ -452,6 +452,18 @@
               <input type="number" class="form-control" id="vertexSize" placeholder="10" min="10" min="100">
             </div>
           </div>
+          <div class="form-group row" id="VertexSelectedIndexForm">
+            <label for="vertexSelectedIndex" class="col-sm-5 col-form-label"><?= L('selected_index')?></label>
+            <div class="col-sm-5">
+              <select id="vertexSelectedIndex">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+              </select>
+            </div>
+          </div>          
         </fieldset>
         </form>
         
@@ -467,12 +479,27 @@
               <input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22">
             </div>
           </div>
-          <div class="form-group row">
+          <div class="form-group row small-bottom-marging">
             <label for="edgeTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
             <div class="col-sm-5">
               <input type="color" class="form-control" id="edgeTextColor" value="#FFAA22">
             </div>
           </div>
+          <div class="form-group row small-bottom-marging">
+            <label for="weightEdgeTextColor" class="col-sm-5 col-form-label"><?= L('additional_text_color') ?></label>
+            <div class="col-sm-5">
+                <input type="color" class="form-control" id="weightEdgeTextColor" value="#FFAA22">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="weightTextPosition" class="col-sm-5 col-form-label"><?= L('weight_position') ?></label>
+            <div class="col-sm-5">
+              <select id="weightTextPosition">
+                <option value="0"><?= L('center') ?></option>
+                <option value="1"><?= L('on_up') ?></option>
+              </select>
+            </div>
+          </div>
           <div class="form-group row">
             <label for="edgeFillColor" class="col-sm-5 col-form-label"><?= L('text_background') ?></label>
             <div class="col-sm-5">
@@ -480,7 +507,7 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="edgeStyle" class="col-sm-5 col-form-label">Line Style</label>
+            <label for="edgeStyle" class="col-sm-5 col-form-label"><?= L('line_style') ?></label>
             <div class="col-sm-5">
               <select id="edgeStyle">
                 <option value="0">Solid</option>
@@ -491,11 +518,23 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="edgeWidth" class="col-sm-5 col-form-label">Edge width</label>
+            <label for="edgeWidth" class="col-sm-5 col-form-label"><?= L('edge_width') ?></label>
             <div class="col-sm-5">
               <input type="number" class="form-control" id="edgeWidth" placeholder="3" min="1" min="20">
             </div>
           </div>
+          <div class="form-group row" id="EdgeSelectedIndexForm">
+            <label for="edgeSelectedIndex" class="col-sm-5 col-form-label"><?= L('selected_index')?></label>
+            <div class="col-sm-5">
+              <select id="edgeSelectedIndex">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+              </select>
+            </div>
+          </div>              
         </fieldset>
         </form>