Refactor styles inherent.

script/Appilcation.js

@@ -28,19 +28,19 @@ function Application(document, window)
     
     this.edgeCommonStyle         = new CommonEdgeStyle();
     this.isEdgeCommonStyleCustom = false;
-    this.edgeSelectedStyles      = DefaultSelectedEdgeStyles.slice();
+    this.edgeSelectedStyles      = FullArrayCopy(DefaultSelectedEdgeStyles);
     this.isEdgeSelectedStylesCustom = false;
     
     this.edgePrintCommonStyle      = new CommonPrintEdgeStyle();
-    this.edgePrintSelectedStyles   = DefaultPrintSelectedEdgeStyles.slice();
+    this.edgePrintSelectedStyles   = FullArrayCopy(DefaultPrintSelectedEdgeStyles);
     
     this.vertexCommonStyle          = new CommonVertexStyle();
     this.isVertexCommonStyleCustom  = false;
-    this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
+    this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
     this.isVertexSelectedVertexStylesCustom  = false;
     
     this.vertexPrintCommonStyle          = new CommonPrintVertexStyle(); 
-    this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles.slice();
+    this.vertexPrintSelectedVertexStyles = FullArrayCopy(DefaultPrintSelectedGraphStyles);
     
     this.backgroundCommonStyle = new CommonBackgroundStyle();
     this.backgroundPrintStyle  = new PrintBackgroundStyle(); 
@@ -361,7 +361,7 @@ Application.prototype._RedrawEdge = function(edge, arcDrawer, commonStyle, selec
 
 Application.prototype._RedrawEdgeWithStyle = function(edge, style, arcDrawer, commonStyle, selectedStyles)
 {
-    arcDrawer.Draw(edge, style);
+    arcDrawer.Draw(edge, style.GetStyle({}));
 }
 
 Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
@@ -392,7 +392,7 @@ Application.prototype.RedrawNodes = function(context, ForceCommonStyle, ForceSel
 		var currentStyle  = selectedGroup > 0 ?
 				selectedStyle[(selectedGroup - 1) % selectedStyle.length] : commonStyle;
 
-		graphDrawer.Draw(this.graph.vertices[i], currentStyle);
+		graphDrawer.Draw(this.graph.vertices[i], currentStyle.GetStyle({}));
     }	
 }
 
@@ -1403,11 +1403,13 @@ Application.prototype.LoadUserSettings = function(json)
     
     checkValue.push({field: "edgeCommonStyle",
                      value: this.edgeCommonStyle,
-                     check: "isEdgeCommonStyleCustom"});
+                     check: "isEdgeCommonStyleCustom",
+                     deep: false});
     
     checkValue.push({field: "edgeSelectedStyles",
                      value: this.edgeSelectedStyles,
-                     check: "isEdgeSelectedStylesCustom"});
+                     check: "isEdgeSelectedStylesCustom",
+                     deep: true});
 
     //checkValue.push({field: "edgePrintCommonStyle",
     //                 value: this.edgePrintCommonStyle});
@@ -1417,11 +1419,13 @@ Application.prototype.LoadUserSettings = function(json)
     
     checkValue.push({field: "vertexCommonStyle",
                      value: this.vertexCommonStyle,
-                     check: "isVertexCommonStyleCustom"});
+                     check: "isVertexCommonStyleCustom",
+                     deep: false});
     
     checkValue.push({field: "vertexSelectedVertexStyles",
                      value: this.vertexSelectedVertexStyles,
-                     check: "isVertexSelectedVertexStylesCustom"});
+                     check: "isVertexSelectedVertexStylesCustom",
+                     deep: true});
     
     //checkValue.push({field: "vertexPrintCommonStyle",
     //                 value: this.vertexPrintCommonStyle});
@@ -1431,7 +1435,8 @@ Application.prototype.LoadUserSettings = function(json)
     
     checkValue.push({field: "backgroundCommonStyle",
                      value: this.backgroundCommonStyle,
-                     check: "isBackgroundCommonStyleCustom"});
+                     check: "isBackgroundCommonStyleCustom",
+                     deep: false});
     
     var decoderStr = this.DecodeFromHTML(json);
     var parsedSave = JSON.parse(decoderStr);
