Improve svg measuring performance by reusing the svg and text element.

#88
yWorks · Jul 24, 2019 · 51e602e · 51e602e
1 parent 13be990
commit 51e602e
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/src/svg2pdf.js b/src/svg2pdf.js
@@ -1315,6 +1315,29 @@ SOFTWARE.
     }
   };
 
+  var textMeasuringTextElement = null;
+  function getMeasurementTextNode() {
+    if (!textMeasuringTextElement) {
+      textMeasuringTextElement = document.createElementNS(svgNamespaceURI, "text");
+
+      var svg = document.createElementNS(svgNamespaceURI, "svg");
+      svg.appendChild(textMeasuringTextElement);
+
+      svg.style.setProperty("position", "absolute");
+      svg.style.setProperty("visibility", "hidden");
+      document.body.appendChild(svg);
+    }
+
+    return textMeasuringTextElement
+  }
+
+  function cleanupTextMeasuring() {
+    if (textMeasuringTextElement) {
+      document.body.removeChild(textMeasuringTextElement.parentNode);
+      textMeasuringTextElement = null
+    }
+  }
+
   /**
    * Canvas text measuring is a lot faster than svg measuring. However, it is inaccurate for some fonts. So test each
    * font once and decide if canvas is accurate enough.
@@ -1346,24 +1369,15 @@ SOFTWARE.
      * @param {string} fontWeight
      */
     function svgTextMeasure(text, fontFamily, fontSize, fontStyle, fontWeight) {
-      var textNode = document.createElementNS(svgNamespaceURI, "text");
+      var textNode = getMeasurementTextNode();
       textNode.setAttribute("font-family", fontFamily);
       textNode.setAttribute("font-size", fontSize);
       textNode.setAttribute("font-style", fontStyle);
       textNode.setAttribute("font-weight", fontWeight);
       textNode.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
-      textNode.appendChild(document.createTextNode(text));
-
-      var svg = document.createElementNS(svgNamespaceURI, "svg");
-      svg.appendChild(textNode);
-      svg.setAttribute("visibility", "hidden");
-      document.body.appendChild(svg);
-
-      var width = textNode.getBBox().width;
+      textNode.textContent = text;
 
-      document.body.removeChild(svg);
-
-      return width;
+      return textNode.getBBox().width;
     }
 
     var testString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!\"$%&/()=?'\\+*-_.:,;^}][{#~|<>";
@@ -2339,6 +2353,8 @@ SOFTWARE.
 
     });
 
+    cleanupTextMeasuring();
+
     return _pdf;
   };
 

diff --git a/tests/big-graph1.html b/tests/big-graph1.html
diff --git a/tests/big-graph2.html b/tests/big-graph2.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <head>
   <script src="../../jsPDF/dist/jspdf.debug.js"></script>
-  <script src="../src/rgbcolor.js" charset="utf-8"></script>
-  <script src="../src/svg2pdf.js" charset="utf-8"></script>
+  <script src="../dist/svg2pdf.js" charset="utf-8"></script>
 </head>
 <body>
 <div style="float: left">
@@ -33,4 +32,4 @@ <h4>PDF:</h4>
 
   setTimeout(save, 10);
 </script>
-</body>
+</body>