Skip to content

Commit e7e3ed4

Browse files
committed
Basic node label editor
1 parent 47df547 commit e7e3ed4

5 files changed

Lines changed: 116 additions & 16 deletions

File tree

editor/js/nodes.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,7 @@ RED.nodes = (function() {
431431
node.id = n.id;
432432
node.type = n.type;
433433
node.z = n.z;
434+
434435
if (node.type == "unknown") {
435436
for (var p in n._orig) {
436437
if (n._orig.hasOwnProperty(p)) {
@@ -478,6 +479,14 @@ RED.nodes = (function() {
478479
node.wires[w.sourcePort].push(w.target.id);
479480
}
480481
}
482+
483+
var labelCount;
484+
if (n.inputs > 0 && n.inputLabels && !/^\s*$/.test(n.inputLabels.join(""))) {
485+
node.inputLabels = n.inputLabels.slice();
486+
}
487+
if (n.outputs > 0 && n.outputLabels && !/^\s*$/.test(n.outputLabels.join(""))) {
488+
node.outputLabels = n.outputLabels.slice();
489+
}
481490
}
482491
return node;
483492
}
@@ -893,7 +902,17 @@ RED.nodes = (function() {
893902
if (n.type !== "workspace" && n.type !== "tab" && n.type !== "subflow") {
894903
def = registry.getNodeType(n.type);
895904
if (!def || def.category != "config") {
896-
var node = {x:n.x,y:n.y,z:n.z,type:0,wires:n.wires,changed:false,_config:{}};
905+
var node = {
906+
x:n.x,
907+
y:n.y,
908+
z:n.z,
909+
type:0,
910+
wires:n.wires,
911+
inputLabels: n.inputLabels,
912+
outputLabels: n.outputLabels,
913+
changed:false,
914+
_config:{}
915+
};
897916
if (createNewIds) {
898917
if (subflow_blacklist[n.z]) {
899918
continue;

editor/js/ui/common/stack.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ RED.stack = (function() {
6262
};
6363
entry.expand = function() {
6464
if (!entry.isExpanded()) {
65+
if (entry.onexpand) {
66+
entry.onexpand.call(entry);
67+
}
6568
icon.addClass("expanded");
6669
entry.content.slideDown(200);
6770
return true;

editor/js/ui/editor.js

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,79 @@ RED.editor = (function() {
548548
return dialogForm;
549549
}
550550

551+
function refreshLabelForm(container,node) {
552+
var inputCount = node.inputs || node._def.inputs || 0;
553+
var outputCount;
554+
var i;
555+
var formOutputs = parseInt($("#node-input-outputs").val());
556+
if (isNaN(formOutputs)) {
557+
outputCount = node.outputs || node._def.outputs || 0;
558+
} else {
559+
outputCount = Math.max(0,formOutputs);
560+
}
561+
var inputsDiv = $("#node-label-form-inputs");
562+
var outputsDiv = $("#node-label-form-outputs");
563+
var children = inputsDiv.children();
564+
if (children.length < inputCount) {
565+
for (i = children.length;i<inputCount;i++) {
566+
buildLabelRow("input",i,"").appendTo(inputsDiv);
567+
}
568+
} else if (children.length > inputCount) {
569+
for (i=inputCount;i<children.length;i++) {
570+
$(children[i]).remove();
571+
}
572+
}
573+
574+
var children = outputsDiv.children();
575+
if (children.length < outputCount) {
576+
for (i = children.length;i<outputCount;i++) {
577+
buildLabelRow("output",i,"").appendTo(inputsDiv);
578+
}
579+
} else if (children.length > outputCount) {
580+
for (i=outputCount;i<children.length;i++) {
581+
$(children[i]).remove();
582+
}
583+
}
584+
585+
586+
}
587+
function buildLabelRow(type, index, value) {
588+
var result = $('<div>');
589+
var id = "node-label-form-"+type+"-"+index;
590+
$('<label>',{for:id}).html(index+1).appendTo(result);
591+
$('<input>',{type:"text",id:id}).val(value).appendTo(result);
592+
return result;
593+
//' id="node-label-form-input-'+i+'">)
594+
}
595+
function buildLabelForm(container,node) {
596+
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
597+
598+
var inputCount = node.inputs || node._def.inputs || 0;
599+
var outputCount = node.outputs || node._def.outputs || 0;
600+
601+
var inputLabels = node.inputLabels || [];
602+
var outputLabels = node.outputLabels || [];
603+
604+
605+
var i,row;
606+
var inputsDiv = $('<div class="form-row" id="node-label-form-inputs">Inputs</div>').appendTo(dialogForm);
607+
if (inputCount > 0) {
608+
for (i=0;i<inputCount;i++) {
609+
buildLabelRow("input",i,inputLabels[i]).appendTo(inputsDiv);
610+
}
611+
} else {
612+
613+
}
614+
var outputsDiv = $('<div class="form-row" id="node-label-form-outputs">Outputs</div>').appendTo(dialogForm);
615+
if (outputCount > 0) {
616+
for (i=0;i<outputCount;i++) {
617+
buildLabelRow("output",i,outputLabels[i]).appendTo(outputsDiv);
618+
}
619+
} else {
620+
621+
}
622+
}
623+
551624
function showEditDialog(node) {
552625
var editing_node = node;
553626
editStack.push(node);
@@ -724,6 +797,13 @@ RED.editor = (function() {
724797
}
725798
}
726799
var removedLinks = updateNodeProperties(editing_node,outputMap);
800+
801+
var inputLabels = $("#node-label-form-inputs").children().find("input");
802+
var outputLabels = $("#node-label-form-outputs").children().find("input");
803+
804+
editing_node.inputLabels = inputLabels.map(function() { return $(this).val();}).toArray();
805+
editing_node.outputLabels = outputLabels.map(function() { return $(this).val();}).toArray();
806+
727807
if (changed) {
728808
var wasChanged = editing_node.changed;
729809
editing_node.changed = true;
@@ -773,7 +853,7 @@ RED.editor = (function() {
773853
resize: function(dimensions) {
774854
editTrayWidthCache[type] = dimensions.width;
775855
$(".editor-tray-content").height(dimensions.height - 78);
776-
var form = $("#dialog-form").height(dimensions.height - 78 - 40);
856+
var form = $(".editor-tray-content form").height(dimensions.height - 78 - 40);
777857
if (editing_node && editing_node._def.oneditresize) {
778858
try {
779859
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@@ -793,10 +873,13 @@ RED.editor = (function() {
793873
});
794874
var nodeProperties = stack.add({
795875
title: "node properties",
796-
expanded: true,
876+
expanded: true
797877
});
798878
var portLabels = stack.add({
799-
title: "port labels"
879+
title: "port labels",
880+
onexpand: function() {
881+
refreshLabelForm(this.content,node);
882+
}
800883
});
801884

802885
if (editing_node) {
@@ -808,7 +891,9 @@ RED.editor = (function() {
808891
} else {
809892
ns = node._def.set.id;
810893
}
811-
var dialogForm = buildEditForm(nodeProperties.content,"dialog-form",type,ns);
894+
buildEditForm(nodeProperties.content,"dialog-form",type,ns);
895+
buildLabelForm(portLabels.content,node);
896+
812897
prepareEditDialog(node,node._def,"node-input");
813898
trayBody.i18n();
814899
},

editor/js/ui/view.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1487,6 +1487,10 @@ RED.view = (function() {
14871487

14881488
function getPortLabel(node,portType,portIndex) {
14891489
var result;
1490+
var nodePortLabels = (portType === PORT_TYPE_INPUT)?node.inputLabels:node.outputLabels;
1491+
if (nodePortLabels && nodePortLabels[portIndex]) {
1492+
return nodePortLabels[portIndex];
1493+
}
14901494
var portLabels = (portType === PORT_TYPE_INPUT)?node._def.inputLabels:node._def.outputLabels;
14911495
if (typeof portLabels === 'string') {
14921496
result = portLabels;

editor/sass/editor.scss

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -216,17 +216,6 @@
216216
padding: 0 5px;
217217
}
218218

219-
.dialog-form {
220-
.button-group {
221-
.editor-button {
222-
&:first-child {
223-
224-
}
225-
}
226-
}
227-
228-
}
229-
230219
#node-config-dialog-scope-container {
231220
cursor: auto;
232221
float: right;

0 commit comments

Comments
 (0)