Add own style for separate vertex/edges.

lang/de/home.php

@@ -180,4 +180,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";
 ?>

lang/el/home.php

@@ -217,4 +217,10 @@
     $g_lang['subgraph_no'] = "Ισομορφικός υπογράφος # ";
     $g_lang['graph_has_no_atleast_2_graphs'] = "Για να χρησιμοποιήσετε τον αλγόριθμο, πρέπει να δημιουργήσετε 2 ξεχωριστούς γράφους";
     $g_lang['isomorphism_check'] = "Έλεγχος ισομορφισμού γράφων";
+
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";    
 ?>

lang/en/home.php

@@ -217,4 +217,9 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";
 ?>

lang/es/home.php

@@ -217,4 +217,9 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";
 ?>

lang/fr/home.php

@@ -185,4 +185,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";    
 ?>

lang/nl/home.php

@@ -182,4 +182,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";    
 ?>

lang/pt/home.php

@@ -183,4 +183,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";
 ?>

lang/ru/home.php

@@ -218,4 +218,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "Для использования алгоритма необходимо создать хотя бы 2 не связных графа";
     $g_lang['isomorphism_check'] = "Проверка изоморфности графов";
 
+    $g_lang['action'] = "Действия";
+    $g_lang['common_edge_style'] = "Стиль обычной дуги";
+    $g_lang['selected_edge_style'] = "Стиль выделенной дуги";
+    $g_lang['common_vertex_style'] = "Стиль обычной вершины";
+    $g_lang['selected_vertex_style'] = "Стиль выделенной вершины";
 ?>

lang/sv/home.php

@@ -179,4 +179,9 @@
     $g_lang['graph_has_no_atleast_2_graphs'] = "To use the algorithm, you need to create 2 separate graphs";
     $g_lang['isomorphism_check'] = "Check Graphs Isomorphism";
 
+    $g_lang['action'] = "Actions";
+    $g_lang['common_edge_style'] = "Common edge style";
+    $g_lang['selected_edge_style'] = "Selected edge style";
+    $g_lang['common_vertex_style'] = "Common vertex style";
+    $g_lang['selected_vertex_style'] = "Selected vertex style";    
 ?>

script/Appilcation.js

@@ -327,11 +327,21 @@ Application.prototype.GetBaseArcDrawer = function(context, edge)
 Application.prototype.UpdateEdgeCurrentStyle = function(edge, ForceCommonStyle, ForceSelectedStyle)
 {
     var commonStyle    = (ForceCommonStyle === undefined) ? this.edgeCommonStyle : ForceCommonStyle;
-    var selectedStyles = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
+    var selectedStyle  = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
 
     var selectedGroup = this.handler.GetSelectedGroup(edge);
-    var currentStyle  = selectedGroup > 0 ?
+    var selected = false;
-        selectedStyles[(selectedGroup - 1) % selectedStyles.length] : commonStyle;
+    if (selectedGroup > 0)
+    {
+        selectedGroup = (selectedGroup - 1) % selectedStyle.length;
+        selected = true;
+    }
+
+    var currentStyle = null;
+    if (edge.hasOwnStyleFor((selected ? 1 : 0) + selectedGroup))
+        currentStyle = edge.getStyleFor((selected ? 1 : 0) + selectedGroup);
+    else
+        currentStyle = selected ? selectedStyle[selectedGroup] : commonStyle;
 
     edge.currentStyle = currentStyle;
 }
@@ -396,8 +406,18 @@ Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, Force
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
 		var selectedGroup = this.handler.GetSelectedGroup(this.graph.vertices[i]);
-		var currentStyle  = selectedGroup > 0 ?
+        var selected = false;
-				selectedStyle[(selectedGroup - 1) % selectedStyle.length] : commonStyle;
+        if (selectedGroup > 0)
+        {
+            selectedGroup = (selectedGroup - 1) % selectedStyle.length;
+            selected = true;            
+        }
+
+        var currentStyle = null;
+        if (this.graph.vertices[i].hasOwnStyleFor((selected ? 1 : 0) + selectedGroup))
+		    currentStyle = this.graph.vertices[i].getStyleFor((selected ? 1 : 0) + selectedGroup);
+        else
+            currentStyle = selected ? selectedStyle[selectedGroup] : commonStyle;
 
         this.graph.vertices[i].currentStyle = currentStyle;
     }	
