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
+            // Move work space
-                this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
+            this.app.onCanvasMove((new Point(pos.x, pos.y)).subtract(this.prevPosition).multiply(this.app.canvasScale));
-                this.needRedraw = true;
+            this.needRedraw = true;
           }
         }
 }

script/features/delete_objects_handler/index.js

@@ -45,8 +45,7 @@ DeleteAllHandler.prototype.clear = function()
 {	
     this.app.PushToStack("DeleteAll");
 
-	// Selected Graph.
+	  // Selected Graph.
-    this.app.graph = new Graph(); 
+    this.app.CreateNewGraphObject();
-    this.app.savedGraphName = "";
     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 ++)
+        for (i = 0; i < app.style.edgeSelectedStyles.length; i ++)
-            stylesArray.push(app.edgeSelectedStyles[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 ++)
+        for (i = 0; i < app.style.vertexSelectedVertexStyles.length; i ++)
-            stylesArray.push(app.vertexSelectedVertexStyles[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/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.style = new GraphFullStyle(function() 
-    this.isEdgeCommonStyleCustom = false;
+        {
-    this.edgeSelectedStyles      = FullArrayCopy(DefaultSelectedEdgeStyles);
+            this.redrawGraph();
-    this.isEdgeSelectedStylesCustom = false;
+        }.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.backgroundPrintStyle  = new PrintBackgroundStyle();
-    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 = "";
-    // Start autosave timer.
+    this.lastGraphName = ""; // It could be last loaded or last saved graph.
-    setInterval(function()
-    {
-        var graphXML = this.graph.SaveToXML(this.SaveUserSettings());
-        this.saveAutoSave(graphXML);
-    }.bind(this), this.autosaveTimeInterval);
 };
 
-// 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 commonStyle    = (ForceCommonStyle === undefined) ? this.style.edgeCommonStyle : ForceCommonStyle;
-    var selectedStyle  = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
+    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 commonStyle   = (ForceCommonStyle === undefined) ? this.style.vertexCommonStyle : ForceCommonStyle;
-    var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
+    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");
+            if (this.getAutoSaveRefGraphCookie() == graphName)
-    		this.LoadGraphFromDisk(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 || 
+    if (this.style.isVertexCommonStyleCustom || this.style.isVertexSelectedVertexStylesCustom || 
-       this.isBackgroundCommonStyleCustom || this.isEdgeCommonStyleCustom || this.isEdgeSelectedStylesCustom)
+       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 = "{";
+    return "{" + this.style.Save() + "}";
-    
-    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);
 }
 
 Application.prototype.LoadUserSettings = function(json)
 {
-    var checkValue = [];
+    this.style.Load(json);
-    
-    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;
-            }
-        });
 }
 
-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.style.vertexCommonStyle = style;
-        this.isVertexCommonStyleCustom = true;
+        this.style.isVertexCommonStyleCustom = true;
     }
     else
     {
-        this.vertexSelectedVertexStyles[index - 1] = style;
+        this.style.vertexSelectedVertexStyles[index - 1] = style;
-        this.isVertexSelectedVertexStylesCustom = true;
+        this.style.isVertexSelectedVertexStylesCustom = true;
     }
 }
 
@@ -1518,13 +1345,13 @@ Application.prototype.ResetVertexStyle = function (index)
 {
     if (index == 0)
     {
-        this.vertexCommonStyle = new CommonVertexStyle();
+        this.style.vertexCommonStyle = new CommonVertexStyle();
-        this.isVertexCommonStyleCustom = false;
+        this.style.isVertexCommonStyleCustom = false;
     }
     else
     {
-        this.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
+        this.style.vertexSelectedVertexStyles = FullArrayCopy(DefaultSelectedGraphStyles);
-        this.isVertexSelectedVertexStylesCustom = false;
+        this.style.isVertexSelectedVertexStylesCustom = false;
     }
 }
 
@@ -1532,13 +1359,13 @@ Application.prototype.SetEdgeStyle = function (index, style)
 {
     if (index == 0)
     {
-        this.edgeCommonStyle = style;
+        this.style.edgeCommonStyle = style;
-        this.isEdgeCommonStyleCustom = true;
+        this.style.isEdgeCommonStyleCustom = true;
     }
     else
     {
-        this.edgeSelectedStyles[index - 1] = style;
+        this.style.edgeSelectedStyles[index - 1] = style;
-        this.isEdgeSelectedStylesCustom = true;
+        this.style.isEdgeSelectedStylesCustom = true;
     }
 }
 
@@ -1546,26 +1373,26 @@ Application.prototype.ResetEdgeStyle = function (index)
 {
     if (index == 0)
     {
-        this.edgeCommonStyle = new CommonEdgeStyle();
+        this.style.edgeCommonStyle = new CommonEdgeStyle();
-        this.isEdgeCommonStyleCustom = false;
+        this.style.isEdgeCommonStyleCustom = false;
     }
     else
     {
-        this.edgeSelectedStyles = FullArrayCopy(DefaultSelectedEdgeStyles);
+        this.style.edgeSelectedStyles = FullArrayCopy(DefaultSelectedEdgeStyles);
-        this.isEdgeSelectedStylesCustom = false;
+        this.style.isEdgeSelectedStylesCustom = false;
     }
 }
 
 Application.prototype.SetBackgroundStyle = function (style)
 {
-    this.backgroundCommonStyle         = style;
+    this.style.backgroundCommonStyle         = style;
-    this.isBackgroundCommonStyleCustom = true;
+    this.style.isBackgroundCommonStyleCustom = true;
 }
 
 Application.prototype.ResetBackgroundStyle = function ()
 {
-    this.backgroundCommonStyle         = new CommonBackgroundStyle();
+    this.style.backgroundCommonStyle         = new CommonBackgroundStyle();
-    this.isBackgroundCommonStyleCustom = false;
+    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)
+    if (this.style.defaultVertexSize != null)
-        return this.defaultVertexSize;
+        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)
+    if (this.style.defaultEdgeWidth != null)
-        return this.defaultEdgeWidth;
+        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");
+    let autoSaveData = this.getAutoSaveCookie();
-    console.log("autoSaveData: '" + autoSaveData + "'");
     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);
+        //console.log(textFromFileLoaded);
-        editor.application.LoadGraphFromString(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>