@@ -1442,7 +1447,21 @@ Application.prototype.LoadUserSettings = function(json)
             if (parsedSave.hasOwnProperty(entry.field))
             {
                 for(var k in parsedSave[entry.field])
+                {
+                    if (!entry.deep)
+                    {
+                        if (entry.value.ShouldLoad(k))
                             entry.value[k] = parsedSave[entry.field][k];
+                    }
+                    else
+                    {
+                        for(var deepK in parsedSave[entry.field][k])
+                        {
+                            if (entry.value[k].ShouldLoad(deepK))
+                                entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
+                        }
+                    }
+                }
                 
                 app[entry.check] = true;
             }
@@ -1482,7 +1501,7 @@ Application.prototype.ResetVertexStyle = function (index)
     }
     else
     {
-        this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
+        this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
         this.isVertexSelectedVertexStylesCustom = false;
     }
 }
@@ -1510,7 +1529,7 @@ Application.prototype.ResetEdgeStyle = function (index)
     }
     else
     {
-        this.edgeSelectedStyles = DefaultSelectedEdgeStyles.slice();
+        this.edgeSelectedStyles = FullArrayCopy(DefaultSelectedEdgeStyles);
         this.isEdgeSelectedStylesCustom = false;
     }
 }
@@ -1568,3 +1587,51 @@ Application.prototype.GetSelectionRect = function(rect)
 {
   return this.selectionRect;
 }
+
+Application.prototype.GetStyle = function(type, styleName)
+{
+    if (type == "vertex")
+    {
+        if (styleName == "common")
+        {
+            return this.vertexCommonStyle;
+        }
+        else if (styleName == "selected")
+        {
+            return this.vertexSelectedVertexStyles[0];
+        }
+        else if (styleName == "printed")
+        {
+            return this.vertexPrintCommonStyle;
+        }
+        else if (styleName == "printedSelected")
+        {
+            return this.vertexPrintSelectedVertexStyles[0];
+        }       
+
+        return null;
+    }
+    else if(type == "edge")
+    {
+        if (styleName == "common")
+        {
+            return this.edgeCommonStyle;
+        }
+        else if (styleName == "selected")
+        {
+            return this.edgeSelectedVertexStyles[0];
+        }
+        else if (styleName == "printed")
+        {
+            return this.edgePrintCommonStyle;
+        }
+        else if (styleName == "printedSelected")
+        {
+            return this.edgePrintSelectedVertexStyles[0];
+        }       
+
+        return null;
+    }
+
+    return null;
+}

script/BaseEdgeDrawer.js

@@ -2,9 +2,41 @@
  * Graph drawer.
  */
  
+ function BaseEdgeStyle()
+ {
+   this.baseStyles = [];
+ }
+ 
+ BaseEdgeStyle.prototype.GetStyle = function (baseStyle)
+ {
+   this.baseStyles.forEach(function(element) {
+     var styleObject = globalApplication.GetStyle("edge", element);
+     baseStyle       = styleObject.GetStyle(baseStyle);
+   });
+ 
+   if (this.hasOwnProperty('weightText'))
+     baseStyle.weightText   = this.weightText;
+   if (this.hasOwnProperty('strokeStyle'))
+     baseStyle.strokeStyle = this.strokeStyle;
+   if (this.hasOwnProperty('fillStyle'))
+     baseStyle.fillStyle   = this.fillStyle;
+   if (this.hasOwnProperty('textPadding'))
+     baseStyle.textPadding = this.textPadding;
+     if (this.hasOwnProperty('textStrockeWidth'))
+     baseStyle.textStrockeWidth = this.textStrockeWidth;
+ 
+   return baseStyle;
+ }
+ 
+ BaseEdgeStyle.prototype.ShouldLoad = function (field)
+ {
+   return field != "baseStyles";
+ }
  
 function CommonEdgeStyle()
 {
+  BaseEdgeStyle.apply(this, arguments);
+
 	this.strokeStyle = '#c7b7c7';
 	this.weightText  = '#f0d543';
  	this.fillStyle   = '#68aeba';
@@ -12,77 +44,92 @@ function CommonEdgeStyle()
 	this.textStrockeWidth = 2;
 }
 