@@ -1595,7 +1615,7 @@ Application.prototype.GetSelectionRect = function(rect)
   return this.selectionRect;
 }
 
-Application.prototype.GetStyle = function(type, styleName)
+Application.prototype.GetStyle = function(type, styleName, index)
 {
     if (type == "vertex")
     {
@@ -1605,7 +1625,10 @@ Application.prototype.GetStyle = function(type, styleName)
         }
         else if (styleName == "selected")
         {
-            return this.vertexSelectedVertexStyles[0];
+            if (index == undefined)
+                index = 0;
+
+            return this.vertexSelectedVertexStyles[index];
         }
         else if (styleName == "printed")
         {
@@ -1613,7 +1636,10 @@ Application.prototype.GetStyle = function(type, styleName)
         }
         else if (styleName == "printedSelected")
         {
-            return this.vertexPrintSelectedVertexStyles[0];
+            if (index == undefined)
+                index = 0;
+
+            return this.vertexPrintSelectedVertexStyles[index];
         }       
 
         return null;
@@ -1626,7 +1652,7 @@ Application.prototype.GetStyle = function(type, styleName)
         }
         else if (styleName == "selected")
         {
-            return this.edgeSelectedVertexStyles[0];
+            return this.edgeSelectedStyles[0];
         }
         else if (styleName == "printed")
         {
@@ -1634,7 +1660,7 @@ Application.prototype.GetStyle = function(type, styleName)
         }
         else if (styleName == "printedSelected")
         {
-            return this.edgePrintSelectedVertexStyles[0];
+            return this.edgePrintSelectedStyles[0];
         }       
 
         return null;
@@ -1662,4 +1688,32 @@ Application.prototype._RedrawGraph = function(context, backgroundPosition, backg
     this.RedrawNodes(context);
     if (bDrawSelectedRect && this.selectionRect != null)
         this.RedrawSelectionRect(context);
-}
+}
+
+Application.prototype.GetSelectedVertexes = function()
+{
+    var res = [];
+    for (i = 0; i < this.graph.vertices.length; i ++)
+    {
+        if (this.handler.GetSelectedGroup(this.graph.vertices[i]) > 0)
+        {
+            res.push(this.graph.vertices[i]);
+        }
+    }
+
+    return res;
+}
+
+Application.prototype.GetSelectedEdges = function()
+{
+    var res = [];
+    for (i = 0; i < this.graph.edges.length; i ++)
+    {
+        if (this.handler.GetSelectedGroup(this.graph.edges[i]) > 0)
+        {
+            res.push(this.graph.edges[i]);
+        }
+    }
+
+    return res;
+}

script/BaseEdge.js

@@ -25,6 +25,8 @@ function BaseEdge(vertex1, vertex2, isDirect, weight, upText)
     
     if (weight !== undefined)
       this.SetWeight(weight);
+
+    this.ownStyles = {};      
 }
 
 BaseEdge.prototype.copyFrom = function(other)
@@ -43,6 +45,8 @@ BaseEdge.prototype.copyFrom = function(other)
     this.model.copyFrom(other.model);
     
     this.upText    = other.upText;
+
+    this.ownStyles = FullObjectCopy(other.ownStyles);
 }
 
 BaseEdge.prototype.SaveToXML = function ()
@@ -58,6 +62,7 @@ BaseEdge.prototype.SaveToXML = function ()
            "upText=\""     + gEncodeToHTML(this.upText) + "\" " +
            "arrayStyleStart=\""       + this.arrayStyleStart + "\" " +
            "arrayStyleFinish=\""       + this.arrayStyleFinish + "\" " +
+           ((Object.keys(this.ownStyles).length > 0) ? "ownStyles = \"" + gEncodeToHTML(JSON.stringify(this.ownStyles)) + "\" ": "") +
            this.model.SaveToXML() + 
 		"></edge>";       
 }
@@ -97,6 +102,23 @@ BaseEdge.prototype.LoadFromXML = function (xml, graph)
     {
         this.upText = gDecodeFromHTML(this.upText);
     }
