From 5c5bebd689503fcba88767cebed40ff12d746d17 Mon Sep 17 00:00:00 2001
From: Hiroyasu Nishiyama <hiroyasu.nishiyama.uq@hitachi.com>
Date: Sat, 13 Jun 2020 23:28:10 +0900
Subject: [PATCH] fix handling of multi-line node label

---
 .../@node-red/editor-client/src/js/ui/view.js | 81 +++++++------------
 1 file changed, 27 insertions(+), 54 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 2a98bc0cb..94da011b6 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
@@ -3629,17 +3629,12 @@ RED.view = (function() {
 
                         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");
-                        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("dy", ".3px");
-                        text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
-                        nodeContents.appendChild(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("x", 38);
+                    text.setAttribute("dy", ".3px");
+                    text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
+                    nodeContents.appendChild(text);
 
                     var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g");
                     // statusEl.__data__ = d;
@@ -3699,8 +3694,9 @@ 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 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) {
                             var ow = d.w;
                             if (hideLabel) {
@@ -3728,41 +3724,21 @@ RED.view = (function() {
                             this.__mainRect__.setAttribute("width", d.w)
                             this.__mainRect__.setAttribute("height", d.h)
                             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 = 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("id", "red-ui-flow-node-label-"+labelId+"-"+i);
-                                    text.setAttribute("x", 38);
-                                    text.setAttribute("dy", ".3px");
-                                    text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
-                                    missingLines.appendChild(text);
-                                }
-                                this.appendChild(missingLines);
-                            } else if (0 < sn && sn < labelLineNumber){
-                                for(var i=sn;i<labelLineNumber;i++) {
-                                    var line = document.getElementById("red-ui-flow-node-label-"+labelId+"-"+i);
-                                    if (line) { line.remove() }
-                                }
-                            }
+                            var text = thisNode.selectAll(".red-ui-flow-node-label");
+                            thisNode.selectAll(".red-ui-flow-node-label-text").remove();
+                            var sa = convertLineBreakCharacter(label);
+                            var sn = sa.length;
+                            var yp = d.h / 2 - (sn / 2) * 24 + 16
+                            sa.forEach(function (line) {
+                                text.append("tspan")
+                                    .classed("red-ui-flow-node-label-text", true)
+                                    .text(line)
+                                    .attr("x", 38)
+                                    .attr("y", yp);
+                                yp += 24;
+                            });
+
                             var textClass = "";
                             if (d._def.labelStyle) {
                                 textClass = d._def.labelStyle;
@@ -3775,14 +3751,8 @@ RED.view = (function() {
                                 textClass = " "+textClass;
                             }
                             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) {
                                 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");
@@ -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-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-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-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)});