Added printed version of graph image.

lang/en/home.php

@@ -57,8 +57,9 @@
     $g_lang["wrong_matrix_title"] = "Matrix has wrong format";
     $g_lang["bad_adj_matrix_message"] = "Cannot create graph. Adjacency Matrix has wrong format. Click \"fix matrix\" button to fix matrix or \"help\" button to open help about Adjacency Matrix format";
     $g_lang["bad_inc_matrix_message"] = "Cannot create graph. Incidence Matrix has wrong format. Click \"fix matrix\" button to fix matrix or \"help\" button to open help about Incidence Matrix format";
-    $g_lang["save_image"] = "Save workspace image";
+    $g_lang["save_image"] = "Workspace screenshot";
-    $g_lang["save_full_image"] = "Save full graph image";
+    $g_lang["save_full_image"] = "Save graph image";
+    $g_lang["save_print_image"] = "Printed image of graph (black&white)";
     $g_lang["open_saved_image_browser"] = "Open image in browser";
     $g_lang["download_saved_image"] = "Download saved image";
     $g_lang["save_image_dialog_title"] = "Save Graph Image";

lang/ru/home.php

@@ -57,8 +57,9 @@
     $g_lang["wrong_matrix_title"] = "Матрица имеет неправильный формат";
     $g_lang["bad_adj_matrix_message"] = "Ошибка создания графа. Матрица смежности имеет неправильный формат. Нажимте кнопку \"исправить матрицу\" чтобы исправить матрицу или кнопку \"справка\" чтобы открыть справку о формате матрицы";
     $g_lang["bad_inc_matrix_message"] = "Ошибка создания графа. Матрица инцидентности имеет неправильный формат. Нажимте кнопку \"исправить матрицу\" чтобы исправить матрицу или кнопку \"справка\" чтобы открыть справку о формате матрицы";
-    $g_lang["save_image"] = "Сохранить изображение рабочей области";
+    $g_lang["save_image"] = "Снимок рабочей области";
-    $g_lang["save_full_image"] = "Сохранить изображение всего графа";
+    $g_lang["save_full_image"] = "Сохранить изображение графа";
+    $g_lang["save_print_image"] = "Изображение графа для печати (ч\б)";
     $g_lang["open_saved_image_browser"] = "Открыть изображение в браузере";
     $g_lang["download_saved_image"] = "Скачать сохранённое изображение";
     $g_lang["save_image_dialog_title"] = "Сохранение изображения графа";

script/Appilcation.js

@@ -25,6 +25,18 @@ function Application(document, window)
     this.algorithmsValues = {};
     this.userAction = function(){};
     this.undoStack  = [];
+    
+    this.edgeCommonStyle      = new CommonEdgeStyle();
+    this.edgeSelectedStyles   = DefaultSelectedEdgeStyles;
+    
+    this.edgePrintCommonStyle      = new CommonPrintEdgeStyle();
+    this.edgePrintSelectedStyles   = DefaultPrintSelectedEdgeStyles;
+    
+    this.vertexCommonStyle          = new CommonVertexStyle(); 
+    this.vertexSelectedVertexStyles = DefaultSelectedGraphStyles;
+    
+    this.vertexPrintCommonStyle          = new CommonPrintVertexStyle(); 
+    this.vertexPrintSelectedVertexStyles = DefaultPrintSelectedGraphStyles;
 };
 
 // List of graph.
@@ -153,6 +165,28 @@ Application.prototype._OffscreenRedrawGraph = function()
     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.fillStyle = "white";
+    context.fillRect(0, 0, Math.max(canvas.width, this.GetRealWidth()), Math.max(canvas.height, this.GetRealHeight()));
+    context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
+    
+    this.RedrawEdges(context, this.edgePrintCommonStyle,   this.edgePrintSelectedStyles);
+    this.RedrawNodes(context, this.vertexPrintCommonStyle, this.vertexPrintSelectedVertexStyles);
+    
+    context.restore();
+    
+    return canvas;
+}
+
 Application.prototype.updateRenderPathLength = function()
 {
     this.renderPathLength = 0;
@@ -221,15 +255,15 @@ Application.prototype.GetBaseArcDrawer = function(context, edge)
     return arcDrawer;
 }
 