+
+    var ownStyle = xml.attr('ownStyles');
+    if (typeof ownStyle !== 'undefined')
+    {
+      var parsedSave = gDecodeFromHTML(JSON.parse(ownStyle));
+    
+      for(var indexField in parsedSave)
+      {
+        var index = parseInt(indexField);
+        this.ownStyles[index] = this.getStyleFor(index);
+        for(var field in parsedSave[indexField])
+        {
+            if (this.ownStyles[index].ShouldLoad(field))
+              this.ownStyles[index][field] = parsedSave[indexField][field];
+        }
+      }
+    }    
     
     this.model.LoadFromXML(xml);
 }
@@ -243,4 +265,41 @@ BaseEdge.prototype.SetWeight = function(weight)
 BaseEdge.prototype.SetUpText = function(text)
 {
     this.upText = text;
+}
+
+BaseEdge.prototype.resetOwnStyle = function (index)
+{
+  if (this.ownStyles.hasOwnProperty(index))
+  {
+    delete this.ownStyles[index];
+  }
+}
+
+BaseEdge.prototype.setOwnStyle = function (index, style)
+{
+  this.ownStyles[index] = style;
+}
+
+BaseEdge.prototype.getStyleFor = function (index)
+{
+  if (this.ownStyles.hasOwnProperty(index))
+  {
+    return FullObjectCopy(this.ownStyles[index]);
+  }
+  else
+  {
+    var style = null;
+
+    if (index == 0)
+      style = globalApplication.GetStyle("edge", "common");
+    else
+      style = globalApplication.GetStyle("edge", "selected");
+
+    return FullObjectCopy(style);
+  }
+}
+
+BaseEdge.prototype.hasOwnStyleFor = function (index)
+{
+  return this.ownStyles.hasOwnProperty(index);
 }

script/BaseVertex.js

@@ -13,6 +13,7 @@ function BaseVertex(x, y, vertexEnumType)
     this.vertexEnumType = vertexEnumType;
     this.model    = new VertexModel();
     this.hasUndefinedPosition = false;
+    this.ownStyles = {};
 };
 
 BaseVertex.prototype.position = new Point(0, 0);
@@ -26,6 +27,7 @@ BaseVertex.prototype.copyFrom = function (other)
     this.vertexEnumType = other.vertexEnumType;
     this.model    = new VertexModel();
     this.hasUndefinedPosition = other.hasUndefinedPosition;
+    this.ownStyles = FullObjectCopy(other.ownStyles);
 }
 
 BaseVertex.prototype.SaveToXML = function ()
@@ -36,8 +38,8 @@ BaseVertex.prototype.SaveToXML = function ()
 	       "id=\""         + this.id   + "\" " +
 	       "mainText=\""   + gEncodeToHTML(this.mainText) + "\" " +
 	       "upText=\""     + gEncodeToHTML(this.upText)   + "\" " +
-		"></node>";       
+         ((Object.keys(this.ownStyles).length > 0) ? "ownStyles = \"" + gEncodeToHTML(JSON.stringify(this.ownStyles)) + "\"": "") +
-		                 
+		"></node>";
 }
 
 BaseVertex.prototype.LoadFromXML = function (xml)
@@ -59,6 +61,23 @@ BaseVertex.prototype.LoadFromXML = function (xml)
       this.upText = "";
     else
       this.upText = gDecodeFromHTML(this.upText);
+
+    var ownStyle = xml.attr('ownStyles');
+    if (typeof ownStyle !== 'undefined')
+    {
+      var parsedSave = gDecodeFromHTML(JSON.parse(ownStyle));
+    
+      for(var indexField in parsedSave)
+      {
+        var index = parseInt(indexField);
+        this.ownStyles[index] = this.getStyleFor(index);
+        for(var field in parsedSave[indexField])
+        {
+            if (this.ownStyles[index].ShouldLoad(field))
+              this.ownStyles[index][field] = parsedSave[indexField][field];
+        }
+      }
+    }
 }
 
 BaseVertex.prototype.SetId = function (id)
@@ -99,10 +118,8 @@ BaseVertex.prototype.HitTest = function (pos)
     var hitNumber1 = 0;
     var hitNumber2 = 0;
 
