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

Update a line break function

Browse Source
This commit is contained in:
Yuma Matsuura 2019-09-03 18:43:46 +09:00
parent a42d7d867e
commit 17653761b9
1 changed files with 109 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1831,26 +1831,35 @@ RED.view = (function() {
return [offsetW+w,offsetH+h]; return [offsetW+w,offsetH+h];
} }
var separateTextByLineBreak = [];
function convertLineBreakCharacter(str) { function convertLineBreakCharacter(str) {
var result = []; var result = [];
var temp = str.split('\\n'); var count = 0;
var result_temp = null; var result_temp = '';
for (var i = 0;i < temp.length;i++) { for (var i = 0;i < str.length;i++) {
if (result_temp == null || result_temp == '') { if (str.charAt(i) == '\\') {
result_temp = temp[i]; if (str.charAt(i+1) == '\\') {
} result_temp += str.charAt(i);
var chr = temp[i].charAt(temp[i].length-1); i++;
if (i < temp.length - 1) { } else if (str.charAt(i+1) == 'n') {
if (chr == '\\') {
result_temp += 'n' + temp[i+1];
} else {
result.push(result_temp); 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 { } else {
result_temp += str.charAt(i);
}
}
if (count == 0 || count < str.length) {
result.push(result_temp); result.push(result_temp);
} }
} separateTextByLineBreak = result;
return result; return result;
} }
@ -2708,21 +2717,19 @@ RED.view = (function() {
var isLink = (d.type === "link in" || d.type === "link out") var isLink = (d.type === "link in" || d.type === "link out")
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 labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label", 50);
if (d.resize || d.w === undefined) { if (d.resize || d.w === undefined) {
if (hideLabel) { if (hideLabel) {
d.w = 30; d.w = node_height;
} else { } 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) { if (hideLabel) {
node_height = 30; d.h = Math.max(node_height,(d.outputs || 0) * 15);
} else { } 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) { // if (d._def.badge) {
// var badge = node.append("svg:g").attr("class","node_badge_group"); // 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); // 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("rx",5)
.attr("ry",5) .attr("ry",5)
.attr("width",32) .attr("width",32)
.attr("height",26); .attr("height",node_height-4);
nodeButtonGroup.append("rect") nodeButtonGroup.append("rect")
.attr("class","red-ui-flow-node-button-button") .attr("class","red-ui-flow-node-button-button")
.attr("x",function(d) { return d._def.align == "right"? 11:5}) .attr("x",function(d) { return d._def.align == "right"? 11:5})
@ -2750,7 +2757,7 @@ RED.view = (function() {
.attr("rx",4) .attr("rx",4)
.attr("ry",4) .attr("ry",4)
.attr("width",16) .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("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
.attr("cursor","pointer") .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();}}) .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
@ -2908,10 +2915,13 @@ RED.view = (function() {
//icon.style("pointer-events","none"); //icon.style("pointer-events","none");
icon_group.style("pointer-events","none"); icon_group.style("pointer-events","none");
} }
var labelLineNumber = (separateTextByLineBreak.length == 0)? 1:separateTextByLineBreak.length;
for(var i=0;i<labelLineNumber;i++) {
var text = node.append("svg:text") var text = node.append("svg:text")
.attr("class","red-ui-flow-node-label") .attr("class","red-ui-flow-node-label")
.attr("id", "red-ui-flow-node-label-"+i)
.attr("x", 38) .attr("x", 38)
.attr("dy", ".35em") .attr("dy", ".3px")
.attr("text-anchor","start") .attr("text-anchor","start")
.classed("hide",hideLabel); .classed("hide",hideLabel);
@ -2921,6 +2931,7 @@ RED.view = (function() {
text.attr("text-anchor","end"); text.attr("text-anchor","end");
} }
} }
}
var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none"); var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
var statusRect = status.append("rect").attr("class","red-ui-flow-node-status") var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
@ -2961,24 +2972,24 @@ RED.view = (function() {
var hideLabel = d.hasOwnProperty('l')?!d.l : isLink; var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
dirtyNodes[d.id] = d; dirtyNodes[d.id] = d;
//if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
var l = RED.utils.getNodeLabel(d); var labelLineNumber = (d.h-6)/24;
var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label", 50);
if (d.resize) { if (d.resize) {
var ow = d.w; var ow = d.w;
if (hideLabel) { if (hideLabel) {
d.w = 30; d.w = node_height;
} else { } 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)) );
} }
// 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((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
d.x += (d.w-ow)/2; d.x += (d.w-ow)/2;
d.resize = false; d.resize = false;
} }
if (hideLabel) { if (hideLabel) {
node_height = 30;
} else {
node_height = 6 + 24 * convertLineBreakCharacter(l).length;
}
d.h = Math.max(node_height,(d.outputs || 0) * 15); d.h = Math.max(node_height,(d.outputs || 0) * 15);
} else {
d.h = Math.max(6+24*separateTextByLineBreak.length,(d.outputs || 0) * 15, 30);
}
var thisNode = d3.select(this); var thisNode = d3.select(this);
thisNode.classed("red-ui-flow-node-disabled", function(d) { return d.d === true}); 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}) .attr("height",function(d){return d.h})
.classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; }) .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(labelLineNumber<sn) {
for(var i=labelLineNumber;i<sn;i++) {
var text = node.append("svg:text")
.attr("class","red-ui-flow-node-label")
.attr("id","red-ui-flow-node-label-"+i)
.attr("x", 38)
.attr("dy", ".3px")
.attr("text-anchor","start")
.classed("hide",hideLabel);
if (d._def.align) {
text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
if (d._def.align === "right") {
text.attr("text-anchor","end");
}
}
}
} else if (0 < sn && sn < labelLineNumber){
for(var i=sn;i<labelLineNumber;i++) {
thisNode.select("#red-ui-flow-node-label-"+i).remove();
}
}
for (var ic = 0; ic < sn; ic++) {
var yn = yp + ic * 24;
thisNode.select("#red-ui-flow-node-label-"+ic)
.text(function(d,i){
return separateTextByLineBreak[ic];
})
.attr("y", function(d){return yn;})
.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.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) { if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true); thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end"); thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
@ -3000,11 +3070,11 @@ RED.view = (function() {
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false); thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start"); thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
} }
var gx; var alignX;
thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; }); thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { gx=38; return 38; }); thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { alignX=38; return 38; });
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"}); thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){ gx=d.w-38; return d.w-38}); thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){ alignX=d.w-38; return d.w-38});
//thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);}); //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?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-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)}); //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)+")";}); 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<sn; ic++) {
yn = yp+ic*24;
st += "<tspan x="+gx+" y="+yn+" dy="+dy+">"+sa[ic]+"</tspan>";
}
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) { if (d._def.icon) {
var icon = thisNode.select(".red-ui-flow-node-icon"); var icon = thisNode.select(".red-ui-flow-node-icon");
var faIcon = thisNode.select(".fa-lg"); var faIcon = thisNode.select(".fa-lg");