+CommonEdgeStyle.prototype = Object.create(BaseEdgeStyle.prototype);
+
 function CommonPrintEdgeStyle()
 {
-	CommonEdgeStyle.apply(this, arguments);
+	BaseEdgeStyle.apply(this, arguments);
     
 	this.strokeStyle = '#000000';
 	this.weightText  = '#000000';
  	this.fillStyle   = '#FFFFFF';
+ 	this.textPadding = 4;
+	this.textStrockeWidth = 2;
 }
 
 function SelectedEdgeStyle0()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#f0d543';
 	this.weightText  = '#f0d543';
 	this.fillStyle   = '#c7627a';
+
+  this.baseStyles.push("common");
 }
-SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
+SelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
 
 function SelectedEdgeStyle1()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#8FBF83';
 	this.weightText  = '#8FBF83';
 	this.fillStyle   = '#F9F9D5';
-}
-SelectedEdgeStyle1.prototype = Object.create(CommonEdgeStyle.prototype);
 
+  this.baseStyles.push("selected");
+}
+SelectedEdgeStyle1.prototype = Object.create(BaseEdgeStyle.prototype);
 
 function SelectedEdgeStyle2()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#8C4C86';
 	this.weightText  = '#8C4C86';
 	this.fillStyle   = '#253267';
+
+  this.baseStyles.push("selected");
 }
-SelectedEdgeStyle2.prototype = Object.create(CommonEdgeStyle.prototype);
+SelectedEdgeStyle2.prototype = Object.create(BaseEdgeStyle.prototype);
 
 
 function SelectedEdgeStyle3()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#6188FF';
 	this.weightText  = '#6188FF';
 	this.fillStyle   = '#E97CF9';
+
+  this.baseStyles.push("selected");
 }
-SelectedEdgeStyle3.prototype = Object.create(CommonEdgeStyle.prototype);
+SelectedEdgeStyle3.prototype = Object.create(BaseEdgeStyle.prototype);
 
 
 function SelectedEdgeStyle4()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#C6B484';
 	this.weightText  = '#C6B484';
 	this.fillStyle   = '#E0DEE1';
+
+  this.baseStyles.push("selected");
 }
-SelectedEdgeStyle4.prototype = Object.create(CommonEdgeStyle.prototype);
+SelectedEdgeStyle4.prototype = Object.create(BaseEdgeStyle.prototype);
 
 function SelectedEdgePrintStyle()
 {
-	CommonEdgeStyle.apply(this, arguments);  
+	BaseEdgeStyle.apply(this, arguments);  
 
 	this.strokeStyle = '#AAAAAA';
 	this.weightText  = '#000000';
 	this.fillStyle   = '#AAAAAA';
+
+  this.baseStyles.push("printed");
 }
-SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
+SelectedEdgeStyle0.prototype = Object.create(BaseEdgeStyle.prototype);
 
 var DefaultSelectedEdgeStyles      = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(), 
 	new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];

script/BaseVertexDrawer.js

@@ -2,146 +2,208 @@
  * Graph drawer.
  */
 
+// Test graph: http://localhost:8080/?graph=oimDPgsdgiAjWGBHZZcst
+ 
+function BaseVertexStyle()
+{
+  this.baseStyles = [];
+}
+
+BaseVertexStyle.prototype.GetStyle = function (baseStyle)
+{
+	this.baseStyles.forEach(function(element) {
+		var styleObject = globalApplication.GetStyle("vertex", element);
+		baseStyle       = styleObject.GetStyle(baseStyle);
+	});
+
+	if (this.hasOwnProperty('lineWidth'))
+		baseStyle.lineWidth   = this.lineWidth;
+	if (this.hasOwnProperty('strokeStyle'))
+		baseStyle.strokeStyle = this.strokeStyle;
+	if (this.hasOwnProperty('fillStyle'))
+		baseStyle.fillStyle   = this.fillStyle;
+	if (this.hasOwnProperty('mainTextColor'))
+		baseStyle.mainTextColor = this.mainTextColor;
+
+	return baseStyle;
+}
+
+BaseVertexStyle.prototype.ShouldLoad = function (field)
+{
+	return field != "baseStyles";
+}
+
 // Common style of Graphs.
 function CommonVertexStyle()
 {
-  this.lineWidth   = 2;
+  BaseVertexStyle.apply(this, arguments);
+
+  this.lineWidth   = 20;
   this.strokeStyle = '#c7b7c7';
   this.fillStyle   = '#68aeba';
   this.mainTextColor = '#f0d543';
+
+  this.baseStyles = [];
 }
 
+CommonVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
+
 function CommonPrintVertexStyle()
 {
-  CommonVertexStyle.apply(this, arguments);
+  BaseVertexStyle.apply(this, arguments);
   
-  this.lineWidth   = 2;
   this.strokeStyle = '#000000';
   this.fillStyle   = '#FFFFFF';
   this.mainTextColor = '#000000';
+
+  this.baseStyles.push("common");
 }
 
+CommonPrintVertexStyle.prototype = Object.create(BaseVertexStyle.prototype);
+
 // Selected style of Graphs.
 function SelectedVertexStyle0()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#f0d543';
 	this.mainTextColor  = '#f0d543';
 	this.fillStyle   = '#c7627a';
+
+	this.baseStyles.push("common");
 }
 
-SelectedVertexStyle0.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle0.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle1()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#7a9ba0';
 	this.mainTextColor  = '#c3d2d5';
 	this.fillStyle   = '#534641';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle1.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle1.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle2()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#8C4C86';
 	this.mainTextColor  = '#dbbdd8';
 	this.fillStyle   = '#253267';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle2.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle2.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle3()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#6188FF';
 	this.mainTextColor  = '#6188FF';
 	this.fillStyle   = '#E97CF9';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle3.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle3.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle4()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#C6B484';
 	this.mainTextColor  = '#C6B484';
 	this.fillStyle   = '#E0DEE1';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle4.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle4.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle5()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle = '#FF6200';
 	this.mainTextColor  = '#FF6200';
 	this.fillStyle   = '#0F4FA8';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle5.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle5.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle6()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle   = '#8CA336';
 	this.mainTextColor = '#8CA336';
 	this.fillStyle     = '#9C344C';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle6.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle6.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle7()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle   = '#B59E22';
 	this.mainTextColor = '#B59E22';
 	this.fillStyle     = '#22387A';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle7.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle7.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle8()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle   = '#08806C';
 	this.mainTextColor = '#08806C';
 	this.fillStyle     = '#CA980D';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle8.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle8.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedVertexStyle9()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle   = '#AA8134';
 	this.mainTextColor = '#AA8134';
 	this.fillStyle     = '#492A73';
+
+	this.baseStyles.push("selected");
 }
 
-SelectedVertexStyle9.prototype = Object.create(CommonVertexStyle.prototype);
+SelectedVertexStyle9.prototype = Object.create(BaseVertexStyle.prototype);
 
 function SelectedPrintVertexStyle()
 {
-	CommonVertexStyle.apply(this, arguments);
+	BaseVertexStyle.apply(this, arguments);
 
 	this.strokeStyle   = '#000000';
 	this.mainTextColor = '#000000';
 	this.fillStyle     = '#AAAAAA';
+
+	this.baseStyles.push("printed");
 }
 
-SelectedPrintVertexStyle.prototype = Object.create(CommonVertexStyle.prototype);
+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()];

script/EventHandlers.js

@@ -1348,21 +1348,34 @@ SetupVertexStyle.prototype.show = function(index)
 	var dialogButtons = {};
     var graph = this.app.graph;
     var app   = this.app;
