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 acfc8eca7..6e1306d60 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 @@ -4156,7 +4156,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } "stroke": d.stroke||"none", }) g.on("mousedown",groupMouseDown).on("mouseup",groupMouseUp) - g.append('svg:text').attr("class","red-ui-flow-group-label").text(d.name); + g.append('svg:text').attr("class","red-ui-flow-group-label"); d.dirty = true; }); if (addedGroups) { @@ -4207,12 +4207,20 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } if (!d.minWidth) { if (d.style.label && d.name) { d.minWidth = calculateTextWidth(d.name||"","red-ui-flow-group-label",8); + d.labels = separateTextByLineBreak; } else { d.minWidth = 40; } } d.w = Math.max(d.minWidth,d.w); - + if (d.style.label && d.labels) { + var h = (d.labels.length -1) *15; + var labelPos = d.style["label-position"] || "nw"; + d.h += h; + if (labelPos[0] === "n") { + d.y -= h; + } + } g.attr("transform","translate("+d.x+","+d.y+")") g.selectAll(".red-ui-flow-group-outline") @@ -4263,7 +4271,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } if (labelPos[0] === 'n') { labelY = 0+15; // Allow for font-height } else { - labelY = d.h - 5; + labelY = d.h - 5 -(d.labels.length -1) *15; } if (labelPos[1] === 'w') { labelX = 5; @@ -4275,10 +4283,22 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } labelX = d.w/2; labelAnchor = "middle" } - label.text(d.name) - .style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999") - .attr("transform","translate("+labelX+","+labelY+")") - .attr("text-anchor",labelAnchor); + label + .style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999") + .attr("transform","translate("+labelX+","+labelY+")") + .attr("text-anchor",labelAnchor); + if (d.labels) { + var ypos = 0; + g.selectAll(".red-ui-flow-group-label-text").remove(); + d.labels.forEach(function (name) { + label.append("tspan") + .classed("red-ui-flow-group-label-text", true) + .text(name) + .attr("x", 0) + .attr("y", ypos); + ypos += 15; + }); + } } delete dirtyGroups[d.id];