-Application.prototype.RedrawEdge = function(context, edge)
+Application.prototype.RedrawEdge = function(context, edge, ForceCommonStyle, ForceSelectedStyle)
 {
     var curvedArcDrawer = new CurvedArcDrawer(context, edge.model)
     var arcDrawer       = this.GetBaseArcDrawer(context, edge);
     
-    var commonStyle      = new CommonEdgeStyle(context);
+    var commonStyle   = (ForceCommonStyle === undefined) ? this.edgeCommonStyle : ForceCommonStyle;
-    var selectedStyles   = selectedEdgeStyles;
+    var selectedStyle = (ForceSelectedStyle === undefined) ? this.edgeSelectedStyles : ForceSelectedStyle;
     
-    this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyles);
+    this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyle);
 }
 
 Application.prototype._RedrawEdge = function(edge, arcDrawer, commonStyle, selectedStyles)
@@ -250,39 +284,34 @@ Application.prototype.RedrawEdgeProgress = function(context, edge, progress)
 {
     var progressDraw     = new ProgressArcDrawer(context, this.GetBaseArcDrawer(context, edge), progress);
     var arcDrawer        = new BaseEdgeDrawer(context, {drawObject : progressDraw});
-    var commonStyle      = new CommonEdgeStyle(context);
-    var selectedStyles   = selectedEdgeStyles;
 
-    this._RedrawEdge(edge, arcDrawer, commonStyle, selectedStyles);
+    this._RedrawEdge(edge, arcDrawer, this.edgeCommonStyle, this.edgeSelectedStyles);
 }
 
-Application.prototype.RedrawEdges = function(context)
+Application.prototype.RedrawEdges = function(context, ForceCommonStyle, ForceSelectedStyle)
 {
     for (i = 0; i < this.graph.edges.length; i ++)
     {
-        this.RedrawEdge(context, this.graph.edges[i]);
+        this.RedrawEdge(context, this.graph.edges[i], ForceCommonStyle, ForceSelectedStyle);
     }
 }
 
-Application.prototype.RedrawNodes = function(context)
+Application.prototype.RedrawNodes = function(context, ForceCommonStyle, ForceSelectedStyle)
 {
     var graphDrawer   = new BaseVertexDrawer(context);
-    var commonGraphDrawer = new CommonVertexStyle();
+    var commonStyle   = (ForceCommonStyle === undefined) ? this.vertexCommonStyle : ForceCommonStyle;
-    var selectedGraphDrawer = selectedGraphStyles;
+    var selectedStyle = (ForceSelectedStyle === undefined) ? this.vertexSelectedVertexStyles : ForceSelectedStyle;
 
     for (i = 0; i < this.graph.vertices.length; i ++)
     {
 		var selectedGroup = this.handler.GetSelectedGroup(this.graph.vertices[i]);
 		var currentStyle  = selectedGroup > 0 ?
-				selectedGraphDrawer[(selectedGroup - 1) % selectedGraphDrawer.length] : commonGraphDrawer;
+				selectedStyle[(selectedGroup - 1) % selectedStyle.length] : commonStyle;
-
-		//this.graph.vertices[i].upText = this.handler.GetUpText(this.graph.vertices[i]);
 
 		graphDrawer.Draw(this.graph.vertices[i], currentStyle);
     }	
 }
 
-
 Application.prototype.updateMessage = function()
 {
 	this.document.getElementById('message').innerHTML = this.handler.GetMessage(); 
@@ -590,12 +619,17 @@ Application.prototype.SetHandlerMode = function(mode)
     else if (mode == "saveDialogImage")
     {
         var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
-        savedDialogGraphImageHandler.show();
+        savedDialogGraphImageHandler.showWorkspace();
     }
     else if (mode == "saveDialogFullImage")
     {
         var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
-        savedDialogGraphImageHandler.show(null, true);           
+        savedDialogGraphImageHandler.showFullgraph();           
+    }
+    else if (mode == "savePrintGraphImage")
+    {
+        var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
+        savedDialogGraphImageHandler.showPrint();           
     }
     else if (mode == "eulerianLoop")
     {
@@ -903,12 +937,12 @@ Application.prototype.SaveGraphImageOnDisk = function (showDialogCallback)
     return imageName;
 }
 
-Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback)
+Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback, forPrint)
 {
     var imageName = this.GetNewGraphName();
                           
     this.stopRenderTimer();
-    var canvas = this._OffscreenRedrawGraph();
+    var canvas = forPrint ? this._PrintRedrawGraph() : this._OffscreenRedrawGraph();
                           
     var bbox = this.graph.getGraphBBox();
     
@@ -932,9 +966,6 @@ Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback)
     return imageName;
 }
                           
