mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Update a line break function
This commit is contained in:
Yuma Matsuura
parent
a42d7d867e
commit
17653761b9
@ -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;i<labelLineNumber;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", ".35em")
|
||||
.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");
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2961,24 +2972,24 @@ RED.view = (function() {
|
||||
var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
|
||||
dirtyNodes[d.id] = d;
|
||||
//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) {
|
||||
var ow = d.w;
|
||||
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)) );
|
||||
}
|
||||
// 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(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) {
|
||||
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");
|
||||
@ -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-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-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-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-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<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) {
|
||||
var icon = thisNode.select(".red-ui-flow-node-icon");
|
||||
var faIcon = thisNode.select(".fa-lg");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user