Added style dialogs for edges and vertexes

2025-07-03 08:15:38 +00:00 · 2019-07-07 21:15:30 +02:00 · 2019-07-07 21:15:30 +02:00 · 5ba794dc34
commit 5ba794dc34
parent c6df88cf3d
11 changed files with 536 additions and 75 deletions
--- a/i/css/home.css
+++ b/i/css/home.css
@ -240,6 +240,11 @@
    z-index: 10;
 }

+.MarginLeft
+{
+    margin-right: 32px !important;
+}
+
 ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
@ -298,7 +303,6 @@
        max-width:350px;
    }

-
@media only screen and (max-width: 650px) {
    #canvasSection
    {
--- a/lang/en/home.php
+++ b/lang/en/home.php
@ -18,7 +18,7 @@
    $g_lang["orint_edge"] = "Directed";
    $g_lang["not_orint_edge"] = "Undirected";
    $g_lang["show_adjacency_matrix"] = "Adjacency Matrix";
-    $g_lang["save"] = "Save graph";
+    $g_lang["save"] = "Save";
    $g_lang["cancel"] = "Cancel";
    $g_lang["adjacency_matrix_description"] = "Setup adjacency matrix. Use comma \",\" as separator";
    $g_lang["adjacency_matrix_bad_format"] = "Matrix is incorrect. Use comma \",\" as separator. Matrix should be square";
@ -144,4 +144,20 @@
    $g_lang["undo"]             = "Undo";

    $g_lang["opensource_message"] = "Our project is now open source. More details...";
+
+    $g_lang["settings"] = "Settings";
+    $g_lang["common_vertex_settings"]   = "Common vertexes";
+    $g_lang["selected_vertex_settings"] = "Selected vertexes";
+    $g_lang["common_edge_settings"]     = "Common edges";
+    $g_lang["selected_edge_settings"]   = "Selected edges";
+
+    $g_lang["common_color"] = "Common Color";
+    $g_lang["stroke_color"] = "Stroke Color";
+    $g_lang["stroke_size"]  = "Thickness";
+    $g_lang["text_color"]   = "Text Color";
+    $g_lang["save_graph"]   = "Save graph";
+    $g_lang["default"]      = "Default";
+    $g_lang["vertex_draw_style"] = "Vertex Style";
+    $g_lang["text_background"]   = "Text background";
+    $g_lang["edge_draw_style"]   = "Edge Style";
 ?>
--- a/lang/ru/home.php
+++ b/lang/ru/home.php
@ -18,7 +18,7 @@
    $g_lang["orint_edge"] = "Ориентированную";
    $g_lang["not_orint_edge"] = "Неориентированную";
    $g_lang["show_adjacency_matrix"] = "Матрица смежности";
-    $g_lang["save"] = "Сохранить граф";
+    $g_lang["save"] = "Сохранить";
    $g_lang["cancel"] = "Отмена";
    $g_lang["adjacency_matrix_description"] = "Задайте матрицу смежности. Используйте запятую \",\" в качестве разделителя";
    $g_lang["adjacency_matrix_bad_format"] = "Мартрица имеет неправильный формат. Используйте запятую \",\" в качестве разделителя. Матрица должна иметь одинаковое количество столбцов и строк.";
@ -147,4 +147,21 @@
    $g_lang["undo"]             = "Отменить";

    $g_lang["opensource_message"] = "Наш проект стал проектом с открытым исходным кодом. Подробнее...";
+
+    $g_lang["settings"] = "Настройки";
+    $g_lang["common_vertex_settings"]   = "Обычных вершин";
+    $g_lang["selected_vertex_settings"] = "Выделенных вершин";
+    $g_lang["common_edge_settings"]     = "Обычных дуг";
+    $g_lang["selected_edge_settings"]   = "Выделенных дуг";
+
+    $g_lang["common_color"] = "Основой цвет";
+    $g_lang["stroke_color"] = "Цвет обводки";
+    $g_lang["stroke_size"]  = "Толщина обводки";
+    $g_lang["text_color"]   = "Цвет текста";
+    $g_lang["save_graph"]   = "Сохранить граф";
+    $g_lang["default"]      = "По умолчанию";
+    $g_lang["vertex_draw_style"] = "Стиль отрисовки вершины";
+    $g_lang["text_background"]   = "Фон текста";
+    $g_lang["edge_draw_style"]   = "Стиль отрисовки дуги";
+
 ?>
--- a/script/Appilcation.js
+++ b/script/Appilcation.js
@ -27,16 +27,20 @@ function Application(document, window)
    this.undoStack  = [];
    
    this.edgeCommonStyle         = new CommonEdgeStyle();
-    this.edgeSelectedStyles   = DefaultSelectedEdgeStyles;
+    this.isEdgeCommonStyleCustom = false;
+    this.edgeSelectedStyles      = DefaultSelectedEdgeStyles.slice();
+    this.isEdgeSelectedStylesCustom = false;
    
    this.edgePrintCommonStyle      = new CommonPrintEdgeStyle();
-    this.edgePrintSelectedStyles   = DefaultPrintSelectedEdgeStyles;
+    this.edgePrintSelectedStyles   = DefaultPrintSelectedEdgeStyles.slice();
    
    this.vertexCommonStyle          = new CommonVertexStyle();
-    this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles;
+    this.isVertexCommonStyleCustom  = false;
+    this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
+    this.isVertexSelectedVertexStylesCustom  = false;
    
    this.vertexPrintCommonStyle          = new CommonPrintVertexStyle(); 
-    this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles;
+    this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles.slice();
 };

 // List of graph.
@ -634,6 +638,26 @@ Application.prototype.SetHandlerMode = function(mode)
 		var groupRenameVertices = new GroupRenameVertices(this);
 		groupRenameVertices.show();
    }