-                          
-
-
 Application.prototype.LoadGraphFromString = function (str)
 {
     var graph = new Graph();

script/BaseEdgeDrawer.js

@@ -14,6 +14,17 @@ function CommonEdgeStyle()
 	this.loopShiftAngel = Math.PI / 6;
 }
 
+function CommonPrintEdgeStyle()
+{
+	this.strokeStyle = '#000000';
+	this.weightText  = '#000000';
+ 	this.fillStyle   = '#FFFFFF';
+ 	this.textPadding = 4;
+	this.textStrockeWidth = 2;
+ 	this.sizeOfLoop = 24;
+	this.loopShiftAngel = Math.PI / 6;
+}
+
 function SelectedEdgeStyle0()
 {
 	CommonEdgeStyle.apply(this, arguments);  
@@ -24,17 +35,6 @@ function SelectedEdgeStyle0()
 }
 SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
 
-function ProgressEdgeStyle()
-{
-    CommonEdgeStyle.apply(this, arguments);
-    
-    var selectedStyle = new SelectedEdgeStyle0();
-    this.strokeStyle = selectedStyle.fillStyle;
-    this.weightText  = '#000000';
-    this.fillStyle   = '#000000';
-}
-ProgressEdgeStyle.prototype = Object.create(CommonEdgeStyle.prototype);
-
 function SelectedEdgeStyle1()
 {
 	CommonEdgeStyle.apply(this, arguments);  
@@ -78,9 +78,20 @@ function SelectedEdgeStyle4()
 }
 SelectedEdgeStyle4.prototype = Object.create(CommonEdgeStyle.prototype);
 
-var selectedEdgeStyles = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(), 
+function SelectedEdgePrintStyle()
+{
+	CommonEdgeStyle.apply(this, arguments);  
+
+	this.strokeStyle = '#AAAAAA';
+	this.weightText  = '#000000';
+	this.fillStyle   = '#AAAAAA';
+}
+SelectedEdgeStyle0.prototype = Object.create(CommonEdgeStyle.prototype);
+
+var DefaultSelectedEdgeStyles      = [new SelectedEdgeStyle0(), new SelectedEdgeStyle1(), 
 	new SelectedEdgeStyle2(), new SelectedEdgeStyle3(), new SelectedEdgeStyle4()];
 
