Add presets for color

Add select style for all selected styles.

lang/de/home.php

@@ -202,4 +202,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";       
+
+    $g_lang['all'] = "All";    
 ?>

lang/el/home.php

@@ -240,4 +240,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";     
+
+    $g_lang['all'] = "All";    
 ?>

lang/en/home.php

@@ -239,4 +239,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";    
+
+    $g_lang['all'] = "All";    
 ?>

lang/es/home.php

@@ -239,4 +239,6 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";
+
+    $g_lang['all'] = "All";    
 ?>

lang/fr/home.php

@@ -207,4 +207,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";     
+    
+    $g_lang['all'] = "All";    
 ?>

lang/nl/home.php

@@ -204,4 +204,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";
+    
+    $g_lang['all'] = "All";    
 ?>

lang/pt/home.php

@@ -205,4 +205,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";      
+
+    $g_lang['all'] = "All";    
 ?>

lang/ru/home.php

@@ -240,4 +240,6 @@
     $g_lang['line_style']    = "Стиль дуги";
     $g_lang['edge_width']    = "Толщина дуги";
     $g_lang['selected_index'] = "Группа выделения";    
+
+    $g_lang['all'] = "Все";
 ?>

lang/sv/home.php

@@ -201,4 +201,6 @@
     $g_lang['line_style']    = "Edge style";
     $g_lang['edge_width']    = "Edge width";
     $g_lang['selected_index'] = "Selection group";    
+
+    $g_lang['all'] = "All";    
 ?>

script/Appilcation.js