+    else if (mode == "setupVertexStyle")
+    {
+		var setupVertexStyle = new SetupVertexStyle(this);
+		setupVertexStyle.show(0);
+    }
+    else if (mode == "setupVertexStyleSelected")
+    {
+		var setupVertexStyle = new SetupVertexStyle(this);
+		setupVertexStyle.show(1); 
+    }
+    else if (mode == "setupEdgeStyle")
+    {
+		var setupEdgeStyle = new SetupEdgeStyle(this);
+		setupEdgeStyle.show(0);
+    }
+    else if (mode == "setupEdgeStyleSelected")
+    {
+		var setupEdgeStyle = new SetupEdgeStyle(this);
+		setupEdgeStyle.show(1); 
+    }
    else if (g_AlgorithmIds.indexOf(mode) >= 0)
    {
        this.handler = new AlgorithmGraphHandler(this, g_Algorithms[g_AlgorithmIds.indexOf(mode)](this.graph, this));
@ -870,7 +894,9 @@ Application.prototype.SetIncidenceMatrixSmart = function (matrix)

 Application.prototype.SaveGraphOnDisk = function ()
 {
-	var graphAsString = this.graph.SaveToXML();
+	var graphAsString = this.graph.SaveToXML(this.SaveUserSettings());
+    
+    var styleSave = this.SaveUserSettings();
 	
 	if (this.savedGraphName.length <= 0)
 	{
@ -963,7 +989,13 @@ Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback, f
 Application.prototype.LoadGraphFromString = function (str)
 {
    var graph = new Graph();
-    graph.LoadFromXML(str);
+    
+    //console.log(str);
+    
+    var userSettings = {};
+    graph.LoadFromXML(str, userSettings);
+    if (userSettings.hasOwnProperty("data") && userSettings["data"].length > 0)
+        this.LoadUserSettings(userSettings["data"]);
    this.SetDefaultTransformations();
    this.graph = graph;
    this.AutoAdjustViewport();
@ -1212,7 +1244,7 @@ Application.prototype.PushToStack = function(actionName)
 {
    var object        = {};
    object.actionName = actionName;
-    object.graphSave  = this.graph.SaveToXML();    
+    object.graphSave  = this.graph.SaveToXML("");    
    
    this.undoStack.push(object);
    
@ -1229,7 +1261,8 @@ Application.prototype.Undo = function()
    
    var state  = this.undoStack.pop();
    this.graph = new Graph();
-    this.graph.LoadFromXML(state.graphSave);
+    var empty;
+    this.graph.LoadFromXML(state.graphSave, empty);
    this.redrawGraph();
 }

@ -1242,7 +1275,7 @@ Application.prototype.IsUndoStackEmpty = function()
 {
    return (this.undoStack.length <= 0);
 }
-/*
+
 Application.prototype.SaveUserSettings = function()
 {
    var res = "{";
@ -1250,82 +1283,84 @@ Application.prototype.SaveUserSettings = function()
    var needEnd    = false;
    var checkValue = [];
    
-    checkValue.push({check: !CommonEdgeStyle.prototype.isPrototypeOf(this.edgeCommonStyle),
-                     field: "edgeCommonStyle",
-                     value: this.edgeCommonStyle});
+    checkValue.push({field: "edgeCommonStyle",
+                     value: this.edgeCommonStyle,
+                     check: this.isEdgeCommonStyleCustom});
    
-    checkValue.push({check: this.edgeSelectedStyles != DefaultSelectedEdgeStyles,
-                     field: "edgeSelectedStyles",
-                     value: this.edgeSelectedStyles});
+    checkValue.push({field: "edgeSelectedStyles",
+                     value: this.edgeSelectedStyles,
+                     check: this.isEdgeSelectedStylesCustom});

-    checkValue.push({check: !CommonPrintEdgeStyle.prototype.isPrototypeOf(this.edgePrintCommonStyle),
-                     field: "edgePrintCommonStyle",
-                     value: this.edgePrintCommonStyle});
+    //checkValue.push({field: "edgePrintCommonStyle",
+    //                 value: this.edgePrintCommonStyle});

-    checkValue.push({check: this.edgePrintSelectedStyles != DefaultPrintSelectedEdgeStyles,
-                     field: "edgePrintSelectedStyles",
-                     value: this.edgePrintSelectedStyles});
+    //checkValue.push({field: "edgePrintSelectedStyles",
+    //                 value: this.edgePrintSelectedStyles});
    
-    checkValue.push({check: !CommonVertexStyle.prototype.isPrototypeOf(this.vertexCommonStyle),
-                     field: "vertexCommonStyle",
-                     value: this.vertexCommonStyle});
+    checkValue.push({field: "vertexCommonStyle",
+                     value: this.vertexCommonStyle,
+                     check: this.isVertexCommonStyleCustom});
    
-    checkValue.push({check: this.vertexSelectedVertexStyles != DefaultSelectedGraphStyles,
-                     field: "vertexSelectedVertexStyles",
-                     value: this.vertexSelectedVertexStyles});
+    checkValue.push({field: "vertexSelectedVertexStyles",
+                     value: this.vertexSelectedVertexStyles,
+                     check: this.isVertexSelectedVertexStylesCustom});
    
-    checkValue.push({check: !CommonPrintVertexStyle.prototype.isPrototypeOf(this.vertexPrintCommonStyle),
-                     field: "vertexPrintCommonStyle",
-                     value: this.vertexPrintCommonStyle});
+    //checkValue.push({field: "vertexPrintCommonStyle",
+    //                 value: this.vertexPrintCommonStyle});

-    checkValue.push({check: this.vertexPrintSelectedVertexStyles != DefaultPrintSelectedGraphStyles,
-                     field: "vertexPrintSelectedVertexStyles",
-                     value: this.vertexPrintSelectedVertexStyles});
+    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
+    //                 value: this.vertexPrintSelectedVertexStyles});
    
    checkValue.forEach(function(entry) {
-            if (entry.check)
-            {
+            if (!entry.check)
+                return;
+                
            if (needEnd)
                res = res + ",";
                
-                res = res + entry.field + ":" + JSON.stringify(entry.value);
-            }
+            res = res + "\"" + entry.field + "\"" + ":" + JSON.stringify(entry.value);
+            needEnd = true;
        });
    
    res = res + "}";
    
-    return res;
+    return this.EncodeToHTML(res);
 }

-Application.prototype.LoadUserSettings = function()
+Application.prototype.LoadUserSettings = function(json)
 {
    var checkValue = [];
    
    checkValue.push({field: "edgeCommonStyle",
-                     value: this.edgeCommonStyle});
+                     value: this.edgeCommonStyle,
+                     check: "isEdgeCommonStyleCustom"});
    
    checkValue.push({field: "edgeSelectedStyles",
-                     value: this.edgeSelectedStyles});
+                     value: this.edgeSelectedStyles,
+                     check: "isEdgeSelectedStylesCustom"});

-    checkValue.push({field: "edgePrintCommonStyle",
-                     value: this.edgePrintCommonStyle});
+    //checkValue.push({field: "edgePrintCommonStyle",
+    //                 value: this.edgePrintCommonStyle});

-    checkValue.push({field: "edgePrintSelectedStyles",
-                     value: this.edgePrintSelectedStyles});
+    //checkValue.push({field: "edgePrintSelectedStyles",
+    //                 value: this.edgePrintSelectedStyles});
    
    checkValue.push({field: "vertexCommonStyle",
-                     value: this.vertexCommonStyle});
+                     value: this.vertexCommonStyle,
+                     check: "isVertexCommonStyleCustom"});
    
    checkValue.push({field: "vertexSelectedVertexStyles",
-                     value: this.vertexSelectedVertexStyles});
+                     value: this.vertexSelectedVertexStyles,
+                     check: "isVertexSelectedVertexStylesCustom"});
    
-    checkValue.push({field: "vertexPrintCommonStyle",
-                     value: this.vertexPrintCommonStyle});
+    //checkValue.push({field: "vertexPrintCommonStyle",
+    //                 value: this.vertexPrintCommonStyle});

-    checkValue.push({field: "vertexPrintSelectedVertexStyles",
-                     value: this.vertexPrintSelectedVertexStyles});
+    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
+    //                 value: this.vertexPrintSelectedVertexStyles});
    
-    var parsedSave = JSON.parse(json);
+    var decoderStr = this.DecodeFromHTML(json);
+    var parsedSave = JSON.parse(decoderStr);
    
    var app = this;
    
@ -1334,7 +1369,82 @@ Application.prototype.LoadUserSettings = function()
            {
                for(var k in parsedSave[entry.field]) 
                    entry.value[k] = parsedSave[entry.field][k];
+                
+                app[entry.check] = true;
            }
        });
 }
-*/
+
+Application.prototype.EncodeToHTML = function (str)
+{
+    return str.replace(/&/g, '&amp;')
+               .replace(/</g, '&lt;')
+               .replace(/>/g, '&gt;')
+               .replace(/"/g, '&quot;')
+               .replace(/'/g, '&apos;');
+}
+
+Application.prototype.DecodeFromHTML = function (str)
+{
+   return str.replace(/&apos;/g, "'")
+               .replace(/&quot;/g, '"')
+               .replace(/&gt;/g, '>')
+               .replace(/&lt;/g, '<')
+               .replace(/&amp;/g, '&'); 
+}
+
+Application.prototype.SetVertexStyle = function (index, style)
+{
+    if (index == 0)
+    {
+        this.vertexCommonStyle = style;
+        this.isVertexCommonStyleCustom = true;
+    }
+    else
+    {
+        this.vertexSelectedVertexStyles[index - 1] = style;
+        this.isVertexSelectedVertexStylesCustom = true;
+    }
+}
+
+Application.prototype.ResetVertexStyle = function (index)
+{
+    if (index == 0)
+    {
+        this.vertexCommonStyle = new CommonVertexStyle();
+        this.isVertexCommonStyleCustom = false;
+    }
+    else
+    {
+        this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles.slice();
+        this.isVertexSelectedVertexStylesCustom = false;
+    }
+}
+
+Application.prototype.SetEdgeStyle = function (index, style)
+{
+    if (index == 0)
+    {
+        this.edgeCommonStyle = style;
+        this.isEdgeCommonStyleCustom = true;
+    }
+    else
+    {
+        this.edgeSelectedStyles[index - 1] = style;
+        this.isEdgeSelectedStylesCustom = true;
+    }
+}
+
+Application.prototype.ResetEdgeStyle = function (index)
+{
+    if (index == 0)
+    {
+        this.edgeCommonStyle = new CommonEdgeStyle();
+        this.isEdgeCommonStyleCustom = false;
+    }
+    else
+    {
+        this.edgeSelectedStyles = DefaultSelectedEdgeStyles.slice();
+        this.isEdgeSelectedStylesCustom = false;
+    }
+}
--- a/script/BaseEdgeDrawer.js
+++ b/script/BaseEdgeDrawer.js
@ -16,13 +16,11 @@ function CommonEdgeStyle()

 function CommonPrintEdgeStyle()
 {
+	CommonEdgeStyle.apply(this, arguments);
+    
 	this.strokeStyle = '#000000';
 	this.weightText  = '#000000';
 	this.fillStyle   = '#FFFFFF';
- 	this.textPadding = 4;
-	this.textStrockeWidth = 2;
- 	this.sizeOfLoop = 24;
-	this.loopShiftAngel = Math.PI / 6;
 }

 function SelectedEdgeStyle0()
--- a/script/BaseVertexDrawer.js
+++ b/script/BaseVertexDrawer.js
@ -5,7 +5,7 @@
 // Common style of Graphs.
 function CommonVertexStyle()
 {
-  this.lineWidth   = 1;
+  this.lineWidth   = 2;
  this.strokeStyle = '#c7b7c7';
  this.fillStyle   = '#68aeba';
  this.mainTextColor = '#f0d543';
@ -13,7 +13,9 @@ function CommonVertexStyle()

 function CommonPrintVertexStyle()
 {
-  this.lineWidth   = 1;
+  CommonVertexStyle.apply(this, arguments);
+    
+  this.lineWidth   = 2;
  this.strokeStyle = '#000000';
  this.fillStyle   = '#FFFFFF';
  this.mainTextColor = '#000000';
@ -179,7 +181,6 @@ BaseVertexDrawer.prototype.SetupStyle = function(style)

 BaseVertexDrawer.prototype.DrawShape = function(baseGraph)
 {
-  this.context.lineWidth    = 2;
  this.context.beginPath();
  this.context.arc(baseGraph.position.x, baseGraph.position.y, baseGraph.model.diameter / 2.0, 0, 2 * Math.PI);
  this.context.closePath();
--- a/script/EventHandlers.js
+++ b/script/EventHandlers.js
@ -1100,3 +1100,200 @@ GroupRenameVertices.prototype.show = function()
 		dialogClass: 'EdgeDialog'
 	});
 }
+
+
+/**
+ * Setup Vertex Style rename vertices.
+ *
+ */
+function SetupVertexStyle(app)
+{
+  BaseHandler.apply(this, arguments);
+  this.message = "";	
+}
+
+// inheritance.
+SetupVertexStyle.prototype = Object.create(BaseHandler.prototype);
+
+SetupVertexStyle.prototype.show = function(index)
+{
+	var handler = this;
+	var dialogButtons = {};
+    var graph = this.app.graph;
+    var app   = this.app;
+    var style = Object.assign({}, (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 redrawVertex = function()
+    {
+        style.fillStyle     = $( "#vertexFillColor" ).val();
+        style.strokeStyle   = $( "#vertexStrokeColor" ).val();
+        style.mainTextColor = $( "#vertexTextColor" ).val();
+        style.lineWidth     = $( "#vertexStrokeSize" ).val();
+        
+        var canvas  = document.getElementById( "VertexPreview" );
+        var context = canvas.getContext('2d');    
+        
+        context.save();
+
+        context.fillStyle = "#FFFFFF";
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        
+        var graphDrawer = new BaseVertexDrawer(context);
+        var baseVertex  = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
+        baseVertex.mainText = "1";
+        baseVertex.upText   = "Up Text";
+        
+        graphDrawer.Draw(baseVertex, style);
+        
+        context.restore();
+    }
+    
+    //var dialogButtons = [];
+    
+	dialogButtons[g_default] = 
+           {
+               text    : g_default,
+               class   : "MarginLeft",
+               click   : function() {
+                    app.ResetVertexStyle(index);
+                    app.redrawGraph();
+                    $( this ).dialog( "close" );
+               }
+           };
+    
+	dialogButtons[g_save] = function() {
+                app.SetVertexStyle(index, style);    
+                app.redrawGraph();
+				$( this ).dialog( "close" );					
+			};
+	dialogButtons[g_cancel] = function() {
+				$( this ).dialog( "close" );						
+			};
+    
+    fillFields();
+        
+	$( "#SetupVertexStyleDialog" ).dialog({
+		resizable: false,
+        height: "auto",
+        width:  "auto",
+		modal: true,
+		title: g_vertexDraw,
+		buttons: dialogButtons,
+		dialogClass: 'EdgeDialog'
+	});
+    
+    redrawVertex();
+
+    $( "#vertexFillColor" ).unbind();
+    $( "#vertexStrokeColor" ).unbind();
+    $( "#vertexTextColor" ).unbind();
+    $( "#vertexStrokeSize" ).unbind();
+    
+    $( "#vertexFillColor" ).change(redrawVertex);
+    $( "#vertexStrokeColor" ).change(redrawVertex);
+    $( "#vertexTextColor" ).change(redrawVertex);
+    $( "#vertexStrokeSize" ).change(redrawVertex);
+}
+
+/**
+ * Setup Vertex Style rename vertices.
+ *
+ */
+function SetupEdgeStyle(app)
+{
+  BaseHandler.apply(this, arguments);
+  this.message = "";	
+}
+
+// inheritance.
+SetupEdgeStyle.prototype = Object.create(BaseHandler.prototype);
+
+SetupEdgeStyle.prototype.show = function(index)
+{
+	var handler = this;
+	var dialogButtons = {};
+    var graph = this.app.graph;
+    var app   = this.app;
+    var style = Object.assign({}, (index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[index - 1]));
+    
+    var fillFields = function()
+    {
+        $( "#edgeFillColor" ).val(style.fillStyle);
+        $( "#edgeStrokeColor" ).val(style.strokeStyle);
+        $( "#edgeTextColor" ).val(style.weightText);
+    }
+    
+    var redrawVertex = function()
+    {
+        style.fillStyle     = $( "#edgeFillColor" ).val();
+        style.strokeStyle   = $( "#edgeStrokeColor" ).val();
+        style.weightText    = $( "#edgeTextColor" ).val();
+        
+        var canvas  = document.getElementById( "EdgePreview" );
+        var context = canvas.getContext('2d');    
+        
+        context.save();
+
+        context.fillStyle = "#FFFFFF";
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        
+        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));
+        var baseEdge     = new BaseEdge(baseVertex1, baseVertex2, true, 10);
+        
+        graphDrawer.Draw(baseEdge, style);
+        
+        context.restore();
+    }
+    
+	dialogButtons[g_default] = 
+           {
+               text    : g_default,
+               class   : "MarginLeft",
+               click   : function() {
+                    app.ResetEdgeStyle(index);
+                    app.redrawGraph();
+                    $( this ).dialog( "close" );
+               }
+           };
+    
+	dialogButtons[g_save] = function() {
+                app.SetEdgeStyle(index, style);    
+                app.redrawGraph();
+				$( this ).dialog( "close" );					
+			};
+	dialogButtons[g_cancel] = function() {
+				$( this ).dialog( "close" );						
+			};
+    
+    fillFields();
+        
+	$( "#SetupEdgeStyleDialog" ).dialog({
+		resizable: false,
+        height: "auto",
+        width:  "auto",
+		modal: true,
+		title: g_edgeDraw,
+		buttons: dialogButtons,
+		dialogClass: 'EdgeDialog'
+	});
+    
+    redrawVertex();
+
+    $( "#edgeFillColor" ).unbind();
+    $( "#edgeStrokeColor" ).unbind();
+    $( "#edgeTextColor" ).unbind();
+    
+    $( "#edgeFillColor" ).change(redrawVertex);
+    $( "#edgeStrokeColor" ).change(redrawVertex);
+    $( "#edgeTextColor" ).change(redrawVertex);
+}
--- a/script/Graph.js
+++ b/script/Graph.js
@ -763,7 +763,7 @@ Graph.prototype.SplitMatrixString = function (line, separator)
 }


-Graph.prototype.SaveToXML = function ()
+Graph.prototype.SaveToXML = function (additionalData)
 {
 	var mainHeader = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><graphml>";
 	var header   = "<graph id=\"Graph\" uidGraph=\"" + this.uidGraph + "\"" + " uidEdge=\"" + this.uidEdge + "\">";
@ -784,10 +784,16 @@ Graph.prototype.SaveToXML = function ()

 	xmlBoby = xmlBoby + "</edges>";
    
-	return mainHeader + header + xmlBoby + "</graph></graphml>";
+    additionalField = "";
+    if (additionalData.length > 0)
+    {
+        additionalField = "<additional data=\"" + additionalData + "\"/>"
+    }
+
+	return mainHeader + header + xmlBoby + "</graph>" + additionalField + "</graphml>";
 }

-Graph.prototype.LoadFromXML = function (xmlText)
+Graph.prototype.LoadFromXML = function (xmlText, additionalData)
 {
 	xmlDoc = $.parseXML( xmlText );
 	var $xml = $( xmlDoc );
@ -833,6 +839,12 @@ Graph.prototype.LoadFromXML = function (xmlText)
 	});

 	this.edges = edges;
+    
+    $additional = $xml.find( "additional" );
+    if ($additional.length != 0 && additionalData != null)
+    {
+        additionalData["data"] = $additional.attr('data');
+    }
 }

 Graph.prototype.hasDirectEdge = function ()
--- a/script/main.js
+++ b/script/main.js
@ -412,6 +412,26 @@ function postLoadPage()
        application.SetHandlerMode("default");
        document.getElementById('Default').className = "btn btn-primary btn-sm";
    }
+    document.getElementById('SetupVertexStyle').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("setupVertexStyle");
+    }
+    document.getElementById('SetupVertexStyleSelected').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("setupVertexStyleSelected");
+    }
+    document.getElementById('SetupEdgeStyle').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("setupEdgeStyle");
+    }
+    document.getElementById('SetupEdgeStyleSelected').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("setupEdgeStyleSelected");
+    }
    
    document.getElementById('runUserScript').onclick = function ()
    {
@ -471,7 +491,7 @@ function postLoadPage()
    {
        userAction(this.id);
        
-        var graphAsString  = application.graph.SaveToXML();
+        var graphAsString  = application.graph.SaveToXML("");
        var savedGraphName = application.GetNewGraphName();
        
        var element = document.createElement('a');
--- a/script/texts.js
+++ b/script/texts.js
@ -23,6 +23,7 @@ var g_notOrintEdge = "not Orient";
 var g_adjacencyMatrixText = "Adjacency Matrix";
 var g_save   = "Save";
 var g_cancel = "Cancel";
+var g_save_graph = "Save Graph";

 var g_shortestDistance = "lowest-distance is ";
 var g_incidenceMatrixText = "Incidence Matrix";
@ -98,6 +99,9 @@ var g_traversalOrder = "Traversal order: ";
 var g_curveEdge      = "Curved edge";

 var g_Undo           = "Undo";
+var g_default        = "default";
+var g_vertexDraw     = "Vertex draw style";
+var g_edgeDraw       = "Edge draw style";

 function loadTexts()
 {
@ -197,4 +201,8 @@ function loadTexts()
    g_curveEdge = document.getElementById("curveEdge").innerHTML;
    
    g_Undo       = document.getElementById("undoTranslate").innerHTML;
+    g_save_graph = document.getElementById("saveGraph").innerHTML;
+    g_default    = document.getElementById("default").innerHTML;
+    g_vertexDraw = document.getElementById("vertexDrawStyle").innerHTML;
+    g_edgeDraw   = document.getElementById("edgeDrawStyle").innerHTML;
 }
--- a/tpl/home.php
+++ b/tpl/home.php
@ -118,6 +118,20 @@

        <button type="button" class="btn btn-default btn-sm" id="DeleteObject"><span class="glyphicon glyphicon-remove fa-fw"></span><span class="hidden-phone"> <?= L('delete')?> <sub style="color:#AAAAAA">r</sub></span></button>
            
+            
+        <div class="btn-group hidden-phone" role="group">
+            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="openSettings">
+            <span class="glyphicon glyphicon-cog fa-fw "></span><span> <?= L('settings')?> </span><span class="caret"></span>
+            </button>
+          <ul class="dropdown-menu dropdown-menu-right" role="menu" id="Settings">
+                 <li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupVertexStyle"><?= L('common_vertex_settings')?></button> </li>
+                 <li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupVertexStyleSelected"><?= L('selected_vertex_settings')?></button> </li>
+                 <li class="divider"></li>
+                 <li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupEdgeStyle"><?= L('common_edge_settings')?></button> </li>
+                 <li> <button type="button" class="btn btn-default btn-sm btn-submenu" id="SetupEdgeStyleSelected"><?= L('selected_edge_settings')?></button> </li>
+          </ul>
+        </div>
+
 <!--
        <? if (!$wasVote && count($voteTopics) > 0): ?>
        <button type="button" class="btn btn-success" id="VoteButton"><span class="glyphicon glyphicon-thumbs-up"></span> <?= L('vote') ?></button>
@ -354,6 +368,66 @@
 		</form>
    </div>
        
+    <div id="SetupVertexStyleDialog">
+        <form>
+		<fieldset>
+          <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">
+            </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">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="vertexStrokeSize" class="col-sm-5 col-form-label"><?= L('stroke_size') ?></label>
+            <div class="col-sm-5">
+              <input type="number" class="form-control" id="vertexStrokeSize" placeholder="10">
+            </div>
+          </div>
+          <div class="form-group row">
+            <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">
+            </div>
+          </div>
+        </fieldset>
+        </form>
+        
+        <canvas id="VertexPreview" width="300" height="150"></canvas>
+    </div>
+        
+    <div id="SetupEdgeStyleDialog">
+        <form>
+		<fieldset>
+          <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">
+            </div>
+          </div>
+          <div class="form-group row">
+            <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">
+            </div>
+          </div>
+          <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">
+            </div>
+          </div>
+        </fieldset>
+        </form>
+        
+        <canvas id="EdgePreview" width="300" height="150"></canvas>
+    </div>
+	
    <p id="SelectAndMoveObject" class="translation"><?= L('select_and_move_objects')?></p>
    <p id="MoveCursorForMoving" class="translation"><?= L('move_cursor_for_moving')?></p>

@ -448,6 +522,10 @@

    <p id="curveEdge" class="translation"><?= L('curve_edge')?></p>
    <p id="undoTranslate" class="translation"><?= L('undo')?></p>
+    <p id="saveGraph" class="translation"><?= L('save_graph')?></p>
+    <p id="default" class="translation"><?= L('default')?></p>
+    <p id="vertexDrawStyle" class="translation"><?= L('vertex_draw_style')?></p>
+    <p id="edgeDrawStyle" class="translation"><?= L('edge_draw_style')?></p>

 </section>
 <!--