-    console.log("Points");
     for (var i = 0; i < pointsVertex1.length - 1; i ++)
     {
-        console.log(pointsVertex1[i] + " " + pointsVertex1[i + 1]);
         var hitTest = Point.hitTest(relativPos, lineFinish1, pointsVertex1[i], pointsVertex1[i + 1]);
         if (hitTest != null)
         {
@@ -119,4 +136,41 @@ BaseVertex.prototype.HitTest = function (pos)
   }
 
   return false;
+}
+
+BaseVertex.prototype.resetOwnStyle = function (index)
+{
+  if (this.ownStyles.hasOwnProperty(index))
+  {
+    delete this.ownStyles[index];
+  }
+}
+
+BaseVertex.prototype.setOwnStyle = function (index, style)
+{
+  this.ownStyles[index] = style;
+}
+
+BaseVertex.prototype.getStyleFor = function (index)
+{
+  if (this.ownStyles.hasOwnProperty(index))
+  {
+    return FullObjectCopy(this.ownStyles[index]);
+  }
+  else
+  {
+    var style = null;
+
+    if (index == 0)
+      style = globalApplication.GetStyle("vertex", "common");
+    else
+      style = globalApplication.GetStyle("vertex", "selected");
+
+    return FullObjectCopy(style);
+  }
+}
+
+BaseVertex.prototype.hasOwnStyleFor = function (index)
+{
+  return this.ownStyles.hasOwnProperty(index);
 }

script/EventHandlers.js

@@ -342,7 +342,17 @@ DefaultHandler.prototype.MouseUp = function(pos)
     this.groupingSelect = false;
     if (this.selectedObject != null && (this.selectedObject instanceof BaseVertex))
     {
-        this.message = g_textsSelectAndMove + " <button type=\"button\" id=\"renameButton\" class=\"btn btn-default btn-xs\" style=\"float:right;z-index:1;position: relative;\">" + g_renameVertex + "</button>";
+        this.message = g_textsSelectAndMove        
+         +  "<div class=\"btn-group\" style=\"float:right;position: relative;\">"
+         +  "<button type=\"button\" class=\"btn btn-default btn-sm dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">"
+         +  " " + g_action + " <span class=\"caret\"></span>"
+         +  " </button>"
+         +  "<ul class=\"dropdown-menu dropdown-menu-right\" style=\"z-index:15; position: absolute;\">"
+         +  " <li><a href=\"#\" id=\"renameButton\">" + g_renameVertex + "</a></li>"
+         +  " <li><a href=\"#\" id=\"changeCommonStyle\">" + g_commonVertexStyle + "</a></li>"
+         +  " <li><a href=\"#\" id=\"changeSelectedStyle\">" + g_selectedVertexStyle + "</a></li>"
+         +  "</ul>"
+         +  "</div>";
         
         var handler = this;
         var callback = function (enumType) {
@@ -354,14 +364,34 @@ DefaultHandler.prototype.MouseUp = function(pos)
                         var customEnum =  new TextEnumVertexsCustom();
                         customEnum.ShowDialog(callback, g_rename,  g_renameVertex, handler.selectedObject.mainText);
                      });
