From 97f11e38cd1f624d1bf7833a857f241cbc43924b Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 22 May 2019 00:04:19 +0100
Subject: [PATCH] Minimise work done to calculate node label widths

Currently, everytime the tab is switched, we recalculate the
width of every node. There's no need to do that as the width
will not have changed - unless it has changed, but then the
dirty/changed flag will be set on that one node and it will
get handled.
Also avoid endless added/removing an element to calculate the
dimenstions - keep it on the dom (keyed by className) and
positioned well away from the visible space.
---
 .../@node-red/editor-client/src/js/ui/view.js | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 9683bf4a9..70c09d188 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -1758,11 +1758,18 @@ RED.view = (function() {
         return calculateTextDimensions(str,className,offset,0)[0];
     }
 
+    var textDimensionPlaceholder = {};
     function calculateTextDimensions(str,className,offsetW,offsetH) {
-        var sp = $('<span>',{class: className,style: "position: absolute; top: -1000px"}).text(str||"").appendTo("#red-ui-editor");
-        var w = sp.width();
-        var h = sp.height();
-        sp.remove();
+        if (!textDimensionPlaceholder[className]) {
+            textDimensionPlaceholder[className] = document.createElement("span");
+            textDimensionPlaceholder[className].className = className;
+            textDimensionPlaceholder[className].style.position = "absolute";
+            textDimensionPlaceholder[className].style.top = "-1000px";
+            document.getElementById("red-ui-editor").appendChild(textDimensionPlaceholder[className]);
+        }
+        textDimensionPlaceholder[className].textContent = (str||"");
+        var w = textDimensionPlaceholder[className].offsetWidth;
+        var h = textDimensionPlaceholder[className].offsetHeight;
         return [offsetW+w,offsetH+h];
     }
 
@@ -2564,10 +2571,12 @@ RED.view = (function() {
                     var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
                     node.attr("id",d.id);
                     var l = RED.utils.getNodeLabel(d);
-                    if (hideLabel) {
-                        d.w = node_height;
-                    } else {
-                        d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
+                    if (d.w === undefined) {
+                        if (hideLabel) {
+                            d.w = node_height;
+                        } else {
+                            d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
+                        }
                     }
                     d.h = Math.max(node_height,(d.outputs||0) * 15);