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

fix handling of multi-line node label

Browse Source
This commit is contained in:
Hiroyasu Nishiyama 2020-06-13 23:28:10 +09:00
parent 93211470d1
commit 5c5bebd689
1 changed files with 27 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3629,17 +3629,12 @@ RED.view = (function() {
nodeContents.appendChild(icon_groupEl); nodeContents.appendChild(icon_groupEl);
} }
var labelLineNumber = (separateTextByLineBreak.length == 0)? 1:separateTextByLineBreak.length;
var labelId = d.id.replace(".","-");
for(var i=0;i<labelLineNumber;i++) {
var text = document.createElementNS("http://www.w3.org/2000/svg","text"); var text = document.createElementNS("http://www.w3.org/2000/svg","text");
text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")); text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:""));
text.setAttribute("id", "red-ui-flow-node-label-"+labelId+"-"+i);
text.setAttribute("x", 38); text.setAttribute("x", 38);
text.setAttribute("dy", ".3px"); text.setAttribute("dy", ".3px");
text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end"); text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
nodeContents.appendChild(text); nodeContents.appendChild(text);
}
var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g"); var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g");
// statusEl.__data__ = d; // statusEl.__data__ = d;
@ -3699,8 +3694,9 @@ 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 labelLineNumber = (d.h-6)/24;
var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label") + 50; var label = RED.utils.getNodeLabel(d, d.type);
var labelWidth = calculateTextWidth(label, "red-ui-flow-node-label") + 50;
if (d.resize) { if (d.resize) {
var ow = d.w; var ow = d.w;
if (hideLabel) { if (hideLabel) {
@ -3728,41 +3724,21 @@ RED.view = (function() {
this.__mainRect__.setAttribute("width", d.w) this.__mainRect__.setAttribute("width", d.w)
this.__mainRect__.setAttribute("height", d.h) this.__mainRect__.setAttribute("height", d.h)
this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted ); this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!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
var labelId = d.id.replace(".","-");
if(labelLineNumber<sn) {
var missingLines = document.createDocumentFragment();
for(var i=labelLineNumber;i<sn;i++) { var text = thisNode.selectAll(".red-ui-flow-node-label");
var text = document.createElementNS("http://www.w3.org/2000/svg","text"); thisNode.selectAll(".red-ui-flow-node-label-text").remove();
text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")); var sa = convertLineBreakCharacter(label);
text.setAttribute("id", "red-ui-flow-node-label-"+labelId+"-"+i); var sn = sa.length;
text.setAttribute("x", 38); var yp = d.h / 2 - (sn / 2) * 24 + 16
text.setAttribute("dy", ".3px"); sa.forEach(function (line) {
text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end"); text.append("tspan")
missingLines.appendChild(text); .classed("red-ui-flow-node-label-text", true)
} .text(line)
this.appendChild(missingLines); .attr("x", 38)
} else if (0 < sn && sn < labelLineNumber){ .attr("y", yp);
for(var i=sn;i<labelLineNumber;i++) { yp += 24;
var line = document.getElementById("red-ui-flow-node-label-"+labelId+"-"+i); });
if (line) { line.remove() }
}
}
var textClass = ""; var textClass = "";
if (d._def.labelStyle) { if (d._def.labelStyle) {
textClass = d._def.labelStyle; textClass = d._def.labelStyle;
@ -3775,14 +3751,8 @@ RED.view = (function() {
textClass = " "+textClass; textClass = " "+textClass;
} }
textClass = "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+textClass+(hideLabel?" hide":""); textClass = "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+textClass+(hideLabel?" hide":"");
text.attr("class", textClass);
for (var ic = 0; ic < sn; ic++) {
var yn = yp + ic * 24;
var line = document.getElementById("red-ui-flow-node-label-"+labelId+"-"+ic);
line.textContent = separateTextByLineBreak[ic];
line.setAttribute("y",yn);
line.setAttribute("class",textClass);
}
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) {
this.__iconGroup__.classList.toggle("red-ui-flow-node-icon-group-right", true); this.__iconGroup__.classList.toggle("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");
@ -3797,6 +3767,9 @@ RED.view = (function() {
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function () { alignX=38; return 38; }); thisNode.selectAll(".red-ui-flow-node-label").attr("x", function () { alignX=38; return 38; });
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)"); thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)");
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(){ alignX=d.w-38; return d.w-38}); thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(){ alignX=d.w-38; return d.w-38});
thisNode.selectAll(".red-ui-flow-node-label-text").attr("x", function () { return 38; });
thisNode.selectAll(".red-ui-flow-node-label-right").selectAll("tspan").attr("x", function(){ 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)});