Export svg (#33)

* WIP: add option to export svg

needs to move CSS styling into SVG inline styles

* WIP svg export - everything except font

* font export corrected (assuming internet connection) - using @import

Author: hmsklee

dist/tag/css/tag.min.css

@@ -27,6 +27,7 @@
   <button id="custom-annotation">Custom annotation</button>
   <button id="taxonomy-toggle">Taxonomy</button>
   <button id="options-toggle">Options</button>
+  <button id="download-button">Download (CTRL+S)<a id="download" download></a></button>
 </header>
 
 <div id="input-modal" class="modal">

dist/tag/js/tag.min.js

@@ -1,3 +1,5 @@
+@import url(http://fonts.googleapis.com/css?family=Nunito:400,600);
+
 #fill {
   /* ensure body takes up entire window */
   position:absolute;

index.html

@@ -9,11 +9,14 @@ import Tooltip from './managers/tooltip.js';
 import Word from './components/word.js';
 import WordCluster from './components/wordcluster.js';
 import Link from './components/link.js';
+import load from './xhr.js';
 
 const Main = (function() {
   // classes
   let parser, lm, rm, tm;
 
+  let css;
+
   // main svg element
   let svg;
 
@@ -49,6 +52,9 @@ const Main = (function() {
     tm      = new Taxonomy('taxonomy');
     tree    = new TreeLayout('#tree', svg);
 
+    load('/dist/tag/css/tag.min.css')
+      .then((text) => css = text);
+
     // load and render initial dataset by default
     changeDataset();
 
@@ -241,6 +247,30 @@ const Main = (function() {
     document.body.addEventListener('dragenter', (e) => e.preventDefault());
     document.body.addEventListener('dragover', (e) => e.preventDefault());
     document.body.addEventListener('drop', uploadFile);
+
+
+    function exportFile() {
+
+      let exportedSVG = svg.svg();
+      console.log(css);
+      let i = exportedSVG.indexOf('</defs>');
+      exportedSVG = exportedSVG.slice(0, i)
+        + '<style>' + css + 'text{text-anchor:middle;}</style>'
+        + exportedSVG.slice(i);
+      let a = document.getElementById('download');
+      a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(exportedSVG));
+      a.setAttribute('download', 'tag.svg');
+      a.click();
+    }
+    document.getElementById('download-button').onclick = exportFile;
+    document.addEventListener('keydown', (e) => {
+      let key = e.keyCode || e.which;
+      let ctrl = e.ctrlKey || (e.metaKey && !e.ctrlKey);
+      if (key === 83 && ctrl) {
+        e.preventDefault();
+        exportFile();
+      }
+    })
   }
 
   /* read an externally loaded file */

src/css/app.css

@@ -1,3 +1,5 @@
+import Link from '../components/link.js';
+
 module.exports = (function() {
   let _svg;
   let activeObject = null;