Keep port label form in sync with output reordering

This commit is contained in:
Nick O'Leary 2017-02-07 22:30:54 +00:00
parent e7e3ed4923
commit 185b16a858
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 135 additions and 53 deletions

View File

@ -191,7 +191,7 @@ RED.history = (function() {
} else if (ev.t == "edit") { } else if (ev.t == "edit") {
for (i in ev.changes) { for (i in ev.changes) {
if (ev.changes.hasOwnProperty(i)) { if (ev.changes.hasOwnProperty(i)) {
if (ev.node._def.defaults[i].type) { if (ev.node._def.defaults[i] && ev.node._def.defaults[i].type) {
// This is a config node property // This is a config node property
var currentConfigNode = RED.nodes.node(ev.node[i]); var currentConfigNode = RED.nodes.node(ev.node[i]);
if (currentConfigNode) { if (currentConfigNode) {
@ -239,7 +239,7 @@ RED.history = (function() {
if (ev.outputMap) { if (ev.outputMap) {
outputMap = {}; outputMap = {};
for (var port in ev.outputMap) { for (var port in ev.outputMap) {
if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== -1) { if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== "-1") {
outputMap[ev.outputMap[port]] = port; outputMap[ev.outputMap[port]] = port;
} }
} }

View File

@ -191,7 +191,7 @@ RED.editor = (function() {
if (outputMap) { if (outputMap) {
RED.nodes.eachLink(function(l) { RED.nodes.eachLink(function(l) {
if (l.source === node && outputMap.hasOwnProperty(l.sourcePort)) { if (l.source === node && outputMap.hasOwnProperty(l.sourcePort)) {
if (outputMap[l.sourcePort] === -1) { if (outputMap[l.sourcePort] === "-1") {
removedLinks.push(l); removedLinks.push(l);
} else { } else {
l.sourcePort = outputMap[l.sourcePort]; l.sourcePort = outputMap[l.sourcePort];
@ -549,17 +549,10 @@ RED.editor = (function() {
} }
function refreshLabelForm(container,node) { function refreshLabelForm(container,node) {
var inputCount = node.inputs || node._def.inputs || 0;
var outputCount;
var i;
var formOutputs = parseInt($("#node-input-outputs").val());
if (isNaN(formOutputs)) {
outputCount = node.outputs || node._def.outputs || 0;
} else {
outputCount = Math.max(0,formOutputs);
}
var inputsDiv = $("#node-label-form-inputs"); var inputsDiv = $("#node-label-form-inputs");
var outputsDiv = $("#node-label-form-outputs"); var outputsDiv = $("#node-label-form-outputs");
var inputCount = node.inputs || node._def.inputs || 0;
var children = inputsDiv.children(); var children = inputsDiv.children();
if (children.length < inputCount) { if (children.length < inputCount) {
for (i = children.length;i<inputCount;i++) { for (i = children.length;i<inputCount;i++) {
@ -571,23 +564,53 @@ RED.editor = (function() {
} }
} }
var children = outputsDiv.children(); var outputCount;
var i;
var formOutputs = $("#node-input-outputs").val();
if (formOutputs === undefined) {
outputCount = node.outputs || node._def.outputs || 0;
} else if (isNaN(formOutputs)) {
var outputMap = JSON.parse(formOutputs);
var keys = Object.keys(outputMap);
outputCount = 0;
var rows = [];
keys.forEach(function(p) {
var row = $("#node-label-form-output-"+p).parent();
if (row.length === 0 && outputMap[p] !== -1) {
row = buildLabelRow("output",p,"");
}
if (outputMap[p] !== -1) {
outputCount++;
rows.push({i:parseInt(outputMap[p]),r:row});
}
});
rows.sort(function(A,B) {
return A.i-B.i;
})
outputsDiv.empty();
rows.forEach(function(r,i) {
r.r.find("label").html((i+1)+".");
r.r.appendTo(outputsDiv);
})
} else {
outputCount = Math.max(0,parseInt(formOutputs));
}
children = outputsDiv.children();
if (children.length < outputCount) { if (children.length < outputCount) {
for (i = children.length;i<outputCount;i++) { for (i = children.length;i<outputCount;i++) {
buildLabelRow("output",i,"").appendTo(inputsDiv); buildLabelRow("output",i,"").appendTo(outputsDiv);
} }
} else if (children.length > outputCount) { } else if (children.length > outputCount) {
for (i=outputCount;i<children.length;i++) { for (i=outputCount;i<children.length;i++) {
$(children[i]).remove(); $(children[i]).remove();
} }
} }
} }
function buildLabelRow(type, index, value) { function buildLabelRow(type, index, value) {
var result = $('<div>'); var result = $('<div>',{style:"margin: 5px 0px"});
var id = "node-label-form-"+type+"-"+index; var id = "node-label-form-"+type+"-"+index;
$('<label>',{for:id}).html(index+1).appendTo(result); $('<label>',{for:id,style:"margin-right: 20px; text-align: right; width: 30px;"}).html((index+1)+".").appendTo(result);
$('<input>',{type:"text",id:id}).val(value).appendTo(result); $('<input>',{type:"text",id:id}).val(value).appendTo(result);
return result; return result;
//' id="node-label-form-input-'+i+'">) //' id="node-label-form-input-'+i+'">)
@ -603,7 +626,8 @@ RED.editor = (function() {
var i,row; var i,row;
var inputsDiv = $('<div class="form-row" id="node-label-form-inputs">Inputs</div>').appendTo(dialogForm); $('<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);
var inputsDiv = $("#node-label-form-inputs");
if (inputCount > 0) { if (inputCount > 0) {
for (i=0;i<inputCount;i++) { for (i=0;i<inputCount;i++) {
buildLabelRow("input",i,inputLabels[i]).appendTo(inputsDiv); buildLabelRow("input",i,inputLabels[i]).appendTo(inputsDiv);
@ -611,7 +635,8 @@ RED.editor = (function() {
} else { } else {
} }
var outputsDiv = $('<div class="form-row" id="node-label-form-outputs">Outputs</div>').appendTo(dialogForm); $('<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);
var outputsDiv = $("#node-label-form-outputs");
if (outputCount > 0) { if (outputCount > 0) {
for (i=0;i<outputCount;i++) { for (i=0;i<outputCount;i++) {
buildLabelRow("output",i,outputLabels[i]).appendTo(outputsDiv); buildLabelRow("output",i,outputLabels[i]).appendTo(outputsDiv);
@ -743,11 +768,11 @@ RED.editor = (function() {
} }
} }
var newValue;
if (editing_node._def.defaults) { if (editing_node._def.defaults) {
for (d in editing_node._def.defaults) { for (d in editing_node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) { if (editing_node._def.defaults.hasOwnProperty(d)) {
var input = $("#node-input-"+d); var input = $("#node-input-"+d);
var newValue;
if (input.attr('type') === "checkbox") { if (input.attr('type') === "checkbox") {
newValue = input.prop('checked'); newValue = input.prop('checked');
} else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") { } 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() {
newValue = input.val(); newValue = input.val();
} }
if (newValue != null) { if (newValue != null) {
if (d === "outputs" && (newValue.trim() === "" || isNaN(newValue))) { if (d === "outputs") {
continue; if (newValue.trim() === "") {
continue;
}
if (isNaN(newValue)) {
outputMap = JSON.parse(newValue);
var outputCount = 0;
var outputsChanged = false;
var keys = Object.keys(outputMap);
keys.forEach(function(p) {
if (isNaN(p)) {
// New output;
outputCount ++;
delete outputMap[p];
} else {
outputMap[p] = outputMap[p]+"";
if (outputMap[p] !== "-1") {
outputCount++;
if (outputMap[p] !== p) {
// Output moved
outputsChanged = true;
} else {
delete outputMap[p];
}
} else {
// Output removed
outputsChanged = true;
}
}
});
newValue = outputCount;
if (outputsChanged) {
changed = true;
}
}
} }
if (editing_node[d] != newValue) { if (editing_node[d] != newValue) {
if (editing_node._def.defaults[d].type) { if (editing_node._def.defaults[d].type) {
@ -789,20 +848,30 @@ RED.editor = (function() {
var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix); var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix);
changed = changed || credsChanged; changed = changed || credsChanged;
} }
if (editing_node.hasOwnProperty("_outputs")) { // if (editing_node.hasOwnProperty("_outputs")) {
outputMap = editing_node._outputs; // outputMap = editing_node._outputs;
delete editing_node._outputs; // delete editing_node._outputs;
if (Object.keys(outputMap).length > 0) { // if (Object.keys(outputMap).length > 0) {
changed = true; // changed = true;
} // }
} // }
var removedLinks = updateNodeProperties(editing_node,outputMap); var removedLinks = updateNodeProperties(editing_node,outputMap);
var inputLabels = $("#node-label-form-inputs").children().find("input"); var inputLabels = $("#node-label-form-inputs").children().find("input");
var outputLabels = $("#node-label-form-outputs").children().find("input"); var outputLabels = $("#node-label-form-outputs").children().find("input");
editing_node.inputLabels = inputLabels.map(function() { return $(this).val();}).toArray(); newValue = inputLabels.map(function() { return $(this).val();}).toArray().slice(0,editing_node.inputs);
editing_node.outputLabels = outputLabels.map(function() { return $(this).val();}).toArray(); if (JSON.stringify(newValue) !== JSON.stringify(editing_node.inputLabels)) {
changes.inputLabels = editing_node.inputLabels;
editing_node.inputLabels = newValue;
changed = true;
}
newValue = outputLabels.map(function() { return $(this).val();}).toArray().slice(0,editing_node.outputs);
if (JSON.stringify(newValue) !== JSON.stringify(editing_node.outputLabels)) {
changes.outputLabels = editing_node.outputLabels;
editing_node.outputLabels = newValue;
changed = true;
}
if (changed) { if (changed) {
var wasChanged = editing_node.changed; var wasChanged = editing_node.changed;
@ -872,11 +941,11 @@ RED.editor = (function() {
singleExpanded: true singleExpanded: true
}); });
var nodeProperties = stack.add({ var nodeProperties = stack.add({
title: "node properties", title: RED._("editor.nodeProperties"),
expanded: true expanded: true
}); });
var portLabels = stack.add({ var portLabels = stack.add({
title: "port labels", title: RED._("editor.portLabels"),
onexpand: function() { onexpand: function() {
refreshLabelForm(this.content,node); refreshLabelForm(this.content,node);
} }

View File

@ -22,6 +22,7 @@
<div class="form-row"> <div class="form-row">
<label data-i18n="switch.label.property"></label> <label data-i18n="switch.label.property"></label>
<input type="text" id="node-input-property" style="width: 70%"/> <input type="text" id="node-input-property" style="width: 70%"/>
<input type="hidden" id="node-input-outputs"/>
</div> </div>
<div class="form-row node-input-rule-container-row"> <div class="form-row node-input-rule-container-row">
<ol id="node-input-rule-container"></ol> <ol id="node-input-rule-container"></ol>
@ -115,7 +116,7 @@
var previousValueType = {value:"prev",label:this._("inject.previous"),hasValue:false}; var previousValueType = {value:"prev",label:this._("inject.previous"),hasValue:false};
$("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata']}); $("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata']});
var outputCount = $("#node-input-outputs").val("{}");
var andLabel = this._("switch.and"); var andLabel = this._("switch.and");
var caseLabel = this._("switch.ignorecase"); var caseLabel = this._("switch.ignorecase");
@ -157,6 +158,9 @@
if (!rule.hasOwnProperty('t')) { if (!rule.hasOwnProperty('t')) {
rule.t = 'eq'; rule.t = 'eq';
} }
if (!opt.hasOwnProperty('i')) {
opt._i = Math.floor((0x99999-0x10000)*Math.random()).toString(16)
}
var row = $('<div/>').appendTo(container); var row = $('<div/>').appendTo(container);
var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container); var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container);
var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container); var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
@ -213,21 +217,36 @@
caseSensitive.prop('checked',false); caseSensitive.prop('checked',false);
} }
selectField.change(); selectField.change();
var currentOutputs = JSON.parse(outputCount.val()||"{}");
currentOutputs[opt.hasOwnProperty('i')?opt.i:opt._i] = i;
outputCount.val(JSON.stringify(currentOutputs));
}, },
removeItem: function(opt) { removeItem: function(opt) {
var currentOutputs = JSON.parse(outputCount.val()||"{}");
if (opt.hasOwnProperty('i')) { if (opt.hasOwnProperty('i')) {
var removedList = $("#node-input-rule-container").data('removedList')||[]; currentOutputs[opt.i] = -1;
removedList.push(opt.i); } else {
$("#node-input-rule-container").data('removedList',removedList); delete currentOutputs[opt._i];
} }
var rules = $("#node-input-rule-container").editableList('items'); var rules = $("#node-input-rule-container").editableList('items');
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); }); rules.each(function(i) {
$(this).find(".node-input-rule-index").html(i+1);
var data = $(this).data('data');
currentOutputs[data.hasOwnProperty('i')?data.i:data._i] = i;
});
outputCount.val(JSON.stringify(currentOutputs));
}, },
resizeItem: resizeRule, resizeItem: resizeRule,
sortItems: function(rules) { sortItems: function(rules) {
var currentOutputs = JSON.parse(outputCount.val()||"{}");
var rules = $("#node-input-rule-container").editableList('items'); var rules = $("#node-input-rule-container").editableList('items');
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); }); rules.each(function(i) {
$(this).find(".node-input-rule-index").html(i+1);
var data = $(this).data('data');
currentOutputs[data.hasOwnProperty('i')?data.i:data._i] = i;
});
outputCount.val(JSON.stringify(currentOutputs));
}, },
sortable: true, sortable: true,
removable: true removable: true
@ -243,11 +262,6 @@
var ruleset; var ruleset;
var node = this; var node = this;
node.rules = []; node.rules = [];
var changedOutputs = {};
var removedList = $("#node-input-rule-container").data('removedList')||[];
removedList.forEach(function(i) {
changedOutputs[i] = -1;
});
rules.each(function(i) { rules.each(function(i) {
var ruleData = $(this).data('data'); var ruleData = $(this).data('data');
var rule = $(this); var rule = $(this);
@ -267,16 +281,10 @@
r.case = rule.find(".node-input-rule-case").prop("checked"); r.case = rule.find(".node-input-rule-case").prop("checked");
} }
} }
if (ruleData.hasOwnProperty('i')) {
if (ruleData.i !== i) {
changedOutputs[ruleData.i] = i;
}
}
node.rules.push(r); node.rules.push(r);
}); });
this._outputs = changedOutputs;
this.outputs = node.rules.length;
this.propertyType = $("#node-input-property").typedInput('type'); this.propertyType = $("#node-input-property").typedInput('type');
console.log(JSON.parse($("#node-input-outputs").val()||"{}"));
}, },
oneditresize: function(size) { oneditresize: function(size) {
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)"); var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");

View File

@ -185,6 +185,11 @@
"editNode": "Edit __type__ node", "editNode": "Edit __type__ node",
"editConfig": "Edit __type__ config node", "editConfig": "Edit __type__ config node",
"addNewType": "Add new __type__...", "addNewType": "Add new __type__...",
"nodeProperties": "node properties",
"portLabels": "port labels",
"labelInputs": "Inputs",
"labelOutputs": "Outputs",
"errors": { "errors": {
"scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it" "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it"
} }