Add dialog to select original graph or autosaved graph.

Refactor graph styles holding objects.
Small style fixes.

core/config/main.php

@@ -93,5 +93,5 @@
     $g_config['vote']                   = "./tmp/vote/vote.txt";
     $g_config['voteTopics']             = "./tmp/vote/voteTopics.txt_";
     $g_config['use_js_cache']           = true;
-    $g_config['engine_version']         = 90;
+    $g_config['engine_version']         = 91;
 ?>

i/css/home.css

@@ -462,4 +462,8 @@ label.switcherText {
     border-radius: 4px;
     padding: 4px;
     background-color: #FFFFFF;
+}
+
+#autoSaveOrOriginalGraph .btn-xs{
+    font-size: 12px;
 }

lang/bg/home.php

@@ -307,4 +307,10 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/ch/home.php

@@ -309,4 +309,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/cs/home.php

@@ -313,4 +313,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/de/home.php

@@ -271,4 +271,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
     
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/el/home.php

@@ -310,4 +310,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/en/home.php

@@ -315,4 +315,10 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/es/home.php

@@ -314,4 +314,10 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
     
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/fr/home.php

@@ -281,4 +281,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/nl/home.php

@@ -278,4 +278,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/pl/home.php

@@ -314,4 +314,10 @@ Dodaliśmy polskie tłumaczenie, Patryk</a>";
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/pt/home.php

@@ -279,4 +279,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

lang/ru/home.php

@@ -317,4 +317,10 @@
     $g_lang['wrong_image_background_size'] = "Размер изобажения слишком большой. Размер изображения должен быть меньше {0} пикселей.";    
 
     $g_lang['text_size'] = "Размер текста";
+
+    $g_lang['you_have_autosave'] = "Найдено автосохранение для этого графа.";
+    $g_lang['load_oiginal_or_autosaved'] = "Вы хотите загрузить оригинальный граф или автосохранение?";
+    $g_lang['use_mouse_for_moving'] = "Используйте🖱️для перемещения";
+    $g_lang['original_graph'] = "Оригинальный граф";
+    $g_lang['autosaved_graph'] = "Автосохранение графа";
 ?>

lang/sv/home.php

@@ -275,4 +275,10 @@
     $g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
 
     $g_lang['text_size'] = "Text size";
+
+    $g_lang['you_have_autosave'] = "You have autosave for this graph.";
+    $g_lang['load_oiginal_or_autosaved'] = "Would you like to load original graph or autosaved graph?";
+    $g_lang['use_mouse_for_moving'] = "Use🖱️for moving";
+    $g_lang['original_graph'] = "Original graph";
+    $g_lang['autosaved_graph'] = "Autosaved graph";
 ?>

script/entities/edge/model/EdgeModel.js

@@ -40,7 +40,7 @@ EdgeModel.prototype.LoadFromXML = function (xml, graph)
 	this.width = xml.attr('model_width') == null ? this.width : parseFloat(xml.attr("model_width"));
 	this.type  = xml.attr('model_type')  == null ? this.type  : xml.attr("model_type");
 	this.curveValue  = xml.attr('model_curveValue')  == null ? this.curveValue : parseFloat(xml.attr("model_curveValue"));
-    this.default = xml.attr('model_default') == null ? this.default : parseFloat(xml.attr("model_default"));
+    this.default = xml.attr('model_default') == null ? this.default : xml.attr("model_default") == "true";
 }
 
 EdgeModel.prototype.GetCurvePoint = function(position1, position2, t)

script/features/default_handler/index.js

@@ -88,9 +88,9 @@ DefaultHandler.prototype.MouseMove = function(pos)
           }
           else
           {
-                // Move work space
-                this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
-                this.needRedraw = true;
+            // Move work space
+            this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
+            this.needRedraw = true;
           }
         }
 }

script/features/delete_objects_handler/index.js

@@ -45,8 +45,7 @@ DeleteAllHandler.prototype.clear = function()
 {	
     this.app.PushToStack("DeleteAll");
 
-	// Selected Graph.
-    this.app.graph = new Graph(); 
-    this.app.savedGraphName = "";
+	  // Selected Graph.
+    this.app.CreateNewGraphObject();
     this.needRedraw = true;
 }

script/features/draw_graph/api/index.js

@@ -7,7 +7,8 @@ doInclude ([
     include ("model/BaseEdgeDrawer.js", modulDir),
     include ("model/VertexShape.js", modulDir),
     include ("model/VertexStyle.js", modulDir),
-    include ("model/BaseVertexDrawer.js", modulDir)
+    include ("model/BaseVertexDrawer.js", modulDir),
+    include ("model/GraphFullStyle.js", modulDir)
 ])
 
 }

script/features/draw_graph/model/GraphFullStyle.js

@@ -0,0 +1,194 @@
+/**
+ * Graph full style.
+ */
+
+function GraphFullStyle(redrawCallback)
+{
+    this.edgeCommonStyle         = new CommonEdgeStyle();
+    this.isEdgeCommonStyleCustom = false;
+    this.edgeSelectedStyles      = FullArrayCopy(DefaultSelectedEdgeStyles);
+    this.isEdgeSelectedStylesCustom = false;
+
+    this.vertexCommonStyle          = new CommonVertexStyle();
+    this.isVertexCommonStyleCustom  = false;
+    this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
+    this.isVertexSelectedVertexStylesCustom  = false;
+
+    this.backgroundCommonStyle = new CommonBackgroundStyle();
+    this.isBackgroundCommonStyleCustom  = false;
+
+    this.defaultVertexSize = null;
+    this.defaultEdgeWidth = null;
+    this.redrawCallback = redrawCallback;
+}
+
+GraphFullStyle.prototype.Save = function()
+{
+    var res = "";
+    
+    var needEnd    = false;
+    var checkValue = [];
+    
+    checkValue.push({field: "edgeCommonStyle",
+                     value: this.edgeCommonStyle,
+                     check: this.isEdgeCommonStyleCustom});
+    
+    checkValue.push({field: "edgeSelectedStyles",
+                     value: this.edgeSelectedStyles,
+                     check: this.isEdgeSelectedStylesCustom});
+    
+    checkValue.push({field: "vertexCommonStyle",
+                     value: this.vertexCommonStyle,
+                     check: this.isVertexCommonStyleCustom});
+    
+    checkValue.push({field: "vertexSelectedVertexStyles",
+                     value: this.vertexSelectedVertexStyles,
+                     check: this.isVertexSelectedVertexStylesCustom});
+    
+    checkValue.push({field: "backgroundCommonStyle",
+                     value: this.backgroundCommonStyle,
+                     check: this.isBackgroundCommonStyleCustom});
+
+    checkValue.push({field: "defaultVertexSize",
+                      value: this.defaultVertexSize,
+                      check: this.defaultVertexSize != null}); 
+
+    checkValue.push({field: "defaultEdgeWidth",
+                      value: this.defaultEdgeWidth,
+                      check: this.defaultEdgeWidth != null});
+    
+    checkValue.forEach(function(entry) {
+            if (!entry.check)
+                return;
+                
+            if (needEnd)
+                res = res + ",";
+
+            let valueJson = "";
+            if (typeof entry.value.saveToJson === "function") {
+                valueJson = entry.value.saveToJson();
+            } else {
+                valueJson = JSON.stringify(entry.value);
+            }
+                
+                
+            res = res + "\"" + entry.field + "\"" + ":" + valueJson;
+            needEnd = true;
+        });
+    
+    res = res + "";
+    
+    return gEncodeToHTML(res);
+}
+
+GraphFullStyle.prototype.Load = function(json)
+{
+    var checkValue = [];
+    
+    checkValue.push({field: "edgeCommonStyle",
+                     value: this.edgeCommonStyle,
+                     check: "isEdgeCommonStyleCustom",
+                     deep: false});
+    
+    checkValue.push({field: "edgeSelectedStyles",
+                     value: this.edgeSelectedStyles,
+                     check: "isEdgeSelectedStylesCustom",
+                     deep: true});
+    
+    checkValue.push({field: "vertexCommonStyle",
+                     value: this.vertexCommonStyle,
+                     check: "isVertexCommonStyleCustom",
+                     deep: false});
+    
+    checkValue.push({field: "vertexSelectedVertexStyles",
+                     value: this.vertexSelectedVertexStyles,
+                     check: "isVertexSelectedVertexStylesCustom",
+                     deep: true});
+
+    checkValue.push({field: "defaultVertexSize",
+                    value: "defaultVertexSize",
+                    check: null,
+                    deep: false});
+
+    checkValue.push({field: "defaultEdgeWidth",
+                    value: "defaultEdgeWidth",
+                    check: null,
+                    deep: false});
+    
+    checkValue.push({field: "backgroundCommonStyle",
+                     value: this.backgroundCommonStyle,
+                     check: "isBackgroundCommonStyleCustom",
+                     deep: false});
+    
+    var decoderStr = gDecodeFromHTML(json);
+    var parsedSave = JSON.parse(decoderStr);
+    
+    var app = this;
+    
+    checkValue.forEach(function(entry) {
+            if (parsedSave.hasOwnProperty(entry.field))
+            {
+                if (typeof parsedSave[entry.field] === 'number')
+                {
+                    app[entry.value] = parseInt(parsedSave[entry.field]);
+                }
+                else
+                {
+                    if (typeof entry.value.loadFromJson === "function") {
+                        entry.value.loadFromJson(parsedSave[entry.field], function () {
+                                setTimeout( 
+                                    function() 
+                                    { 
+                                        if (app.redrawCallback != null)
+                                        {
+                                            app.redrawCallback();
+                                        } 
+                                    }, 1000);
+                            });
+                        if (entry.check != null)
+                            app[entry.check] = true;
+                        return;
+                    }
+
+                    if (!entry.deep)
+                        entry.value.Clear();
+
+                    //console.log(parsedSave[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
+                        {
+                            // Check is number or not
+                            if (k % 1 != 0)
+                            {
+                                continue;
+                            }
+
+                            // Old saves contains more styles. Just skip it.
+                            if (entry.value[k] == undefined)
+                            {
+                                continue;
+                            }
+
+                            entry.value[k].Clear();
+                            for(var deepK in parsedSave[entry.field][k])
+                            {
+                                if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
+                                    entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
+                            }
+                        }
+                    }
+                }
+                
+                if (entry.check != null)
+                    app[entry.check] = true;
+            }
+        });
+}

script/features/graph_preview/index.js

@@ -0,0 +1,274 @@
+/**
+ * Preview element for graph
+ *
+ */
+function GraphPreview(graph, style, canvas, positionUpdateCallback)
+{
+    this.graph = graph;
+    this.style = style;
+    this.canvas = canvas;
+    this.canvasScale = 1.0;
+    this.canvasPosition = new Point(0, 0);
+    this.prevMousePos = null;
+    this.positionUpdateCallback = positionUpdateCallback;
+    this.AutoAdjustViewport();
+
+    let canvasParent = canvas.parentNode;
+    let zoomPlusArray = canvasParent.getElementsByClassName("zoom-plus");
+    let preview = this;
+    let one_scale = 1.2;
+    let zoomFunc = function(real_scale)
+    {
+        let oldRealW = preview.getRealWidth();
+        let oldRealH = preview.getRealHeight();
+        preview.canvasScale = preview.canvasScale * real_scale;
+        let realW = preview.getRealWidth();
+        let realH = preview.getRealHeight();
+        preview.canvasPosition = preview.canvasPosition.add(new Point((- oldRealW + realW) / 2, (- oldRealH + realH) / 2));
+        preview.redraw();
+        preview.callPositionUpdateCallback();
+    };
+
+    if (zoomPlusArray.length > 0)
+    {
+        this.zoomPlusButton = zoomPlusArray[0];
+        this.zoomPlusButton.onclick = function()
+        {
+            zoomFunc(one_scale);
+        };
+    }
+    let zoomMinusArray = canvasParent.getElementsByClassName("zoom-minus");
+    if (zoomMinusArray.length > 0)
+    {
+        this.zoomMinusButton = zoomMinusArray[0];
+        this.zoomMinusButton.onclick = function()
+        {
+            zoomFunc(1.0 / one_scale);
+        };
+    }
+
+    this.canvas.onmousemove = function (e)
+    {
+        return preview.CanvasOnMouseMove(e);
+    }
+
+    this.canvas.onmousedown = function (e)
+    {
+        return preview.CanvasOnMouseDown(e);
+    }
+
+    this.canvas.onmouseup   = function (e)
+    {
+        return preview.CanvasOnMouseUp(e);
+    }
+
+    this.canvas.onwheel = function (e)
+    {
+        var e = window.event || e; // old IE support
+        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
+        if (delta > 0)
+        {
+            zoomFunc(one_scale);
+        }
+        else
+        {
+            zoomFunc(1.0 / one_scale);
+        }
+    }
+
+    this.canvas.removeEventListener("touchstart", touchHandler, true);
+    this.canvas.removeEventListener("touchmove", touchHandler, true);
+    this.canvas.removeEventListener("touchend", touchHandler, true);
+    this.canvas.removeEventListener("touchcancel", touchHandler, true);
+
+    this.canvas.addEventListener("touchstart", touchHandler, true);
+    this.canvas.addEventListener("touchmove", touchHandler, true);
+    this.canvas.addEventListener("touchend", touchHandler, true);
+    this.canvas.addEventListener("touchcancel", touchHandler, true);
+
+    this.redraw();
+    // Redraw one, because graph may have background.
+    setTimeout( 
+        function() 
+        { 
+            this.redraw(); 
+        }.bind(this),
+        1000);
+}
+
+GraphPreview.prototype.redraw = function()
+{
+    const ctx = this.canvas.getContext("2d");
+
+    ctx.save();
+    
+    ctx.scale(this.canvasScale, this.canvasScale);
+    ctx.translate(this.canvasPosition.x, this.canvasPosition.y);
+
+    this.redrawGraph(ctx, this.canvasPosition);
+
+    ctx.restore();
+}
+
+GraphPreview.prototype.getRealWidth = function ()
+{
+    return this.canvas.width / this.canvasScale;
+}
+            
+GraphPreview.prototype.getRealHeight = function ()
+{
+    return this.canvas.height / this.canvasScale;
+}
+
+GraphPreview.prototype.redrawGraph = function(context, backgroundPosition)
+{
+    var backgroundDrawer = new BaseBackgroundDrawer(context);
+    
+    backgroundDrawer.Draw(
+        this.style.backgroundCommonStyle, 
+        Math.max(this.canvas.width, this.getRealWidth()), 
+        Math.max(this.canvas.height, this.getRealHeight()), 
+        backgroundPosition, 
+        this.canvasScale);
+
+    // Update edge styles
+    for (i = 0; i < this.graph.edges.length; i ++)
+    {
+        let edge = this.graph.edges[i];
+        var currentStyle = null;
+        if (edge.hasOwnStyleFor(0))
+            currentStyle = edge.getStyleFor(0);
+        else
+            currentStyle = this.style.edgeCommonStyle;
+    
+        edge.currentStyle = currentStyle;
+    }
+
+    // Upadte current vertexs styles
+    for (i = 0; i < this.graph.vertices.length; i ++)
+    {
+        var currentStyle = null;
+        let vetrex = this.graph.vertices[i];
+        if (vetrex.hasOwnStyleFor(0))
+            currentStyle = vetrex.getStyleFor(0);
+        else
+            currentStyle = this.style.vertexCommonStyle;
+
+        this.graph.vertices[i].currentStyle = currentStyle;
+    }
+
+    for (i = 0; i < this.graph.edges.length; i ++)
+    {
+        let edge = this.graph.edges[i];
+        var arcDrawer       = this.GetBaseArcDrawer(context, edge);
+        arcDrawer.Draw(edge, edge.currentStyle.GetStyle({}, edge));
+    }
+
+    var graphDrawer   = new BaseVertexDrawer(context);
+    for (i = 0; i < this.graph.vertices.length; i ++)
+    {
+        let vertex = this.graph.vertices[i];
+		graphDrawer.Draw(this.graph.vertices[i], vertex.currentStyle.GetStyle({}, vertex));
+    }
+}
+
+GraphPreview.prototype.GetBaseArcDrawer = function(context, edge)
+{
+    var arcDrawer = new BaseEdgeDrawer(context);
+    
+    if (edge.model.type == EdgeModels.curve)
+    {
+        var curvedArcDrawer = new CurvedArcDrawer(context, edge.model);
+
+        arcDrawer = new BaseEdgeDrawer(context, 
+                                        {
+                                            drawArc              : curvedArcDrawer, 
+                                            startArrowDirection  : curvedArcDrawer,
+                                            finishArrowDirection : curvedArcDrawer,
+                                            textCenterObject     : curvedArcDrawer,
+                                            getPointOnArc        : curvedArcDrawer
+                                        }
+                                      );
+    }
+    
+    return arcDrawer;
+}
+
+GraphPreview.prototype.AutoAdjustViewport = function()
+{
+    graphBBox  = this.graph.getGraphBBox();
+    bboxCenter = graphBBox.center();
+    bboxSize   = graphBBox.size();
+                          
+    if (bboxSize.length() > 0)
+    {
+        // Setup size
+        if (bboxSize.x > this.getRealWidth() || bboxSize.y > this.getRealHeight())
+        {
+            this.canvasScale = Math.min(this.getRealWidth() / bboxSize.x, this.getRealHeight() / bboxSize.y);
+        }
+                          
+        // Setup position.
+        if (graphBBox.minPoint.x < 0.0 || graphBBox.minPoint.y < 0.0 ||
+            graphBBox.maxPoint.x > this.getRealWidth() || graphBBox.maxPoint.y > this.getRealHeight())
+        {
+            // Move center.
+            this.canvasPosition  = graphBBox.minPoint.inverse();
+        }
+    }
+}
+
+GraphPreview.prototype.CanvasOnMouseMove  = function(e)
+{
+    if (this.prevMousePos == null)
+    {
+        return;
+    }
+	// X,Y position.
+	var pos = this.getMousePos(this.canvas, e);
+
+    let newPos = (new Point(pos.x, pos.y)).subtract(this.prevMousePos).multiply(this.canvasScale);
+    this.canvasPosition = this.canvasPosition.add(newPos.multiply(1 / this.canvasScale));
+
+    this.redraw();
+    this.callPositionUpdateCallback();
+}
+
+GraphPreview.prototype.CanvasOnMouseDown = function(e)
+{
+    // Skip non left button.
+    if(e.which !== 1) return;
+
+    var pos = this.getMousePos(this.canvas, e); /// provide this canvas and event
+
+	this.prevMousePos = pos;
+}
+
+GraphPreview.prototype.CanvasOnMouseUp = function(e)
+{
+    // Skip non left button.
+    if(e.which !== 1) return;
+
+    this.prevMousePos = null;
+}
+
+GraphPreview.prototype.getMousePos = function(canvas, e)
+{
+    /// getBoundingClientRect is supported in most browsers and gives you
+    /// the absolute geometry of an element
+    var rect = canvas.getBoundingClientRect();
+
+    /// as mouse event coords are relative to document you need to
+    /// subtract the element's left and top position:
+    return new Point((e.clientX - rect.left) / this.canvasScale - this.canvasPosition.x, 
+                     (e.clientY - rect.top) / this.canvasScale - this.canvasPosition.y);
+}
+
+GraphPreview.prototype.callPositionUpdateCallback = function()
+{
+    if (this.positionUpdateCallback != null)
+    {
+        this.positionUpdateCallback(this.canvasPosition, this.canvasScale);
+    }
+}
+

script/features/select_auto_save_graph_or_not/index.js

