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

Add a libe break function

Browse Source
This commit is contained in:
Yuma Matsuura 2019-07-26 11:36:22 +09:00
parent 6ab520984c
commit a42d7d867e
1 changed files with 69 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1805,7 +1805,15 @@ RED.view = (function() {
} }
function calculateTextWidth(str, className, offset) { function calculateTextWidth(str, className, offset) {
return calculateTextDimensions(str,className,offset,0)[0]; var result=convertLineBreakCharacter(str);
var width = 0;
for (var i=0;i<result.length;i++) {
var calculateTextW=calculateTextDimensions(result[i],className,offset,0)[0];
if (width<calculateTextW) {
width=calculateTextW;
}
}
return width;
} }
var textDimensionPlaceholder = {}; var textDimensionPlaceholder = {};
@ -1823,6 +1831,29 @@ RED.view = (function() {
return [offsetW+w,offsetH+h]; return [offsetW+w,offsetH+h];
} }
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 {
result.push(result_temp);
result_temp = null;
}
} else {
result.push(result_temp);
}
}
return result;
}
function resetMouseVars() { function resetMouseVars() {
mousedown_node = null; mousedown_node = null;
mouseup_node = null; mouseup_node = null;
@ -2680,11 +2711,16 @@ RED.view = (function() {
var l = RED.utils.getNodeLabel(d); var l = RED.utils.getNodeLabel(d);
if (d.resize || d.w === undefined) { if (d.resize || d.w === undefined) {
if (hideLabel) { if (hideLabel) {
d.w = node_height; d.w = 30;
} 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((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
} }
} }
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);
// if (d._def.badge) { // if (d._def.badge) {
@ -2706,7 +2742,7 @@ RED.view = (function() {
.attr("rx",5) .attr("rx",5)
.attr("ry",5) .attr("ry",5)
.attr("width",32) .attr("width",32)
.attr("height",node_height-4); .attr("height",26);
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})
@ -2714,7 +2750,7 @@ RED.view = (function() {
.attr("rx",4) .attr("rx",4)
.attr("ry",4) .attr("ry",4)
.attr("width",16) .attr("width",16)
.attr("height",node_height-12) .attr("height",18)
.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();}})
@ -2925,19 +2961,25 @@ 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
if (d.resize) {
var l = RED.utils.getNodeLabel(d); var l = RED.utils.getNodeLabel(d);
if (d.resize) {
var ow = d.w; var ow = d.w;
if (hideLabel) { if (hideLabel) {
d.w = node_height; d.w = 30;
} 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((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.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.x += (d.w-ow)/2; d.x += (d.w-ow)/2;
d.resize = false; d.resize = false;
} }
if (hideLabel) {
node_height = 30;
} else {
node_height = 6 + 24 * convertLineBreakCharacter(l).length;
}
d.h = Math.max(node_height,(d.outputs || 0) * 15);
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});
thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; }) thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
@ -2958,10 +3000,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;
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) { return 38; }); thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { gx=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){return d.w-38}); 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-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)});
@ -3035,7 +3078,7 @@ 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").text(function(d,i){ thisNode.selectAll("text.red-ui-flow-node-label").html(function(d,i){
var l = ""; var l = "";
if (d._def.label) { if (d._def.label) {
l = d._def.label; l = d._def.label;
@ -3047,7 +3090,22 @@ RED.view = (function() {
l = d.type; l = d.type;
} }
} }
return l; 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("y", function(d){return (d.h/2)-1;})
.attr("class",function(d){ .attr("class",function(d){