@@ -1501,15 +1501,25 @@ Application.prototype.LoadUserSettings = function(json)
                 }
                 else
                 {
+                    if (!entry.deep)
+                        entry.value.Clear();
+
                     for(var k in parsedSave[entry.field])
                     {
                         if (!entry.deep)
                         {
                             if (entry.value.ShouldLoad(k))
+                            {
                                 entry.value[k] = parsedSave[entry.field][k];
+                            }
                         }
                         else
                         {
+                            // Check is number or not
+                            if (k % 1 != 0)
+                                continue;
+
+                            entry.value[k].Clear();
                             for(var deepK in parsedSave[entry.field][k])
                             {
                                 if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
@@ -1659,7 +1669,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "selected")
         {
-            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.vertexSelectedVertexStyles[correctIndex];
+            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.vertexSelectedVertexStyles[correctIndex];
         }
         else if (styleName == "printed")
         {
@@ -1680,7 +1690,7 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
         }
         else if (styleName == "selected")
         {
-            return object !== undefined && index == 0 ? object.getStyleFor(1) : this.edgeSelectedStyles[correctIndex];
+            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.edgeSelectedStyles[correctIndex];
         }
         else if (styleName == "printed")
         {

script/BaseBackgroundDrawer.js

@@ -9,6 +9,12 @@ function CommonBackgroundStyle()
 	this.commonOpacity = 1.0;
 }
 
+CommonBackgroundStyle.prototype.Clear = function ()
+{
+  delete this.commonColor;
+  delete this.commonOpacity;
+}
+
 CommonBackgroundStyle.prototype.ShouldLoad = function (field)
 {
   return true;

script/BaseEdgeDrawer.js

@@ -46,6 +46,18 @@ const WeightTextCenter = 0,
    return baseStyle;
  }
 
+ BaseEdgeStyle.prototype.Clear = function ()
+ {
+    delete this.weightText;
+    delete this.strokeStyle;
+    delete this.fillStyle;
+    delete this.textPadding;
+    delete this.textStrockeWidth;
+    delete this.lineDash;
+    delete this.additionalTextColor;
+    delete this.weightPosition;
+ }
+
  BaseEdgeStyle.prototype.ShouldLoad = function (field)
  {
    return field != "baseStyles";

script/BaseVertexDrawer.js

@@ -115,6 +115,18 @@ BaseVertexStyle.prototype.GetStyle = function (baseStyle, object)
 	return baseStyle;
 }
 
+BaseVertexStyle.prototype.Clear = function ()
+{
+	delete this.lineWidth;
+	delete this.strokeStyle;
+	delete this.fillStyle;
+	delete this.mainTextColor;
+	delete this.shape;
+	delete this.upTextColor;
+	delete this.commonTextPosition;
+	delete this.lineWidth;
+}
+
 BaseVertexStyle.prototype.ShouldLoad = function (field)
 {
 	return field != "baseStyles";

script/EventHandlers.js

@@ -1418,7 +1418,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         $( "#vertexSize" ).val(forAll ? app.GetDefaultVertexSize() : selectedVertexes[0].model.diameter);
         $( "#commonTextPosition" ).val(fullStyle.commonTextPosition); 
         
-        if (self.index > 0)
+        if (self.index > 0 || self.index == "all")
         {
             $( "#VertexSelectedIndexForm" ).show();
             $( "#vertexSelectedIndex" ).val(self.index);        
@@ -1427,6 +1427,39 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
         {
             $( "#VertexSelectedIndexForm" ).hide();        
         }
+
+        // Fill color presets.
+        var stylesArray = [];
+        stylesArray.push(app.vertexCommonStyle);
+
+        for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
+            stylesArray.push(app.vertexSelectedVertexStyles[i]);
+
+        var colorSet = {};
+        for (i = 0; i < stylesArray.length; i ++)
+        {
+            var style = stylesArray[i];
+            if (style.hasOwnProperty('strokeStyle'))
+                colorSet[style.strokeStyle] = 1;
+            if (style.hasOwnProperty('fillStyle'))
+                colorSet[style.fillStyle] = 1;
+            if (style.hasOwnProperty('mainTextColor'))
+                colorSet[style.mainTextColor] = 1;
+            if (style.hasOwnProperty('upTextColor'))
+                colorSet[style.upTextColor] = 1;
+        }
+
+        $("#vertexFillColorPreset").find('option').remove();
+        $("#upVertexTextColorPreset").find('option').remove();
+        $("#vertexTextColorPreset").find('option').remove();
+        $("#vertexStrokeColorPreset").find('option').remove();
+        for (const property in colorSet)
+        {
+            $("#vertexFillColorPreset").append(new Option(property));
+            $("#upVertexTextColorPreset").append(new Option(property));
+            $("#vertexTextColorPreset").append(new Option(property));
+            $("#vertexStrokeColorPreset").append(new Option(property));
+        }
     }
     
     var redrawVertex = function()
@@ -1480,10 +1513,20 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
     
     var changeIndex = function()
     {
-        var index = parseInt($( "#vertexSelectedIndex" ).val());
+        var val   = $( "#vertexSelectedIndex" ).val();
-        this.index = index;
+        if (val == "all")
-        applyIndex(index);
+        {
-        fillFields();
+            applyIndex(1);
+            self.index = "all";
+            fillFields();
+        }
+        else
+        {
+            var index = parseInt(val);
+            self.index = index;
+            applyIndex(index);
+            fillFields();
+        }
         redrawVertex();
     }
 
@@ -1509,14 +1552,28 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
                     applyDiameter(forAll ? (new VertexModel()).diameter : app.GetDefaultVertexSize());
 
+                    var indexes = [];
+                    if (self.index == "all")
+                    {
+                        for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
+                            indexes.push(i + 1);
+                    }
+                    else
+                        indexes.push(self.index);
+                    
+
                     if (forAll)
                     {
-                        app.ResetVertexStyle(self.index);
+                        indexes.forEach(function(index) {
+                        	app.ResetVertexStyle(index);
+                        });
                     }
                     else
                     {
                         selectedVertexes.forEach(function(vertex) {
-                            vertex.resetOwnStyle(self.index);
+                        	indexes.forEach(function(index) {
+                            	vertex.resetOwnStyle(index);
+                            });
                           });
                     }
                     app.redrawGraph();
@@ -1528,16 +1585,37 @@ SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 
                 applyDiameter(parseInt($( "#vertexSize" ).val()));
 
+                var indexes = [];
+                if (self.index == "all")
+                {
+                    indexes.push({index : 1, style : self.style});
+                    for (i = 1; i < app.vertexSelectedVertexStyles.length; i ++)
+                    {
+                        var style = (new BaseVertexStyle());
+                        style.baseStyles.push("selected");
+                        indexes.push({index : i + 1, style : style});
+                    }
+
+                    self.style.baseStyles = [];
+                    self.style.baseStyles = self.style.baseStyles.concat((new SelectedVertexStyle0()).baseStyles);
+                }
+                else
+                    indexes.push({index : self.index, style : self.style});
+
                 if (forAll)
                 {
-                    app.SetVertexStyle(self.index, self.style);
+                	indexes.forEach(function(index) {
+                    	app.SetVertexStyle(index.index, index.style);
+                    });
                 }
                 else
                 {
                     if (JSON.stringify(self.originStyle) !== JSON.stringify(self.style))
                     {
                         selectedVertexes.forEach(function(vertex) {
-                            vertex.setOwnStyle(self.index, self.style);
+                        	indexes.forEach(function(index) {
+                            	vertex.setOwnStyle(index.index, index.style);
+                            });
                         });
                     }
                 }
@@ -1633,7 +1711,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
         $( "#weightEdgeTextColor" ).val(fullStyle.additionalTextColor);
         $( "#weightTextPosition" ).val(fullStyle.weightPosition);
 
-        if (self.index > 0)
+        if (self.index > 0 || self.index == "all")
         {
             $( "#EdgeSelectedIndexForm" ).show();
             $( "#edgeSelectedIndex" ).val(self.index);        
@@ -1642,6 +1720,37 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
         {
             $( "#EdgeSelectedIndexForm" ).hide();        
         }
+
+        // Fill color presets.
+        var stylesArray = [];
+        stylesArray.push(app.edgeCommonStyle);
+
+        for (i = 0; i < app.edgeSelectedStyles.length; i ++)
+            stylesArray.push(app.edgeSelectedStyles[i]);
+
+        var colorSet = {};
+        for (i = 0; i < stylesArray.length; i ++)
+        {
+            var style = stylesArray[i];
+            if (style.hasOwnProperty('strokeStyle'))
+                colorSet[style.strokeStyle] = 1;
+            if (style.hasOwnProperty('fillStyle'))
+                colorSet[style.fillStyle] = 1;
+            if (style.hasOwnProperty('additionalTextColor'))
+                colorSet[style.additionalTextColor] = 1;
+        }
+
+        $("#edgeFillColorPreset").find('option').remove();
+        $("#weightEdgeTextColorPreset").find('option').remove();
+        $("#edgeTextColorPreset").find('option').remove();
+        $("#edgeStrokeColorPreset").find('option').remove();
+        for (const property in colorSet)
+        {
+            $("#edgeFillColorPreset").append(new Option(property));
+            $("#weightEdgeTextColorPreset").append(new Option(property));
+            $("#edgeTextColorPreset").append(new Option(property));
+            $("#edgeStrokeColorPreset").append(new Option(property));
+        }        
     }
     
     var redrawVertex = function()
@@ -1697,10 +1806,21 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
     var changeIndex = function()
     {
-        var index = parseInt($( "#edgeSelectedIndex" ).val());
+        var val = $( "#edgeSelectedIndex" ).val();
-        this.index = index;
+        if (val == "all")
-        applyIndex(index);
+        {
-        fillFields();
+            applyIndex(1);
+            self.index = "all";
+            fillFields();
+        }
+        else
+        {
+            var index = parseInt(val);
+            self.index = index;
+            applyIndex(index);
+            fillFields();    
+        }
+
         redrawVertex();
     }    
     
@@ -1723,17 +1843,28 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
                text    : g_default,
                class   : "MarginLeft",
                click   : function() {
-
                     applyWidth(forAll ? (new EdgeModel()).width : app.GetDefaultEdgeWidth());
+                    var indexes = [];
+                    if (self.index == "all")
+                    {
+                        for (i = 0; i < app.edgeSelectedStyles.length; i ++)
+                            indexes.push(i + 1);
+                    }
+                    else
+                        indexes.push(self.index);
 
                     if (forAll)
                     {                        
-                        app.ResetEdgeStyle(self.index);
+                        indexes.forEach(function(index) {
+                                app.ResetEdgeStyle(index);
+                            });
                     }
                     else
                     {
                         selectedEdges.forEach(function(edge) {
-                            edge.resetOwnStyle(self.index);
+                            indexes.forEach(function(index) {
+                                edge.resetOwnStyle(index);
+                            });                            
                         });
                     }
                     
@@ -1746,14 +1877,36 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
                 applyWidth(parseInt($( "#edgeWidth" ).val()));
 
+                var indexes = [];
+                if (self.index == "all")
+                {
+                    indexes.push({index : 1, style : self.style});
+
+                    for (i = 1; i < app.edgeSelectedStyles.length; i ++)
+                    {
+                        var style = (new BaseEdgeStyle());
+                        style.baseStyles.push("selected");
+                        indexes.push({index : i + 1, style : style});
+                    }
+
+                    self.style.baseStyles = [];
+                    self.style.baseStyles = self.style.baseStyles.concat((new SelectedEdgeStyle0()).baseStyles);
+                }
+                else
+                    indexes.push({index : self.index, style : self.style});
+
                 if (forAll)
                 {
-                    app.SetEdgeStyle(self.index, self.style);
+                    indexes.forEach(function(index) {
+                        app.SetEdgeStyle(index.index, index.style);
+                    });
                 }
                 else
                 {
                     selectedEdges.forEach(function(edge) {
-                        edge.setOwnStyle(self.index, self.style);
+                        indexes.forEach(function(index) {
+                                edge.setOwnStyle(index.index, index.style);
+                            });
                     });
                 }                
                 app.redrawGraph();

tpl/home.php

@@ -399,13 +399,17 @@
           <div class="form-group row">
             <label for="vertexFillColor" class="col-sm-5 col-form-label"><?= L('common_color') ?></label>
             <div class="col-sm-5">
-              <input type="color" class="form-control" id="vertexFillColor" value="#FFAA22">
+              <input type="color" class="form-control" id="vertexFillColor" value="#FFAA22" list="vertexFillColorPreset">
+              <datalist id="vertexFillColorPreset">
+              </datalist>
             </div>
           </div>
           <div class="form-group row">
             <label for="vertexStrokeColor" class="col-sm-5 col-form-label"><?= L('stroke_color') ?></label>
             <div class="col-sm-5">
-              <input type="color" class="form-control" id="vertexStrokeColor" value="#FFAA22">
+              <input type="color" class="form-control" id="vertexStrokeColor" value="#FFAA22" list="vertexStrokeColorPreset">
+              <datalist id="vertexStrokeColorPreset">
+              </datalist>              
             </div>
           </div>
           <div class="form-group row">
@@ -417,13 +421,17 @@
           <div class="form-group row small-bottom-marging">
             <label for="vertexTextColor" class="col-sm-5 col-form-label"><?= L('text_color') ?></label>
             <div class="col-sm-5">
-                <input type="color" class="form-control" id="vertexTextColor" value="#FFAA22">
+                <input type="color" class="form-control" id="vertexTextColor" value="#FFAA22" list="vertexTextColorPreset">
+                <datalist id="vertexTextColorPreset">
+                </datalist>                     
             </div>
           </div>
           <div class="form-group row small-bottom-marging">
             <label for="upVertexTextColor" class="col-sm-5 col-form-label"><?= L('additional_text_color') ?></label>
             <div class="col-sm-5">
-                <input type="color" class="form-control" id="upVertexTextColor" value="#FFAA22">
+                <input type="color" class="form-control" id="upVertexTextColor" value="#FFAA22" list="upVertexTextColorPreset">
+                <datalist id="upVertexTextColorPreset">
+                </datalist>
             </div>
           </div>
           <div class="form-group row">
@@ -461,6 +469,7 @@
                 <option value="3">3</option>
                 <option value="4">4</option>
                 <option value="5">5</option>
+                <option value="all"><?= L('all')?></option>
               </select>
             </div>
           </div>          
@@ -476,19 +485,25 @@
           <div class="form-group row">
             <label for="edgeStrokeColor" class="col-sm-5 col-form-label"><?= L('common_color') ?></label>
             <div class="col-sm-5">
-              <input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22">
+              <input type="color" class="form-control" id="edgeStrokeColor" value="#FFAA22" list="edgeStrokeColorPreset">
+              <datalist id="edgeStrokeColorPreset">
+              </datalist>              
             </div>
           </div>
           <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">
+              <input type="color" class="form-control" id="edgeTextColor" value="#FFAA22" list="edgeTextColorPreset">
+              <datalist id="edgeTextColorPreset">
+              </datalist>                 
             </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">
+              <input type="color" class="form-control" id="weightEdgeTextColor" value="#FFAA22" list="weightEdgeTextColorPreset">
+              <datalist id="weightEdgeTextColorPreset">
+              </datalist>            
             </div>
           </div>
           <div class="form-group row">
@@ -503,7 +518,9 @@
           <div class="form-group row">
             <label for="edgeFillColor" class="col-sm-5 col-form-label"><?= L('text_background') ?></label>
             <div class="col-sm-5">
-              <input type="color" class="form-control" id="edgeFillColor" value="#FFAA22">
+              <input type="color" class="form-control" id="edgeFillColor" value="#FFAA22" list="edgeFillColorPreset">
+              <datalist id="edgeFillColorPreset">
+              </datalist>                     
             </div>
           </div>
           <div class="form-group row">
@@ -532,6 +549,7 @@
                 <option value="3">3</option>
                 <option value="4">4</option>
                 <option value="5">5</option>
+                <option value="all"><?= L('all')?></option>
               </select>
             </div>
           </div>