@@ -0,0 +1,86 @@
+doInclude ([
+    include ("features/base_handler/index.js"),
+    include ("features/graph_preview/index.js"),
+])
+
+/**
+ * Dialog to select first or second graph.
+ *
+ */
+function SelectGraphDialog(app, originalGraph, originalGraphStyle, 
+                                autoSavedGraph, autoSavedGraphStyle, 
+                                originalCallback, autoSaveCallback)
+{
+  BaseHandler.apply(this, arguments);
+  this.message = "";
+  this.originalGraph = originalGraph;
+  this.autoSavedGraph = autoSavedGraph;
+  this.originalCallback = originalCallback;
+  this.autoSaveCallback = autoSaveCallback;
+  this.originalGraphStyle = originalGraphStyle;
+  this.autoSavedGraphStyle = autoSavedGraphStyle;
+}
+
+// inheritance.
+SelectGraphDialog.prototype = Object.create(BaseHandler.prototype);
+
+SelectGraphDialog.prototype.show = function()
+{
+	var handler = this;
+	var dialogButtons = {};
+    var graph = this.app.graph;
+    var app   = this.app;
+    
+	dialogButtons[g_originalGraph] = 
+            {
+                text: g_originalGraph,
+                class   : "MarginLeft",
+                click   : function() {
+                    handler.originalGraphPreview = null;
+                    handler.originalGraph = null;
+                    handler.autoSavedGraph = null;
+                    handler.originalCallback();
+                    $( this ).dialog( "destroy" );
+                }
+            };
+    
+	dialogButtons[g_autoSavedGraph] = function() {
+                handler.originalGraphPreview = null;
+                handler.originalGraph = null;
+                handler.autoSavedGraph = null;
+                handler.autoSaveCallback();
+				$( this ).dialog( "destroy" );
+			};
+            
+	$( "#autoSaveOrOriginalGraph" ).dialog({
+		resizable: false,
+        height: "auto",
+        width:  "auto",
+		modal: true,
+		title: g_selectGraphToLoad,
+		buttons: dialogButtons,
+		dialogClass: 'EdgeDialog',
+        close: function( event, ui ) 
+        {
+            handler.originalCallback();
+        }
+	});
+
+    let originalGraphPositionUpdate = function(pos, scale)
+    {
+        handler.autoSavedGraphPreview.canvasScale = scale;
+        handler.autoSavedGraphPreview.canvasPosition = pos;
+        handler.autoSavedGraphPreview.redraw();
+    };
+    let autoSavedGraphPreviewUpdate = function(pos, scale)
+    {
+        handler.originalGraphPreview.canvasScale = scale;
+        handler.originalGraphPreview.canvasPosition = pos;
+        handler.originalGraphPreview.redraw();
+    };
+
+    this.originalGraphPreview = new GraphPreview(this.originalGraph, this.originalGraphStyle,
+        document.getElementById("OriginalGraphpPreview"), originalGraphPositionUpdate);
+    this.autoSavedGraphPreview = new GraphPreview(this.autoSavedGraph, this.autoSavedGraphStyle,
+        document.getElementById("AutoSaveGraphpPreview"), autoSavedGraphPreviewUpdate);
+}

script/features/setup_background_style/index.js

@@ -55,7 +55,7 @@ SetupBackgroundStyle.prototype.show = function()
 	var dialogButtons = {};
     var graph = this.app.graph;
     var app   = this.app;
