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

Merge pull request #436 from anna2130/calculate-text-width

Browse Source 
Refactored palette.js and view.js to reuse calculateTextWidth
This commit is contained in:
Nick O'Leary 2014-10-09 10:21:42 +01:00
commit 9a32e79603
2 changed files with 34 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/red/ui/palette.js
View File

@ -55,15 +55,6 @@ RED.palette = (function() {
d.id = "palette_node_"+nodeTypeId; d.id = "palette_node_"+nodeTypeId;
d.type = nt; d.type = nt;
// calculate width of label text
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) {
$.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
}
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
var label; var label;
if (typeof def.paletteLabel === "undefined") { if (typeof def.paletteLabel === "undefined") {
@ -72,9 +63,8 @@ RED.palette = (function() {
label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||""; label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
} }
var pixels = $.fn.textWidth(label, '13px helvetica'); var pixels = RED.view.calculateTextWidth(label, "palette_label", 0);
var nodeWidth = 90; var nodeWidth = 90;
var labelWidth = nodeWidth - 10;
var numLines = Math.ceil(pixels / nodeWidth); var numLines = Math.ceil(pixels / nodeWidth);
var multiLine = numLines > 1; var multiLine = numLines > 1;

11
public/red/ui/view.js
View File

@ -748,16 +748,16 @@ RED.view = (function() {
} }
function calculateTextWidth(str) { function calculateTextWidth(str, className, offset) {
var sp = document.createElement("span"); var sp = document.createElement("span");
sp.className = "node_label"; sp.className = className;
sp.style.position = "absolute"; sp.style.position = "absolute";
sp.style.top = "-1000px"; sp.style.top = "-1000px";
sp.innerHTML = (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); sp.innerHTML = (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
document.body.appendChild(sp); document.body.appendChild(sp);
var w = sp.offsetWidth; var w = sp.offsetWidth;
document.body.removeChild(sp); document.body.removeChild(sp);
return 50+w; return offset+w;
} }
function resetMouseVars() { function resetMouseVars() {
@ -955,7 +955,7 @@ RED.view = (function() {
node.attr("id",d.id); node.attr("id",d.id);
var l = d._def.label; var l = d._def.label;
l = (typeof l === "function" ? l.call(d) : l)||""; l = (typeof l === "function" ? l.call(d) : l)||"";
d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) ); d.w = Math.max(node_width,calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0) );
d.h = Math.max(node_height,(d.outputs||0) * 15); d.h = Math.max(node_height,(d.outputs||0) * 15);
if (d._def.badge) { if (d._def.badge) {
@ -1152,7 +1152,7 @@ RED.view = (function() {
if (d.resize) { if (d.resize) {
var l = d._def.label; var l = d._def.label;
l = (typeof l === "function" ? l.call(d) : l)||""; l = (typeof l === "function" ? l.call(d) : l)||"";
d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) ); d.w = Math.max(node_width,calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0) );
d.h = Math.max(node_height,(d.outputs||0) * 15); d.h = Math.max(node_height,(d.outputs||0) * 15);
} }
var thisNode = d3.select(this); var thisNode = d3.select(this);
@ -1630,6 +1630,7 @@ RED.view = (function() {
//TODO: subscribe/unsubscribe here //TODO: subscribe/unsubscribe here
redraw(); redraw();
}, },
calculateTextWidth: calculateTextWidth,
//TODO: should these move to an import/export module? //TODO: should these move to an import/export module?
showImportNodesDialog: showImportNodesDialog, showImportNodesDialog: showImportNodesDialog,