Refactor styles inherent.

2025-07-03 00:06:40 +00:00 · 2021-04-13 14:50:01 +02:00 · 2021-04-13 14:50:01 +02:00 · 4a7b1a534c
commit 4a7b1a534c
parent 1fb79b3418
5 changed files with 288 additions and 76 deletions
--- a/script/Appilcation.js
+++ b/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;
+}
--- a/script/BaseEdgeDrawer.js
+++ b/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()];
--- a/script/BaseVertexDrawer.js
+++ b/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()];
--- a/script/EventHandlers.js
+++ b/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);
-        $( "#vertexStrokeColor" ).val(style.strokeStyle);
-        $( "#vertexTextColor" ).val(style.mainTextColor);
-        $( "#vertexStrokeSize" ).val(style.lineWidth);
+        var fullStyle = style.GetStyle({});
+
+        $( "#vertexFillColor" ).val(fullStyle.fillStyle);
+        $( "#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);
-        $( "#edgeStrokeColor" ).val(style.strokeStyle);
-        $( "#edgeTextColor" ).val(style.weightText);
+        var fullStyle = style.GetStyle({});
+
+        $( "#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();
    }
--- a/script/utils.js
+++ b/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;
+}