Add export graph to svg

cgi-bin/saveGraphHelpers.php

@@ -39,6 +39,20 @@ function getImageFileName($graphName, $fromRoot=false)
     return $dirName . "/$graphName.png";
 }
 
+function getSvgFileName($graphName, $fromRoot=false)
+{
+    global $g_config;
+    
+    $dirName = ($fromRoot ? "" : "../") . $g_config['graphSavePath'] . substr($graphName, 0, 2);
+
+    if(!file_exists($dirName))
+    {
+        mkdir($dirName, 0777, true);
+    }
+
+    return $dirName . "/$graphName.svg";
+}
+
     
     function saveGraphXML($graph, $name, $fromRoot = false)
     {

cgi-bin/saveSvg.php

@@ -0,0 +1,19 @@
+<?php
+
+include ("../core/config/main.php");
+include ("saveGraphHelpers.php");
+
+$name  = $_GET["name"];
+
+if (isValidName($name))
+{
+    $imageFilename = getSvgFileName($name);
+    $svgData     = $_POST['svgdata'];
+    
+    file_put_contents($imageFilename, $svgData);
+    
+    chmod($imageFilename, 0644);
+    echo ("OK");
+}
+
+?>

core/config/admin_sector.php

@@ -7,5 +7,5 @@
     $g_config['admin_sector']['after_logout_page'] = 'admin/login'; // Страница на которую мы попадем после выхода из админки 
     
     $g_config['admin_sector']['def_login']         = 'admin'; // Логин для входа в административный раздел
-    $g_config['admin_sector']['def_pwd']           = '123erROR123'; // Пароль для входа в административный раздел
+    $g_config['admin_sector']['def_pwd']           = 'you_passs_here'; // Пароль для входа в административный раздел
 ?>

lang/bg/home.php

@@ -285,4 +285,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/ch/home.php

@@ -285,4 +285,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/de/home.php

@@ -248,4 +248,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/el/home.php

@@ -286,4 +286,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/en/home.php

@@ -285,4 +285,6 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";      
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/es/home.php

@@ -285,4 +285,6 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/fr/home.php

@@ -253,4 +253,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/nl/home.php

@@ -250,4 +250,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/pt/home.php

@@ -251,4 +251,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";    
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";  
 ?>

lang/ru/home.php

@@ -287,4 +287,7 @@
     $g_lang['reverse_all_edges'] = "Поменять направление всех дуг";
     $g_lang['make_all_undirected'] = "Сделать все дуги неориентированными";
     $g_lang['make_all_directed'] = "Сделать все дуги ориентированными";  
+
+    $g_lang['save_svg_image'] = "Сохранить граф в SVG";  
+
 ?>

lang/sv/home.php

@@ -247,4 +247,6 @@
     $g_lang['reverse_all_edges'] = "Reverse all edges";
     $g_lang['make_all_undirected'] = "Make all edges undirected";
     $g_lang['make_all_directed'] = "Make all edges directed";
+
+    $g_lang['save_svg_image'] = "Save graph to SVG";
 ?>

script/Appilcation.js

@@ -233,6 +233,22 @@ Application.prototype._PrintRedrawGraph = function()
     return canvas;
 }
 
+Application.prototype._printToSVG = function()
+{
+    var bbox = this.graph.getGraphBBox();
+    var context = new C2S(bbox.size().x, bbox.size().y);
+    
+    context.save();
+    
+    context.translate(bbox.minPoint.inverse().x, bbox.minPoint.inverse().y);
+    
+    this._RedrawGraph(context, bbox.minPoint.inverse(), this.backgroundCommonStyle, false);
+    
+    context.restore();
+    
+    return context.getSerializedSvg();
+}
+
 Application.prototype.updateRenderPathLength = function()
 {
     this.renderPathLength = 0;
@@ -707,6 +723,11 @@ Application.prototype.SetHandlerMode = function(mode)
         var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
         savedDialogGraphImageHandler.showPrint();           
     }