-    var style = Object.assign({}, (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]));
+
+    var style = Object.assign(Object.create((index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1])), 
+        (index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[index - 1]));
 
     var fillFields = function()
     {
-        $( "#vertexFillColor" ).val(style.fillStyle);
+        var fullStyle = style.GetStyle({});
-        $( "#vertexStrokeColor" ).val(style.strokeStyle);
+
-        $( "#vertexTextColor" ).val(style.mainTextColor);
+        $( "#vertexFillColor" ).val(fullStyle.fillStyle);
-        $( "#vertexStrokeSize" ).val(style.lineWidth);
+        $( "#vertexStrokeColor" ).val(fullStyle.strokeStyle);
+        $( "#vertexTextColor" ).val(fullStyle.mainTextColor);
+        $( "#vertexStrokeSize" ).val(fullStyle.lineWidth);
     }
     
     var redrawVertex = function()
     {
+        var fullStyle = style.GetStyle({});
+
+        if (fullStyle.fillStyle != $( "#vertexFillColor" ).val())
             style.fillStyle     = $( "#vertexFillColor" ).val();
+
+        if (fullStyle.strokeStyle != $( "#vertexStrokeColor" ).val())
             style.strokeStyle   = $( "#vertexStrokeColor" ).val();
+
+        if (fullStyle.mainTextColor != $( "#vertexTextColor" ).val())
             style.mainTextColor = $( "#vertexTextColor" ).val();
+
+        if (fullStyle.lineWidth != $( "#vertexStrokeSize" ).val())
             style.lineWidth     = $( "#vertexStrokeSize" ).val();
         
         var canvas  = document.getElementById( "VertexPreview" );
@@ -1378,7 +1391,7 @@ SetupVertexStyle.prototype.show = function(index)
         baseVertex.mainText = "1";
         baseVertex.upText   = "Up Text";
         
-        graphDrawer.Draw(baseVertex, style);
+        graphDrawer.Draw(baseVertex, style.GetStyle({}));
         
         context.restore();
     }
@@ -1449,19 +1462,29 @@ SetupEdgeStyle.prototype.show = function(index)
 	var dialogButtons = {};
     var graph = this.app.graph;
     var app   = this.app;
-    var style = Object.assign({}, (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]));
+    var style = Object.assign(Object.create((index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1])), 
+                (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]));
 
     var fillFields = function()
     {
-        $( "#edgeFillColor" ).val(style.fillStyle);
+        var fullStyle = style.GetStyle({});
-        $( "#edgeStrokeColor" ).val(style.strokeStyle);
+
-        $( "#edgeTextColor" ).val(style.weightText);
+        $( "#edgeFillColor" ).val(fullStyle.fillStyle);
+        $( "#edgeStrokeColor" ).val(fullStyle.strokeStyle);
+        $( "#edgeTextColor" ).val(fullStyle.weightText);
     }
     
     var redrawVertex = function()
     {
+        var fullStyle = style.GetStyle({});
+
+        if (fullStyle.fillStyle != $( "#edgeFillColor" ).val())
             style.fillStyle     = $( "#edgeFillColor" ).val();
+
+        if (fullStyle.strokeStyle != $( "#edgeStrokeColor" ).val())
             style.strokeStyle   = $( "#edgeStrokeColor" ).val();
+
+        if (fullStyle.weightText != $( "#edgeTextColor" ).val())
             style.weightText    = $( "#edgeTextColor" ).val();
         
         var canvas  = document.getElementById( "EdgePreview" );
@@ -1477,7 +1500,7 @@ SetupEdgeStyle.prototype.show = function(index)
         var baseVertex2  = new BaseVertex(canvas.width, canvas.height / 2, new BaseEnumVertices(this));
         var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10, "Text");
         
-        graphDrawer.Draw(baseEdge, style);
+        graphDrawer.Draw(baseEdge, style.GetStyle({}));
         
         context.restore();
     }

script/utils.js

@@ -22,3 +22,16 @@ function gDecodeFromHTML(str)
                .replace(/&lt;/g, '<')
                .replace(/&amp;/g, '&'); 
 }
+
+function FullArrayCopy(arr)
+{
+  var res = [];
+
+	arr.forEach(function(element) {
+
+    var copyElement = Object.assign(Object.create(element), element);
+    res.push(copyElement);
+	});  
+
+  return res;
+}