[feature] export NWK as PNG with CSS considered #47

- hard copy all style sheet rules into the generated SVG code
- use bulma font explicitly in SVG

src/assets/utils.ts

@@ -28,8 +28,10 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void {
     return;
   }
 
-  const svgData = new XMLSerializer().serializeToString(svgElem);
-  // svgData = '<?xml version="1.0" standalone="no"?>\r\n' + svgData;
+  let svgData = new XMLSerializer().serializeToString(svgElem);
+  svgData = '<?xml version="1.0" standalone="no"?>\r\n' + svgData;
+  svgData = insertStyleSheets(svgData);
+  // downloadText(filename.replace("png", "svg"), svgData);
 
   const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
   const DOMURL = window.URL || window.webkitURL || window;
@@ -39,7 +41,7 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void {
   img.onload = () => {
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
-    const domRect = (svgElem as SVGGraphicsElement).getBBox();
+    const domRect = svgElem.getBoundingClientRect();
     canvas.width = domRect.width;
     canvas.height = domRect.height;
     ctx?.drawImage(img, 0, 0, domRect.width, domRect.height);
@@ -58,4 +60,27 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void {
   img.src = svgUrl;
 }
 
+function insertStyleSheets(svgData: string): string {
+  // based on https://stackoverflow.com/a/41346127/1140589
+  let styleStr = "<style>";
+  for (const sheet of document.styleSheets) {
+    try {
+      // we need a try-catch block for external stylesheets that could be there...
+      styleStr += Array.prototype.reduce.call(
+        sheet.cssRules,
+        function (a, b) {
+          return a + b.cssText; // just concatenate all our cssRules' text
+        },
+        ""
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  styleStr += "</style>";
+
+  // svgData.
+  return svgData.replace(/<defs([^>]*)>/, "<defs$1>" + styleStr);
+}
+
 export const SYMBOL_DECEASED = "+"; // "💀";

src/components/NetworkMap.vue

@@ -341,7 +341,10 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@import "~bulma/sass/base/_all.sass";
+
 text {
+  font-family: $family-primary;
   font-size: 4px;
 }