+    else if (mode == "saveSvgGraphImage")
+    {
+        var savedDialogGraphImageHandler = new SavedDialogGraphImageHandler(this);
+        savedDialogGraphImageHandler.showSvg();           
+    }    
     else if (mode == "eulerianLoop")
     {
 		this.handler = new EulerianLoopGraphHandler(this);
@@ -1076,6 +1097,32 @@ Application.prototype.SaveFullGraphImageOnDisk = function (showDialogCallback, f
     return imageName;
 }
 
+Application.prototype.SaveSVGGraphOnDisk = function (showDialogCallback)
+{
+    var imageName = this.GetNewName();
+                          
+    this.stopRenderTimer();
+    var svgText = this._printToSVG();
+                          
+    var bbox = this.graph.getGraphBBox();
+    
+    var imageBase64Data = canvas.toDataURL();
+
+    $.ajax({
+     type: "POST",
+     url: "/" + SiteDir + "cgi-bin/saveSvg.php?name=" + imageName,
+     data: {
+           svgdata : svgText
+     },
+     dataType: "text",
+     success: function(data){
+        showDialogCallback();
+    }
+     });
+                          
+    return imageName;
+}
+                          
 Application.prototype.LoadGraphFromString = function (str)
 {
     var graph = new Graph();

script/EventHandlers.js

@@ -1457,7 +1457,7 @@ SavedDialogGraphImageHandler.prototype.pathObjects = null;
 // Objects.
 SavedDialogGraphImageHandler.prototype.objects    = null;
 
-SavedDialogGraphImageHandler.prototype.showDialogCallback = function ()
+SavedDialogGraphImageHandler.prototype.showDialogCallback = function (imageExtention)
 {
     var dialogButtons = {};
 
@@ -1465,7 +1465,7 @@ SavedDialogGraphImageHandler.prototype.showDialogCallback = function ()
         $( this ).dialog( "close" );
     };
 
-    var fileLocation = "tmp/saved/" + this.imageName.substr(0, 2) + "/"+ this.imageName + ".png"
+    var fileLocation = "tmp/saved/" + this.imageName.substr(0, 2) + "/"+ this.imageName + "." + imageExtention
 
     document.getElementById("showSavedImageGraph").src     = "/" + fileLocation;
     document.getElementById("showSavedImageGraphRef").href = "/" + fileLocation;
@@ -1492,7 +1492,7 @@ SavedDialogGraphImageHandler.prototype.showWorkspace = function()
 {
     var object = this;
     var callback = function() {
-      object.showDialogCallback();
+      object.showDialogCallback("png");
     };
     
     this.imageName = this.app.SaveGraphImageOnDisk(callback);
@@ -1502,7 +1502,7 @@ SavedDialogGraphImageHandler.prototype.showFullgraph = function()
 {
     var object = this;
     var callback = function() {
-      object.showDialogCallback();
+      object.showDialogCallback("png");
     };
     
     this.imageName = this.app.SaveFullGraphImageOnDisk(callback, false);
@@ -1512,12 +1512,22 @@ SavedDialogGraphImageHandler.prototype.showPrint = function()
 {
     var object = this;
     var callback = function() {
-      object.showDialogCallback();
+      object.showDialogCallback("png");
     };
     
     this.imageName = this.app.SaveFullGraphImageOnDisk(callback, true);
 }
 
+SavedDialogGraphImageHandler.prototype.showSvg = function()
+{
+    var object = this;
+    var callback = function() {
+      object.showDialogCallback("svg");
+    };
+    
+    this.imageName = this.app.SaveSVGGraphOnDisk(callback);
+}
+
 /**
  * Algorithm Graph handler.
  *

script/main.js

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

tmp/saved/.gitignore

@@ -1,4 +1,6 @@
 *.png
 *.xml
+*.svg
 **/*.png
 **/*.xml
+**/*.svg

tpl/home.php

@@ -10,7 +10,8 @@
 
         <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
 	    <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
-        <script src="<?= Root("script/example.js?v=63")?>" ></script>
+      <script src="<?= Root("script/canvas2svg.js")?>" ></script>
+        <script src="<?= Root("script/example.js?v=64")?>" ></script>
 
 <!-- Yandex.RTB -->
 <script>window.yaContextCb=window.yaContextCb||[]</script>
@@ -56,6 +57,9 @@
                 <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>
+                    <button type="button" class="btn btn-default btn-sm btn-submenu" id="SaveSvgGraphImage"><span class="glyphicon glyphicon-floppy-disk fa-fw"></span> <?= L('save_svg_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>