Skip to content

Commit 185b16a

Browse files
knollearyknolleary
committed
Keep port label form in sync with output reordering
1 parent e7e3ed4 commit 185b16a

4 files changed

Lines changed: 135 additions & 53 deletions

File tree

‎editor/js/history.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ RED.history = (function() {
191191
} else if (ev.t == "edit") {
192192
for (i in ev.changes) {
193193
if (ev.changes.hasOwnProperty(i)) {
194-
if (ev.node._def.defaults[i].type) {
194+
if (ev.node._def.defaults[i] && ev.node._def.defaults[i].type) {
195195
// This is a config node property
196196
var currentConfigNode = RED.nodes.node(ev.node[i]);
197197
if (currentConfigNode) {
@@ -239,7 +239,7 @@ RED.history = (function() {
239239
if (ev.outputMap) {
240240
outputMap = {};
241241
for (var port in ev.outputMap) {
242-
if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== -1) {
242+
if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== "-1") {
243243
outputMap[ev.outputMap[port]] = port;
244244
}
245245
}

‎editor/js/ui/editor.js‎

Lines changed: 101 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ RED.editor = (function() {
191191
if (outputMap) {
192192
RED.nodes.eachLink(function(l) {
193193
if (l.source === node && outputMap.hasOwnProperty(l.sourcePort)) {
194-
if (outputMap[l.sourcePort] === -1) {
194+
if (outputMap[l.sourcePort] === "-1") {
195195
removedLinks.push(l);
196196
} else {
197197
l.sourcePort = outputMap[l.sourcePort];
@@ -549,17 +549,10 @@ RED.editor = (function() {
549549
}
550550

551551
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-
}
561552
var inputsDiv = $("#node-label-form-inputs");
562553
var outputsDiv = $("#node-label-form-outputs");
554+
555+
var inputCount = node.inputs || node._def.inputs || 0;
563556
var children = inputsDiv.children();
564557
if (children.length < inputCount) {
565558
for (i = children.length;i<inputCount;i++) {
@@ -571,23 +564,53 @@ RED.editor = (function() {
571564
}
572565
}
573566

574-
var children = outputsDiv.children();
567+
var outputCount;
568+
var i;
569+
var formOutputs = $("#node-input-outputs").val();
570+
571+
if (formOutputs === undefined) {
572+
outputCount = node.outputs || node._def.outputs || 0;
573+
} else if (isNaN(formOutputs)) {
574+
var outputMap = JSON.parse(formOutputs);
575+
var keys = Object.keys(outputMap);
576+
outputCount = 0;
577+
var rows = [];
578+
keys.forEach(function(p) {
579+
var row = $("#node-label-form-output-"+p).parent();
580+
if (row.length === 0 && outputMap[p] !== -1) {
581+
row = buildLabelRow("output",p,"");
582+
}
583+
if (outputMap[p] !== -1) {
584+
outputCount++;
585+
rows.push({i:parseInt(outputMap[p]),r:row});
586+
}
587+
});
588+
rows.sort(function(A,B) {
589+
return A.i-B.i;
590+
})
591+
outputsDiv.empty();
592+
rows.forEach(function(r,i) {
593+
r.r.find("label").html((i+1)+".");
594+
r.r.appendTo(outputsDiv);
595+
})
596+
} else {
597+
outputCount = Math.max(0,parseInt(formOutputs));
598+
}
599+
children = outputsDiv.children();
575600
if (children.length < outputCount) {
576601
for (i = children.length;i<outputCount;i++) {
577-
buildLabelRow("output",i,"").appendTo(inputsDiv);
602+
buildLabelRow("output",i,"").appendTo(outputsDiv);
578603
}
579604
} else if (children.length > outputCount) {
580605
for (i=outputCount;i<children.length;i++) {
581606
$(children[i]).remove();
582607
}
583608
}
584-
585-
586609
}
587610
function buildLabelRow(type, index, value) {
588-
var result = $('<div>');
611+
var result = $('<div>',{style:"margin: 5px 0px"});
589612
var id = "node-label-form-"+type+"-"+index;
590-
$('<label>',{for:id}).html(index+1).appendTo(result);
613+
$('<label>',{for:id,style:"margin-right: 20px; text-align: right; width: 30px;"}).html((index+1)+".").appendTo(result);
591614
$('<input>',{type:"text",id:id}).val(value).appendTo(result);
592615
return result;
593616
//' id="node-label-form-input-'+i+'">)
@@ -603,15 +626,17 @@ RED.editor = (function() {
603626

604627

605628
var i,row;
606-
var inputsDiv = $('<div class="form-row" id="node-label-form-inputs">Inputs</div>').appendTo(dialogForm);
629+
$('<div class="form-row"><i class="fa fa-tag"></i> <span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
630+
var inputsDiv = $("#node-label-form-inputs");
607631
if (inputCount > 0) {
608632
for (i=0;i<inputCount;i++) {
609633
buildLabelRow("input",i,inputLabels[i]).appendTo(inputsDiv);
610634
}
611635
} else {
612636

613637
}
614-
var outputsDiv = $('<div class="form-row" id="node-label-form-outputs">Outputs</div>').appendTo(dialogForm);
638+
$('<div class="form-row"><i class="fa fa-tag"></i> <span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
639+
var outputsDiv = $("#node-label-form-outputs");
615640
if (outputCount > 0) {
616641
for (i=0;i<outputCount;i++) {
617642
buildLabelRow("output",i,outputLabels[i]).appendTo(outputsDiv);
@@ -743,11 +768,11 @@ RED.editor = (function() {
743768
}
744769
}
745770

771+
var newValue;
746772
if (editing_node._def.defaults) {
747773
for (d in editing_node._def.defaults) {
748774
if (editing_node._def.defaults.hasOwnProperty(d)) {
749775
var input = $("#node-input-"+d);
750-
var newValue;
751776
if (input.attr('type') === "checkbox") {
752777
newValue = input.prop('checked');
753778
} else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
@@ -756,8 +781,42 @@ RED.editor = (function() {
756781
newValue = input.val();
757782
}
758783
if (newValue != null) {
759-
if (d === "outputs" && (newValue.trim() === "" || isNaN(newValue))) {
760-
continue;
784+
if (d === "outputs") {
785+
if (newValue.trim() === "") {
786+
continue;
787+
}
788+
if (isNaN(newValue)) {
789+
outputMap = JSON.parse(newValue);
790+
var outputCount = 0;
791+
var outputsChanged = false;
792+
var keys = Object.keys(outputMap);
793+
keys.forEach(function(p) {
794+
if (isNaN(p)) {
795+
// New output;
796+
outputCount ++;
797+
delete outputMap[p];
798+
} else {
799+
outputMap[p] = outputMap[p]+"";
800+
if (outputMap[p] !== "-1") {
801+
outputCount++;
802+
if (outputMap[p] !== p) {
803+
// Output moved
804+
outputsChanged = true;
805+
} else {
806+
delete outputMap[p];
807+
}
808+
} else {
809+
// Output removed
810+
outputsChanged = true;
811+
}
812+
}
813+
});
814+
815+
newValue = outputCount;
816+
if (outputsChanged) {
817+
changed = true;
818+
}
819+
}
761820
}
762821
if (editing_node[d] != newValue) {
763822
if (editing_node._def.defaults[d].type) {
@@ -789,20 +848,30 @@ RED.editor = (function() {
789848
var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix);
790849
changed = changed || credsChanged;
791850
}
792-
if (editing_node.hasOwnProperty("_outputs")) {
793-
outputMap = editing_node._outputs;
794-
delete editing_node._outputs;
795-
if (Object.keys(outputMap).length > 0) {
796-
changed = true;
797-
}
798-
}
851+
// if (editing_node.hasOwnProperty("_outputs")) {
852+
// outputMap = editing_node._outputs;
853+
// delete editing_node._outputs;
854+
// if (Object.keys(outputMap).length > 0) {
855+
// changed = true;
856+
// }
857+
// }
799858
var removedLinks = updateNodeProperties(editing_node,outputMap);
800859

801860
var inputLabels = $("#node-label-form-inputs").children().find("input");
802861
var outputLabels = $("#node-label-form-outputs").children().find("input");
803862

804-
editing_node.inputLabels = inputLabels.map(function() { return $(this).val();}).toArray();
805-
editing_node.outputLabels = outputLabels.map(function() { return $(this).val();}).toArray();
863+
newValue = inputLabels.map(function() { return $(this).val();}).toArray().slice(0,editing_node.inputs);
864+
if (JSON.stringify(newValue) !== JSON.stringify(editing_node.inputLabels)) {
865+
changes.inputLabels = editing_node.inputLabels;
866+
editing_node.inputLabels = newValue;
867+
changed = true;
868+
}
869+
newValue = outputLabels.map(function() { return $(this).val();}).toArray().slice(0,editing_node.outputs);
870+
if (JSON.stringify(newValue) !== JSON.stringify(editing_node.outputLabels)) {
871+
changes.outputLabels = editing_node.outputLabels;
872+
editing_node.outputLabels = newValue;
873+
changed = true;
874+
}
806875

807876
if (changed) {
808877
var wasChanged = editing_node.changed;
@@ -872,11 +941,11 @@ RED.editor = (function() {
872941
singleExpanded: true
873942
});
874943
var nodeProperties = stack.add({
875-
title: "node properties",
944+
title: RED._("editor.nodeProperties"),
876945
expanded: true
877946
});
878947
var portLabels = stack.add({
879-
title: "port labels",
948+
title: RED._("editor.portLabels"),
880949
onexpand: function() {
881950
refreshLabelForm(this.content,node);
882951
}

‎nodes/core/logic/10-switch.html‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<div class="form-row">
2323
<label data-i18n="switch.label.property"></label>
2424
<input type="text" id="node-input-property" style="width: 70%"/>
25+
<input type="hidden" id="node-input-outputs"/>
2526
</div>
2627
<div class="form-row node-input-rule-container-row">
2728
<ol id="node-input-rule-container"></ol>
@@ -115,7 +116,7 @@
115116
var previousValueType = {value:"prev",label:this._("inject.previous"),hasValue:false};
116117

117118
$("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata']});
118-
119+
var outputCount = $("#node-input-outputs").val("{}");
119120

120121
var andLabel = this._("switch.and");
121122
var caseLabel = this._("switch.ignorecase");
@@ -157,6 +158,9 @@
157158
if (!rule.hasOwnProperty('t')) {
158159
rule.t = 'eq';
159160
}
161+
if (!opt.hasOwnProperty('i')) {
162+
opt._i = Math.floor((0x99999-0x10000)*Math.random()).toString(16)
163+
}
160164
var row = $('<div/>').appendTo(container);
161165
var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container);
162166
var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
@@ -213,21 +217,36 @@
213217
caseSensitive.prop('checked',false);
214218
}
215219
selectField.change();
220+
221+
var currentOutputs = JSON.parse(outputCount.val()||"{}");
222+
currentOutputs[opt.hasOwnProperty('i')?opt.i:opt._i] = i;
223+
outputCount.val(JSON.stringify(currentOutputs));
216224
},
217225
removeItem: function(opt) {
226+
var currentOutputs = JSON.parse(outputCount.val()||"{}");
218227
if (opt.hasOwnProperty('i')) {
219-
var removedList = $("#node-input-rule-container").data('removedList')||[];
220-
removedList.push(opt.i);
221-
$("#node-input-rule-container").data('removedList',removedList);
228+
currentOutputs[opt.i] = -1;
229+
} else {
230+
delete currentOutputs[opt._i];
222231
}
223-
224232
var rules = $("#node-input-rule-container").editableList('items');
225-
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
233+
rules.each(function(i) {
234+
$(this).find(".node-input-rule-index").html(i+1);
235+
var data = $(this).data('data');
236+
currentOutputs[data.hasOwnProperty('i')?data.i:data._i] = i;
237+
});
238+
outputCount.val(JSON.stringify(currentOutputs));
226239
},
227240
resizeItem: resizeRule,
228241
sortItems: function(rules) {
242+
var currentOutputs = JSON.parse(outputCount.val()||"{}");
229243
var rules = $("#node-input-rule-container").editableList('items');
230-
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
244+
rules.each(function(i) {
245+
$(this).find(".node-input-rule-index").html(i+1);
246+
var data = $(this).data('data');
247+
currentOutputs[data.hasOwnProperty('i')?data.i:data._i] = i;
248+
});
249+
outputCount.val(JSON.stringify(currentOutputs));
231250
},
232251
sortable: true,
233252
removable: true
@@ -243,11 +262,6 @@
243262
var ruleset;
244263
var node = this;
245264
node.rules = [];
246-
var changedOutputs = {};
247-
var removedList = $("#node-input-rule-container").data('removedList')||[];
248-
removedList.forEach(function(i) {
249-
changedOutputs[i] = -1;
250-
});
251265
rules.each(function(i) {
252266
var ruleData = $(this).data('data');
253267
var rule = $(this);
@@ -267,16 +281,10 @@
267281
r.case = rule.find(".node-input-rule-case").prop("checked");
268282
}
269283
}
270-
if (ruleData.hasOwnProperty('i')) {
271-
if (ruleData.i !== i) {
272-
changedOutputs[ruleData.i] = i;
273-
}
274-
}
275284
node.rules.push(r);
276285
});
277-
this._outputs = changedOutputs;
278-
this.outputs = node.rules.length;
279286
this.propertyType = $("#node-input-property").typedInput('type');
287+
console.log(JSON.parse($("#node-input-outputs").val()||"{}"));
280288
},
281289
oneditresize: function(size) {
282290
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");

‎red/api/locales/en-US/editor.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,11 @@
185185
"editNode": "Edit __type__ node",
186186
"editConfig": "Edit __type__ config node",
187187
"addNewType": "Add new __type__...",
188+
"nodeProperties": "node properties",
189+
"portLabels": "port labels",
190+
"labelInputs": "Inputs",
191+
"labelOutputs": "Outputs",
192+
188193
"errors": {
189194
"scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it"
190195
}

0 commit comments

Comments
 (0)