From 17653761b9b2a31b2466e79802ed907f3edd3b94 Mon Sep 17 00:00:00 2001 From: Yuma Matsuura Date: Tue, 3 Sep 2019 18:43:46 +0900 Subject: [PATCH] Update a line break function --- .../@node-red/editor-client/src/js/ui/view.js | 192 ++++++++++-------- 1 file changed, 109 insertions(+), 83 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 62282e624..ffd30af59 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 @@ -1803,7 +1803,7 @@ RED.view = (function() { RED.notify(RED._("clipboard.nodeCopied",{count:nns.length}),{id:"clipboard"}); } } - + function calculateTextWidth(str, className, offset) { var result=convertLineBreakCharacter(str); var width = 0; @@ -1831,26 +1831,35 @@ RED.view = (function() { return [offsetW+w,offsetH+h]; } + var separateTextByLineBreak = []; function convertLineBreakCharacter(str) { var result = []; - var temp = str.split('\\n'); - var result_temp = null; - for (var i = 0;i < temp.length;i++) { - if (result_temp == null || result_temp == '') { - result_temp = temp[i]; - } - var chr = temp[i].charAt(temp[i].length-1); - if (i < temp.length - 1) { - if (chr == '\\') { - result_temp += 'n' + temp[i+1]; - } else { + var count = 0; + var result_temp = ''; + for (var i = 0;i < str.length;i++) { + if (str.charAt(i) == '\\') { + if (str.charAt(i+1) == '\\') { + result_temp += str.charAt(i); + i++; + } else if (str.charAt(i+1) == 'n') { result.push(result_temp); - result_temp = null; - } + if (i+1 == str.length-1) { + result.push(''); + } + result_temp = ''; + count = i+2; + i++; + } else { + result_temp += str.charAt(i); + } } else { - result.push(result_temp); + result_temp += str.charAt(i); } } + if (count == 0 || count < str.length) { + result.push(result_temp); + } + separateTextByLineBreak = result; return result; } @@ -2708,21 +2717,19 @@ RED.view = (function() { var isLink = (d.type === "link in" || d.type === "link out") var hideLabel = d.hasOwnProperty('l')?!d.l : isLink; node.attr("id",d.id); - var l = RED.utils.getNodeLabel(d); + var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label", 50); if (d.resize || d.w === undefined) { if (hideLabel) { - d.w = 30; + 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.w = Math.max(node_width,20*(Math.ceil((labelWidth+(d._def.inputs>0?7:0))/20)) ); } } if (hideLabel) { - node_height = 30; + d.h = Math.max(node_height,(d.outputs || 0) * 15); } else { - node_height = 6 + 24 * convertLineBreakCharacter(l).length; + d.h = Math.max(6+24*separateTextByLineBreak.length, (d.outputs || 0) * 15, 30); } - d.h = Math.max(node_height,(d.outputs||0) * 15); - // if (d._def.badge) { // var badge = node.append("svg:g").attr("class","node_badge_group"); // var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15); @@ -2742,7 +2749,7 @@ RED.view = (function() { .attr("rx",5) .attr("ry",5) .attr("width",32) - .attr("height",26); + .attr("height",node_height-4); nodeButtonGroup.append("rect") .attr("class","red-ui-flow-node-button-button") .attr("x",function(d) { return d._def.align == "right"? 11:5}) @@ -2750,7 +2757,7 @@ RED.view = (function() { .attr("rx",4) .attr("ry",4) .attr("width",16) - .attr("height",18) + .attr("height",node_height-12) .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/}) .attr("cursor","pointer") .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}}) @@ -2908,17 +2915,21 @@ RED.view = (function() { //icon.style("pointer-events","none"); icon_group.style("pointer-events","none"); } - var text = node.append("svg:text") + var labelLineNumber = (separateTextByLineBreak.length == 0)? 1:separateTextByLineBreak.length; + for(var i=0;i0?7:0))/20)) ); + d.w = Math.max(node_width,20*(Math.ceil((labelWidth+(d._def.inputs>0?7:0))/20)) ); } // 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.x += (d.w-ow)/2; d.resize = false; } if (hideLabel) { - node_height = 30; + d.h = Math.max(node_height,(d.outputs || 0) * 15); } else { - node_height = 6 + 24 * convertLineBreakCharacter(l).length; + d.h = Math.max(6+24*separateTextByLineBreak.length,(d.outputs || 0) * 15, 30); } - d.h = Math.max(node_height,(d.outputs || 0) * 15); var thisNode = d3.select(this); thisNode.classed("red-ui-flow-node-disabled", function(d) { return d.d === true}); @@ -2993,6 +3004,65 @@ RED.view = (function() { .attr("height",function(d){return d.h}) .classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; }) ; + var l = ""; + if (d._def.label) { + l = d._def.label; + try { + l = (typeof l === "function" ? l.call(d) : l)||""; + l = RED.text.bidi.enforceTextDirectionWithUCC(l); + } catch(err) { + console.log("Definition error: "+d.type+".label",err); + l = d.type; + } + } + var sa = convertLineBreakCharacter(l); + var sn = sa.length; + var st = ""; + var yp = d.h / 2 - (sn / 2) * 24 + 16 + if(labelLineNumber0?5:0);}); //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;}); //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)}); @@ -3078,50 +3148,6 @@ RED.view = (function() { port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); }); } - thisNode.selectAll("text.red-ui-flow-node-label").html(function(d,i){ - var l = ""; - if (d._def.label) { - l = d._def.label; - try { - l = (typeof l === "function" ? l.call(d) : l)||""; - l = RED.text.bidi.enforceTextDirectionWithUCC(l); - } catch(err) { - console.log("Definition error: "+d.type+".label",err); - l = d.type; - } - } - var sa = convertLineBreakCharacter(l); - var sn = sa.length; - var ic = 0; - var st = ""; - var yp = d.h/2-(sn/2)*24+16 - var yn = 0; - var dy = ".3px"; - for (ic=0; ic"+sa[ic]+""; - } - if (sn!=1) { - return st; - } else { - return sa[0]!=null ? sa[0]:l; - } - }) - .attr("y", function(d){return (d.h/2)-1;}) - .attr("class",function(d){ - var s = ""; - if (d._def.labelStyle) { - s = d._def.labelStyle; - try { - s = (typeof s === "function" ? s.call(d) : s)||""; - } catch(err) { - console.log("Definition error: "+d.type+".labelStyle",err); - s = ""; - } - s = " "+s; - } - return "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+s; - }).classed("hide",hideLabel); if (d._def.icon) { var icon = thisNode.select(".red-ui-flow-node-icon"); var faIcon = thisNode.select(".fa-lg");