Added style dialogs for edges and vertexes

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
     {

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";
 ?>

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"]   = "Стиль отрисовки дуги";
+
 ?>

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),
+    checkValue.push({field: "edgeCommonStyle",
-                     field: "edgeCommonStyle",
+                     value: this.edgeCommonStyle,
-                     value: this.edgeCommonStyle});
+                     check: this.isEdgeCommonStyleCustom});
     
-    checkValue.push({check: this.edgeSelectedStyles != DefaultSelectedEdgeStyles,
+    checkValue.push({field: "edgeSelectedStyles",
-                     field: "edgeSelectedStyles",
+                     value: this.edgeSelectedStyles,
-                     value: this.edgeSelectedStyles});
+                     check: this.isEdgeSelectedStylesCustom});
 
-    checkValue.push({check: !CommonPrintEdgeStyle.prototype.isPrototypeOf(this.edgePrintCommonStyle),
+    //checkValue.push({field: "edgePrintCommonStyle",
-                     field: "edgePrintCommonStyle",
+    //                 value: this.edgePrintCommonStyle});
-                     value: this.edgePrintCommonStyle});
 
-    checkValue.push({check: this.edgePrintSelectedStyles != DefaultPrintSelectedEdgeStyles,
+    //checkValue.push({field: "edgePrintSelectedStyles",
-                     field: "edgePrintSelectedStyles",
+    //                 value: this.edgePrintSelectedStyles});
-                     value: this.edgePrintSelectedStyles});
     
-    checkValue.push({check: !CommonVertexStyle.prototype.isPrototypeOf(this.vertexCommonStyle),
+    checkValue.push({field: "vertexCommonStyle",
-                     field: "vertexCommonStyle",
+                     value: this.vertexCommonStyle,
-                     value: this.vertexCommonStyle});
+                     check: this.isVertexCommonStyleCustom});
     
-    checkValue.push({check: this.vertexSelectedVertexStyles != DefaultSelectedGraphStyles,
+    checkValue.push({field: "vertexSelectedVertexStyles",
-                     field: "vertexSelectedVertexStyles",
+                     value: this.vertexSelectedVertexStyles,
-                     value: this.vertexSelectedVertexStyles});
+                     check: this.isVertexSelectedVertexStylesCustom});
     
-    checkValue.push({check: !CommonPrintVertexStyle.prototype.isPrototypeOf(this.vertexPrintCommonStyle),
+    //checkValue.push({field: "vertexPrintCommonStyle",
-                     field: "vertexPrintCommonStyle",
+    //                 value: this.vertexPrintCommonStyle});
-                     value: this.vertexPrintCommonStyle});
 
-    checkValue.push({check: this.vertexPrintSelectedVertexStyles != DefaultPrintSelectedGraphStyles,
+    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
-                     field: "vertexPrintSelectedVertexStyles",
+    //                 value: this.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",
+    //checkValue.push({field: "edgePrintCommonStyle",
-                     value: this.edgePrintCommonStyle});
+    //                 value: this.edgePrintCommonStyle});
 
-    checkValue.push({field: "edgePrintSelectedStyles",
+    //checkValue.push({field: "edgePrintSelectedStyles",
-                     value: this.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",
+    //checkValue.push({field: "vertexPrintCommonStyle",
-                     value: this.vertexPrintCommonStyle});
+    //                 value: this.vertexPrintCommonStyle});
 
-    checkValue.push({field: "vertexPrintSelectedVertexStyles",
+    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
-                     value: this.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;
+    }
+}

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()

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();

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);
+}

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 ()

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');

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;
 }

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>
 <!--