transform text into paths, so text tags can be taken into account

package.json

@@ -23,6 +23,7 @@
     "babel-core": "^6.26.0",
     "codemirror": "^5.32.0",
     "d3-array": "^1.2.1",
+    "opentype.js": "^0.8.0",
     "pathologist": "^0.1.9",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-commonjs": "^8.2.6",

src/App.html

@@ -112,6 +112,7 @@
 
 <script>
 
+
 import pathsToCoords from './js/pathsToCoords';
 import getTotalLengthAllPaths from './js/getTotalLengthAllPaths';
 import getCoordsMax from './js/getCoordsMax';
@@ -149,6 +150,7 @@
   cat
 };
 
+
 const hiddenExamples = {
   pipe,
   spotify,

src/js/pathologize.js

@@ -1,18 +1,82 @@
 //Thank you Rich!! https://pathologist.surge.sh/
-import * as pathologist  from 'pathologist';
+import * as pathologist from 'pathologist';
+import { load } from 'opentype.js';
 
-export default function pathologize (original) {
+const FONT_URL =
+  'https://sp-bootstrap.global.ssl.fastly.net/8.0.0/fonts/circular-book.woff';
+let loadedFont;
 
+export default function pathologize(original) {
   //handles issues with pathologist not parsing text and style elements
+  if (loadedFont !== undefined) {
+    return pathologizeWithFont(original, loadedFont);
+  }
+  return load(FONT_URL, (err, font) => {
+    if (err) {
+      return pathologizeWithFont(original, null);
+    }
+    return pathologizeWithFont(original, font);
+  });
+}
+
+export function pathologizeWithFont(original, font) {
+  // caches font as to not load it every time
+  loadedFont = font;
   const reText = /<text[\s\S]*?<\/text>/g;
   const reStyle = /<style[\s\S]*?<\/style>/g;
-  const removedText = original.replace(reText, '');
-  const removedStyle = removedText.replace(reStyle, '');
+  const transformedText = original.replace(reText, text =>
+    transformText(text, font)
+  );
+  const removedStyle = transformedText.replace(reStyle, '');
 
   try {
     const pathologized = pathologist.transform(removedStyle);
     return pathologized;
-  } catch (e)  {
+  } catch (e) {
     return original;
   }
 }
+
+export function transformText(text, font) {
+  if (font === null) {
+    return '';
+  }
+  // to generate a path from text we need
+  // x and y coordinates, font size and inner text
+  // these can be deduced from the text tag.
+  // all of the values are supposed to be in pixels
+  // defaults are: x=0, y=0,  font size=12
+  const reInnerText = />([^<]*)</;
+  const innerText = text.match(reInnerText) ? text.match(reInnerText)[1] : '';
+  if (innerText === '') {
+    return '';
+  }
+
+  const reX = / x="([^"]*)"/;
+  const reY = / y="([^"]*)"/;
+  const reFS = / font-size="([^"]*)"/;
+
+  const x = text.match(reX) ? parseFloat(text.match(reX)[1]) : 0;
+  const y = text.match(reX) ? parseFloat(text.match(reY)[1]) : 0;
+  const fontSize = text.match(reFS) ? parseFloat(text.match(reFS)[1]) : 12;
+  const { commands } = font.getPath(innerText, x, y, fontSize);
+  // commands is an array of objects where type is either M, L, Q or Z.
+  // we can build a path from that array
+
+  const pathFromText = commands.reduce((prev, curr) => {
+    switch (curr.type) {
+    case 'M':
+      return prev + `M ${curr.x} ${curr.y} `;
+    case 'L':
+      return prev + `L ${curr.x} ${curr.y} `;
+    case 'Q':
+      return prev + `Q ${curr.x1} ${curr.y1}, ${curr.x} ${curr.y} `;
+    case 'Z':
+      return prev + 'Z ';
+    default:
+      return prev;
+    }
+  }, '');
+
+  return `<path d="${pathFromText}"/>`;
+}