Add settings for vertex shape and size.

lang/de/home.php

@@ -185,4 +185,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";    
 ?>

lang/el/home.php

@@ -223,4 +223,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";    
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";       
 ?>

lang/en/home.php

@@ -222,4 +222,11 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";           
 ?>

lang/es/home.php

@@ -222,4 +222,11 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";
 ?>

lang/fr/home.php

@@ -190,4 +190,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";    
 ?>

lang/nl/home.php

@@ -187,4 +187,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";    
 ?>

lang/pt/home.php

@@ -188,4 +188,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";    
 ?>

lang/ru/home.php

@@ -223,4 +223,11 @@
     $g_lang['selected_edge_style'] = "Стиль выделенной дуги";
     $g_lang['common_vertex_style'] = "Стиль обычной вершины";
     $g_lang['selected_vertex_style'] = "Стиль выделенной вершины";
+
+    $g_lang['shape'] = "Форма";
+    $g_lang['circle'] = "Круг";
+    $g_lang['squere'] = "Квадрат";
+    $g_lang['triangle'] = "Треугльник";
+    $g_lang['pentagon'] = "Пятиугольник";
+    $g_lang['vertex_diameter'] = "Размер вершины";
 ?>

lang/sv/home.php

@@ -18,7 +18,7 @@
     $g_lang["orint_edge"] = "Riktad";
     $g_lang["not_orint_edge"] = "Oriktad";
     $g_lang["show_adjacency_matrix"] = "Grannmatris";
-    $g_lang["save"] = "Spara kanttyp (riktad eller inte)";
+    $g_lang["save"] = "Spara";
     $g_lang["cancel"] = "Annullera";
     $g_lang["adjacency_matrix_description"] = "Ställ in grannmatris. Använd komma \",\" som separator";
     $g_lang["adjacency_matrix_bad_format"] = "Matrisen är felaktig. Använd komma \",\" som separator. Matrisen ska vara kvadratisk";
@@ -184,4 +184,11 @@
     $g_lang['selected_edge_style'] = "Selected edge style";
     $g_lang['common_vertex_style'] = "Common vertex style";
     $g_lang['selected_vertex_style'] = "Selected vertex style";    
+
+    $g_lang['shape'] = "Shape";
+    $g_lang['circle'] = "Circle";
+    $g_lang['squere'] = "Square";
+    $g_lang['triangle'] = "Triangle";
+    $g_lang['pentagon'] = "Pentagon";
+    $g_lang['vertex_diameter'] = "Vertex size";    
 ?>

script/Appilcation.js

@@ -50,6 +50,8 @@ function Application(document, window)
     this.edgePresets = [1, 3, 5, 7, 11, 42];
     this.maxEdgePresets = 6;
     this.selectionRect  = null;
+
+    this.defaultVertexSize = null;
 };
 
 // List of graph.
@@ -400,6 +402,7 @@ Application.prototype.RedrawNodes = function(context)
 
 Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, ForceSelectedStyle)
 {
+    var force         = ForceCommonStyle !== undefined || ForceSelectedStyle !== undefined;
     var commonStyle   = (ForceCommonStyle === undefined) ? this.vertexCommonStyle : ForceCommonStyle;
     var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
 
@@ -414,7 +417,7 @@ Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, Force
         }
 
         var currentStyle = null;
-        if (this.graph.vertices[i].hasOwnStyleFor((selected ? 1 : 0) + selectedGroup))
+        if (this.graph.vertices[i].hasOwnStyleFor((selected ? 1 : 0) + selectedGroup) && !force)
 		    currentStyle = this.graph.vertices[i].getStyleFor((selected ? 1 : 0) + selectedGroup);
         else
             currentStyle = selected ? selectedStyle[selectedGroup] : commonStyle;
@@ -1402,6 +1405,10 @@ Application.prototype.SaveUserSettings = function()
                      value: this.backgroundCommonStyle,
                      check: this.isBackgroundCommonStyleCustom});
 
+    checkValue.push({field: "defaultVertexSize",
+                      value: this.defaultVertexSize,
+                      check: this.defaultVertexSize != null});                     
+    
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
 