+var DefaultPrintSelectedEdgeStyles = [new SelectedEdgePrintStyle()];
 
 function BaseEdgeDrawer(context, drawObjects)
 { 
@@ -299,8 +310,6 @@ ProgressArcDrawer.prototype.Draw = function(baseEdge, arcStyle)
 {
     this.baseDrawer.Draw(baseEdge, arcStyle);
     
-    this.SetupStyle(baseEdge, new ProgressEdgeStyle());
-    
     this.context.lineWidth = 10;
     
     var positions = baseEdge.GetEdgePositionsShift();

script/BaseVertexDrawer.js

@@ -11,6 +11,14 @@ function CommonVertexStyle()
   this.mainTextColor = '#f0d543';
 }
 
+function CommonPrintVertexStyle()
+{
+  this.lineWidth   = 1;
+  this.strokeStyle = '#000000';
+  this.fillStyle   = '#FFFFFF';
+  this.mainTextColor = '#000000';
+}
+
 // Selected style of Graphs.
 function SelectedVertexStyle0()
 {
@@ -122,9 +130,22 @@ function SelectedVertexStyle9()
 
 SelectedVertexStyle9.prototype = Object.create(CommonVertexStyle.prototype);
 
-var selectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
+function SelectedPrintVertexStyle()
+{
+	CommonVertexStyle.apply(this, arguments);
+
+	this.strokeStyle   = '#000000';
+	this.mainTextColor = '#000000';
+	this.fillStyle     = '#AAAAAA';
+}
+
+SelectedPrintVertexStyle.prototype = Object.create(CommonVertexStyle.prototype);
+
+var DefaultSelectedGraphStyles = [new SelectedVertexStyle0(), new SelectedVertexStyle1(),
 	new SelectedVertexStyle2(), new SelectedVertexStyle3(), new SelectedVertexStyle4(), new SelectedVertexStyle5(), new SelectedVertexStyle6(), new SelectedVertexStyle7(), new SelectedVertexStyle8(), new SelectedVertexStyle9()];
 
+var DefaultPrintSelectedGraphStyles = [new SelectedPrintVertexStyle()];
+
 function BaseVertexDrawer(context)
 { 
   this.context = context;

script/EventHandlers.js

@@ -844,6 +844,7 @@ function SavedDialogGraphImageHandler(app)
 {
     BaseHandler.apply(this, arguments);
     this.message = "";
+    this.imageName = "";
 }
 
 // inheritance.
@@ -855,22 +856,15 @@ SavedDialogGraphImageHandler.prototype.pathObjects = null;
 // Objects.
 SavedDialogGraphImageHandler.prototype.objects    = null;
 
-SavedDialogGraphImageHandler.prototype.show = function(object, isFull)
+SavedDialogGraphImageHandler.prototype.showDialogCallback = function ()
 {
-    if (isFull === undefined) 
-    {
-      isFull = false;
-    }
-    
-    var showDialogCallback = function ()
-    {
     var dialogButtons = {};
 
     dialogButtons[g_close] = function() {
         $( this ).dialog( "close" );
     };
 
-        var fileLocation = "tmp/saved/" + imageName.substr(0, 2) + "/"+ imageName + ".png"
+    var fileLocation = "tmp/saved/" + this.imageName.substr(0, 2) + "/"+ this.imageName + ".png"
 
     document.getElementById("showSavedImageGraph").src     = "/" + fileLocation;
     document.getElementById("showSavedImageGraphRef").href = "/" + fileLocation;
@@ -891,11 +885,37 @@ SavedDialogGraphImageHandler.prototype.show = function(object, isFull)
                               dialogClass: 'EdgeDialog'
                               });
 
-    }
-    
-    var imageName = isFull ? this.app.SaveFullGraphImageOnDisk(showDialogCallback) : this.app.SaveGraphImageOnDisk(showDialogCallback);
 }
 
+SavedDialogGraphImageHandler.prototype.showWorkspace = function()
+{
+    var object = this;
+    var callback = function() {
+      object.showDialogCallback();
+    };
+    
+    this.imageName = this.app.SaveGraphImageOnDisk(callback);
+}
+
+SavedDialogGraphImageHandler.prototype.showFullgraph = function()
+{
+    var object = this;
+    var callback = function() {
+      object.showDialogCallback();
+    };
+    
+    this.imageName = this.app.SaveFullGraphImageOnDisk(callback, false);
+}
+
+SavedDialogGraphImageHandler.prototype.showPrint = function()
+{
+    var object = this;
+    var callback = function() {
+      object.showDialogCallback();
+    };
+    
+    this.imageName = this.app.SaveFullGraphImageOnDisk(callback, true);
+}
 
 /**
  * Algorithm Graph handler.

script/main.js

@@ -360,6 +360,12 @@ function postLoadPage()
         application.SetHandlerMode("saveDialogFullImage");
     }
 
+    document.getElementById('SavePrintGraphImage').onclick = function ()
+    {
+        userAction(this.id);
+        application.SetHandlerMode("savePrintGraphImage");
+    }
+    
     document.getElementById('Zoom100').onclick = function ()
     {
         userAction(this.id);

tpl/home.php

@@ -41,12 +41,16 @@
       				<li>
 				  <button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraph"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save')?></button>
 				</li>
-                <li>
+                <li class="divider"></li>
-                    <button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraphImage"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save_image')?></button>
-                </li>
                 <li>
                     <button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveFullGraphImage"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save_full_image')?></button>
                 </li>
+                <li>
+                    <button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveGraphImage"><span class="glyphicon glyphicon-camera fa-fw"></span> <?= L('save_image')?></button>
+                </li>
+                <li>
+                    <button type="button" class="btn btn-default btn-sm btn-submenu" id="SavePrintGraphImage"><span class="glyphicon glyphicon-print fa-fw"></span> <?= L('save_print_image')?></button>
+                </li>
                 <li class="divider hidden-phone"></li>
                 <li class="hidden-phone">
 				  <button type="button" class="btn btn-default btn-sm btn-submenu" id="ExportGraph"><span class="glyphicon glyphicon-download fa-fw"></span> <?= L('export_graph')?></button>