1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Fix vertical align of subflow port labels

This commit is contained in:
Nick O'Leary 2022-01-25 17:08:04 +00:00
parent ab2ced5c37
commit 42358419ad
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 13 additions and 13 deletions

View File

@ -501,9 +501,9 @@
} }
var v = $(this).val(); var v = $(this).val();
hasNonBlankLabel = hasNonBlankLabel || v!== ""; hasNonBlankLabel = hasNonBlankLabel || v!== "";
// mark changed output port labels as dirty // mark changed output port labels as dirty
if (node.type === "subflow" && node.outputLabels[index] !== v) { if (node.type === "subflow" && (!node.outputLabels || node.outputLabels[index] !== v)) {
node.out[index].dirty = true; node.out[index].dirty = true;
} }

View File

@ -3994,7 +3994,6 @@ RED.view = (function() {
subflowOutputs.exit().remove(); subflowOutputs.exit().remove();
var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output") var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output")
outGroup.each(function(d,i) { outGroup.each(function(d,i) {
var node = d3.select(this); var node = d3.select(this);
var nodeContents = document.createDocumentFragment(); var nodeContents = document.createDocumentFragment();
@ -4020,6 +4019,7 @@ RED.view = (function() {
var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g"); var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
output_groupEl.setAttribute("x",0); output_groupEl.setAttribute("x",0);
output_groupEl.setAttribute("y",0); output_groupEl.setAttribute("y",0);
node[0][0].__outputLabelGroup__ = output_groupEl;
var output_output = document.createElementNS("http://www.w3.org/2000/svg","text"); var output_output = document.createElementNS("http://www.w3.org/2000/svg","text");
output_output.setAttribute("class","red-ui-flow-port-label"); output_output.setAttribute("class","red-ui-flow-port-label");
@ -4061,6 +4061,7 @@ RED.view = (function() {
port.setAttribute("width",10); port.setAttribute("width",10);
port.setAttribute("height",10); port.setAttribute("height",10);
portEl.appendChild(port); portEl.appendChild(port);
port.__data__ = d;
d3.select(port) d3.select(port)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
@ -4131,9 +4132,9 @@ RED.view = (function() {
var self = this; var self = this;
var thisNode = d3.select(this); var thisNode = d3.select(this);
dirtyNodes[d.id] = d; dirtyNodes[d.id] = d;
var label = getPortLabel(activeSubflow, PORT_TYPE_OUTPUT, d.i) || ""; var label = getPortLabel(activeSubflow, PORT_TYPE_OUTPUT, d.i) || "";
var hideLabel = (label.length < 1) var hideLabel = (label.length < 1)
@ -4145,7 +4146,7 @@ RED.view = (function() {
} }
this.__label__ = label; this.__label__ = label;
this.__labelLineCount__ = labelParts.lines.length; this.__labelLineCount__ = labelParts.lines.length;
if (hideLabel) { if (hideLabel) {
d.h = Math.max(port_height,(d.outputs || 0) * 15); d.h = Math.max(port_height,(d.outputs || 0) * 15);
} else { } else {
@ -4153,7 +4154,7 @@ RED.view = (function() {
} }
this.__hideLabel__ = hideLabel; this.__hideLabel__ = hideLabel;
} }
if (d.resize) { if (d.resize) {
var ow = d.w; var ow = d.w;
if (hideLabel) { if (hideLabel) {
@ -4176,7 +4177,7 @@ 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 );
if (labelParts) { if (labelParts) {
// The label has changed // The label has changed
var sa = labelParts.lines; var sa = labelParts.lines;
@ -4196,19 +4197,18 @@ RED.view = (function() {
textLines[i].textContent = sa[i]; textLines[i].textContent = sa[i];
} }
} }
var textClass = "red-ui-flow-node-label"+(hideLabel?" hide":""); var textClass = "red-ui-flow-node-label"+(hideLabel?" hide":"");
this.__textGroup__.setAttribute("class", textClass); this.__textGroup__.setAttribute("class", textClass);
var yp = d.h / 2 - (this.__labelLineCount__ / 2) * 24 + 13; var yp = d.h / 2 - (this.__labelLineCount__ / 2) * 24 + 13;
// this.__textGroup__.classList.remove("red-ui-flow-node-label-right"); // this.__textGroup__.classList.remove("red-ui-flow-node-label-right");
this.__textGroup__.setAttribute("transform", "translate(48,"+yp+")"); this.__textGroup__.setAttribute("transform", "translate(48,"+yp+")");
this.__outputBorder__.setAttribute("d","M 40 1 l 0 "+(hideLabel?0:(d.h - 2))); this.__outputBorder__.setAttribute("d","M 40 1 l 0 "+(hideLabel?0:(d.h - 2)));
this.__port__.setAttribute("transform","translate(-5,"+((d.h/2)-5)+")"); this.__port__.setAttribute("transform","translate(-5,"+((d.h/2)-5)+")");
this.__outputNumber__.setAttribute("transform","translate(20,"+Math.max(28, (d.h/2)+2)+")"); this.__outputOutput__.setAttribute("transform","translate(20,"+((d.h/2)-8)+")");
this.__outputOutput__.setAttribute("transform","translate(20,"+Math.max(12, (d.h/2)-14)+")"); this.__outputNumber__.setAttribute("transform","translate(20,"+((d.h/2)+7)+")");
} }
d.dirty = false; d.dirty = false;
} }