@@ -1454,6 +1461,11 @@ Application.prototype.LoadUserSettings = function(json)
                      check: "isVertexSelectedVertexStylesCustom",
                      deep: true});
 
+    checkValue.push({field: "defaultVertexSize",
+                    value: "defaultVertexSize",
+                    check: null,
+                    deep: false});                  
+    
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
 
@@ -1462,7 +1474,7 @@ Application.prototype.LoadUserSettings = function(json)
     
     checkValue.push({field: "backgroundCommonStyle",
                      value: this.backgroundCommonStyle,
-                     check: "isBackgroundCommonStyleCustom",
+                     check: this.isBackgroundCommonStyleCustom,
                      deep: false});
     
     var decoderStr = this.DecodeFromHTML(json);
@@ -1472,6 +1484,12 @@ Application.prototype.LoadUserSettings = function(json)
     
     checkValue.forEach(function(entry) {
             if (parsedSave.hasOwnProperty(entry.field))
+            {
+                if (typeof parsedSave[entry.field] === 'number')
+                {
+                    app[entry.value] = parseInt(parsedSave[entry.field]);
+                }
+                else
                 {
                     for(var k in parsedSave[entry.field])
                     {
@@ -1489,7 +1507,9 @@ Application.prototype.LoadUserSettings = function(json)
                             }
                         }
                     }
+                }
                 
+                if (entry.check != null)
                     app[entry.check] = true;
             }
         });
@@ -1717,3 +1737,35 @@ Application.prototype.GetSelectedEdges = function()
 
     return res;
 }
+
+Application.prototype.SetDefaultVertexSize = function(diameter)
+{
+    var oldDefaultDiameter = this.GetDefaultVertexSize();
+    this.defaultVertexSize = diameter;
+
+    for (i = 0; i < this.graph.vertices.length; i ++)
+    {
+        if (this.graph.vertices[i].model.diameter == oldDefaultDiameter)
+        {
+            this.graph.vertices[i].model.diameter = diameter;
+        }
+    }     
+}
+
+Application.prototype.GetDefaultVertexSize = function(diameter)
+{
+    if (this.defaultVertexSize != null)
+        return this.defaultVertexSize;
+    else
+        return defaultVertexDiameter;
+}
+
+Application.prototype.ResetVertexSize = function()
+{
+    this.defaultVertexSize = null;
+
+    for (i = 0; i < this.graph.vertices.length; i ++)
+    {
+        this.graph.vertices[i].model.diameter = this.GetDefaultVertexSize();
+    }     
+}

script/BaseVertex.js

@@ -39,6 +39,7 @@ BaseVertex.prototype.SaveToXML = function ()
 	       "mainText=\""   + gEncodeToHTML(this.mainText) + "\" " +
 	       "upText=\""     + gEncodeToHTML(this.upText)   + "\" " +
          ((Object.keys(this.ownStyles).length > 0) ? "ownStyles = \"" + gEncodeToHTML(JSON.stringify(this.ownStyles)) + "\" ": "") +
+         "size=\"" + this.model.diameter + "\" " +
 		"></node>";
 }
 
@@ -78,6 +79,10 @@ BaseVertex.prototype.LoadFromXML = function (xml)
         }
       }
     }
+
+    var size = xml.attr('size');
+    if (typeof size !== 'undefined')
+      this.model.diameter = parseInt(size);
 }
 
 BaseVertex.prototype.SetId = function (id)

script/EventHandlers.js

@@ -1409,6 +1409,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         $( "#vertexTextColor" ).val(fullStyle.mainTextColor);
         $( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
         $( "#vertexShape" ).val(fullStyle.shape);
+        $( "#vertexSize" ).val(forAll ? (new VertexModel()).diameter : selectedVertexes[0].model.diameter);
     }
     
     var redrawVertex = function()
@@ -1430,6 +1431,8 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         if (fullStyle.shape != $( "#vertexShape" ).val())
             style.shape    = parseInt($( "#vertexShape" ).val());
 
+        var diameter = parseInt($( "#vertexSize" ).val());
+        
         var canvas  = document.getElementById( "VertexPreview" );
         var context = canvas.getContext('2d');    
         
