SVG: Fixed download functionality

- Worked around CORS CSS error on Chrome on download

- Downloaded SVG files now have the relevant styles applied to WordTag
lines (they were missing previously)

- Downloaded SVG files now include Google font imports for proper
display (although the main library uses the Web Font Loader to load
fonts instead)

Author: ZechyW

demo/demo.min.css

@@ -75,7 +75,10 @@
 }
 
 // Fonts used in the visualisation
-// The actual loading of the font happens at the start of `demo.js` via the Web Font Loader
+// The actual loading of the font happens at the start of `demo.js` via the Web Font Loader, but we include the Google
+// fonts import here as well so that they work properly for downloaded SVGs.
+@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
+
 svg, svg text {
   font-family: Nunito, futura, helvetica, arial, sans-serif;
   font-weight: 600;

demo/demo.min.css.map

@@ -41664,7 +41664,7 @@ function () {
       }); // Draws a line / curly bracket between the Word and this WordTag, if
       // it's a top tag
 
-      this.line = this.svg.path();
+      this.line = this.svg.path().addClass("tag-element");
       this.drawTagLine(); // Centre the WordTag and its line horizontally
       // (SVG text elements are positioned on the x-axis by their centres)
 
@@ -45195,50 +45195,96 @@ function getCssRules(elements) {
   var sheets = document.styleSheets;
   var ret = [];
   var importRules = [];
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
 
-  for (var i in sheets) {
-    var rules = sheets[i].rules || sheets[i].cssRules;
+  try {
+    for (var _iterator = sheets[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var sheet = _step.value;
 
-    for (var r in rules) {
-      // Include @import rules by default, since we can't be sure if they
-      // apply, and since they are generally used for fonts
-      if (rules[r].type === CSSRule.IMPORT_RULE) {
-        importRules.push(rules[r].cssText);
-        continue;
-      } // For other types of rules, check against the listed elements
+      try {
+        var rules = sheet.rules || sheets.cssRules;
+        var _iteratorNormalCompletion2 = true;
+        var _didIteratorError2 = false;
+        var _iteratorError2 = undefined;
 
+        try {
+          for (var _iterator2 = rules[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var rule = _step2.value;
 
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
+            // Include @import rules by default, since we can't be sure if they
+            // apply, and since they are generally used for fonts
+            if (rule.type === CSSRule.IMPORT_RULE) {
+              importRules.push(rule.cssText);
+              continue;
+            } // For other types of rules, check against the listed elements
 
-      try {
-        for (var _iterator = elements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var el = _step.value;
-          el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
 
-          if (el.matches(rules[r].selectorText)) {
-            ret.push(rules[r].cssText);
-            break;
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
+            var _iteratorNormalCompletion3 = true;
+            var _didIteratorError3 = false;
+            var _iteratorError3 = undefined;
+
+            try {
+              for (var _iterator3 = elements[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+                var el = _step3.value;
+                el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
+
+                if (el.matches(rule.selectorText)) {
+                  ret.push(rule.cssText);
+                  break;
+                }
+              }
+            } catch (err) {
+              _didIteratorError3 = true;
+              _iteratorError3 = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+                  _iterator3.return();
+                }
+              } finally {
+                if (_didIteratorError3) {
+                  throw _iteratorError3;
+                }
+              }
+            }
           }
+        } catch (err) {
+          _didIteratorError2 = true;
+          _iteratorError2 = err;
         } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
+          try {
+            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+              _iterator2.return();
+            }
+          } finally {
+            if (_didIteratorError2) {
+              throw _iteratorError2;
+            }
           }
         }
+      } catch (err) {
+        // Sometimes we get CORS errors with Chrome and external stylesheets,
+        // but we should be all right to keep going
+        console.log("Warning:", err);
       }
-    }
-  } // Import rules have to be at the top of the styles list
+    } // Import rules have to be at the top of the styles list
 
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
 
   return _lodash.default.uniq(importRules.concat(ret));
 }

demo/demo.min.js

@@ -437,7 +437,7 @@ <h4 class="name" id="textWidth">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line178">line 178</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line179">line 179</a>
         </li>
       </ul>
     </dd>
@@ -616,7 +616,7 @@ <h4 class="name" id="centre">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line92">line 92</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line93">line 93</a>
         </li>
       </ul>
     </dd>
@@ -707,7 +707,7 @@ <h4 class="name" id="remove">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line106">line 106</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line107">line 107</a>
         </li>
       </ul>
     </dd>
@@ -797,7 +797,7 @@ <h4 class="name" id="drawTagLine">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line115">line 115</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line116">line 116</a>
         </li>
       </ul>
     </dd>
@@ -932,7 +932,7 @@ <h5>Parameters:</h5>
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line144">line 144</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line145">line 145</a>
         </li>
       </ul>
     </dd>
@@ -1021,7 +1021,7 @@ <h4 class="name" id="boxWidth">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line170">line 170</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line171">line 171</a>
         </li>
       </ul>
     </dd>
@@ -1110,7 +1110,7 @@ <h4 class="name" id="drawBbox">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line225">line 225</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line226">line 226</a>
         </li>
       </ul>
     </dd>
@@ -1199,7 +1199,7 @@ <h4 class="name" id="drawTextBbox">
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line237">line 237</a>
+          <a href="components_word-tag.js.html">components/word-tag.js</a>, <a href="components_word-tag.js.html#line238">line 238</a>
         </li>
       </ul>
     </dd>

demo/src/demo.scss

@@ -165,7 +165,8 @@ <h1 class="page-title">
 
     // Draws a line / curly bracket between the Word and this WordTag, if
     // it's a top tag
-    this.line = this.svg.path();
+    this.line = this.svg.path()
+      .addClass("tag-element");
     this.drawTagLine();
 
     // Centre the WordTag and its line horizontally

dist/tag/js/tag.js

@@ -124,13 +124,15 @@ <h1>Citing TAG</h1><p>If you use TAG in your work, please use the following cita
 }</code></pre><h2>Write-up</h2><p>A paper describing TAG was accepted to <a href="http://lrec2018.lrec-conf.org/en/conference-programme/accepted-papers/">LREC'18</a>. A pre-print can be found at <a href="https://arxiv.org/abs/1711.00529">https://arxiv.org/abs/1711.00529</a></p>
 <h2>Installation</h2><p>TAG can be built and installed using <a href="https://docs.npmjs.com/getting-started/installing-node"><code>npm</code></a>.</p>
 <h3>Via <code>npm</code></h3><pre class="prettyprint source"><code>npm install git+https://github.com/CreativeCodingLab/TextAnnotationGraphs.git</code></pre><h2>Usage</h2><p>To use TAG with your own applications, first include the library in your script:</p>
-<h4>Browserify (CommonJS)</h4><pre class="prettyprint source"><code>const TAG = require(&quot;text-annotation-graphs&quot;);</code></pre><h4>ES6</h4><pre class="prettyprint source"><code>import TAG from &quot;text-annotation-graphs&quot;;</code></pre><p>Then initialise the visualisation on an element, optionally specifying the initial data set to load.  For more details, consult the full API documentation.</p>
+<h4>Browserify (CommonJS)</h4><pre class="prettyprint source"><code>const TAG = require(&quot;text-annotation-graphs&quot;);</code></pre><h4>ES6</h4><pre class="prettyprint source"><code>import TAG from &quot;text-annotation-graphs&quot;;</code></pre><p>Then initialise the visualisation on an element, optionally specifying the initial data set to load and any overrides to the default options.  For more details, consult the full API documentation.</p>
 <pre class="prettyprint source"><code>const graph = TAG.tag({
   container: $container,
-  data: &lt;...>,
-  format: &quot;json&quot;
+  data: {...},
+  format: &quot;odin&quot;,
+  options: {...}
 });</code></pre><h2>Development</h2><p>Tasks are managed via <a href="https://docs.npmjs.com/misc/scripts"><code>npm</code> scripts</a> and the <a href="https://github.com/pawelgalazka/runjs"><code>runjs</code> build tool</a>.  The most commonly used tasks are listed in <code>package.json</code>, and details for the various sub-tasks can be found in <code>runfile.js</code>.</p>
 <h3>Demo</h3><p>After cloning the repository and installing the project dependencies via <code>npm install</code>, you can run the interactive demo using <code>npm run demo</code> and directing your browser to <code>localhost:8080</code>.</p>
+<p>To run the demo on a different port, set the <code>PORT</code> environmental variable. For example, running <code>PORT=9000 npm run demo</code> will start the demo server on <code>localhost:9000</code> instead.</p>
 <h3>Building the source</h3><p>TAG is written in ES6, and uses <a href="https://sass-lang.com/">Sass</a> for its styles.</p>
 <p>Assuming you've cloned the repository, simply run <code>npm install &amp;&amp; npm run build</code> to install dependencies and transpile the source to ES2015.</p>
 <h3>Live monitoring of changes</h3><p>For convenience, you can monitor changes to the library's sources (css + js) with the following <code>npm</code> task: </p>

dist/tag/js/tag.min.js

@@ -458,7 +458,7 @@ <h5>Parameters:</h5>
     <dd class="tag-source">
       <ul class="dummy">
         <li>
-          <a href="util.js.html">util.js</a>, <a href="util.js.html#line66">line 66</a>
+          <a href="util.js.html">util.js</a>, <a href="util.js.html#line73">line 73</a>
         </li>
       </ul>
     </dd>