[Fix] Pathway SVG Export (#157)

Fixes #103

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#157

static/js/pw.js

@@ -444,6 +444,13 @@ function serializeSVG(svgElement) {
         line.setAttribute("fill", style.fill);
     });
 
+    svgElement.querySelectorAll("line.link_no_arrow").forEach(line => {
+        const style = getComputedStyle(line);
+        line.setAttribute("stroke", style.stroke);
+        line.setAttribute("stroke-width", style.strokeWidth);
+        line.setAttribute("fill", style.fill);
+    });
+
     const serializer = new XMLSerializer();
     let svgString = serializer.serializeToString(svgElement);
 
@@ -455,7 +462,26 @@ function serializeSVG(svgElement) {
     return svgString;
 }
 
+function shrinkSVG(svgSelector) {
+
+    const svg = d3.select(svgSelector);
+    const node = svg.node();
+
+    // Compute bounding box of everything inside the SVG
+    const bbox = node.getBBox();
+
+    const padding = 10;
+    svg.attr("viewBox",
+        `${bbox.x - padding} ${bbox.y - padding} ${bbox.width + 2 * padding} ${bbox.height + 2 * padding}`
+    )
+        .attr("width", bbox.width + 2 * padding)
+        .attr("height", bbox.height + 2 * padding);
+
+    return bbox;
+}
+
 function downloadSVG(svgElement, filename = 'chart.svg') {
+    shrinkSVG("#" + svgElement.id);
     const svgString = serializeSVG(svgElement);
     const blob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
     const url = URL.createObjectURL(blob);

templates/objects/pathway.html

@@ -177,9 +177,6 @@
                 </nav>
                 <div id="vizdiv" >
                     <svg id="pwsvg">
-                        {% if debug %}
-                            <rect width="100%" height="100%" fill="aliceblue"/>
-                        {% endif %}
                         <defs>
                             <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
                                     orient="auto-start-reverse" markerUnits="userSpaceOnUse">