@@ -1442,6 +1445,8 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         var baseVertex  = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
         baseVertex.mainText = "1";
         baseVertex.upText   = "Up Text";
+        baseVertex.model.diameter = diameter;
+
         if (!forAll)
             baseVertex.ownStyles = selectedVertexes[0].ownStyles;
         
@@ -1451,12 +1456,28 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     }
     
     //var dialogButtons = [];
+    var applyDiameter = function(diameter)
+        {
+            if (forAll)
+            {
+                app.SetDefaultVertexSize(diameter);
+            }
+            else
+            {
+                selectedVertexes.forEach(function(vertex) {
+                    vertex.model.diameter = diameter;
+                });
+            }
+        };
     
 	dialogButtons[g_default] = 
            {
                text    : g_default,
                class   : "MarginLeft",
                click   : function() {
+
+                    applyDiameter(forAll ? (new VertexModel()).diameter : app.GetDefaultVertexSize());
+
                     if (forAll)
                     {
                         app.ResetVertexStyle(index);
@@ -1473,16 +1494,22 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
            };
     
 	dialogButtons[g_save] = function() {
+
+                applyDiameter(parseInt($( "#vertexSize" ).val()));
+
                 if (forAll)
                 {
                     app.SetVertexStyle(index, style);
                 }
                 else
+                {
+                    if (JSON.stringify(originStyle) !== JSON.stringify(style))
                     {
                         selectedVertexes.forEach(function(vertex) {
                             vertex.setOwnStyle(index, style);
                         });
                     }
+                }
                 app.redrawGraph();
 				$( this ).dialog( "close" );					
 			};
@@ -1508,12 +1535,15 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     $( "#vertexStrokeColor" ).unbind();
     $( "#vertexTextColor" ).unbind();
     $( "#vertexStrokeSize" ).unbind();
+    $( "#vertexShape" ).unbind();
+    $( "#vertexSize" ).unbind();
     
     $( "#vertexFillColor" ).change(redrawVertex);
     $( "#vertexStrokeColor" ).change(redrawVertex);
     $( "#vertexTextColor" ).change(redrawVertex);
     $( "#vertexStrokeSize" ).change(redrawVertex);
     $( "#vertexShape" ).change(redrawVertex);
+    $( "#vertexSize" ).change(redrawVertex);    
 }
 
 /**

script/VertexModel.js

@@ -3,8 +3,9 @@
  *
  */
 
+ const defaultVertexDiameter = 30;
 
 function VertexModel()
 {
-    this.diameter = 30;
+    this.diameter = globalApplication.GetDefaultVertexSize();
 }

tpl/home.php

@@ -411,7 +411,7 @@
           <div class="form-group row">
             <label for="vertexStrokeSize" class="col-sm-5 col-form-label"><?= L('stroke_size') ?></label>
             <div class="col-sm-5">
-              <input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="1">
+              <input type="number" class="form-control" id="vertexStrokeSize" placeholder="10" min="0">
             </div>
           </div>
           <div class="form-group row">
@@ -421,16 +421,22 @@
             </div>
           </div>
           <div class="form-group row">
-            <label for="vertexShape" class="col-sm-5 col-form-label">Shape</label>
+            <label for="vertexShape" class="col-sm-5 col-form-label"><?= L('shape')?></label>
             <div class="col-sm-5">
               <select id="vertexShape">
-                <option value="0">Circle</option>
+                <option value="0"><?= L('circle')?></option>
-                <option value="1">Squere</option>
+                <option value="1"><?= L('squere')?></option>
-                <option value="2">Triangle</option>
+                <option value="2"><?= L('triangle')?></option>
-                <option value="3">Pentagon</option>
+                <option value="3"><?= L('pentagon')?></option>
               </select>
             </div>
           </div>
+          <div class="form-group row">
+            <label for="vertexSize" class="col-sm-5 col-form-label"><?= L('vertex_diameter')?> </label>
+            <div class="col-sm-5">
+              <input type="number" class="form-control" id="vertexSize" placeholder="10" min="10" min="100">
+            </div>
+          </div>
         </fieldset>
         </form>