+        $('#message').on('click', '#changeCommonStyle', function(){
+            var selectedVertexes = handler.app.GetSelectedVertexes();
+            var setupVertexStyle = new SetupVertexStyle(handler.app);
+            setupVertexStyle.show(0, selectedVertexes);
+        });
+        $('#message').on('click', '#changeSelectedStyle', function(){
+            var selectedVertexes = handler.app.GetSelectedVertexes();
+            var setupVertexStyle = new SetupVertexStyle(handler.app);
+            setupVertexStyle.show(1, selectedVertexes);
+        });                                          
     }
     else if (this.selectedObject != null && (this.selectedObject instanceof BaseEdge))
     {
         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>"
+        + "<button type=\"button\" id=\"decCurvel\" class=\"btn btn-default btn-xs\"> - </button> &nbsp; "
-        + "&nbsp &nbsp<button type=\"button\" id=\"editEdge\" class=\"btn btn-default btn-xs\" style=\"z-index:1;position: relative;\">" + g_editWeight + "</button></span>";
+        +  "<div class=\"btn-group\" style=\"float:right;position: relative;\">"
+        +  "<button type=\"button\" class=\"btn btn-default btn-sm dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">"
+        +  " " + g_action + " <span class=\"caret\"></span>"
+        +  " </button>"
+        +  "<ul class=\"dropdown-menu dropdown-menu-right\" style=\"z-index:15; position: absolute;\">"
+        +  " <li><a href=\"#\" id=\"editEdge\">" + g_editWeight + "</a></li>"
+        +  " <li><a href=\"#\" id=\"changeCommonStyle\">" + g_commonEdgeStyle + "</a></li>"
+        +  " <li><a href=\"#\" id=\"changeSelectedStyle\">" + g_selectedEdgeStyle + "</a></li>"
+        +  "</ul>"
+        +  "</div>";
+
         var handler = this;
         $('#message').unbind();
         $('#message').on('click', '#editEdge', function(){
@@ -422,6 +452,16 @@ DefaultHandler.prototype.MouseUp = function(pos)
             handler.app.redrawGraph();
             userAction("Edge.Bend");
         });
+        $('#message').on('click', '#changeCommonStyle', function(){
+            var selectedEdges = handler.app.GetSelectedEdges();
+            var setupVertexStyle = new SetupEdgeStyle(handler.app);
+            setupVertexStyle.show(0, selectedEdges);
+        });
+        $('#message').on('click', '#changeSelectedStyle', function(){
+            var selectedEdges = handler.app.GetSelectedEdges();
+            var setupVertexStyle = new SetupEdgeStyle(handler.app);
+            setupVertexStyle.show(1, selectedEdges);
+        });          
     }
     else if (this.selectedObjects.length > 0)
     {
@@ -1342,15 +1382,23 @@ function SetupVertexStyle(app)
 // inheritance.
 SetupVertexStyle.prototype = Object.create(BaseHandler.prototype);
 
-SetupVertexStyle.prototype.show = function(index)
+SetupVertexStyle.prototype.show = function(index, selectedVertexes)
 {
 	var handler = this;
 	var dialogButtons = {};
     var graph = this.app.graph;
     var app   = this.app;
+    this.forAll = selectedVertexes == null;
+    var forAll = this.forAll;
 
-    var style = Object.assign(Object.create((index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1])), 
+    var originStyle = (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]);
-        (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]));
+
+    if (!forAll)
+    {
+        originStyle = selectedVertexes[0].getStyleFor(index);
+    }
+
+    var style = FullObjectCopy(originStyle);
 
     var fillFields = function()
     {
@@ -1403,14 +1451,32 @@ SetupVertexStyle.prototype.show = function(index)
                text    : g_default,
                class   : "MarginLeft",
                click   : function() {
-                    app.ResetVertexStyle(index);
+                    if (forAll)
+                    {
+                        app.ResetVertexStyle(index);
+                    }
+                    else
+                    {
+                        selectedVertexes.forEach(function(vertex) {
+                            vertex.resetOwnStyle(index);
+                          });
+                    }
                     app.redrawGraph();
                     $( this ).dialog( "close" );
                }
            };
     
 	dialogButtons[g_save] = function() {
-                app.SetVertexStyle(index, style);    
+                if (forAll)
+                {
+                    app.SetVertexStyle(index, style);
+                }
+                else
+                {
+                    selectedVertexes.forEach(function(vertex) {
+                        vertex.setOwnStyle(index, style);
+                    });
+                }
                 app.redrawGraph();
 				$( this ).dialog( "close" );					
 			};
@@ -1456,14 +1522,23 @@ function SetupEdgeStyle(app)
 // inheritance.
 SetupEdgeStyle.prototype = Object.create(BaseHandler.prototype);
 
-SetupEdgeStyle.prototype.show = function(index)
+SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 {
 	var handler = this;
 	var dialogButtons = {};
     var graph = this.app.graph;
     var app   = this.app;
-    var style = Object.assign(Object.create((index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1])), 
+    this.forAll = selectedEdges == null;
-                (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]));
+    var forAll = this.forAll;
+
+    var originStyle = (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]);
+
+    if (!forAll)
+    {
+        originStyle = selectedEdges[0].getStyleFor(index);
+    }
+
+    var style = FullObjectCopy(originStyle);
 
     var fillFields = function()
     {
@@ -1498,6 +1573,10 @@ 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));
+
+        baseVertex1.currentStyle = baseVertex1.getStyleFor(0);
+        baseVertex2.currentStyle = baseVertex2.getStyleFor(0);
+
         var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
         
         graphDrawer.Draw(baseEdge, style.GetStyle({}));
