frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Minimise work done to calculate node label widths

Browse Source 
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.
This commit is contained in:
Nick O'Leary 2019-05-22 00:04:19 +01:00
parent c4f5df0cd0
commit 97f11e38cd
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

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