-    var style = FullObjectCopy(app.backgroundCommonStyle);
+    var style = FullObjectCopy(app.style.backgroundCommonStyle);
     
     var fillFields = function()
     {

script/features/setup_edge_style/index.js

@@ -29,7 +29,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
     var applyIndex = function(index)
     {
         self.index = index;
-        var originStyle = (self.index == 0 ? app.edgeCommonStyle : app.edgeSelectedStyles[self.index - 1]);
+        var originStyle = (self.index == 0 ? app.style.edgeCommonStyle : app.style.edgeSelectedStyles[self.index - 1]);
         if (!forAll)
         {
             originStyle = selectedEdges[0].getStyleFor(self.index);
@@ -65,10 +65,10 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
 
         // Fill color presets.
         var stylesArray = [];
-        stylesArray.push(app.edgeCommonStyle);
+        stylesArray.push(app.style.edgeCommonStyle);
 
-        for (i = 0; i < app.edgeSelectedStyles.length; i ++)
-            stylesArray.push(app.edgeSelectedStyles[i]);
+        for (i = 0; i < app.style.edgeSelectedStyles.length; i ++)
+            stylesArray.push(app.style.edgeSelectedStyles[i]);
 
         var colorSet = {};
         for (i = 0; i < stylesArray.length; i ++)
@@ -128,7 +128,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
         context.save();
         
         var backgroundDrawer = new BaseBackgroundDrawer(context);
-        backgroundDrawer.Draw(app.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
+        backgroundDrawer.Draw(app.style.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
         
         var graphDrawer  = new BaseEdgeDrawer(context);
         var baseVertex1  = new BaseVertex(0, canvas.height / 2, new BaseEnumVertices(this));
@@ -190,11 +190,11 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
                click   : function() {
                     app.PushToStack("ChangeStyle");
 
-                    applyWidth(forAll ? (new EdgeModel()).width : app.GetDefaultEdgeWidth());
+                    applyWidth(forAll ? defaultEdgeWidth : app.GetDefaultEdgeWidth());
                     var indexes = [];
                     if (self.index == "all")
                     {
-                        for (i = 0; i < app.edgeSelectedStyles.length; i ++)
+                        for (i = 0; i < app.style.edgeSelectedStyles.length; i ++)
                             indexes.push(i + 1);
                     }
                     else
@@ -231,7 +231,7 @@ SetupEdgeStyle.prototype.show = function(index, selectedEdges)
                 {
                     indexes.push({index : 1, style : self.style});
 
-                    for (i = 1; i < app.edgeSelectedStyles.length; i ++)
+                    for (i = 1; i < app.style.edgeSelectedStyles.length; i ++)
                     {
                         var style = (new BaseEdgeStyle());
                         style.baseStyles.push("selected");

script/features/setup_vertex_style/index.js

@@ -28,7 +28,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
     var applyIndex = function(index)
     {
         self.index = index;
-        self.originStyle = (self.index == 0 ? app.vertexCommonStyle : app.vertexSelectedVertexStyles[self.index - 1]);
+        self.originStyle = (self.index == 0 ? app.style.vertexCommonStyle : app.style.vertexSelectedVertexStyles[self.index - 1]);
         if (!forAll)
         {
             self.originStyle = selectedVertices[0].getStyleFor(self.index);
@@ -64,10 +64,10 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
 
         // Fill color presets.
         var stylesArray = [];
-        stylesArray.push(app.vertexCommonStyle);
+        stylesArray.push(app.style.vertexCommonStyle);
 
-        for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
-            stylesArray.push(app.vertexSelectedVertexStyles[i]);
+        for (i = 0; i < app.style.vertexSelectedVertexStyles.length; i ++)
+            stylesArray.push(app.style.vertexSelectedVertexStyles[i]);
 
         var colorSet = {};
         for (i = 0; i < stylesArray.length; i ++)
@@ -132,7 +132,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
         context.save();
 
         var backgroundDrawer = new BaseBackgroundDrawer(context);
-        backgroundDrawer.Draw(app.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
+        backgroundDrawer.Draw(app.style.backgroundCommonStyle, canvas.width, canvas.height, new Point(0, 0), 1.0);
         
         var graphDrawer = new BaseVertexDrawer(context);
         var baseVertex  = new BaseVertex(canvas.width / 2, canvas.height / 2, new BaseEnumVertices(this));
@@ -189,12 +189,12 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
 
                     app.PushToStack("ChangeStyle");
 
-                    applyDiameter(forAll ? (new VertexModel()).diameter : app.GetDefaultVertexSize());
+                    applyDiameter(forAll ? defaultVertexDiameter : app.GetDefaultVertexSize());
 
                     var indexes = [];
                     if (self.index == "all")
                     {
-                        for (i = 0; i < app.vertexSelectedVertexStyles.length; i ++)
+                        for (i = 0; i < app.style.vertexSelectedVertexStyles.length; i ++)
                             indexes.push(i + 1);
                     }
                     else
@@ -230,7 +230,7 @@ SetupVertexStyle.prototype.show = function(index, selectedVertices)
                 if (self.index == "all")
                 {
                     indexes.push({index : 1, style : self.style});
-                    for (i = 1; i < app.vertexSelectedVertexStyles.length; i ++)
+                    for (i = 1; i < app.style.vertexSelectedVertexStyles.length; i ++)
                     {
                         var style = (new BaseVertexStyle());
                         style.baseStyles.push("selected");

script/pages/create_graph_by_edge_list/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=90","/script/shared/point.js?v=90","/script/entities/edge/api/index.js?v=90","/script/entities/edge/model/BaseEdge.js?v=90","/script/entities/edge/model/EdgeModel.js?v=90","/script/entities/vertex/api/index.js?v=90","/script/entities/vertex/model/BaseVertex.js?v=90","/script/entities/vertex/model/VertexModel.js?v=90","/script/entities/graph/model/Graph.js?v=90",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=91","/script/shared/point.js?v=91","/script/entities/edge/api/index.js?v=91","/script/entities/edge/model/BaseEdge.js?v=91","/script/entities/edge/model/EdgeModel.js?v=91","/script/entities/vertex/api/index.js?v=91","/script/entities/vertex/model/BaseVertex.js?v=91","/script/entities/vertex/model/VertexModel.js?v=91","/script/entities/graph/model/Graph.js?v=91",]);{let modulDir="pages/create_graph_by_edge_list/";doInclude([include("entities/graph/api/index.js")]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()
@@ -119,7 +119,7 @@ EdgeModel.prototype.defaultCurve=0.1;EdgeModel.prototype.copyFrom=function(other
 EdgeModel.prototype.SaveToXML=function()
 {return"model_width=\""+this.width+"\" "+"model_type=\""+this.type+"\" "+"model_curveValue=\""+this.curveValue+"\" "+"model_default=\""+this.default+"\" ";}
 EdgeModel.prototype.LoadFromXML=function(xml,graph)
-{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:parseFloat(xml.attr("model_default"));}
+{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:xml.attr("model_default")=="true";}
 EdgeModel.prototype.GetCurvePoint=function(position1,position2,t)
 {var points=this.GetBezierPoints(position1,position2);var firstBezierPoint=points[0];var secondBezierPoint=points[1];var B0_t=Math.pow(1-t,3);var B1_t=3*t*Math.pow(1-t,2);var B2_t=3*t*t*(1-t)
 var B3_t=t*t*t;var ax=position1.x;var ay=position1.y;var dx=position2.x;var dy=position2.y;var bx=firstBezierPoint.x;var by=firstBezierPoint.y;var cx=secondBezierPoint.x;var cy=secondBezierPoint.y;var px_t=(B0_t*ax)+(B1_t*bx)+(B2_t*cx)+(B3_t*dx);var py_t=(B0_t*ay)+(B1_t*by)+(B2_t*cy)+(B3_t*dy);return new Point(px_t,py_t);}

script/pages/create_graph_by_incidence_matrix/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=90","/script/shared/point.js?v=90","/script/entities/edge/api/index.js?v=90","/script/entities/edge/model/BaseEdge.js?v=90","/script/entities/edge/model/EdgeModel.js?v=90","/script/entities/vertex/api/index.js?v=90","/script/entities/vertex/model/BaseVertex.js?v=90","/script/entities/vertex/model/VertexModel.js?v=90","/script/entities/graph/model/Graph.js?v=90",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=91","/script/shared/point.js?v=91","/script/entities/edge/api/index.js?v=91","/script/entities/edge/model/BaseEdge.js?v=91","/script/entities/edge/model/EdgeModel.js?v=91","/script/entities/vertex/api/index.js?v=91","/script/entities/vertex/model/BaseVertex.js?v=91","/script/entities/vertex/model/VertexModel.js?v=91","/script/entities/graph/model/Graph.js?v=91",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js")]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()
@@ -119,7 +119,7 @@ EdgeModel.prototype.defaultCurve=0.1;EdgeModel.prototype.copyFrom=function(other
 EdgeModel.prototype.SaveToXML=function()
 {return"model_width=\""+this.width+"\" "+"model_type=\""+this.type+"\" "+"model_curveValue=\""+this.curveValue+"\" "+"model_default=\""+this.default+"\" ";}
 EdgeModel.prototype.LoadFromXML=function(xml,graph)
-{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:parseFloat(xml.attr("model_default"));}
+{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:xml.attr("model_default")=="true";}
 EdgeModel.prototype.GetCurvePoint=function(position1,position2,t)
 {var points=this.GetBezierPoints(position1,position2);var firstBezierPoint=points[0];var secondBezierPoint=points[1];var B0_t=Math.pow(1-t,3);var B1_t=3*t*Math.pow(1-t,2);var B2_t=3*t*t*(1-t)
 var B3_t=t*t*t;var ax=position1.x;var ay=position1.y;var dx=position2.x;var dy=position2.y;var bx=firstBezierPoint.x;var by=firstBezierPoint.y;var cx=secondBezierPoint.x;var cy=secondBezierPoint.y;var px_t=(B0_t*ax)+(B1_t*bx)+(B2_t*cx)+(B3_t*dx);var py_t=(B0_t*ay)+(B1_t*by)+(B2_t*cy)+(B3_t*dy);return new Point(px_t,py_t);}

script/pages/create_graph_by_matrix/api/index.js.cache

@@ -1,4 +1,4 @@
-moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=90","/script/shared/point.js?v=90","/script/entities/edge/api/index.js?v=90","/script/entities/edge/model/BaseEdge.js?v=90","/script/entities/edge/model/EdgeModel.js?v=90","/script/entities/vertex/api/index.js?v=90","/script/entities/vertex/model/BaseVertex.js?v=90","/script/entities/vertex/model/VertexModel.js?v=90","/script/entities/graph/model/Graph.js?v=90","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=90","/script/pages/create_graph_by_matrix/model/main.js?v=90",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
+moduleLoader.beginCacheLoading(["/script/entities/graph/api/index.js?v=91","/script/shared/point.js?v=91","/script/entities/edge/api/index.js?v=91","/script/entities/edge/model/BaseEdge.js?v=91","/script/entities/edge/model/EdgeModel.js?v=91","/script/entities/vertex/api/index.js?v=91","/script/entities/vertex/model/BaseVertex.js?v=91","/script/entities/vertex/model/VertexModel.js?v=91","/script/entities/graph/model/Graph.js?v=91","/script/pages/create_graph_by_matrix/model/createByMatrixMain.js?v=91","/script/pages/create_graph_by_matrix/model/main.js?v=91",]);{let modulDir="pages/create_graph_by_matrix/";doInclude([include("entities/graph/api/index.js"),include("model/createByMatrixMain.js",modulDir),include("model/main.js",modulDir)]);}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
 {return new Point(Math.max(this.x,point.x),Math.max(this.y,point.y));};Point.prototype.inverse=function()
@@ -119,7 +119,7 @@ EdgeModel.prototype.defaultCurve=0.1;EdgeModel.prototype.copyFrom=function(other
 EdgeModel.prototype.SaveToXML=function()
 {return"model_width=\""+this.width+"\" "+"model_type=\""+this.type+"\" "+"model_curveValue=\""+this.curveValue+"\" "+"model_default=\""+this.default+"\" ";}
 EdgeModel.prototype.LoadFromXML=function(xml,graph)
-{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:parseFloat(xml.attr("model_default"));}
+{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:xml.attr("model_default")=="true";}
 EdgeModel.prototype.GetCurvePoint=function(position1,position2,t)
 {var points=this.GetBezierPoints(position1,position2);var firstBezierPoint=points[0];var secondBezierPoint=points[1];var B0_t=Math.pow(1-t,3);var B1_t=3*t*Math.pow(1-t,2);var B2_t=3*t*t*(1-t)
 var B3_t=t*t*t;var ax=position1.x;var ay=position1.y;var dx=position2.x;var dy=position2.y;var bx=firstBezierPoint.x;var by=firstBezierPoint.y;var cx=secondBezierPoint.x;var cy=secondBezierPoint.y;var px_t=(B0_t*ax)+(B1_t*bx)+(B2_t*cx)+(B3_t*dx);var py_t=(B0_t*ay)+(B1_t*by)+(B2_t*cy)+(B3_t*dy);return new Point(px_t,py_t);}

script/pages/editor/api/index.js

@@ -32,6 +32,7 @@
         include ("features/connect_vertices_handler/index.js"),
         include ("features/delete_objects_handler/index.js"),
         include ("features/algorithm_handler/index.js"),
+        include ("features/select_auto_save_graph_or_not/index.js"),
 
         include ("features/serialization/api/index.js"),
 

script/pages/editor/api/index.js.cache

@@ -1,5 +1,5 @@
-moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=90","/script/shared/gzip.js?v=90","/script/entities/graph/api/index.js?v=90","/script/shared/point.js?v=90","/script/entities/edge/api/index.js?v=90","/script/entities/edge/model/BaseEdge.js?v=90","/script/entities/edge/model/EdgeModel.js?v=90","/script/entities/vertex/api/index.js?v=90","/script/entities/vertex/model/BaseVertex.js?v=90","/script/entities/vertex/model/VertexModel.js?v=90","/script/entities/graph/model/Graph.js?v=90","/script/features/draw_graph/api/index.js?v=90","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=90","/script/features/draw_graph/model/EdgeStyle.js?v=90","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=90","/script/features/draw_graph/model/VertexShape.js?v=90","/script/features/draw_graph/model/VertexStyle.js?v=90","/script/features/draw_graph/model/BaseVertexDrawer.js?v=90","/script/features/algorithms/api/index.js?v=90","/script/features/algorithms/model/Algorithms.js?v=90","/script/features/algorithms/model/BaseTraversal.js?v=90","/script/features/base_handler/index.js?v=90","/script/features/default_handler/index.js?v=90","/script/features/add_vertices_handler/index.js?v=90","/script/features/connect_vertices_handler/index.js?v=90","/script/features/delete_objects_handler/index.js?v=90","/script/features/algorithm_handler/index.js?v=90","/script/features/serialization/api/index.js?v=90","/script/features/serialization/model/GraphMLCreator.js?v=90","/script/features/enum_vertices/EnumVertices.js?v=90","/script/pages/editor/model/texts.js?v=90","/script/pages/editor/model/UndoStack.js?v=90","/script/pages/editor/model/DiskSaveLoad.js?v=90","/script/pages/editor/model/Application.js?v=90","/script/pages/editor/ui/ya_metrika.js?v=90","/script/pages/editor/ui/editor.js?v=90","/script/pages/editor/ui/main.js?v=90",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
-let modulDir="pages/editor/";doInclude([include("shared/utils.js"),include("shared/gzip.js"),include("entities/graph/api/index.js"),include("features/draw_graph/api/index.js"),include("features/algorithms/api/index.js"),include("features/base_handler/index.js"),include("features/default_handler/index.js"),include("features/add_vertices_handler/index.js"),include("features/connect_vertices_handler/index.js"),include("features/delete_objects_handler/index.js"),include("features/algorithm_handler/index.js"),include("features/serialization/api/index.js"),include("features/enum_vertices/EnumVertices.js"),include("model/texts.js",modulDir),include("model/UndoStack.js",modulDir),include("model/DiskSaveLoad.js",modulDir),include("model/Application.js",modulDir),include("ui/ya_metrika.js",modulDir),include("ui/editor.js",modulDir),include("ui/main.js",modulDir)],onloadEditor);}
+moduleLoader.beginCacheLoading(["/script/shared/utils.js?v=91","/script/shared/gzip.js?v=91","/script/entities/graph/api/index.js?v=91","/script/shared/point.js?v=91","/script/entities/edge/api/index.js?v=91","/script/entities/edge/model/BaseEdge.js?v=91","/script/entities/edge/model/EdgeModel.js?v=91","/script/entities/vertex/api/index.js?v=91","/script/entities/vertex/model/BaseVertex.js?v=91","/script/entities/vertex/model/VertexModel.js?v=91","/script/entities/graph/model/Graph.js?v=91","/script/features/draw_graph/api/index.js?v=91","/script/features/draw_graph/model/BaseBackgroundDrawer.js?v=91","/script/features/draw_graph/model/EdgeStyle.js?v=91","/script/features/draw_graph/model/BaseEdgeDrawer.js?v=91","/script/features/draw_graph/model/VertexShape.js?v=91","/script/features/draw_graph/model/VertexStyle.js?v=91","/script/features/draw_graph/model/BaseVertexDrawer.js?v=91","/script/features/draw_graph/model/GraphFullStyle.js?v=91","/script/features/algorithms/api/index.js?v=91","/script/features/algorithms/model/Algorithms.js?v=91","/script/features/algorithms/model/BaseTraversal.js?v=91","/script/features/base_handler/index.js?v=91","/script/features/default_handler/index.js?v=91","/script/features/add_vertices_handler/index.js?v=91","/script/features/connect_vertices_handler/index.js?v=91","/script/features/delete_objects_handler/index.js?v=91","/script/features/algorithm_handler/index.js?v=91","/script/features/select_auto_save_graph_or_not/index.js?v=91","/script/features/graph_preview/index.js?v=91","/script/features/serialization/api/index.js?v=91","/script/features/serialization/model/GraphMLCreator.js?v=91","/script/features/enum_vertices/EnumVertices.js?v=91","/script/pages/editor/model/texts.js?v=91","/script/pages/editor/model/UndoStack.js?v=91","/script/pages/editor/model/DiskSaveLoad.js?v=91","/script/pages/editor/model/Application.js?v=91","/script/pages/editor/ui/ya_metrika.js?v=91","/script/pages/editor/ui/editor.js?v=91","/script/pages/editor/ui/main.js?v=91",]);{function onloadEditor(){console.log("onload() call");doIncludeAsync([include("shared/canvas2svg.js"),include("features/group_rename_handler/index.js"),include("features/saved_graph_handler/index.js"),include("features/saved_graph_image_handler/index.js"),include("features/show_adjacency_matrix/index.js"),include("features/show_distance_matrix/index.js"),include("features/show_incidence_matrix/index.js"),include("features/setup_background_style/index.js"),include("features/setup_edge_style/index.js"),include("features/setup_vertex_style/index.js"),]);postLoadPage();}
+let modulDir="pages/editor/";doInclude([include("shared/utils.js"),include("shared/gzip.js"),include("entities/graph/api/index.js"),include("features/draw_graph/api/index.js"),include("features/algorithms/api/index.js"),include("features/base_handler/index.js"),include("features/default_handler/index.js"),include("features/add_vertices_handler/index.js"),include("features/connect_vertices_handler/index.js"),include("features/delete_objects_handler/index.js"),include("features/algorithm_handler/index.js"),include("features/select_auto_save_graph_or_not/index.js"),include("features/serialization/api/index.js"),include("features/enum_vertices/EnumVertices.js"),include("model/texts.js",modulDir),include("model/UndoStack.js",modulDir),include("model/DiskSaveLoad.js",modulDir),include("model/Application.js",modulDir),include("ui/ya_metrika.js",modulDir),include("ui/editor.js",modulDir),include("ui/main.js",modulDir)],onloadEditor);}
 function gEncodeToHTML(str)
 {if(typeof str!=='string')
 return str;return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&apos;');}
@@ -15,7 +15,7 @@ Array.prototype.swap=function(x,y){var b=this[x];this[x]=this[y];this[y]=b;retur
 {try
 {const blobToBase64=blob=>new Promise((resolve,_)=>{const reader=new FileReader();reader.onloadend=()=>resolve(reader.result.split(',')[1]);reader.readAsDataURL(blob);});const byteArray=new TextEncoder().encode(str);const cs=new CompressionStream(mode);const writer=cs.writable.getWriter();writer.write(byteArray);writer.close();return await new Response(cs.readable).blob().then(blobToBase64).then(res=>callback(res));}
 catch(err)
-{console.error(err)}
+{console.log(err);callback("");}
 return"";}
 async function decompress_base64_zip_into_text(str,callback,mode="gzip")
 {try
@@ -25,7 +25,7 @@ writer.write(bytes)
 writer.close()
 return await new Response(cs.readable).arrayBuffer().then(arr=>callback(new TextDecoder().decode(arr)),async _=>{throw new Error(await Promise.reject(await writer.closed))});}
 catch(err)
-{console.error(err)}
+{console.log(err);callback("");}
 return"";}
 {let modulDir="entities/graph/";doInclude([include("shared/point.js"),include("entities/edge/api/index.js"),include("entities/vertex/api/index.js"),include("model/Graph.js",modulDir)])}function Point(x,y){this.x=x||0;this.y=y||0;};Point.prototype.x=null;Point.prototype.y=null;Point.prototype.add=function(v){return new Point(this.x+v.x,this.y+v.y);};Point.prototype.addValue=function(v){return new Point(this.x+v,this.y+v);};Point.prototype.clone=function(){return new Point(this.x,this.y);};Point.prototype.degreesTo=function(v){var dx=this.x-v.x;var dy=this.y-v.y;var angle=Math.atan2(dy,dx);return angle*(180/Math.PI);};Point.prototype.distance=function(v){return Math.sqrt(this.distanceSqr(v));};Point.prototype.distanceSqr=function(v){var x=this.x-v.x;var y=this.y-v.y;return x*x+y*y;};Point.prototype.equals=function(toCompare){return this.x==toCompare.x&&this.y==toCompare.y;};Point.prototype.interpolate=function(v,f){return new Point((this.x+v.x)*f,(this.y+v.y)*f);};Point.prototype.length=function(){return Math.sqrt(this.x*this.x+this.y*this.y);};Point.prototype.normalize=function(thickness){var l=this.length();this.x=this.x/l*thickness;this.y=this.y/l*thickness;return new Point(this.x,this.y);};Point.prototype.normalizeCopy=function(thickness){var l=this.length();return new Point(this.x/l*thickness,this.y/l*thickness);};Point.prototype.orbit=function(origin,arcWidth,arcHeight,degrees){var radians=degrees*(Math.PI/180);this.x=origin.x+arcWidth*Math.cos(radians);this.y=origin.y+arcHeight*Math.sin(radians);};Point.prototype.rotate=function(center,degrees){var radians=degrees*(Math.PI/180);offset=this.subtract(center);this.x=offset.x*Math.cos(radians)-offset.y*Math.sin(radians);this.y=offset.x*Math.sin(radians)+offset.y*Math.cos(radians);this.x=this.x+center.x;this.y=this.y+center.y;return this;};Point.prototype.offset=function(dx,dy){this.x+=dx;this.y+=dy;};Point.prototype.subtract=function(v){return new Point(this.x-v.x,this.y-v.y);};Point.prototype.subtractValue=function(value){return new Point(this.x-value,this.y-value);};Point.prototype.multiply=function(value){return new Point(this.x*value,this.y*value);};Point.prototype.toString=function(){return"(x="+this.x+", y="+this.y+")";};Point.prototype.normal=function(){return new Point(-this.y,this.x);};Point.prototype.min=function(point)
 {return new Point(Math.min(this.x,point.x),Math.min(this.y,point.y));};Point.prototype.max=function(point)
@@ -147,7 +147,7 @@ EdgeModel.prototype.defaultCurve=0.1;EdgeModel.prototype.copyFrom=function(other
 EdgeModel.prototype.SaveToXML=function()
 {return"model_width=\""+this.width+"\" "+"model_type=\""+this.type+"\" "+"model_curveValue=\""+this.curveValue+"\" "+"model_default=\""+this.default+"\" ";}
 EdgeModel.prototype.LoadFromXML=function(xml,graph)
-{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:parseFloat(xml.attr("model_default"));}
+{this.width=xml.attr('model_width')==null?this.width:parseFloat(xml.attr("model_width"));this.type=xml.attr('model_type')==null?this.type:xml.attr("model_type");this.curveValue=xml.attr('model_curveValue')==null?this.curveValue:parseFloat(xml.attr("model_curveValue"));this.default=xml.attr('model_default')==null?this.default:xml.attr("model_default")=="true";}
 EdgeModel.prototype.GetCurvePoint=function(position1,position2,t)
 {var points=this.GetBezierPoints(position1,position2);var firstBezierPoint=points[0];var secondBezierPoint=points[1];var B0_t=Math.pow(1-t,3);var B1_t=3*t*Math.pow(1-t,2);var B2_t=3*t*t*(1-t)
 var B3_t=t*t*t;var ax=position1.x;var ay=position1.y;var dx=position2.x;var dy=position2.y;var bx=firstBezierPoint.x;var by=firstBezierPoint.y;var cx=secondBezierPoint.x;var cy=secondBezierPoint.y;var px_t=(B0_t*ax)+(B1_t*bx)+(B2_t*cx)+(B3_t*dx);var py_t=(B0_t*ay)+(B1_t*by)+(B2_t*cy)+(B3_t*dy);return new Point(px_t,py_t);}
@@ -640,7 +640,7 @@ Graph.prototype.makeAllEdgesUndirected=function()
 {if(this.edges[i].isDirect)
 {this.edges[i].isDirect=false;}}
 this.isMultiGraph=this.checkMutiGraph();}
-{let modulDir="features/draw_graph/";doInclude([include("model/BaseBackgroundDrawer.js",modulDir),include("model/EdgeStyle.js",modulDir),include("model/BaseEdgeDrawer.js",modulDir),include("model/VertexShape.js",modulDir),include("model/VertexStyle.js",modulDir),include("model/BaseVertexDrawer.js",modulDir)])}
+{let modulDir="features/draw_graph/";doInclude([include("model/BaseBackgroundDrawer.js",modulDir),include("model/EdgeStyle.js",modulDir),include("model/BaseEdgeDrawer.js",modulDir),include("model/VertexShape.js",modulDir),include("model/VertexStyle.js",modulDir),include("model/BaseVertexDrawer.js",modulDir),include("model/GraphFullStyle.js",modulDir)])}
 function CommonBackgroundStyle()
 {this.commonColor='#ffffff';this.commonOpacity=1.0;this.image=null;}
 CommonBackgroundStyle.prototype.Clear=function()
@@ -873,6 +873,37 @@ BaseVertexDrawer.prototype.DrawText=function(position,text,color,outlineColor,ou
 this.context.fillText(text,position.x,position.y);}
 BaseVertexDrawer.prototype.DrawCenterText=function(position,text,color,outlineColor,bold,outline,size)
 {this.context.textBaseline="middle";this.context.font=(bold?"bold ":"")+size+DefaultFont;var textWidth=this.context.measureText(text).width;this.DrawText(new Point(position.x-textWidth/2,position.y),text,color,outlineColor,outline,this.context.font);}
+function GraphFullStyle(redrawCallback)
+{this.edgeCommonStyle=new CommonEdgeStyle();this.isEdgeCommonStyleCustom=false;this.edgeSelectedStyles=FullArrayCopy(DefaultSelectedEdgeStyles);this.isEdgeSelectedStylesCustom=false;this.vertexCommonStyle=new CommonVertexStyle();this.isVertexCommonStyleCustom=false;this.vertexSelectedVertexStyles=FullArrayCopy(DefaultSelectedGraphStyles);this.isVertexSelectedVertexStylesCustom=false;this.backgroundCommonStyle=new CommonBackgroundStyle();this.isBackgroundCommonStyleCustom=false;this.defaultVertexSize=null;this.defaultEdgeWidth=null;this.redrawCallback=redrawCallback;}
+GraphFullStyle.prototype.Save=function()
+{var res="";var needEnd=false;var checkValue=[];checkValue.push({field:"edgeCommonStyle",value:this.edgeCommonStyle,check:this.isEdgeCommonStyleCustom});checkValue.push({field:"edgeSelectedStyles",value:this.edgeSelectedStyles,check:this.isEdgeSelectedStylesCustom});checkValue.push({field:"vertexCommonStyle",value:this.vertexCommonStyle,check:this.isVertexCommonStyleCustom});checkValue.push({field:"vertexSelectedVertexStyles",value:this.vertexSelectedVertexStyles,check:this.isVertexSelectedVertexStylesCustom});checkValue.push({field:"backgroundCommonStyle",value:this.backgroundCommonStyle,check:this.isBackgroundCommonStyleCustom});checkValue.push({field:"defaultVertexSize",value:this.defaultVertexSize,check:this.defaultVertexSize!=null});checkValue.push({field:"defaultEdgeWidth",value:this.defaultEdgeWidth,check:this.defaultEdgeWidth!=null});checkValue.forEach(function(entry){if(!entry.check)
+return;if(needEnd)
+res=res+",";let valueJson="";if(typeof entry.value.saveToJson==="function"){valueJson=entry.value.saveToJson();}else{valueJson=JSON.stringify(entry.value);}
+res=res+"\""+entry.field+"\""+":"+valueJson;needEnd=true;});res=res+"";return gEncodeToHTML(res);}
+GraphFullStyle.prototype.Load=function(json)
+{var checkValue=[];checkValue.push({field:"edgeCommonStyle",value:this.edgeCommonStyle,check:"isEdgeCommonStyleCustom",deep:false});checkValue.push({field:"edgeSelectedStyles",value:this.edgeSelectedStyles,check:"isEdgeSelectedStylesCustom",deep:true});checkValue.push({field:"vertexCommonStyle",value:this.vertexCommonStyle,check:"isVertexCommonStyleCustom",deep:false});checkValue.push({field:"vertexSelectedVertexStyles",value:this.vertexSelectedVertexStyles,check:"isVertexSelectedVertexStylesCustom",deep:true});checkValue.push({field:"defaultVertexSize",value:"defaultVertexSize",check:null,deep:false});checkValue.push({field:"defaultEdgeWidth",value:"defaultEdgeWidth",check:null,deep:false});checkValue.push({field:"backgroundCommonStyle",value:this.backgroundCommonStyle,check:"isBackgroundCommonStyleCustom",deep:false});var decoderStr=gDecodeFromHTML(json);var parsedSave=JSON.parse(decoderStr);var app=this;checkValue.forEach(function(entry){if(parsedSave.hasOwnProperty(entry.field))
+{if(typeof parsedSave[entry.field]==='number')
+{app[entry.value]=parseInt(parsedSave[entry.field]);}
+else
+{if(typeof entry.value.loadFromJson==="function"){entry.value.loadFromJson(parsedSave[entry.field],function(){setTimeout(function()
+{if(app.redrawCallback!=null)
+{app.redrawCallback();}},1000);});if(entry.check!=null)
+app[entry.check]=true;return;}
+if(!entry.deep)
+entry.value.Clear();for(var k in parsedSave[entry.field])
+{if(!entry.deep)
+{if(entry.value.ShouldLoad(k))
+{entry.value[k]=parsedSave[entry.field][k];}}
+else
+{if(k%1!=0)
+{continue;}
+if(entry.value[k]==undefined)
+{continue;}
+entry.value[k].Clear();for(var deepK in parsedSave[entry.field][k])
+{if(k<entry.value.length&&entry.value[k].ShouldLoad(deepK))
+entry.value[k][deepK]=parsedSave[entry.field][k][deepK];}}}}
+if(entry.check!=null)
+app[entry.check]=true;}});}
 {let modulDir="features/algorithms/";doInclude([include("model/Algorithms.js",modulDir),include("model/BaseTraversal.js",modulDir)])
 function loadAsyncAlgorithms(onFinish){let modulDir="features/algorithms/";let pluginsList=["BFS.js","Coloring.js","ConnectedComponent.js","DFS.js","EulerianLoop.js","EulerianPath.js","FindAllPatches.js","FindLongestPath.js","FindShortPatchsFromOne.js","Floid.js","GraphReorder.js","HamiltonianLoop.js","HamiltonianPath.js","IsomorphismCheck.js","MaxClique.js","MaxFlow.js","MinimumSpanningTree.js","ModernGraphStyle.js","RadiusAndDiameter.js","ShortestPath.js","VerticesDegree.js"];doIncludeAsync(pluginsList.map((plugin)=>include("model/plugins/"+plugin,modulDir)),onFinish);}}
 function getVertexToVertexArray(graph,ignoreDirection)
@@ -1254,7 +1285,7 @@ return;this.app.PushToStack("Delete");this.app.DeleteObject(selectedObject);this
 function DeleteAllHandler(app)
 {BaseHandler.apply(this,arguments);}
 DeleteAllHandler.prototype=Object.create(BaseHandler.prototype);DeleteAllHandler.prototype.clear=function()
-{this.app.PushToStack("DeleteAll");this.app.graph=new Graph();this.app.savedGraphName="";this.needRedraw=true;}
+{this.app.PushToStack("DeleteAll");this.app.CreateNewGraphObject();this.needRedraw=true;}
 doInclude([include("features/base_handler/index.js")])
 function AlgorithmGraphHandler(app,algorithm)
 {BaseHandler.apply(this,arguments);this.algorithm=algorithm;this.SaveUpText();this.UpdateResultAndMessage();}
@@ -1296,6 +1327,77 @@ AlgorithmGraphHandler.prototype.InitControls=function()
 {this.algorithm.messageWasChanged();}
 AlgorithmGraphHandler.prototype.GetMessage=function()
 {return this.algorithm.getMessage(g_language);}
+doInclude([include("features/base_handler/index.js"),include("features/graph_preview/index.js"),])
+function SelectGraphDialog(app,originalGraph,originalGraphStyle,autoSavedGraph,autoSavedGraphStyle,originalCallback,autoSaveCallback)
+{BaseHandler.apply(this,arguments);this.message="";this.originalGraph=originalGraph;this.autoSavedGraph=autoSavedGraph;this.originalCallback=originalCallback;this.autoSaveCallback=autoSaveCallback;this.originalGraphStyle=originalGraphStyle;this.autoSavedGraphStyle=autoSavedGraphStyle;}
+SelectGraphDialog.prototype=Object.create(BaseHandler.prototype);SelectGraphDialog.prototype.show=function()
+{var handler=this;var dialogButtons={};var graph=this.app.graph;var app=this.app;dialogButtons[g_originalGraph]={text:g_originalGraph,class:"MarginLeft",click:function(){handler.originalGraphPreview=null;handler.originalGraph=null;handler.autoSavedGraph=null;handler.originalCallback();$(this).dialog("destroy");}};dialogButtons[g_autoSavedGraph]=function(){handler.originalGraphPreview=null;handler.originalGraph=null;handler.autoSavedGraph=null;handler.autoSaveCallback();$(this).dialog("destroy");};$("#autoSaveOrOriginalGraph").dialog({resizable:false,height:"auto",width:"auto",modal:true,title:g_selectGraphToLoad,buttons:dialogButtons,dialogClass:'EdgeDialog',close:function(event,ui)
+{handler.originalCallback();}});let originalGraphPositionUpdate=function(pos,scale)
+{handler.autoSavedGraphPreview.canvasScale=scale;handler.autoSavedGraphPreview.canvasPosition=pos;handler.autoSavedGraphPreview.redraw();};let autoSavedGraphPreviewUpdate=function(pos,scale)
+{handler.originalGraphPreview.canvasScale=scale;handler.originalGraphPreview.canvasPosition=pos;handler.originalGraphPreview.redraw();};this.originalGraphPreview=new GraphPreview(this.originalGraph,this.originalGraphStyle,document.getElementById("OriginalGraphpPreview"),originalGraphPositionUpdate);this.autoSavedGraphPreview=new GraphPreview(this.autoSavedGraph,this.autoSavedGraphStyle,document.getElementById("AutoSaveGraphpPreview"),autoSavedGraphPreviewUpdate);}
+function GraphPreview(graph,style,canvas,positionUpdateCallback)
+{this.graph=graph;this.style=style;this.canvas=canvas;this.canvasScale=1.0;this.canvasPosition=new Point(0,0);this.prevMousePos=null;this.positionUpdateCallback=positionUpdateCallback;this.AutoAdjustViewport();let canvasParent=canvas.parentNode;let zoomPlusArray=canvasParent.getElementsByClassName("zoom-plus");let preview=this;let one_scale=1.2;let zoomFunc=function(real_scale)
+{let oldRealW=preview.getRealWidth();let oldRealH=preview.getRealHeight();preview.canvasScale=preview.canvasScale*real_scale;let realW=preview.getRealWidth();let realH=preview.getRealHeight();preview.canvasPosition=preview.canvasPosition.add(new Point((-oldRealW+realW)/2,(-oldRealH+realH)/2));preview.redraw();preview.callPositionUpdateCallback();};if(zoomPlusArray.length>0)
+{this.zoomPlusButton=zoomPlusArray[0];this.zoomPlusButton.onclick=function()
+{zoomFunc(one_scale);};}
+let zoomMinusArray=canvasParent.getElementsByClassName("zoom-minus");if(zoomMinusArray.length>0)
+{this.zoomMinusButton=zoomMinusArray[0];this.zoomMinusButton.onclick=function()
+{zoomFunc(1.0/one_scale);};}
+this.canvas.onmousemove=function(e)
+{return preview.CanvasOnMouseMove(e);}
+this.canvas.onmousedown=function(e)
+{return preview.CanvasOnMouseDown(e);}
+this.canvas.onmouseup=function(e)
+{return preview.CanvasOnMouseUp(e);}
+this.canvas.onwheel=function(e)
+{var e=window.event||e;var delta=Math.max(-1,Math.min(1,(e.wheelDelta||-e.detail)));if(delta>0)
+{zoomFunc(one_scale);}
+else
+{zoomFunc(1.0/one_scale);}}
+this.canvas.removeEventListener("touchstart",touchHandler,true);this.canvas.removeEventListener("touchmove",touchHandler,true);this.canvas.removeEventListener("touchend",touchHandler,true);this.canvas.removeEventListener("touchcancel",touchHandler,true);this.canvas.addEventListener("touchstart",touchHandler,true);this.canvas.addEventListener("touchmove",touchHandler,true);this.canvas.addEventListener("touchend",touchHandler,true);this.canvas.addEventListener("touchcancel",touchHandler,true);this.redraw();setTimeout(function()
+{this.redraw();}.bind(this),1000);}
+GraphPreview.prototype.redraw=function()
+{const ctx=this.canvas.getContext("2d");ctx.save();ctx.scale(this.canvasScale,this.canvasScale);ctx.translate(this.canvasPosition.x,this.canvasPosition.y);this.redrawGraph(ctx,this.canvasPosition);ctx.restore();}
+GraphPreview.prototype.getRealWidth=function()
+{return this.canvas.width/this.canvasScale;}
+GraphPreview.prototype.getRealHeight=function()
+{return this.canvas.height/this.canvasScale;}
+GraphPreview.prototype.redrawGraph=function(context,backgroundPosition)
+{var backgroundDrawer=new BaseBackgroundDrawer(context);backgroundDrawer.Draw(this.style.backgroundCommonStyle,Math.max(this.canvas.width,this.getRealWidth()),Math.max(this.canvas.height,this.getRealHeight()),backgroundPosition,this.canvasScale);for(i=0;i<this.graph.edges.length;i++)
+{let edge=this.graph.edges[i];var currentStyle=null;if(edge.hasOwnStyleFor(0))
+currentStyle=edge.getStyleFor(0);else
+currentStyle=this.style.edgeCommonStyle;edge.currentStyle=currentStyle;}
+for(i=0;i<this.graph.vertices.length;i++)
+{var currentStyle=null;let vetrex=this.graph.vertices[i];if(vetrex.hasOwnStyleFor(0))
+currentStyle=vetrex.getStyleFor(0);else
+currentStyle=this.style.vertexCommonStyle;this.graph.vertices[i].currentStyle=currentStyle;}
+for(i=0;i<this.graph.edges.length;i++)
+{let edge=this.graph.edges[i];var arcDrawer=this.GetBaseArcDrawer(context,edge);arcDrawer.Draw(edge,edge.currentStyle.GetStyle({},edge));}
+var graphDrawer=new BaseVertexDrawer(context);for(i=0;i<this.graph.vertices.length;i++)
+{let vertex=this.graph.vertices[i];graphDrawer.Draw(this.graph.vertices[i],vertex.currentStyle.GetStyle({},vertex));}}
+GraphPreview.prototype.GetBaseArcDrawer=function(context,edge)
+{var arcDrawer=new BaseEdgeDrawer(context);if(edge.model.type==EdgeModels.curve)
+{var curvedArcDrawer=new CurvedArcDrawer(context,edge.model);arcDrawer=new BaseEdgeDrawer(context,{drawArc:curvedArcDrawer,startArrowDirection:curvedArcDrawer,finishArrowDirection:curvedArcDrawer,textCenterObject:curvedArcDrawer,getPointOnArc:curvedArcDrawer});}
+return arcDrawer;}
+GraphPreview.prototype.AutoAdjustViewport=function()
+{graphBBox=this.graph.getGraphBBox();bboxCenter=graphBBox.center();bboxSize=graphBBox.size();if(bboxSize.length()>0)
+{if(bboxSize.x>this.getRealWidth()||bboxSize.y>this.getRealHeight())
+{this.canvasScale=Math.min(this.getRealWidth()/bboxSize.x,this.getRealHeight()/bboxSize.y);}
+if(graphBBox.minPoint.x<0.0||graphBBox.minPoint.y<0.0||graphBBox.maxPoint.x>this.getRealWidth()||graphBBox.maxPoint.y>this.getRealHeight())
+{this.canvasPosition=graphBBox.minPoint.inverse();}}}
+GraphPreview.prototype.CanvasOnMouseMove=function(e)
+{if(this.prevMousePos==null)
+{return;}
+var pos=this.getMousePos(this.canvas,e);let newPos=(new Point(pos.x,pos.y)).subtract(this.prevMousePos).multiply(this.canvasScale);this.canvasPosition=this.canvasPosition.add(newPos.multiply(1/this.canvasScale));this.redraw();this.callPositionUpdateCallback();}
+GraphPreview.prototype.CanvasOnMouseDown=function(e)
+{if(e.which!==1)return;var pos=this.getMousePos(this.canvas,e);this.prevMousePos=pos;}
+GraphPreview.prototype.CanvasOnMouseUp=function(e)
+{if(e.which!==1)return;this.prevMousePos=null;}
+GraphPreview.prototype.getMousePos=function(canvas,e)
+{var rect=canvas.getBoundingClientRect();return new Point((e.clientX-rect.left)/this.canvasScale-this.canvasPosition.x,(e.clientY-rect.top)/this.canvasScale-this.canvasPosition.y);}
+GraphPreview.prototype.callPositionUpdateCallback=function()
+{if(this.positionUpdateCallback!=null)
+{this.positionUpdateCallback(this.canvasPosition,this.canvasScale);}}
 {let modulDir="features/serialization/";doInclude([include("model/GraphMLCreator.js",modulDir)])}
 function GraphMLCreator(nodes,arcs,ignoreNodes={})
 {this.nodes=nodes;this.arcs=arcs;this.ignoreNodes=ignoreNodes;}
@@ -1363,10 +1465,10 @@ TextEnumVerticesCustom.prototype.ShowDialog=function(callback,buttonText,titleTi
 var g_textsSelectAndMove="Drag objects";var g_moveCursorForMoving="Move cursor";var g_clickToAddVertex="Click to add vertex";var g_selectFirstVertexToConnect="Select first vertex to connect";var g_selectSecondVertexToConnect="Select second vertex to connect";var g_selectStartVertexForShortPath="Select start vertex for shortest path";var g_selectFinishVertexForShortPath="Select finish vertex for shortest path";var g_shortestPathResult="Shortest path is %d";var g_pathNotExists="Path does not exists";var g_selectObjectToDelete="Select object to delete";var g_addEdge="Add edge";var g_orintEdge="Directed";var g_notOrintEdge="Undirected";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";var g_save_dialog="Save dialog";var g_close="close";var g_sickConnectedComponent="Sick connected component is ";var g_connectedComponent="Connected component is ";var g_what_do_you_think="What do you think about site?";var g_name="Name";var g_feedback="Feedback";var g_send="Send";var g_write_to_us="Write to us";var g_fixMatrix="Fix matrix";var g_readMatrixHelp="Matrix format help";var g_matrixWrongFormat="Matrix is wrong";var g_pairWrongFormat="Edge List is wrong";var g_fix="Fix"
 var g_save_image_dialog="Save graph image";var g_fullReport="Full report";var g_shortReport="Short report";var g_hasEulerianLoop="Graph has Eulerian Loop";var g_hasNotEulerianLoop="Graph has not Eulerian Loop";var g_hasEulerianPath="Graph has Eulerian Path";var g_hasNotEulerianPath="Graph has not Eulerian Path";var g_processing="Processing...";var g_customEnumVertex="Custom";var g_addVertex="Add vertex";var g_renameVertex="Rename vertex";var g_rename="Rename";var g_language="en";var g_editWeight="Edit weight";var g_noWeight="No weight";var g_groupRename="Group rename";var g_vote="Vote";var g_recommendAlgorithm="Recommend algorithm";var g_graphOfMinDist="Graph of minimal distances.";var g_checkToSave="Check to save";var g_showDistMatrix="Show Distance matrix";var g_minDistMatrixText="Minimal distances matrix";var g_selectStartVertexForMaxFlow="Select source vertex for max flow";var g_selectFinishVertexForMaxFlow="Select sink vertex for max flow";var g_maxFlowResult="Maximum flow from %2 to %3 is %1";var g_flowNotExists="Flow from %1 to %2 does not exists";var g_sourceVertex="Source";var g_sinkVertex="Sink";var g_hasHamiltonianLoop="Graph has Hamiltonian Loop";var g_hasNotHamiltonianLoop="Graph has not Hamiltonian Loop";var g_hasHamiltonianPath="Graph has Hamiltonian Path";var g_hasNotHamiltonianPath="Graph has not Hamiltonian Path";var g_startTraversal="Select start traversal vector";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";var g_backgroundStyle="Background style";var g_GraphIsMultiMessage="Graph is multigraph";var g_GraphIsGeneralMessage="";var g_DefaultWeightPreset="no weight";var g_dragGroupText="Drag group.";var g_selectGroupText="Select using ctrl";var g_copyGroupeButton="Duplicate";var g_removeGroupeButton="Remove objects";var g_BFSName="Breadth-first search";var g_ColoringName="Graph coloring";var g_findConnectedComponent="Find connected components";var g_DFSName="Depth-first search";var g_EulerinLoopName="Find Eulerian cycle";var g_EulerinPath="Find Eulerian path";var g_FloidName="Floyd–Warshall algorithm";var g_GraphReorder="Arrange the graph";var g_HamiltoianCycleName="Find Hamiltonian cycle";var g_HamiltonianPath="Find Hamiltonian path";var g_MaxFlowName="Find Maximum flow";var g_minimumSpanningTree="Search of minimum spanning tree";var g_modernGraphStyleName="Visualization based on weight";var g_RadiusAndDiameter="Search graph radius and diameter";var g_findShortPathName="Find shortest path using Dijkstra's algorithm";var g_findShortPathBellmanFordName="Find shortest path using Bellman–Ford algorithm";var g_VerticesDegreeName="Calculate vertices degree";var g_SpanningTreeResult="Min Spanning Tree is";var g_SpanningTreeIgnoreDir="We ignored edges direction for calculation";var g_SpanningTreeNotConnected="Graph is not connected";var g_selectFirstGraphIsomorphismCheck="Select first graph for isomorphic check. Click to any node of graph";var g_selectSecondGraphIsomorphismCheck="Select second graph for isomorphic check. Click to any node of graph";var g_selectFirstGraphPatternCheck="Select a template graph by clicking to any node of graph";var g_selectSecondGraphForSearchSubgraph="Choose a graph in which we will look for isomorphic subgraphs. Click to any node of this graph";var g_graphsIsomorph="Graphs are isomorphic";var g_graphsNotIsomorph="Graphs are not isomorphic";var g_numberOfIsomorphSubgraphIs="Number of isomorphic subgraphs are ";var g_graphHasNoIsomorphSubgraph="Graph don't contain isomorphic subgraphs";var g_searchIsomorphSubgraph="Search isomorphic subgraphs";var g_subgraphNo="Isomorphic subgraph # ";var g_graphHasNoAtleast2Graphs="To use the algorithm, you need to create 2 separate graphs";var g_IsomorphismCheck="Check Graphs Isomorphism";var g_graphIsDisconnected="Graph is disconnected";var g_graphIsTrivial="Graph contains only one vertex";var g_graphRadius="Graph radius";var g_graphDiameter="Graph diameter";var g_vertexCentral="Central";var g_vertexPeripheral="Peripheral";var g_maximumDegreeOfGraph="The maximum degree of a graph is";var g_colorNumber="Color number is";var g_done="Done";var g_action="Action";var g_commonEdgeStyle="Common Edge Style";var g_selectedEdgeStyle="Selected Edge Style";var g_commonVertexStyle="Common Vertex Style";var g_selectedVertexStyle="Selected Vertex Style";var g_findAllPathes="Find all paths";var g_numberOfPathesFrom="Number of paths from "
 var g_to=" to ";var g_are=" are ";var g_pathN="Path #";var g_selectFinishVertex="Select finish vertex";var g_selectStartVertex="Select start vertex";var g_findAllPathesFromVertex="Find all shortest paths from vertex";var g_distanceFrom="Distance from ";var g_pathTo="Path to ";var g_useContextMenuText="Use context menu for addition actions."
-var g_findLongestPath="Find the longest path";var g_LengthOfLongestPathFrom="Length of the longest path from ";var g_additionalActions="Additional actions";var g_reverseAllEdges="Reverse all edges";var g_makeAllUndirected="Make all edges undirected";var g_makeAllDirected="Make all edges directed";var g_reuseSavedEdge="Reuse saved edge";var g_MaxClique="Max Clique";var g_MaxCliqueNotFound="Max Clique is not found";var g_MaxCliqueSizeIs="Max Clique size is ";var g_MaxCliqueContains=". Clique contains these vertecies: ";var g_wrongImageFormatPNGAndJPEG="Wrong image format. We support only JPEG and PNG.";var g_wrongImageSizeP1="Image size is too big. Image size must be less than {0} pixels.";function loadTexts()
+var g_findLongestPath="Find the longest path";var g_LengthOfLongestPathFrom="Length of the longest path from ";var g_additionalActions="Additional actions";var g_reverseAllEdges="Reverse all edges";var g_makeAllUndirected="Make all edges undirected";var g_makeAllDirected="Make all edges directed";var g_reuseSavedEdge="Reuse saved edge";var g_MaxClique="Max Clique";var g_MaxCliqueNotFound="Max Clique is not found";var g_MaxCliqueSizeIs="Max Clique size is ";var g_MaxCliqueContains=". Clique contains these vertecies: ";var g_wrongImageFormatPNGAndJPEG="Wrong image format. We support only JPEG and PNG.";var g_wrongImageSizeP1="Image size is too big. Image size must be less than {0} pixels.";var g_originalGraph="Original graph";var g_autoSavedGraph="Autosaved graph";var g_selectGraphToLoad="Would you like to load original graph or autosaved graph?";function loadTexts()
 {g_textsSelectAndMove=document.getElementById("SelectAndMoveObject").innerHTML;g_moveCursorForMoving=document.getElementById("MoveCursorForMoving").innerHTML;g_clickToAddVertex=document.getElementById("clickToAddVertex").innerHTML;g_selectFirstVertexToConnect=document.getElementById("selectFisrtVertextToConnect").innerHTML;g_selectSecondVertexToConnect=document.getElementById("selectSecondVertextToConnect").innerHTML;g_selectStartVertexForShortPath=document.getElementById("selectStartShortPathVertex").innerHTML;g_selectFinishVertexForShortPath=document.getElementById("selectFinishShortPathVertex").innerHTML;g_shortestPathResult=document.getElementById("shortPathResult").innerHTML;g_pathNotExists=document.getElementById("pathNotExists").innerHTML;g_selectObjectToDelete=document.getElementById("selectObjectToDelete").innerHTML;g_addEdge=document.getElementById("AddEdge").innerHTML;g_orintEdge=document.getElementById("OrintEdge").innerHTML;g_notOrintEdge=document.getElementById("NotOrintdge").innerHTML;g_adjacencyMatrixText=document.getElementById("AdjacencyMatrixText").innerHTML;g_save=document.getElementById("Save").innerHTML;g_cancel=document.getElementById("Cancel").innerHTML;g_shortestDistance=document.getElementById("shortestDist").innerHTML;g_incidenceMatrixText=document.getElementById("IncidenceMatrixText").innerHTML;g_save_dialog=document.getElementById("saveDialogTitle").innerHTML;g_close=document.getElementById("closeButton").innerHTML;g_sickConnectedComponent=document.getElementById("sickConnectedComponentResult").innerHTML;g_connectedComponent=document.getElementById("connectedComponentResult").innerHTML;g_what_do_you_think=document.getElementById("whatDoYouThink").innerHTML;g_name=document.getElementById("name").innerHTML;g_feedback=document.getElementById("feedback").innerHTML;g_send=document.getElementById("send").innerHTML;g_write_to_us=document.getElementById("writeToUs").innerHTML;g_fixMatrix=document.getElementById("fixMatrixButton").innerHTML;g_readMatrixHelp=document.getElementById("matrixHelp").innerHTML;g_matrixWrongFormat=document.getElementById("wronMatrixTitle").innerHTML;g_save_image_dialog=document.getElementById("saveImageDialogTitle").innerHTML;g_fullReport=document.getElementById("fullReport").innerHTML;g_shortReport=document.getElementById("shortReport").innerHTML;g_hasEulerianLoop=document.getElementById("hasEulerianLoop").innerHTML;g_hasNotEulerianLoop=document.getElementById("hasNotEulerianLoop").innerHTML;g_processing=document.getElementById("processing").innerHTML;g_customEnumVertex=document.getElementById("customEnumVertex").innerHTML;g_addVertex=document.getElementById("addVertexText").innerHTML;g_renameVertex=document.getElementById("renameVertex").innerHTML;g_rename=document.getElementById("renameText").innerHTML;g_language=document.getElementById("currentLanguage").innerHTML;g_editWeight=document.getElementById("editWeight").innerHTML;g_noWeight=document.getElementById("noWeight").innerHTML;g_groupRename=document.getElementById("groupeRenameText").innerHTML;g_vote=document.getElementById("voteText").innerHTML;g_recommendAlgorithm=document.getElementById("recommend_algorithm").innerHTML;g_hasEulerianPath=document.getElementById("hasEulerianPath").innerHTML;g_hasNotEulerianPath=document.getElementById("hasNotEulerianPath").innerHTML;g_graphOfMinDist=document.getElementById("graphOfMinDist").innerHTML;g_checkToSave=document.getElementById("checkToSave").innerHTML;g_showDistMatrix=document.getElementById("showDistMatrix").innerHTML;g_minDistMatrixText=document.getElementById("distMatrixText").innerHTML;g_selectStartVertexForMaxFlow=document.getElementById("selectStartVertexForMaxFlow").innerHTML;g_selectFinishVertexForMaxFlow=document.getElementById("selectFinishVertexForMaxFlow").innerHTML;g_maxFlowResult=document.getElementById("maxFlowResult").innerHTML;g_flowNotExists=document.getElementById("flowNotExists").innerHTML;g_sourceVertex=document.getElementById("sourceVertex").innerHTML;g_sinkVertex=document.getElementById("sinkVertex").innerHTML;g_hasHamiltonianLoop=document.getElementById("hasHamiltonianLoop").innerHTML;g_hasNotHamiltonianLoop=document.getElementById("hasNotHamiltonianLoop").innerHTML;g_hasHamiltonianPath=document.getElementById("hasHamiltonianPath").innerHTML;g_hasNotHamiltonianPath=document.getElementById("hasNotHamiltonianPath").innerHTML;g_startTraversal=document.getElementById("startTraversal").innerHTML;g_traversalOrder=document.getElementById("traversalOrder").innerHTML;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;g_backgroundStyle=document.getElementById("backgroundStyle").innerHTML;g_GraphIsMultiMessage=document.getElementById("graphIsLine truncated
 g_selectGroupText=document.getElementById("selectGroupMac").innerHTML;else
-g_selectGroupText=document.getElementById("selectGroupWin").innerHTML;g_dragGroupText=document.getElementById("dragSelectedGroup").innerHTML;g_copyGroupeButton=document.getElementById("copySelectedGroup").innerHTML;g_removeGroupeButton=document.getElementById("removeSelectedGroup").innerHTML;g_BFSName=document.getElementById("BFSName").innerHTML;g_ColoringName=document.getElementById("ColoringName").innerHTML;g_findConnectedComponent=document.getElementById("findConnectedComponent").innerHTML;g_DFSName=document.getElementById("DFSName").innerHTML;g_EulerinLoopName=document.getElementById("EulerinLoopName").innerHTML;g_EulerinPath=document.getElementById("EulerinPath").innerHTML;g_FloidName=document.getElementById("FloidName").innerHTML;g_GraphReorder=document.getElementById("GraphReorder").innerHTML;g_HamiltoianCycleName=document.getElementById("HamiltoianCycleName").innerHTML;g_HamiltonianPath=document.getElementById("HamiltonianPath").innerHTML;g_MaxFlowName=document.getElementById("MaxFlowName").innerHTML;g_minimumSpanningTree=document.getElementById("minimumSpanningTree").innerHTML;g_modernGraphStyleName=document.getElementById("modernGraphStyleName").innerHTML;g_RadiusAndDiameter=document.getElementById("RadiusAndDiameter").innerHTML;g_findShortPathName=document.getElementById("findShortPathName").innerHTML;g_findShortPathBellmanFordName=document.getElementById("findShortPathBellmanFordName").innerHTML;g_VerticesDegreeName=document.getElementById("VerticesDegreeName").innerHTML;g_SpanningTreeResult=document.getElementById("MinSpanningTreeResult").innerHTML;g_SpanningTreeIgnoreDir=document.getElementById("MinSpanningIgnoreDir").innerHTML;g_SpanningTreeNotConnected=document.getElementById("MinSpanningNotConnected").innerHTML;g_selectFirstGraphIsomorphismCheck=document.getElementById("SelectFirstGraphIsomorphismCheck").innerHTML;g_selectSecondGraphIsomorphismCheck=document.getElementById("SelectSecondGraphIsomorphismCheck").innerHTML;g_selectFirstGraphPatternCheck=document.getElementById("SelectFirstGraphPatternCheck").innerHTML;g_selectSecondGraphForSearchSubgraph=document.getElementById("SelectSecondGraphForSearchSubgraph").innerHTML;g_graphsIsomorph=document.getElementById("GraphsIsomorph").innerHTML;g_graphsNotIsomorph=document.getElementById("GraphsNotIsomorph").innerHTML;g_numberOfIsomorphSubgraphIs=document.getElementById("NumberOfIsomorphSubgraphIs").innerHTML;g_graphHasNoIsomorphSubgraph=document.getElementById("GraphHasNoIsomorphSubgraph").innerHTML;g_searchIsomorphSubgraph=document.getElementById("SearchIsomorphSubgraph").innerHTML;g_subgraphNo=document.getElementById("SubgraphNo").innerHTML;g_graphHasNoAtleast2Graphs=document.getElementById("GraphHasNoAtleast2Graphs").innerHTML;g_IsomorphismCheck=document.getElementById("IsomorphismCheck").innerHTML;g_graphIsDisconnected=document.getElementById("GraphIsDisconnected").innerHTML;g_graphIsTrivial=document.getElementById("GraphIsTrivial").innerHTML;g_graphRadius=document.getElementById("GraphRadius").innerHTML;g_graphDiameter=document.getElementById("GraphDiameter").innerHTML;g_vertexCentral=document.getElementById("VertexCentral").innerHTML;g_vertexPeripheral=document.getElementById("VertexPeripheral").innerHTML;g_maximumDegreeOfGraph=document.getElementById("MaximumDegreeOfGraph").innerHTML;g_colorNumber=document.getElementById("ColorNumber").innerHTML;g_done=document.getElementById("Done").innerHTML;g_action=document.getElementById("ActionText").innerHTML;g_commonEdgeStyle=document.getElementById("CommonEdgeStyleText").innerHTML;g_selectedEdgeStyle=document.getElementById("SelectedEdgeStyleText").innerHTML;g_commonVertexStyle=document.getElementById("CommonVertexStyleText").innerHTML;g_selectedVertexStyle=document.getElementById("SelectedVertexStyleText").innerHTML;g_findAllPathes=document.getElementById("FindAllPathes").innerHTML;g_numberOfPathesFrom=document.getElementById("NumberOfPathesFrom").innerHTML;g_to=document.getElementById("To").innerHTML;g_are=document.getElementById("Are").innerHTML;g_pathN=document.getElementById("PathN").innerHTML;g_selectFinishVertex=document.getElementById("SelectFinishVertex").innerHTML;g_selectStartVertex=document.getElementById("SelectStartVertex").innerHTML;g_findAllPathesFromVertex=document.getElementById("findAllPathsFromVertex").innerHTML;g_distanceFrom=document.getElementById("distanceFrom").innerHTML;g_pathTo=document.getElementById("pathTo").innerHTML;g_useContextMenuText=document.getElementById("UseContextMenuText").innerHTML;g_findLongestPath=document.getElementById("findLongestPath").innerHTML;g_LengthOfLongestPathFrom=document.getElementById("LengthOfLongestPathFrom").innerHTML;g_additionalActions=document.getElementById("additionlActions").innerHTML;g_reverseAllEdges=document.getElementById("reverseAllEdges").innerHTML;g_makeAllUndirected=document.getElementById("makeAllUndirected").innerHTML;g_makeAllDirected=document.getElementById("makeAllDirected").innerHTML;g_pairWrongFormat=document.getElLine truncated
+g_selectGroupText=document.getElementById("selectGroupWin").innerHTML;g_dragGroupText=document.getElementById("dragSelectedGroup").innerHTML;g_copyGroupeButton=document.getElementById("copySelectedGroup").innerHTML;g_removeGroupeButton=document.getElementById("removeSelectedGroup").innerHTML;g_BFSName=document.getElementById("BFSName").innerHTML;g_ColoringName=document.getElementById("ColoringName").innerHTML;g_findConnectedComponent=document.getElementById("findConnectedComponent").innerHTML;g_DFSName=document.getElementById("DFSName").innerHTML;g_EulerinLoopName=document.getElementById("EulerinLoopName").innerHTML;g_EulerinPath=document.getElementById("EulerinPath").innerHTML;g_FloidName=document.getElementById("FloidName").innerHTML;g_GraphReorder=document.getElementById("GraphReorder").innerHTML;g_HamiltoianCycleName=document.getElementById("HamiltoianCycleName").innerHTML;g_HamiltonianPath=document.getElementById("HamiltonianPath").innerHTML;g_MaxFlowName=document.getElementById("MaxFlowName").innerHTML;g_minimumSpanningTree=document.getElementById("minimumSpanningTree").innerHTML;g_modernGraphStyleName=document.getElementById("modernGraphStyleName").innerHTML;g_RadiusAndDiameter=document.getElementById("RadiusAndDiameter").innerHTML;g_findShortPathName=document.getElementById("findShortPathName").innerHTML;g_findShortPathBellmanFordName=document.getElementById("findShortPathBellmanFordName").innerHTML;g_VerticesDegreeName=document.getElementById("VerticesDegreeName").innerHTML;g_SpanningTreeResult=document.getElementById("MinSpanningTreeResult").innerHTML;g_SpanningTreeIgnoreDir=document.getElementById("MinSpanningIgnoreDir").innerHTML;g_SpanningTreeNotConnected=document.getElementById("MinSpanningNotConnected").innerHTML;g_selectFirstGraphIsomorphismCheck=document.getElementById("SelectFirstGraphIsomorphismCheck").innerHTML;g_selectSecondGraphIsomorphismCheck=document.getElementById("SelectSecondGraphIsomorphismCheck").innerHTML;g_selectFirstGraphPatternCheck=document.getElementById("SelectFirstGraphPatternCheck").innerHTML;g_selectSecondGraphForSearchSubgraph=document.getElementById("SelectSecondGraphForSearchSubgraph").innerHTML;g_graphsIsomorph=document.getElementById("GraphsIsomorph").innerHTML;g_graphsNotIsomorph=document.getElementById("GraphsNotIsomorph").innerHTML;g_numberOfIsomorphSubgraphIs=document.getElementById("NumberOfIsomorphSubgraphIs").innerHTML;g_graphHasNoIsomorphSubgraph=document.getElementById("GraphHasNoIsomorphSubgraph").innerHTML;g_searchIsomorphSubgraph=document.getElementById("SearchIsomorphSubgraph").innerHTML;g_subgraphNo=document.getElementById("SubgraphNo").innerHTML;g_graphHasNoAtleast2Graphs=document.getElementById("GraphHasNoAtleast2Graphs").innerHTML;g_IsomorphismCheck=document.getElementById("IsomorphismCheck").innerHTML;g_graphIsDisconnected=document.getElementById("GraphIsDisconnected").innerHTML;g_graphIsTrivial=document.getElementById("GraphIsTrivial").innerHTML;g_graphRadius=document.getElementById("GraphRadius").innerHTML;g_graphDiameter=document.getElementById("GraphDiameter").innerHTML;g_vertexCentral=document.getElementById("VertexCentral").innerHTML;g_vertexPeripheral=document.getElementById("VertexPeripheral").innerHTML;g_maximumDegreeOfGraph=document.getElementById("MaximumDegreeOfGraph").innerHTML;g_colorNumber=document.getElementById("ColorNumber").innerHTML;g_done=document.getElementById("Done").innerHTML;g_action=document.getElementById("ActionText").innerHTML;g_commonEdgeStyle=document.getElementById("CommonEdgeStyleText").innerHTML;g_selectedEdgeStyle=document.getElementById("SelectedEdgeStyleText").innerHTML;g_commonVertexStyle=document.getElementById("CommonVertexStyleText").innerHTML;g_selectedVertexStyle=document.getElementById("SelectedVertexStyleText").innerHTML;g_findAllPathes=document.getElementById("FindAllPathes").innerHTML;g_numberOfPathesFrom=document.getElementById("NumberOfPathesFrom").innerHTML;g_to=document.getElementById("To").innerHTML;g_are=document.getElementById("Are").innerHTML;g_pathN=document.getElementById("PathN").innerHTML;g_selectFinishVertex=document.getElementById("SelectFinishVertex").innerHTML;g_selectStartVertex=document.getElementById("SelectStartVertex").innerHTML;g_findAllPathesFromVertex=document.getElementById("findAllPathsFromVertex").innerHTML;g_distanceFrom=document.getElementById("distanceFrom").innerHTML;g_pathTo=document.getElementById("pathTo").innerHTML;g_useContextMenuText=document.getElementById("UseContextMenuText").innerHTML;g_findLongestPath=document.getElementById("findLongestPath").innerHTML;g_LengthOfLongestPathFrom=document.getElementById("LengthOfLongestPathFrom").innerHTML;g_additionalActions=document.getElementById("additionlActions").innerHTML;g_reverseAllEdges=document.getElementById("reverseAllEdges").innerHTML;g_makeAllUndirected=document.getElementById("makeAllUndirected").innerHTML;g_makeAllDirected=document.getElementById("makeAllDirected").innerHTML;g_pairWrongFormat=document.getElLine truncated
 function UndoStack(maxUndoStackSize){this.undoStack=[];this.maxUndoStackSize=maxUndoStackSize;}
 UndoStack.prototype.PushToStack=function(actionName,dataToSave)
 {var object={};object.actionName=actionName;object.data=dataToSave;this.undoStack.push(object);while(this.undoStack.length>this.maxUndoStackSize)
@@ -1393,8 +1495,8 @@ DiskSaveLoad.LoadAutoSaveGraphFromDisk=function(graphName,callback)
 DiskSaveLoad.RemoveAutoSaveGraphFromDisk=function(graphName,callback)
 {$.ajax({type:"GET",url:"/"+SiteDir+"backend/removeGraph.php?name=autosave_"+graphName}).done(callback);}
 var globalApplication=null;function Application(document,window,listener)
-{this.document=document;this.listener=listener;this.canvas=this.document.getElementById('canvas');this.handler=new DefaultHandler(this);this.savedGraphName="";this.currentEnumVerticesType=new BaseEnumVertices(this,1);this.findPathReport=1;this.isTimerRender=false;globalApplication=this;this.renderPath=[];this.renderTimer=0;this.renderPathLength=0;this.renderPathCounter=0;this.renderPathLoops=0;this.enumVerticesTextList=[new BaseEnumVertices(this,1),new BaseEnumVertices(this,0),new TextEnumVertices(this),new TextEnumVerticesCyr(this),new TextEnumVerticesGreek(this),new TextEnumVerticesCustom(this)];this.SetDefaultTransformations();this.algorithmsValues={};this.undoStack=new UndoStack(this.maxUndoStackSize);this.edgeCommonStyle=new CommonEdgeStyle();this.isEdgeCommonStyleCustom=false;this.edgeSelectedStyles=FullArrayCopy(DefaultSelectedEdgeStyles);this.isEdgeSelectedStylesCustom=false;this.edgePrintCommonStyle=new CommonPrintEdgeStyle();this.edgePrintSelectedStyles=FullArrayCopy(DefaultPrintSelectedEdgeStyles);this.vertexCommonStyle=new CommonVertexStyle();this.isVertexCommonStyleCustom=false;this.vertexSelectedVertexStyles=FullArrayCopy(DefaultSelectedGraphStyles);this.isVertexSelectedVertexStylesCustom=false;this.vertexPrintCommonStyle=new CommonPrintVertexStyle();this.vertexPrintSelectedVertexStyles=FullArrayCopy(DefaultPrintSelectedGraphStyles);this.backgroundCommonStyle=new CommonBackgroundStyle();this.backgroundPrintStyle=new PrintBackgroundStyle();this.isBackgroundCommonStyleCustom=false;this.renderPathWithEdges=false;this.edgePresets=[1,3,5,7,11,42];this.maxEdgePresets=6;this.selectionRect=null;this.defaultVertexSize=null;this.defaultEdgeWidth=null;this.processEmscriptenFunction=null;this.defaultEdge=null;this.useDefaultEdge=false;this.lastSavedAutoSave="";setInterval(function()
-{var graphXML=this.graph.SaveToXML(this.SaveUserSettings());this.saveAutoSave(graphXML);}.bind(this),this.autosaveTimeInterval);};Application.prototype.graph=new Graph();Application.prototype.dragObject=-1;Application.prototype.handler=null;Application.prototype.status={};Application.prototype.graphNameLength=16;Application.prototype.maxUndoStackSize=8;Application.prototype.maxAutosaveSizeForCookie=2000;Application.prototype.autosaveTimeInterval=1000*60;Application.prototype.getMousePos=function(canvas,e)
+{this.document=document;this.listener=listener;this.canvas=this.document.getElementById('canvas');this.handler=new DefaultHandler(this);this.savedGraphName="";this.currentEnumVerticesType=new BaseEnumVertices(this,1);this.findPathReport=1;this.isTimerRender=false;globalApplication=this;this.renderPath=[];this.renderTimer=0;this.renderPathLength=0;this.renderPathCounter=0;this.renderPathLoops=0;this.enumVerticesTextList=[new BaseEnumVertices(this,1),new BaseEnumVertices(this,0),new TextEnumVertices(this),new TextEnumVerticesCyr(this),new TextEnumVerticesGreek(this),new TextEnumVerticesCustom(this)];this.SetDefaultTransformations();this.algorithmsValues={};this.undoStack=new UndoStack(this.maxUndoStackSize);this.style=new GraphFullStyle(function()
+{this.redrawGraph();}.bind(this));this.edgePrintCommonStyle=new CommonPrintEdgeStyle();this.edgePrintSelectedStyles=FullArrayCopy(DefaultPrintSelectedEdgeStyles);this.vertexPrintCommonStyle=new CommonPrintVertexStyle();this.vertexPrintSelectedVertexStyles=FullArrayCopy(DefaultPrintSelectedGraphStyles);this.backgroundPrintStyle=new PrintBackgroundStyle();this.renderPathWithEdges=false;this.edgePresets=[1,3,5,7,11,42];this.maxEdgePresets=6;this.selectionRect=null;this.processEmscriptenFunction=null;this.defaultEdge=null;this.useDefaultEdge=false;this.lastSavedAutoSave="";this.lastGraphName="";};Application.prototype.graph=new Graph();Application.prototype.dragObject=-1;Application.prototype.handler=null;Application.prototype.status={};Application.prototype.graphNameLength=16;Application.prototype.maxUndoStackSize=8;Application.prototype.maxAutosaveSizeForCookie=2000;Application.prototype.autosaveTimeInterval=1000*60;Application.prototype.styliedGraphNamePostfix="ZZcst";Application.prototype.getMousePos=function(canvas,e)
 {var rect=canvas.getBoundingClientRect();return{x:(e.clientX-rect.left)/this.canvasScale-this.canvasPosition.x,y:(e.clientY-rect.top)/this.canvasScale-this.canvasPosition.y};}
 Application.prototype.redrawGraph=function()
 {if(!this.isTimerRender)
@@ -1425,13 +1527,13 @@ var progress=(this.renderPathCounter-currentLength)/edge.GetPixelLength();this.R
 if(this.renderPathLoops>=5)
 {this.stopRenderTimer();}}
 Application.prototype._redrawGraphInWindow=function()
-{var context=this.canvas.getContext('2d');context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,this.canvasPosition,this.backgroundCommonStyle,true);context.restore();return context;}
+{var context=this.canvas.getContext('2d');context.save();context.scale(this.canvasScale,this.canvasScale);context.translate(this.canvasPosition.x,this.canvasPosition.y);this._RedrawGraph(context,this.canvasPosition,this.style.backgroundCommonStyle,true);context.restore();return context;}
 Application.prototype._OffscreenRedrawGraph=function()
-{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.backgroundCommonStyle,false);context.restore();return canvas;}
+{var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return canvas;}
 Application.prototype._PrintRedrawGraph=function()
 {var bbox=this.graph.getGraphBBox();var canvas=document.createElement('canvas');canvas.width=bbox.size().x;canvas.height=bbox.size().y;var context=canvas.getContext('2d');context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.backgroundPrintStyle,false,this.vertexPrintCommonStyle,this.vertexPrintSelectedVertexStyles,this.edgePrintCommonStyle,this.edgePrintSelectedStyles);context.restore();return canvas;}
 Application.prototype._printToSVG=function()
-{var bbox=this.graph.getGraphBBox();var context=new C2S(bbox.size().x,bbox.size().y);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.backgroundCommonStyle,false);context.restore();return context.getSerializedSvg();}
+{var bbox=this.graph.getGraphBBox();var context=new C2S(bbox.size().x,bbox.size().y);context.save();context.translate(bbox.minPoint.inverse().x,bbox.minPoint.inverse().y);this._RedrawGraph(context,bbox.minPoint.inverse(),this.style.backgroundCommonStyle,false);context.restore();return context.getSerializedSvg();}
 Application.prototype.updateRenderPathLength=function()
 {this.renderPathLength=0;this.renderPathCounter=0;if(this.renderPath.length>1)
 {for(var i=0;i<this.renderPath.length-1;i++)
@@ -1460,7 +1562,7 @@ Application.prototype.GetBaseArcDrawer=function(context,edge)
 {var curvedArcDrawer=new CurvedArcDrawer(context,edge.model);arcDrawer=new BaseEdgeDrawer(context,{drawArc:curvedArcDrawer,startArrowDirection:curvedArcDrawer,finishArrowDirection:curvedArcDrawer,textCenterObject:curvedArcDrawer,getPointOnArc:curvedArcDrawer});}
 return arcDrawer;}
 Application.prototype.UpdateEdgeCurrentStyle=function(edge,ForceCommonStyle,ForceSelectedStyle)
-{var commonStyle=(ForceCommonStyle===undefined)?this.edgeCommonStyle:ForceCommonStyle;var selectedStyle=(ForceSelectedStyle===undefined)?this.edgeSelectedStyles:ForceSelectedStyle;var selectedGroup=this.handler.GetSelectedGroup(edge);var selected=false;if(selectedGroup>0)
+{var commonStyle=(ForceCommonStyle===undefined)?this.style.edgeCommonStyle:ForceCommonStyle;var selectedStyle=(ForceSelectedStyle===undefined)?this.style.edgeSelectedStyles:ForceSelectedStyle;var selectedGroup=this.handler.GetSelectedGroup(edge);var selected=false;if(selectedGroup>0)
 {selectedGroup=(selectedGroup-1)%selectedStyle.length;selected=true;}
 var currentStyle=null;if(edge.hasOwnStyleFor((selected?1:0)+selectedGroup))
 currentStyle=edge.getStyleFor((selected?1:0)+selectedGroup);else
@@ -1473,7 +1575,7 @@ Application.prototype._RedrawEdge=function(edge,arcDrawer,commonStyle,selectedSt
 Application.prototype._RedrawEdgeWithStyle=function(edge,style,arcDrawer,commonStyle,selectedStyles)
 {arcDrawer.Draw(edge,style.GetStyle({},edge));}
 Application.prototype.RedrawEdgeProgress=function(context,edge,progress)
-{var progressDraw=new ProgressArcDrawer(context,this.GetBaseArcDrawer(context,edge),progress);var arcDrawer=new BaseEdgeDrawer(context,{drawObject:progressDraw});this._RedrawEdge(edge,arcDrawer,this.edgeCommonStyle,this.edgeSelectedStyles);}
+{var progressDraw=new ProgressArcDrawer(context,this.GetBaseArcDrawer(context,edge),progress);var arcDrawer=new BaseEdgeDrawer(context,{drawObject:progressDraw});this._RedrawEdge(edge,arcDrawer,this.style.edgeCommonStyle,this.style.edgeSelectedStyles);}
 Application.prototype.UpdateEdgesCurrentStyle=function(ForceCommonStyle,ForceSelectedStyle)
 {for(i=0;i<this.graph.edges.length;i++)
 {this.UpdateEdgeCurrentStyle(this.graph.edges[i],ForceCommonStyle,ForceSelectedStyle);}}
@@ -1484,14 +1586,14 @@ Application.prototype.RedrawNodes=function(context)
 {var graphDrawer=new BaseVertexDrawer(context);for(i=0;i<this.graph.vertices.length;i++)
 {graphDrawer.Draw(this.graph.vertices[i],this.graph.vertices[i].currentStyle.GetStyle({},this.graph.vertices[i]));}}
 Application.prototype.UpdateNodesCurrentStyle=function(ForceCommonStyle,ForceSelectedStyle)
-{var force=ForceCommonStyle!==undefined||ForceSelectedStyle!==undefined;var commonStyle=(ForceCommonStyle===undefined)?this.vertexCommonStyle:ForceCommonStyle;var selectedStyle=(ForceSelectedStyle===undefined)?this.vertexSelectedVertexStyles:ForceSelectedStyle;for(i=0;i<this.graph.vertices.length;i++)
+{var force=ForceCommonStyle!==undefined||ForceSelectedStyle!==undefined;var commonStyle=(ForceCommonStyle===undefined)?this.style.vertexCommonStyle:ForceCommonStyle;var selectedStyle=(ForceSelectedStyle===undefined)?this.style.vertexSelectedVertexStyles:ForceSelectedStyle;for(i=0;i<this.graph.vertices.length;i++)
 {var selectedGroup=this.handler.GetSelectedGroup(this.graph.vertices[i]);var selected=false;if(selectedGroup>0)
 {selectedGroup=(selectedGroup-1)%selectedStyle.length;selected=true;}
 var currentStyle=null;if(this.graph.vertices[i].hasOwnStyleFor((selected?1:0)+selectedGroup)&&!force)
 currentStyle=this.graph.vertices[i].getStyleFor((selected?1:0)+selectedGroup);else
 currentStyle=selected?selectedStyle[selectedGroup]:commonStyle;this.graph.vertices[i].currentStyle=currentStyle;}}
 Application.prototype.RedrawSelectionRect=function(context)
-{context.lineWidth=1.0/this.canvasScale;context.strokeStyle=this.edgeSelectedStyles[0].strokeStyle;context.setLineDash([6,3]);context.beginPath();context.rect(this.selectionRect.left(),this.selectionRect.top(),this.selectionRect.size().x,this.selectionRect.size().y);context.closePath();context.stroke();context.setLineDash([]);}
+{context.lineWidth=1.0/this.canvasScale;context.strokeStyle=this.style.edgeSelectedStyles[0].strokeStyle;context.setLineDash([6,3]);context.beginPath();context.rect(this.selectionRect.left(),this.selectionRect.top(),this.selectionRect.size().x,this.selectionRect.size().y);context.closePath();context.stroke();context.setLineDash([]);}
 Application.prototype.updateMessage=function()
 {this.listener.updateMessage(this.handler.GetMessage());this.handler.InitControls();}
 Application.prototype.CanvasOnMouseMove=function(e)
@@ -1558,7 +1660,7 @@ Application.prototype.ToDefaultStateAndRedraw=function()
 Application.prototype.getParameterByName=function(name)
 {name=name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex=new RegExp("[\\?&]"+name+"=([^&#]*)"),results=regex.exec(location.search);return results===null?"":decodeURIComponent(results[1].replace(/\+/g," "));}
 Application.prototype.onPostLoadEvent=function()
-{this.SetEnumVerticesType(document.cookie.replace(/(?:(?:^|.*;\s*)enumType\s*\=\s*([^;]*).*$)|^.*$/,"$1"));var wasLoad=false;var matrix=document.getElementById("inputMatrix").innerHTML;var separator=document.getElementById("separator").innerHTML=="space"?" ":",";console.log(matrix);console.log("separator: \""+separator+"\"");matrix=(matrix.length<=0)?this.getParameterByName("matrix"):matrix;if(matrix.length>0)
+{this.SetEnumVerticesType(document.cookie.replace(/(?:(?:^|.*;\s*)enumType\s*\=\s*([^;]*).*$)|^.*$/,"$1"));var wasLoad=false;let startAutoSave=true;var matrix=document.getElementById("inputMatrix").innerHTML;var separator=document.getElementById("separator").innerHTML=="space"?" ":",";console.log(matrix);console.log("separator: \""+separator+"\"");matrix=(matrix.length<=0)?this.getParameterByName("matrix"):matrix;if(matrix.length>0)
 {if(!this.SetAdjacencyMatrixSmart(matrix,separator))
 {userAction("AdjacencyMatrix.Failed");this.listener.ShowAdjacencyMatrixErrorDialog(matrix);}
 else
@@ -1582,9 +1684,13 @@ if(!wasLoad)
 if(!is_user_graph&&this.hasAutoSave())
 {userAction("LoadGraphFromAutoSave");this.loadAutoSave();}
 else if(graphName.length>0)
-{userAction("LoadGraphFromDisk");this.LoadGraphFromDisk(graphName);}}
+{if(this.getAutoSaveRefGraphCookie()==graphName)
+{this.showSelectGraphDialog(graphName);console.log("Show select graph dialog");startAutoSave=false;}
+else
+{userAction("LoadGraphFromDisk");this.LoadGraphFromDisk(graphName);}}}
 if(this.undoStack.IsUndoStackEmpty())
-document.getElementById('GraphUndo').style.display='none';this.updateMessage();this.redrawGraph();}
+document.getElementById('GraphUndo').style.display='none';this.updateMessage();this.redrawGraph();if(startAutoSave)
+{this.startAutoSaveTimer();}}
 Application.prototype.onLoad=function()
 {this.canvas=this.document.getElementById('canvas');this.SetDefaultHandler()
 this.updateMessage();this.redrawGraph();}
@@ -1650,7 +1756,7 @@ Application.prototype.SaveGraphOnDisk=function()
 {var graphAsString=this.graph.SaveToXML(this.SaveUserSettings());var app=this;if(this.savedGraphName.length<=0)
 {this.savedGraphName=this.GetNewGraphName();}
 DiskSaveLoad.SaveGraphOnDisk(this.savedGraphName,graphAsString,function(msg)
-{document.cookie="graphName="+app.savedGraphName;app.removeAutosave();});}
+{document.cookie="graphName="+app.savedGraphName;app.removeAutosave();app.lastGraphName=app.savedGraphName;});}
 Application.prototype.SaveGraphImageOnDisk=function(showDialogCallback)
 {var imageName=this.GetNewName();this.stopRenderTimer();this.redrawGraph();var bbox=this.graph.getGraphBBox();var rectParams="";if(this.IsGraphFitOnViewport())
 {var canvasWidth=this.GetRealWidth();var canvasHeight=this.GetRealHeight();var canvasPositionInverse=this.canvasPosition.inverse();var pos=bbox.minPoint.subtract(canvasPositionInverse);rectParams="&x="+Math.round(pos.x*this.canvasScale)+"&y="+Math.round(pos.y*this.canvasScale)
@@ -1665,12 +1771,14 @@ Application.prototype.LoadGraphFromString=function(str)
 this.LoadUserSettings(userSettings["data"]);this.SetDefaultTransformations();this.graph=graph;if(this.graph.isNeedReposition())
 {this.graph.VerticesReposition(new Point(this.GetRealWidth(),this.GetRealHeight()),this.graph.vertices);}
 this.AutoAdjustViewport();this.updateMessage();this.redrawGraph();}
+Application.prototype.LoadNewGraphFromString=function(str)
+{this.LoadGraphFromString(str);this.lastGraphName="";}
 Application.prototype.LoadGraphFromDisk=function(graphName)
 {var app=this;DiskSaveLoad.LoadGraphFromDisk(graphName,function(msg)
-{app.LoadGraphFromString(msg);app.removeAutosave();});}
+{app.LoadGraphFromString(msg);app.removeAutosave();app.lastGraphName=graphName;});}
 Application.prototype.GetNewGraphName=function()
-{var name=this.GetNewName();if(this.isVertexCommonStyleCustom||this.isVertexSelectedVertexStylesCustom||this.isBackgroundCommonStyleCustom||this.isEdgeCommonStyleCustom||this.isEdgeSelectedStylesCustom)
-{name=name+"ZZcst";}
+{var name=this.GetNewName();if(this.style.isVertexCommonStyleCustom||this.style.isVertexSelectedVertexStylesCustom||this.style.isBackgroundCommonStyleCustom||this.style.isEdgeCommonStyleCustom||this.style.isEdgeSelectedStylesCustom)
+{name=name+this.styliedGraphNamePostfix;}
 return name;}
 Application.prototype.GetNewName=function()
 {var name="";var possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(var i=0;i<this.graphNameLength;i++)
@@ -1730,56 +1838,33 @@ return;this.graph=new Graph();var userSettings={};this.graph.LoadFromXML(data,us
 this.LoadUserSettings(userSettings["data"]);this.redrawGraph();if(this.undoStack.IsUndoStackEmpty())
 document.getElementById('GraphUndo').style.display='none';}
 Application.prototype.SaveUserSettings=function()
-{var res="{";var needEnd=false;var checkValue=[];checkValue.push({field:"edgeCommonStyle",value:this.edgeCommonStyle,check:this.isEdgeCommonStyleCustom});checkValue.push({field:"edgeSelectedStyles",value:this.edgeSelectedStyles,check:this.isEdgeSelectedStylesCustom});checkValue.push({field:"vertexCommonStyle",value:this.vertexCommonStyle,check:this.isVertexCommonStyleCustom});checkValue.push({field:"vertexSelectedVertexStyles",value:this.vertexSelectedVertexStyles,check:this.isVertexSelectedVertexStylesCustom});checkValue.push({field:"backgroundCommonStyle",value:this.backgroundCommonStyle,check:this.isBackgroundCommonStyleCustom});checkValue.push({field:"defaultVertexSize",value:this.defaultVertexSize,check:this.defaultVertexSize!=null});checkValue.push({field:"defaultEdgeWidth",value:this.defaultEdgeWidth,check:this.defaultEdgeWidth!=null});checkValue.forEach(function(entry){if(!entry.check)
-return;if(needEnd)
-res=res+",";let valueJson="";if(typeof entry.value.saveToJson==="function"){valueJson=entry.value.saveToJson();}else{valueJson=JSON.stringify(entry.value);}
-res=res+"\""+entry.field+"\""+":"+valueJson;needEnd=true;});res=res+"}";return this.EncodeToHTML(res);}
+{return"{"+this.style.Save()+"}";}
 Application.prototype.LoadUserSettings=function(json)
-{var checkValue=[];checkValue.push({field:"edgeCommonStyle",value:this.edgeCommonStyle,check:"isEdgeCommonStyleCustom",deep:false});checkValue.push({field:"edgeSelectedStyles",value:this.edgeSelectedStyles,check:"isEdgeSelectedStylesCustom",deep:true});checkValue.push({field:"vertexCommonStyle",value:this.vertexCommonStyle,check:"isVertexCommonStyleCustom",deep:false});checkValue.push({field:"vertexSelectedVertexStyles",value:this.vertexSelectedVertexStyles,check:"isVertexSelectedVertexStylesCustom",deep:true});checkValue.push({field:"defaultVertexSize",value:"defaultVertexSize",check:null,deep:false});checkValue.push({field:"defaultEdgeWidth",value:"defaultEdgeWidth",check:null,deep:false});checkValue.push({field:"backgroundCommonStyle",value:this.backgroundCommonStyle,check:this.isBackgroundCommonStyleCustom,deep:false});var decoderStr=this.DecodeFromHTML(json);var parsedSave=JSON.parse(decoderStr);var app=this;checkValue.forEach(function(entry){if(parsedSave.hasOwnProperty(entry.field))
-{if(typeof parsedSave[entry.field]==='number')
-{app[entry.value]=parseInt(parsedSave[entry.field]);}
-else
-{if(typeof entry.value.loadFromJson==="function"){entry.value.loadFromJson(parsedSave[entry.field],function(){setTimeout(function(){app.redrawGraph()},1000);});return;}
-if(!entry.deep)
-entry.value.Clear();for(var k in parsedSave[entry.field])
-{if(!entry.deep)
-{if(entry.value.ShouldLoad(k))
-{entry.value[k]=parsedSave[entry.field][k];}}
-else
-{if(k%1!=0)
-continue;entry.value[k].Clear();for(var deepK in parsedSave[entry.field][k])
-{if(k<entry.value.length&&entry.value[k].ShouldLoad(deepK))
-entry.value[k][deepK]=parsedSave[entry.field][k][deepK];}}}}
-if(entry.check!=null)
-app[entry.check]=true;}});}
-Application.prototype.EncodeToHTML=function(str)
-{return gEncodeToHTML(str);}
-Application.prototype.DecodeFromHTML=function(str)
-{return gDecodeFromHTML(str);}
+{this.style.Load(json);}
 Application.prototype.SetVertexStyle=function(index,style)
 {if(index==0)
-{this.vertexCommonStyle=style;this.isVertexCommonStyleCustom=true;}
+{this.style.vertexCommonStyle=style;this.style.isVertexCommonStyleCustom=true;}
 else
-{this.vertexSelectedVertexStyles[index-1]=style;this.isVertexSelectedVertexStylesCustom=true;}}
+{this.style.vertexSelectedVertexStyles[index-1]=style;this.style.isVertexSelectedVertexStylesCustom=true;}}
 Application.prototype.ResetVertexStyle=function(index)
 {if(index==0)
-{this.vertexCommonStyle=new CommonVertexStyle();this.isVertexCommonStyleCustom=false;}
+{this.style.vertexCommonStyle=new CommonVertexStyle();this.style.isVertexCommonStyleCustom=false;}
 else
-{this.vertexSelectedVertexStyles=FullArrayCopy(DefaultSelectedGraphStyles);this.isVertexSelectedVertexStylesCustom=false;}}
+{this.style.vertexSelectedVertexStyles=FullArrayCopy(DefaultSelectedGraphStyles);this.style.isVertexSelectedVertexStylesCustom=false;}}
 Application.prototype.SetEdgeStyle=function(index,style)
 {if(index==0)
-{this.edgeCommonStyle=style;this.isEdgeCommonStyleCustom=true;}
+{this.style.edgeCommonStyle=style;this.style.isEdgeCommonStyleCustom=true;}
 else
-{this.edgeSelectedStyles[index-1]=style;this.isEdgeSelectedStylesCustom=true;}}
+{this.style.edgeSelectedStyles[index-1]=style;this.style.isEdgeSelectedStylesCustom=true;}}
 Application.prototype.ResetEdgeStyle=function(index)
 {if(index==0)
-{this.edgeCommonStyle=new CommonEdgeStyle();this.isEdgeCommonStyleCustom=false;}
+{this.style.edgeCommonStyle=new CommonEdgeStyle();this.style.isEdgeCommonStyleCustom=false;}
 else
-{this.edgeSelectedStyles=FullArrayCopy(DefaultSelectedEdgeStyles);this.isEdgeSelectedStylesCustom=false;}}
+{this.style.edgeSelectedStyles=FullArrayCopy(DefaultSelectedEdgeStyles);this.style.isEdgeSelectedStylesCustom=false;}}
 Application.prototype.SetBackgroundStyle=function(style)
-{this.backgroundCommonStyle=style;this.isBackgroundCommonStyleCustom=true;}
+{this.style.backgroundCommonStyle=style;this.style.isBackgroundCommonStyleCustom=true;}
 Application.prototype.ResetBackgroundStyle=function()
-{this.backgroundCommonStyle=new CommonBackgroundStyle();this.isBackgroundCommonStyleCustom=false;}
+{this.style.backgroundCommonStyle=new CommonBackgroundStyle();this.style.isBackgroundCommonStyleCustom=false;}
 Application.prototype.GetAvailableCurveValue=function(neighborEdges,originalEdge)
 {return this.graph.GetAvailableCurveValue(neighborEdges,originalEdge);}
 Application.prototype.GraphTypeChanged=function()
@@ -1799,9 +1884,9 @@ Application.prototype.GetStyle=function(type,styleName,object,index)
 {var correctIndex=index;if(correctIndex==undefined)
 correctIndex=0;if(type=="vertex")
 {if(styleName=="common")
-{return object!==undefined?object.getStyleFor(0):this.vertexCommonStyle;}
+{return object!==undefined?object.getStyleFor(0):this.style.vertexCommonStyle;}
 else if(styleName=="selected")
-{return object!==undefined&&object.hasOwnStyleFor(correctIndex+1)?object.getStyleFor(correctIndex+1):this.vertexSelectedVertexStyles[correctIndex];}
+{return object!==undefined&&object.hasOwnStyleFor(correctIndex+1)?object.getStyleFor(correctIndex+1):this.style.vertexSelectedVertexStyles[correctIndex];}
 else if(styleName=="printed")
 {return this.vertexPrintCommonStyle;}
 else if(styleName=="printedSelected")
@@ -1809,9 +1894,9 @@ else if(styleName=="printedSelected")
 return null;}
 else if(type=="edge")
 {if(styleName=="common")
-{return object!==undefined?object.getStyleFor(0):this.edgeCommonStyle;}
+{return object!==undefined?object.getStyleFor(0):this.style.edgeCommonStyle;}
 else if(styleName=="selected")
-{return object!==undefined&&object.hasOwnStyleFor(correctIndex+1)?object.getStyleFor(correctIndex+1):this.edgeSelectedStyles[correctIndex];}
+{return object!==undefined&&object.hasOwnStyleFor(correctIndex+1)?object.getStyleFor(correctIndex+1):this.style.edgeSelectedStyles[correctIndex];}
 else if(styleName=="printed")
 {return this.edgePrintCommonStyle;}
 else if(styleName=="printedSelected")
@@ -1832,26 +1917,26 @@ Application.prototype.GetSelectedEdges=function()
 {res.push(this.graph.edges[i]);}}
 return res;}
 Application.prototype.SetDefaultVertexSize=function(diameter)
-{var oldDefaultDiameter=this.GetDefaultVertexSize();this.defaultVertexSize=diameter;for(i=0;i<this.graph.vertices.length;i++)
+{var oldDefaultDiameter=this.GetDefaultVertexSize();this.style.defaultVertexSize=diameter;for(i=0;i<this.graph.vertices.length;i++)
 {if(this.graph.vertices[i].model.diameter==oldDefaultDiameter)
 {this.graph.vertices[i].model.diameter=diameter;}}}
 Application.prototype.GetDefaultVertexSize=function(diameter)
-{if(this.defaultVertexSize!=null)
-return this.defaultVertexSize;else
+{if(this.style.defaultVertexSize!=null)
+return this.style.defaultVertexSize;else
 return defaultVertexDiameter;}
 Application.prototype.ResetVertexSize=function()
-{this.defaultVertexSize=null;for(i=0;i<this.graph.vertices.length;i++)
+{this.style.defaultVertexSize=null;for(i=0;i<this.graph.vertices.length;i++)
 {this.graph.vertices[i].model.diameter=this.GetDefaultVertexSize();}}
 Application.prototype.SetDefaultEdgeWidth=function(width)
-{var oldDefaultWidth=this.GetDefaultEdgeWidth();this.defaultEdgeWidth=width;for(i=0;i<this.graph.edges.length;i++)
+{var oldDefaultWidth=this.GetDefaultEdgeWidth();this.style.defaultEdgeWidth=width;for(i=0;i<this.graph.edges.length;i++)
 {if(this.graph.edges[i].model.width==oldDefaultWidth)
 {this.graph.edges[i].model.width=width;}}}
 Application.prototype.GetDefaultEdgeWidth=function(diameter)
-{if(this.defaultEdgeWidth!=null)
-return this.defaultEdgeWidth;else
+{if(this.style.defaultEdgeWidth!=null)
+return this.style.defaultEdgeWidth;else
 return defaultEdgeWidth;}
 Application.prototype.ResetEdgeWidth=function()
-{this.defaultEdgeWidth=null;for(i=0;i<this.graph.edges.length;i++)
+{this.style.defaultEdgeWidth=null;for(i=0;i<this.graph.edges.length;i++)
 {this.graph.edges[i].model.width=this.GetDefaultEdgeWidth();}}
 Application.prototype.setEmscripten=function(processFunction)
 {this.processEmscriptenFunction=processFunction;console.log("Emscripten set");}
@@ -1872,48 +1957,76 @@ Application.prototype.getUseDefaultEdge=function()
 Application.prototype.loadGraphFromZippedBase64=function(base64Str,callback)
 {decompress_base64_zip_into_text(base64Str,callback);}
 Application.prototype.isAutoSaveGraphName=function(str)
-{return str.length>0&&str.length<=this.graphNameLength;}
+{return str.length>0&&str.length<=this.graphNameLength+this.styliedGraphNamePostfix.length;}
 Application.prototype.saveAutoSave=function(graphXML,callback)
 {compress_text_into_zip_base64(graphXML,function(base64Str){if(this.lastSavedAutoSave==base64Str)
 {if(callback)
 {callback();}
 return;}
 if(base64Str.length<this.maxAutosaveSizeForCookie)
-{this.setAutoSaveCookie(base64Str);let saveGraphData=document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");if(saveGraphData==base64Str)
+{this.setAutoSaveCookie(base64Str);let saveGraphData=this.getAutoSaveCookie();if(saveGraphData==base64Str)
 {this.lastSavedAutoSave=base64Str;console.log("Auto save to cookie");if(callback)
 {callback();}
 return;}
 else
-{console.log("Failed to save autosave to cookie");document.cookie="auto_save=";}}
-let autoSaveGraphName=document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");if(!this.isAutoSaveGraphName(autoSaveGraphName))
+{console.log("Failed to save autosave to cookie");this.removeAutoSaveCookie();}}
+let autoSaveGraphName=this.getAutoSaveCookie();if(!this.isAutoSaveGraphName(autoSaveGraphName))
 {autoSaveGraphName=this.GetNewGraphName();}
 let app=this;DiskSaveLoad.SaveAutoSaveGraphOnDisk(autoSaveGraphName,graphXML,function(msg)
 {app.setAutoSaveCookie(autoSaveGraphName);app.lastSavedAutoSave=base64Str;if(callback)
 {callback();}
 console.log("Auto save to file");}.bind(base64Str));}.bind(this));}
 Application.prototype.hasAutoSave=function()
-{let autoSaveData=document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");console.log("autoSaveData: '"+autoSaveData+"'");return(autoSaveData.length>0);}
+{let autoSaveData=this.getAutoSaveCookie();return(autoSaveData.length>0);}
 Application.prototype.loadAutoSave=function(callback)
-{let autoSaveData=document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");if(autoSaveData.length<0)
+{let app=this;this.getAutoSaveGraph(function(xmlGraph){app.LoadGraphFromString(xmlGraph);app.lastGraphName=app.getAutoSaveRefGraphCookie();if(callback)
+{callback();}});}
+Application.prototype.getAutoSaveGraph=function(callback)
+{let autoSaveData=this.getAutoSaveCookie();if(autoSaveData.length<0)
 {console.log("Auto save to cookie is empty");return;}
 let app=this;if(!this.isAutoSaveGraphName(autoSaveData))
-{this.loadGraphFromZippedBase64(autoSaveData,function(xmlGraph){app.LoadGraphFromString(xmlGraph);console.log("Load graph from cookie");if(callback)
-{callback();}});return;}
-DiskSaveLoad.LoadAutoSaveGraphFromDisk(autoSaveData,function(msg)
-{app.LoadGraphFromString(msg);if(callback)
-{callback();}});}
+{this.loadGraphFromZippedBase64(autoSaveData,function(xmlGraph){console.log("Load graph from cookie");if(callback)
+{callback(xmlGraph);}});return;}
+DiskSaveLoad.LoadAutoSaveGraphFromDisk(autoSaveData,function(xmlGraph)
+{if(callback)
+{callback(xmlGraph);}});}
 Application.prototype.removeAutosave=function(callback)
-{let autoSaveData=document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");this.lastSavedAutoSave="";if(autoSaveData.length<0)
+{let autoSaveData=this.getAutoSaveCookie();this.lastSavedAutoSave="";let app=this;if(autoSaveData.length<0)
 {console.log("Auto save to cookie is empty");return;}
 if(!this.isAutoSaveGraphName(autoSaveData))
-{document.cookie="auto_save=";console.log("Remove auto save from cookie");if(callback)
+{app.removeAutoSaveCookie();console.log("Remove auto save from cookie");if(callback)
 {callback();}
 return;}
 DiskSaveLoad.RemoveAutoSaveGraphFromDisk(autoSaveData,function(msg)
-{document.cookie="auto_save=";console.log("Remove auto save file");if(callback)
+{app.removeAutoSaveCookie();console.log("Remove auto save file");if(callback)
 {callback();}});}
 Application.prototype.setAutoSaveCookie=function(value)
-{var now=new Date();var time=now.getTime();var expireTime=time+1000*3600*24*7;now.setTime(expireTime);document.cookie='auto_save='+value+';expires='+now.toUTCString()+';path=/';}
+{var now=new Date();var time=now.getTime();var expireTime=time+1000*3600*24*7;now.setTime(expireTime);document.cookie='auto_save='+value+';expires='+now.toUTCString()+';path=/';document.cookie='auto_save_ref_graph='+this.lastGraphName+';expires='+now.toUTCString()+';path=/';}
+Application.prototype.removeAutoSaveCookie=function(value)
+{document.cookie="auto_save=;path=/";document.cookie="auto_save_ref_graph=;path=/";}
+Application.prototype.getAutoSaveCookie=function(value)
+{return document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/,"$1");}
+Application.prototype.getAutoSaveRefGraphCookie=function(value)
+{return document.cookie.replace(/(?:(?:^|.*;\s*)auto_save_ref_graph\s*\=\s*([^;]*).*$)|^.*$/,"$1");}
+Application.prototype.CreateNewGraphObject=function()
+{this.graph=new Graph();this.savedGraphName="";this.lastGraphName="";}
+Application.prototype.showSelectGraphDialog=function(graphName)
+{let app=this;DiskSaveLoad.LoadGraphFromDisk(graphName,function(graphOriginXML)
+{app.getAutoSaveGraph(function(xmlGraph){let remove_id_from_xml=function(graphXML)
+{graphXML=graphXML.replace(/uidEdge=\"([0-9]+)\"/i,"")
+graphXML=graphXML.replaceAll(/id=\"([0-9]+)\"/g,"")
+return graphXML;};if(remove_id_from_xml(xmlGraph)==remove_id_from_xml(graphOriginXML))
+{app.onSelectOgirinalGraph(graphName);return;}
+var autosaveGraph=new Graph();var userSettings1={};autosaveGraph.LoadFromXML(xmlGraph,userSettings1);let styleAutoSave=new GraphFullStyle(null);if(userSettings1.hasOwnProperty("data")&&userSettings1["data"].length>0)
+styleAutoSave.Load(userSettings1["data"]);var originalGraph=new Graph();var userSettings2={};originalGraph.LoadFromXML(graphOriginXML,userSettings2);let styleOriginal=new GraphFullStyle(null);if(userSettings2.hasOwnProperty("data")&&userSettings2["data"].length>0)
+styleOriginal.Load(userSettings2["data"]);(new SelectGraphDialog(app,originalGraph,styleOriginal,autosaveGraph,styleAutoSave,function(){app.onSelectOgirinalGraph(graphName);},function(){app.onSelectAutosaveGraph();})).show();});});}
+Application.prototype.startAutoSaveTimer=function()
+{setInterval(function()
+{var graphXML=this.graph.SaveToXML(this.SaveUserSettings());this.saveAutoSave(graphXML);}.bind(this),this.autosaveTimeInterval);}
+Application.prototype.onSelectOgirinalGraph=function(graphName)
+{this.LoadGraphFromDisk(graphName);this.startAutoSaveTimer();userAction("LoadGraphFromDisk_userSelect");console.log("User selected original graph");}
+Application.prototype.onSelectAutosaveGraph=function()
+{this.loadAutoSave();this.startAutoSaveTimer();userAction("LoadGraphFromAutoSave_userSelect");console.log("User selected auto-save graph");}
 var waitCounter=false;var userAction=function(str)
 {if(typeof window.yaCounter25827098!=="undefined")
 {console.log(g_language+"/"+str);window.yaCounter25827098.hit(window.location.protocol+"//"+window.location.hostname+(g_language!="ru"?"/"+g_language:"")+"/UserAction#"+str);}
@@ -2103,7 +2216,7 @@ function touchHandler(event)
 {var touches=event.changedTouches,first=touches[0],type="";switch(event.type)
 {case"touchstart":type="mousedown";break;case"touchmove":type="mousemove";break;case"touchend":type="mouseup";break;default:return;}
 var simulatedEvent=document.createEvent("MouseEvent");simulatedEvent.initMouseEvent(type,true,true,window,1,first.screenX,first.screenY,first.clientX,first.clientY,false,false,false,false,0,null);first.target.dispatchEvent(simulatedEvent);event.preventDefault();}
-function handelImportGraph(files){var graphFileToLoad=files[0];var fileReader=new FileReader();fileReader.onload=function(fileLoadedEvent){var textFromFileLoaded=fileLoadedEvent.target.result;console.log(textFromFileLoaded);editor.application.LoadGraphFromString(textFromFileLoaded);editor.application.saveAutoSave(textFromFileLoaded);ImportGraphFiles.value="";};fileReader.readAsText(graphFileToLoad,"UTF-8");}
+function handelImportGraph(files){var graphFileToLoad=files[0];var fileReader=new FileReader();fileReader.onload=function(fileLoadedEvent){var textFromFileLoaded=fileLoadedEvent.target.result;editor.application.LoadNewGraphFromString(textFromFileLoaded);editor.application.saveAutoSave(textFromFileLoaded);ImportGraphFiles.value="";};fileReader.readAsText(graphFileToLoad,"UTF-8");}
 function postLoadPage()
 {if(!PostLoadedCalled)
 {loadTexts();editor.init();PostLoadedCalled=true;}}

script/pages/editor/model/Application.js

@@ -31,55 +31,36 @@ function Application(document, window, listener)
     this.SetDefaultTransformations();
     this.algorithmsValues = {};
     this.undoStack  = new UndoStack(this.maxUndoStackSize);
-    
-    this.edgeCommonStyle         = new CommonEdgeStyle();
-    this.isEdgeCommonStyleCustom = false;
-    this.edgeSelectedStyles      = FullArrayCopy(DefaultSelectedEdgeStyles);
-    this.isEdgeSelectedStylesCustom = false;
+
+    this.style = new GraphFullStyle(function() 
+        {
+            this.redrawGraph();
+        }.bind(this));
     
     this.edgePrintCommonStyle      = new CommonPrintEdgeStyle();
     this.edgePrintSelectedStyles   = FullArrayCopy(DefaultPrintSelectedEdgeStyles);
     
-    this.vertexCommonStyle          = new CommonVertexStyle();
-    this.isVertexCommonStyleCustom  = false;
-    this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
-    this.isVertexSelectedVertexStylesCustom  = false;
-    
     this.vertexPrintCommonStyle          = new CommonPrintVertexStyle(); 
     this.vertexPrintSelectedVertexStyles = FullArrayCopy(DefaultPrintSelectedGraphStyles);
-    
-    this.backgroundCommonStyle = new CommonBackgroundStyle();
-    this.backgroundPrintStyle  = new PrintBackgroundStyle(); 
-    this.isBackgroundCommonStyleCustom  = false;
+    this.backgroundPrintStyle  = new PrintBackgroundStyle();
     this.renderPathWithEdges = false;
     
     this.edgePresets = [1, 3, 5, 7, 11, 42];
     this.maxEdgePresets = 6;
     this.selectionRect  = null;
 
-    this.defaultVertexSize = null;
-    this.defaultEdgeWidth = null;
     this.processEmscriptenFunction = null;
 
     this.defaultEdge = null;
     this.useDefaultEdge = false;
 
     this.lastSavedAutoSave = "";
-    // Start autosave timer.
-    setInterval(function()
-    {
-        var graphXML = this.graph.SaveToXML(this.SaveUserSettings());
-        this.saveAutoSave(graphXML);
-    }.bind(this), this.autosaveTimeInterval);
+    this.lastGraphName = ""; // It could be last loaded or last saved graph.
 };
 
-// List of graph.
-//Application.prototype.graph.vertices     = [];
 // Current dragged object.
 Application.prototype.graph = new Graph();
 Application.prototype.dragObject = -1;
-// List of graph.edges.
-//Application.prototype.graph.edges       = [];
 // User handler.
 Application.prototype.handler = null;
 // Hold status.
@@ -92,6 +73,8 @@ Application.prototype.maxUndoStackSize = 8;
 Application.prototype.maxAutosaveSizeForCookie = 2000; // Max cookie size is at least 4096.
 // Auto save time interval
 Application.prototype.autosaveTimeInterval = 1000 * 60; // in ms. 1 minutes.
+// We add postfix into name of graphs with styles.
+Application.prototype.styliedGraphNamePostfix = "ZZcst";
 
 Application.prototype.getMousePos = function(canvas, e)
 {
@@ -207,7 +190,7 @@ Application.prototype._redrawGraphInWindow = function()
     context.scale(this.canvasScale, this.canvasScale);
     context.translate(this.canvasPosition.x, this.canvasPosition.y);
     
-    this._RedrawGraph(context, this.canvasPosition, this.backgroundCommonStyle, true);
+    this._RedrawGraph(context, this.canvasPosition, this.style.backgroundCommonStyle, true);
 
     context.restore();
     
@@ -226,7 +209,7 @@ Application.prototype._OffscreenRedrawGraph = function()
 
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundCommonStyle, false);
+    this._RedrawGraph(context, bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
     
     context.restore();
     
@@ -263,7 +246,7 @@ Application.prototype._printToSVG = function()
     
     context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
     
-    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundCommonStyle, false);
+    this._RedrawGraph(context, bbox.minPoint.inverse(), this.style.backgroundCommonStyle, false);
     
     context.restore();
     
@@ -367,8 +350,8 @@ Application.prototype.GetBaseArcDrawer = function(context, edge)
 
 Application.prototype.UpdateEdgeCurrentStyle = function(edge, ForceCommonStyle, ForceSelectedStyle)
 {
-    var commonStyle    = (ForceCommonStyle === undefined) ? this.edgeCommonStyle : ForceCommonStyle;
-    var selectedStyle  = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
+    var commonStyle    = (ForceCommonStyle === undefined) ? this.style.edgeCommonStyle : ForceCommonStyle;
+    var selectedStyle  = (ForceSelectedStyle === undefined) ? this.style.edgeSelectedStyles : ForceSelectedStyle;
 
     var selectedGroup = this.handler.GetSelectedGroup(edge);
     var selected = false;
@@ -410,7 +393,7 @@ Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
     var progressDraw     = new ProgressArcDrawer(context, this.GetBaseArcDrawer(context, edge), progress);
     var arcDrawer        = new BaseEdgeDrawer(context, {drawObject : progressDraw});
 
-    this._RedrawEdge(edge, arcDrawer, this.edgeCommonStyle, this.edgeSelectedStyles);
+    this._RedrawEdge(edge, arcDrawer, this.style.edgeCommonStyle, this.style.edgeSelectedStyles);
 }
 
 Application.prototype.UpdateEdgesCurrentStyle = function(ForceCommonStyle, ForceSelectedStyle)
@@ -442,8 +425,8 @@ Application.prototype.RedrawNodes = function(context)
 Application.prototype.UpdateNodesCurrentStyle = function(ForceCommonStyle, ForceSelectedStyle)
 {
     var force         = ForceCommonStyle !== undefined || ForceSelectedStyle !== undefined;
-    var commonStyle   = (ForceCommonStyle === undefined) ? this.vertexCommonStyle : ForceCommonStyle;
-    var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
+    var commonStyle   = (ForceCommonStyle === undefined) ? this.style.vertexCommonStyle : ForceCommonStyle;
+    var selectedStyle = (ForceSelectedStyle === undefined) ? this.style.vertexSelectedVertexStyles : ForceSelectedStyle;
 
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
@@ -469,7 +452,7 @@ Application.prototype.RedrawSelectionRect = function(context)
 {
   context.lineWidth    = 1.0 / this.canvasScale;
       
-  context.strokeStyle  = this.edgeSelectedStyles[0].strokeStyle;	
+  context.strokeStyle  = this.style.edgeSelectedStyles[0].strokeStyle;	
   context.setLineDash([6, 3]);
   context.beginPath();
   context.rect(this.selectionRect.left(), this.selectionRect.top(), 
@@ -712,6 +695,7 @@ Application.prototype.onPostLoadEvent = function()
     this.SetEnumVerticesType(document.cookie.replace(/(?:(?:^|.*;\s*)enumType\s*\=\s*([^;]*).*$)|^.*$/, "$1"));
 
     var wasLoad = false;
+    let startAutoSave = true;
     var matrix  = document.getElementById("inputMatrix").innerHTML;
     var separator = document.getElementById("separator").innerHTML == "space" ? " " : ",";
     
@@ -780,7 +764,7 @@ Application.prototype.onPostLoadEvent = function()
 
     if (!wasLoad)
     {
-    	var graphName  = this.getParameterByName("graph");
+    	var graphName = this.getParameterByName("graph");
         var is_user_graph = graphName.length > 0;
 	    if (!is_user_graph)
 	    {
@@ -796,8 +780,17 @@ Application.prototype.onPostLoadEvent = function()
         }
         else if (graphName.length > 0)
 	    {
-            userAction("LoadGraphFromDisk");
-    		this.LoadGraphFromDisk(graphName);
+            if (this.getAutoSaveRefGraphCookie() == graphName)
+            {
+                this.showSelectGraphDialog(graphName);
+                console.log("Show select graph dialog");
+                startAutoSave = false;
+            }
+            else
+            {
+                userAction("LoadGraphFromDisk");
+                this.LoadGraphFromDisk(graphName);
+            }
 	    }
     }
 
@@ -806,6 +799,11 @@ Application.prototype.onPostLoadEvent = function()
 
     this.updateMessage();
     this.redrawGraph();
+
+    if (startAutoSave)
+    {
+        this.startAutoSaveTimer();
+    }
 }
 
 Application.prototype.onLoad = function()
@@ -928,7 +926,6 @@ Application.prototype.Test = function ()
 	this.redrawGraph();
 }
 
-
 Application.prototype.SetAdjacencyMatrixSmart = function (matrix, separator)
 {
     if (separator === undefined) 
@@ -1002,8 +999,9 @@ Application.prototype.SaveGraphOnDisk = function ()
     DiskSaveLoad.SaveGraphOnDisk(this.savedGraphName, graphAsString, function( msg ) 
         {
                 document.cookie = "graphName=" + app.savedGraphName;
-                // Remove cookie after save, beacuse we have this graph in cookcie.
+                // Remove cookie after save, beacuse we have this graph name in cookies.
                 app.removeAutosave();
+                app.lastGraphName = app.savedGraphName; // Update last graph name after save.
         });
 }
                           
@@ -1071,8 +1069,6 @@ Application.prototype.LoadGraphFromString = function (str)
 {
     var graph = new Graph();
     
-    //console.log(str);
-    
     var userSettings = {};
     graph.LoadFromXML(str, userSettings);
     if (userSettings.hasOwnProperty("data") && userSettings["data"].length > 0)
@@ -1088,6 +1084,12 @@ Application.prototype.LoadGraphFromString = function (str)
     this.redrawGraph();   
 }
 
+Application.prototype.LoadNewGraphFromString = function (str)
+{
+    this.LoadGraphFromString(str); 
+    this.lastGraphName = ""; // if we import graph we forget the name.
+}
+
 Application.prototype.LoadGraphFromDisk = function (graphName)
 {
     var  app = this;
@@ -1096,6 +1098,7 @@ Application.prototype.LoadGraphFromDisk = function (graphName)
        app.LoadGraphFromString(msg);
        // Remove auto save after load from disk.
        app.removeAutosave();
+       app.lastGraphName = graphName; // Save graph name on loading.
 	});
 }
 
@@ -1103,10 +1106,10 @@ Application.prototype.GetNewGraphName = function()
 {
     var name = this.GetNewName();
     
-    if (this.isVertexCommonStyleCustom || this.isVertexSelectedVertexStylesCustom || 
-       this.isBackgroundCommonStyleCustom || this.isEdgeCommonStyleCustom || this.isEdgeSelectedStylesCustom)
+    if (this.style.isVertexCommonStyleCustom || this.style.isVertexSelectedVertexStylesCustom || 
+       this.style.isBackgroundCommonStyleCustom || this.style.isEdgeCommonStyleCustom || this.style.isEdgeSelectedStylesCustom)
     {
-        name = name + "ZZcst";
+        name = name + this.styliedGraphNamePostfix;
     }
     
     return name;
@@ -1315,202 +1318,26 @@ Application.prototype.Undo = function()
 
 Application.prototype.SaveUserSettings = function()
 {
-    var res = "{";
-    
-    var needEnd    = false;
-    var checkValue = [];
-    
-    checkValue.push({field: "edgeCommonStyle",
-                     value: this.edgeCommonStyle,
-                     check: this.isEdgeCommonStyleCustom});
-    
-    checkValue.push({field: "edgeSelectedStyles",
-                     value: this.edgeSelectedStyles,
-                     check: this.isEdgeSelectedStylesCustom});
-
-    //checkValue.push({field: "edgePrintCommonStyle",
-    //                 value: this.edgePrintCommonStyle});
-
-    //checkValue.push({field: "edgePrintSelectedStyles",
-    //                 value: this.edgePrintSelectedStyles});
-    
-    checkValue.push({field: "vertexCommonStyle",
-                     value: this.vertexCommonStyle,
-                     check: this.isVertexCommonStyleCustom});
-    
-    checkValue.push({field: "vertexSelectedVertexStyles",
-                     value: this.vertexSelectedVertexStyles,
-                     check: this.isVertexSelectedVertexStylesCustom});
-    
-    checkValue.push({field: "backgroundCommonStyle",
-                     value: this.backgroundCommonStyle,
-                     check: this.isBackgroundCommonStyleCustom});
-
-    checkValue.push({field: "defaultVertexSize",
-                      value: this.defaultVertexSize,
-                      check: this.defaultVertexSize != null}); 
-
-    checkValue.push({field: "defaultEdgeWidth",
-                      value: this.defaultEdgeWidth,
-                      check: this.defaultEdgeWidth != null});
-    
-    //checkValue.push({field: "vertexPrintCommonStyle",
-    //                 value: this.vertexPrintCommonStyle});
-
-    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
-    //                 value: this.vertexPrintSelectedVertexStyles});
-    
-    checkValue.forEach(function(entry) {
-            if (!entry.check)
-                return;
-                
-            if (needEnd)
-                res = res + ",";
-
-            let valueJson = "";
-            if (typeof entry.value.saveToJson === "function") {
-                valueJson = entry.value.saveToJson();
-            } else {
-                valueJson = JSON.stringify(entry.value);
-            }
-                
-                
-            res = res + "\"" + entry.field + "\"" + ":" + valueJson;
-            needEnd = true;
-        });
-    
-    res = res + "}";
-    
-    return this.EncodeToHTML(res);
+    return "{" + this.style.Save() + "}";
 }
 
 Application.prototype.LoadUserSettings = function(json)
 {
-    var checkValue = [];
-    
-    checkValue.push({field: "edgeCommonStyle",
-                     value: this.edgeCommonStyle,
-                     check: "isEdgeCommonStyleCustom",
-                     deep: false});
-    
-    checkValue.push({field: "edgeSelectedStyles",
-                     value: this.edgeSelectedStyles,
-                     check: "isEdgeSelectedStylesCustom",
-                     deep: true});
-
-    //checkValue.push({field: "edgePrintCommonStyle",
-    //                 value: this.edgePrintCommonStyle});
-
-    //checkValue.push({field: "edgePrintSelectedStyles",
-    //                 value: this.edgePrintSelectedStyles});
-    
-    checkValue.push({field: "vertexCommonStyle",
-                     value: this.vertexCommonStyle,
-                     check: "isVertexCommonStyleCustom",
-                     deep: false});
-    
-    checkValue.push({field: "vertexSelectedVertexStyles",
-                     value: this.vertexSelectedVertexStyles,
-                     check: "isVertexSelectedVertexStylesCustom",
-                     deep: true});
-
-    checkValue.push({field: "defaultVertexSize",
-                    value: "defaultVertexSize",
-                    check: null,
-                    deep: false});
-
-    checkValue.push({field: "defaultEdgeWidth",
-                    value: "defaultEdgeWidth",
-                    check: null,
-                    deep: false});
-
-    //checkValue.push({field: "vertexPrintCommonStyle",
-    //                 value: this.vertexPrintCommonStyle});
-
-    //checkValue.push({field: "vertexPrintSelectedVertexStyles",
-    //                 value: this.vertexPrintSelectedVertexStyles});
-    
-    checkValue.push({field: "backgroundCommonStyle",
-                     value: this.backgroundCommonStyle,
-                     check: this.isBackgroundCommonStyleCustom,
-                     deep: false});
-    
-    var decoderStr = this.DecodeFromHTML(json);
-    var parsedSave = JSON.parse(decoderStr);
-    
-    var app = this;
-    
-    checkValue.forEach(function(entry) {
-            if (parsedSave.hasOwnProperty(entry.field))
-            {
-                if (typeof parsedSave[entry.field] === 'number')
-                {
-                    app[entry.value] = parseInt(parsedSave[entry.field]);
-                }
-                else
-                {
-                    if (typeof entry.value.loadFromJson === "function") {
-                        entry.value.loadFromJson(parsedSave[entry.field], function () {
-                                setTimeout( function() { app.redrawGraph() }, 1000);
-                            });
-                        return;
-                    }
-
-                    if (!entry.deep)
-                        entry.value.Clear();
-
-                    for(var k in parsedSave[entry.field])
-                    {
-                        if (!entry.deep)
-                        {
-                            if (entry.value.ShouldLoad(k))
-                            {
-                                entry.value[k] = parsedSave[entry.field][k];
-                            }
-                        }
-                        else
-                        {
-                            // Check is number or not
-                            if (k % 1 != 0)
-                                continue;
-
-                            entry.value[k].Clear();
-                            for(var deepK in parsedSave[entry.field][k])
-                            {
-                                if (k < entry.value.length && entry.value[k].ShouldLoad(deepK))
-                                    entry.value[k][deepK] = parsedSave[entry.field][k][deepK];
-                            }
-                        }
-                    }
-                }
-                
-                if (entry.check != null)
-                    app[entry.check] = true;
-            }
-        });
+    this.style.Load(json);
 }
 
-Application.prototype.EncodeToHTML = function (str)
-{
-    return gEncodeToHTML(str);
-}
-
-Application.prototype.DecodeFromHTML = function (str)
-{
-   return gDecodeFromHTML(str); 
-}
 
 Application.prototype.SetVertexStyle = function (index, style)
 {
     if (index == 0)
     {
-        this.vertexCommonStyle = style;
-        this.isVertexCommonStyleCustom = true;
+        this.style.vertexCommonStyle = style;
+        this.style.isVertexCommonStyleCustom = true;
     }
     else
     {
-        this.vertexSelectedVertexStyles[index - 1] = style;
-        this.isVertexSelectedVertexStylesCustom = true;
+        this.style.vertexSelectedVertexStyles[index - 1] = style;
+        this.style.isVertexSelectedVertexStylesCustom = true;
     }
 }
 
@@ -1518,13 +1345,13 @@ Application.prototype.ResetVertexStyle = function (index)
 {
     if (index == 0)
     {
-        this.vertexCommonStyle = new CommonVertexStyle();
-        this.isVertexCommonStyleCustom = false;
+        this.style.vertexCommonStyle = new CommonVertexStyle();
+        this.style.isVertexCommonStyleCustom = false;
     }
     else
     {
-        this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
-        this.isVertexSelectedVertexStylesCustom = false;
+        this.style.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
+        this.style.isVertexSelectedVertexStylesCustom = false;
     }
 }
 
@@ -1532,13 +1359,13 @@ Application.prototype.SetEdgeStyle = function (index, style)
 {
     if (index == 0)
     {
-        this.edgeCommonStyle = style;
-        this.isEdgeCommonStyleCustom = true;
+        this.style.edgeCommonStyle = style;
+        this.style.isEdgeCommonStyleCustom = true;
     }
     else
     {
-        this.edgeSelectedStyles[index - 1] = style;
-        this.isEdgeSelectedStylesCustom = true;
+        this.style.edgeSelectedStyles[index - 1] = style;
+        this.style.isEdgeSelectedStylesCustom = true;
     }
 }
 
@@ -1546,26 +1373,26 @@ Application.prototype.ResetEdgeStyle = function (index)
 {
     if (index == 0)
     {
-        this.edgeCommonStyle = new CommonEdgeStyle();
-        this.isEdgeCommonStyleCustom = false;
+        this.style.edgeCommonStyle = new CommonEdgeStyle();
+        this.style.isEdgeCommonStyleCustom = false;
     }
     else
     {
-        this.edgeSelectedStyles = FullArrayCopy(DefaultSelectedEdgeStyles);
-        this.isEdgeSelectedStylesCustom = false;
+        this.style.edgeSelectedStyles = FullArrayCopy(DefaultSelectedEdgeStyles);
+        this.style.isEdgeSelectedStylesCustom = false;
     }
 }
 
 Application.prototype.SetBackgroundStyle = function (style)
 {
-    this.backgroundCommonStyle         = style;
-    this.isBackgroundCommonStyleCustom = true;
+    this.style.backgroundCommonStyle         = style;
+    this.style.isBackgroundCommonStyleCustom = true;
 }
 
 Application.prototype.ResetBackgroundStyle = function ()
 {
-    this.backgroundCommonStyle         = new CommonBackgroundStyle();
-    this.isBackgroundCommonStyleCustom = false;
+    this.style.backgroundCommonStyle         = new CommonBackgroundStyle();
+    this.style.isBackgroundCommonStyleCustom = false;
 }
 
 Application.prototype.GetAvailableCurveValue = function(neighborEdges, originalEdge)
@@ -1620,11 +1447,11 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
     {
         if (styleName == "common")
         {
-            return object !== undefined ? object.getStyleFor(0) : this.vertexCommonStyle;
+            return object !== undefined ? object.getStyleFor(0) : this.style.vertexCommonStyle;
         }
         else if (styleName == "selected")
         {
-            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.vertexSelectedVertexStyles[correctIndex];
+            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.style.vertexSelectedVertexStyles[correctIndex];
         }
         else if (styleName == "printed")
         {
@@ -1641,11 +1468,11 @@ Application.prototype.GetStyle = function(type, styleName, object, index)
     {
         if (styleName == "common")
         {
-            return object !== undefined ? object.getStyleFor(0) : this.edgeCommonStyle;
+            return object !== undefined ? object.getStyleFor(0) : this.style.edgeCommonStyle;
         }
         else if (styleName == "selected")
         {
-            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.edgeSelectedStyles[correctIndex];
+            return object !== undefined && object.hasOwnStyleFor(correctIndex + 1) ? object.getStyleFor(correctIndex + 1) : this.style.edgeSelectedStyles[correctIndex];
         }
         else if (styleName == "printed")
         {
@@ -1714,7 +1541,7 @@ Application.prototype.GetSelectedEdges = function()
 Application.prototype.SetDefaultVertexSize = function(diameter)
 {
     var oldDefaultDiameter = this.GetDefaultVertexSize();
-    this.defaultVertexSize = diameter;
+    this.style.defaultVertexSize = diameter;
 
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
@@ -1727,15 +1554,15 @@ Application.prototype.SetDefaultVertexSize = function(diameter)
 
 Application.prototype.GetDefaultVertexSize = function(diameter)
 {
-    if (this.defaultVertexSize != null)
-        return this.defaultVertexSize;
+    if (this.style.defaultVertexSize != null)
+        return this.style.defaultVertexSize;
     else
         return defaultVertexDiameter;
 }
 
 Application.prototype.ResetVertexSize = function()
 {
-    this.defaultVertexSize = null;
+    this.style.defaultVertexSize = null;
 
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
@@ -1746,7 +1573,7 @@ Application.prototype.ResetVertexSize = function()
 Application.prototype.SetDefaultEdgeWidth = function(width)
 {
     var oldDefaultWidth = this.GetDefaultEdgeWidth();
-    this.defaultEdgeWidth = width;
+    this.style.defaultEdgeWidth = width;
 
     for (i = 0; i < this.graph.edges.length; i ++)
     {
@@ -1759,15 +1586,15 @@ Application.prototype.SetDefaultEdgeWidth = function(width)
 
 Application.prototype.GetDefaultEdgeWidth = function(diameter)
 {
-    if (this.defaultEdgeWidth != null)
-        return this.defaultEdgeWidth;
+    if (this.style.defaultEdgeWidth != null)
+        return this.style.defaultEdgeWidth;
     else
         return defaultEdgeWidth;
 }
 
 Application.prototype.ResetEdgeWidth = function()
 {
-    this.defaultEdgeWidth = null;
+    this.style.defaultEdgeWidth = null;
 
     for (i = 0; i < this.graph.edges.length; i ++)
     {
@@ -1824,7 +1651,7 @@ Application.prototype.loadGraphFromZippedBase64 = function (base64Str, callback)
 Application.prototype.isAutoSaveGraphName = function (str)
 {
     // If it is graph file name or Base64 graph.
-    return str.length > 0 && str.length <= this.graphNameLength;
+    return str.length > 0 && str.length <= this.graphNameLength + this.styliedGraphNamePostfix.length;
 }
 
 Application.prototype.saveAutoSave = function (graphXML, callback)
@@ -1842,7 +1669,7 @@ Application.prototype.saveAutoSave = function (graphXML, callback)
         if (base64Str.length < this.maxAutosaveSizeForCookie)
         {
             this.setAutoSaveCookie(base64Str);
-            let saveGraphData = document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+            let saveGraphData = this.getAutoSaveCookie();
             if (saveGraphData == base64Str)
             {
                 this.lastSavedAutoSave = base64Str;
@@ -1856,11 +1683,11 @@ Application.prototype.saveAutoSave = function (graphXML, callback)
             else
             {
                 console.log("Failed to save autosave to cookie");
-                document.cookie = "auto_save=";
+                this.removeAutoSaveCookie();
             }
         }
     
-        let autoSaveGraphName = document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+        let autoSaveGraphName = this.getAutoSaveCookie();
     
         if (!this.isAutoSaveGraphName(autoSaveGraphName))
         {
@@ -1885,14 +1712,26 @@ Application.prototype.saveAutoSave = function (graphXML, callback)
 
 Application.prototype.hasAutoSave = function ()
 {
-    let autoSaveData = document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-    console.log("autoSaveData: '" + autoSaveData + "'");
+    let autoSaveData = this.getAutoSaveCookie();
     return (autoSaveData.length > 0);
 }
 
 Application.prototype.loadAutoSave = function (callback)
 {
-    let autoSaveData = document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+    let app = this;
+    this.getAutoSaveGraph(function(xmlGraph){
+        app.LoadGraphFromString(xmlGraph);
+        app.lastGraphName = app.getAutoSaveRefGraphCookie();
+        if (callback)
+        {
+            callback();
+        }
+    });
+}
+
+Application.prototype.getAutoSaveGraph = function (callback)
+{
+    let autoSaveData = this.getAutoSaveCookie();
 
     if (autoSaveData.length < 0)
     {
@@ -1904,30 +1743,29 @@ Application.prototype.loadAutoSave = function (callback)
 	if (!this.isAutoSaveGraphName(autoSaveData))
     {
         this.loadGraphFromZippedBase64(autoSaveData, function(xmlGraph){
-            app.LoadGraphFromString(xmlGraph);
             console.log("Load graph from cookie");
             if (callback)
             {
-                callback();
+                callback(xmlGraph);
             }
         });
         return;
     }
 
-    DiskSaveLoad.LoadAutoSaveGraphFromDisk(autoSaveData, function( msg ) 
+    DiskSaveLoad.LoadAutoSaveGraphFromDisk(autoSaveData, function( xmlGraph ) 
 	{
-        app.LoadGraphFromString(msg);
         if (callback)
         {
-            callback();
+            callback(xmlGraph);
         }
 	});
 }
 
 Application.prototype.removeAutosave = function (callback)
 {
-    let autoSaveData = document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+    let autoSaveData = this.getAutoSaveCookie();
     this.lastSavedAutoSave = "";
+    let app = this;
     if (autoSaveData.length < 0)
     {
         console.log("Auto save to cookie is empty");
@@ -1936,7 +1774,7 @@ Application.prototype.removeAutosave = function (callback)
 
     if (!this.isAutoSaveGraphName(autoSaveData))
     {
-        document.cookie = "auto_save=";
+        app.removeAutoSaveCookie();
         console.log("Remove auto save from cookie");
         if (callback)
         {
@@ -1947,7 +1785,7 @@ Application.prototype.removeAutosave = function (callback)
 
     DiskSaveLoad.RemoveAutoSaveGraphFromDisk(autoSaveData, function( msg ) 
     {
-        document.cookie = "auto_save=";
+        app.removeAutoSaveCookie();
         console.log("Remove auto save file");
         if (callback)
         {
@@ -1963,4 +1801,101 @@ Application.prototype.setAutoSaveCookie = function (value)
     var expireTime = time + 1000 * 3600 * 24 * 7; // In a week.
     now.setTime(expireTime);
     document.cookie = 'auto_save=' + value + ';expires=' + now.toUTCString() + ';path=/';
+    document.cookie = 'auto_save_ref_graph=' + this.lastGraphName + ';expires=' + now.toUTCString() + ';path=/';
+}
+
+Application.prototype.removeAutoSaveCookie = function (value)
+{
+    document.cookie = "auto_save=;path=/";
+    document.cookie = "auto_save_ref_graph=;path=/";
+}
+
+Application.prototype.getAutoSaveCookie = function (value)
+{
+    return document.cookie.replace(/(?:(?:^|.*;\s*)auto_save\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+}
+
+Application.prototype.getAutoSaveRefGraphCookie = function (value)
+{
+    return document.cookie.replace(/(?:(?:^|.*;\s*)auto_save_ref_graph\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+}
+
+Application.prototype.CreateNewGraphObject = function ()
+{
+    this.graph = new Graph(); 
+    this.savedGraphName = "";
+    this.lastGraphName = ""; // Reset name on create new graph.
+}
+
+Application.prototype.showSelectGraphDialog = function(graphName)
+{
+    let app = this;
+    DiskSaveLoad.LoadGraphFromDisk(graphName, function( graphOriginXML ) 
+	{
+        app.getAutoSaveGraph(function(xmlGraph){
+            // We moodify id after each load, so we need to remove it from xml before compare.
+            let remove_id_from_xml = function(graphXML)
+            {
+                graphXML = graphXML.replace(/uidEdge=\"([0-9]+)\"/i,"")
+                graphXML = graphXML.replaceAll(/id=\"([0-9]+)\"/g,"")
+                return graphXML;
+            };
+
+            if (remove_id_from_xml(xmlGraph) == remove_id_from_xml(graphOriginXML))
+            {
+                app.onSelectOgirinalGraph(graphName);
+                return;
+            }
+
+            var autosaveGraph = new Graph();
+            var userSettings1 = {};
+            autosaveGraph.LoadFromXML(xmlGraph, userSettings1);
+            let styleAutoSave = new GraphFullStyle(null);
+            if (userSettings1.hasOwnProperty("data") && userSettings1["data"].length > 0)
+                styleAutoSave.Load(userSettings1["data"]);
+            
+            var originalGraph = new Graph();
+            var userSettings2 = {};
+            originalGraph.LoadFromXML(graphOriginXML, userSettings2);
+            let styleOriginal = new GraphFullStyle(null);
+            if (userSettings2.hasOwnProperty("data") && userSettings2["data"].length > 0)
+                styleOriginal.Load(userSettings2["data"]);
+
+            (new SelectGraphDialog(app, 
+                originalGraph, styleOriginal,
+                autosaveGraph, styleAutoSave,
+                function() {
+                    app.onSelectOgirinalGraph(graphName);
+                },
+                function() {
+                    app.onSelectAutosaveGraph();
+                })).show();
+        });
+	});
+}
+
+Application.prototype.startAutoSaveTimer = function()
+{
+    // Start autosave timer.
+    setInterval(function()
+    {
+        var graphXML = this.graph.SaveToXML(this.SaveUserSettings());
+        this.saveAutoSave(graphXML);
+    }.bind(this), this.autosaveTimeInterval);
+}
+
+Application.prototype.onSelectOgirinalGraph = function(graphName)
+{
+    this.LoadGraphFromDisk(graphName);
+    this.startAutoSaveTimer();
+    userAction("LoadGraphFromDisk_userSelect");
+    console.log("User selected original graph");
+}
+
+Application.prototype.onSelectAutosaveGraph = function()
+{
+    this.loadAutoSave();
+    this.startAutoSaveTimer();
+    userAction("LoadGraphFromAutoSave_userSelect");
+    console.log("User selected auto-save graph");
 }

script/pages/editor/model/texts.js

@@ -207,6 +207,10 @@ var g_MaxCliqueContains = ". Clique contains these vertecies: ";
 var g_wrongImageFormatPNGAndJPEG = "Wrong image format. We support only JPEG and PNG.";
 var g_wrongImageSizeP1 = "Image size is too big. Image size must be less than {0} pixels.";
 
+var g_originalGraph = "Original graph";
+var g_autoSavedGraph = "Autosaved graph";
+var g_selectGraphToLoad = "Would you like to load original graph or autosaved graph?";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -422,4 +426,8 @@ function loadTexts()
 
     g_wrongImageFormatPNGAndJPEG = document.getElementById("wrongImageFormatPNGAndJPEG").innerHTML;
     g_wrongImageSizeP1 = document.getElementById("wrongImageSizeP1").innerHTML; 
+
+    g_originalGraph     = document.getElementById("originalGraph").innerHTML;
+    g_autoSavedGraph    = document.getElementById("autoSavedGraph").innerHTML;
+    g_selectGraphToLoad = document.getElementById("selectGraphToLoad").innerHTML;
 }

script/pages/editor/ui/main.js

@@ -49,8 +49,8 @@ function handelImportGraph(files) {
     var fileReader = new FileReader();
     fileReader.onload = function(fileLoadedEvent){
         var textFromFileLoaded = fileLoadedEvent.target.result;
-        console.log(textFromFileLoaded);
-        editor.application.LoadGraphFromString(textFromFileLoaded);
+        //console.log(textFromFileLoaded);
+        editor.application.LoadNewGraphFromString(textFromFileLoaded);
         // Save graph to auto save after import.
         editor.application.saveAutoSave(textFromFileLoaded);
         ImportGraphFiles.value = "";

script/shared/gzip.js

@@ -20,7 +20,8 @@ async function compress_text_into_zip_base64(str, callback, mode = "gzip")
   }
   catch (err)
   {
-    console.error(err)
+    console.log(err);
+    callback("");
   }
   return "";
 }
@@ -42,7 +43,8 @@ async function decompress_base64_zip_into_text(str, callback, mode = "gzip")
   }
   catch (err)
   {
-    console.error(err)
+    console.log(err);
+    callback("");
   }
   return "";
 }

tpl/home.php

@@ -702,6 +702,42 @@
 
         <div id="UploadBackgroundImageError" class="alert alert-danger" role="alert" style="display: none"></div>
     </div>
+
+    <div id="autoSaveOrOriginalGraph">
+      <form>
+        <fieldset>
+        <p><?= L('you_have_autosave') ?></br><b><?= L('load_oiginal_or_autosaved') ?></b></p>
+        <div class="form-group row">
+          <div class="col-sm-6">
+            <p><?= L('original_graph') ?></p>
+            <canvas id="OriginalGraphpPreview" width="300" height="200" style="border: 1px solid;"></canvas>
+            <div>
+              <button type="button" class="btn btn-default btn-xs zoom-plus" title="+">
+                <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="btn btn-default btn-xs zoom-minus" title="-">
+                <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
+              </button>
+              <span><?= L('use_mouse_for_moving') ?></span>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <p><?= L('autosaved_graph') ?></p>
+            <canvas id="AutoSaveGraphpPreview" width="300" height="200" style="border: 1px solid;"></canvas>
+            <div>
+              <button type="button" class="btn btn-default btn-xs zoom-plus" title="+">
+                <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="btn btn-default btn-xs zoom-minus" title="-">
+                <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
+              </button>
+              <span><?= L('use_mouse_for_moving') ?></span>
+            </div>
+          </div>
+        </div>
+        </fieldset>
+      </form>
+    </div>
 	
     <p id="SelectAndMoveObject" class="translation"><?= L('select_and_move_objects')?></p>
     <p id="MoveCursorForMoving" class="translation"><?= L('move_cursor_for_moving')?></p>
@@ -906,6 +942,10 @@
 
     <p id="wrongImageFormatPNGAndJPEG" class="translation"><?= L('wrong_image_background_format')?></p>
     <p id="wrongImageSizeP1" class="translation"><?= L('wrong_image_background_size')?></p>
+
+    <p id="originalGraph" class="translation"><?= L('original_graph')?></p>
+    <p id="autoSavedGraph" class="translation"><?= L('autosaved_graph')?></p>
+    <p id="selectGraphToLoad" class="translation"><?= L('load_oiginal_or_autosaved')?></p>
 </section>
 
 <script src="<?= RootCacheJS("script/pages/editor/api/index.js")?>" ></script>