@@ -1510,14 +1589,33 @@ SetupEdgeStyle.prototype.show = function(index)
                text    : g_default,
                class   : "MarginLeft",
                click   : function() {
-                    app.ResetEdgeStyle(index);
+                    if (forAll)
+                    {
+                        app.ResetEdgeStyle(index);
+                    }
+                    else
+                    {
+                        selectedEdges.forEach(function(edge) {
+                            edge.resetOwnStyle(index);
+                        });
+                    }
+                    
                     app.redrawGraph();
                     $( this ).dialog( "close" );
                }
            };
     
 	dialogButtons[g_save] = function() {
-                app.SetEdgeStyle(index, style);    
+                if (forAll)
+                {
+                    app.SetEdgeStyle(index, style);
+                }
+                else
+                {
+                    selectedEdges.forEach(function(edge) {
+                        edge.setOwnStyle(index, style);
+                    });   
+                }                
                 app.redrawGraph();
 				$( this ).dialog( "close" );					
 			};

script/texts.js

@@ -147,6 +147,12 @@ var g_subgraphNo                        = "Isomorphic subgraph # ";
 var g_graphHasNoAtleast2Graphs          = "To use the algorithm, you need to create 2 separate graphs";
 var g_IsomorphismCheck                  = "Check Graphs Isomorphism";
 
+var g_action = "Action";
+var g_commonEdgeStyle   = "Common Edge Style";
+var g_selectedEdgeStyle = "Selected Edge Style";
+var g_commonVertexStyle   = "Common Vertex Style";
+var g_selectedVertexStyle = "Selected Vertex Style";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -301,4 +307,10 @@ function loadTexts()
     g_subgraphNo                        = document.getElementById("SubgraphNo").innerHTML;
     g_graphHasNoAtleast2Graphs          = document.getElementById("GraphHasNoAtleast2Graphs").innerHTML;
     g_IsomorphismCheck                  = document.getElementById("IsomorphismCheck").innerHTML;
+
+    g_action              = document.getElementById("ActionText").innerHTML;
+    g_commonEdgeStyle     = document.getElementById("CommonEdgeStyleText").innerHTML;
+    g_selectedEdgeStyle   = document.getElementById("SelectedEdgeStyleText").innerHTML;
+    g_commonVertexStyle   = document.getElementById("CommonVertexStyleText").innerHTML;
+    g_selectedVertexStyle = document.getElementById("SelectedVertexStyleText").innerHTML;
 }

script/utils.js

@@ -23,13 +23,18 @@ function gDecodeFromHTML(str)
                .replace(/&/g, '&'); 
 }
 
+function FullObjectCopy(obj)
+{
+  return Object.assign(Object.create(obj), obj);
+}
+
 function FullArrayCopy(arr)
 {
   var res = [];
 
 	arr.forEach(function(element) {
 
-    var copyElement = Object.assign(Object.create(element), element);
+    var copyElement = FullObjectCopy(element);
     res.push(copyElement);
 	});  
 

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=35")?>" ></script>
+        <script src="<?= Root("script/example.js?v=36")?>" ></script>
     </head>
 <!--
 <div class="pull-right">
@@ -619,6 +619,12 @@
     <p id="GraphHasNoAtleast2Graphs" class="translation"><?= L('graph_has_no_atleast_2_graphs')?></p>
     <p id="IsomorphismCheck" class="translation"><?= L('isomorphism_check')?></p>
 
+    <p id="ActionText" class="translation"><?= L('action')?></p>
+    <p id="CommonEdgeStyleText" class="translation"><?= L('common_edge_style')?></p>
+    <p id="SelectedEdgeStyleText" class="translation"><?= L('selected_edge_style')?></p>
+    <p id="CommonVertexStyleText" class="translation"><?= L('common_vertex_style')?></p>
+    <p id="SelectedVertexStyleText" class="translation"><?= L('selected_vertex_style')?></p>
+
 </section>
 <!--
 <script>