From 5b5f9aa01d606cf4ef755f7d36828c81ef3e9f38 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 15 May 2017 16:26:42 +0100
Subject: [PATCH] Add 'none' placeholder for empty port label form

---
 editor/js/ui/editor.js  | 89 +++++++++++++++++++++++++++++++----------
 editor/sass/editor.scss | 21 ++++++++++
 2 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index a027a4f3a..8d97d497a 100644
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@@ -563,14 +563,26 @@ RED.editor = (function() {
 
         var inputCount = node.inputs || node._def.inputs || 0;
         var children = inputsDiv.children();
-        if (children.length < inputCount) {
-            for (i = children.length;i<inputCount;i++) {
+        var childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+            childCount--;
+        }
+
+        if (childCount < inputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<inputCount;i++) {
                 buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
             }
-        } else if (children.length > inputCount) {
-            for (i=inputCount;i<children.length;i++) {
+        } else if (childCount > inputCount) {
+            for (i=inputCount;i<childCount;i++) {
                 $(children[i]).remove();
             }
+            if (outputCount === 0) {
+                buildLabelRow().appendTo(inputsDiv);
+            }
         }
 
         var outputCount;
@@ -582,12 +594,24 @@ RED.editor = (function() {
         } else if (isNaN(formOutputs)) {
             var outputMap = JSON.parse(formOutputs);
             var keys = Object.keys(outputMap);
+            children = outputsDiv.children();
+            childCount = children.length;
+            if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+                childCount--;
+            }
+
             outputCount = 0;
             var rows = [];
             keys.forEach(function(p) {
                 var row = $("#node-label-form-output-"+p).parent();
                 if (row.length === 0 && outputMap[p] !== -1) {
+                    if (childCount === 0) {
+                        $(children[0]).remove();
+                        childCount = -1;
+                    }
                     row = buildLabelRow("output",p,"",outputPlaceholder);
+                } else {
+                    row.detach();
                 }
                 if (outputMap[p] !== -1) {
                     outputCount++;
@@ -597,35 +621,56 @@ RED.editor = (function() {
             rows.sort(function(A,B) {
                 return A.i-B.i;
             })
-            outputsDiv.children().detach();
             rows.forEach(function(r,i) {
                 r.r.find("label").html((i+1)+".");
                 r.r.appendTo(outputsDiv);
             })
+            if (rows.length === 0) {
+                buildLabelRow("output",i,"").appendTo(outputsDiv);
+            } else {
+
+            }
         } else {
             outputCount = Math.max(0,parseInt(formOutputs));
         }
         children = outputsDiv.children();
-        if (children.length < outputCount) {
-            for (i = children.length;i<outputCount;i++) {
+        childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+            childCount--;
+        }
+        if (childCount < outputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<outputCount;i++) {
                 buildLabelRow("output",i,"").appendTo(outputsDiv);
             }
-        } else if (children.length > outputCount) {
-            for (i=outputCount;i<children.length;i++) {
+        } else if (childCount > outputCount) {
+            for (i=outputCount;i<childCount;i++) {
                 $(children[i]).remove();
             }
+            if (outputCount === 0) {
+                buildLabelRow().appendTo(outputsDiv);
+            }
         }
     }
     function buildLabelRow(type, index, value, placeHolder) {
-        var result = $('<div>',{style:"margin: 5px 0px"});
-        var id = "node-label-form-"+type+"-"+index;
-        $('<label>',{for:id,style:"margin-right: 20px; text-align: right; width: 30px;"}).html((index+1)+".").appendTo(result);
-        var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
-        var clear = $('<button class="editor-button editor-button-small" style="margin-left: 10px"><i class="fa fa-times"></i></button>').appendTo(result);
-        clear.click(function(evt) {
-            evt.preventDefault();
-            input.val("");
-        })
+        var result = $('<div>',{class:"node-label-form-row"});
+        if (type === undefined) {
+            $('<span>').html("none").appendTo(result);
+            result.addClass("node-label-form-none");
+        } else {
+            result.addClass("");
+            var id = "node-label-form-"+type+"-"+index;
+            $('<label>',{for:id}).html((index+1)+".").appendTo(result);
+            var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
+            var clear = $('<button class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
+            clear.click(function(evt) {
+                evt.preventDefault();
+                input.val("");
+            })
+        }
         return result;
     }
     function buildLabelForm(container,node) {
@@ -645,23 +690,23 @@ RED.editor = (function() {
         var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
 
         var i,row;
-        $('<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);
+        $('<div class="form-row"><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) {
             for (i=0;i<inputCount;i++) {
                 buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
             }
         } else {
-
+            buildLabelRow().appendTo(inputsDiv);
         }
-        $('<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);
+        $('<div class="form-row"><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) {
             for (i=0;i<outputCount;i++) {
                 buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
             }
         } else {
-
+            buildLabelRow().appendTo(outputsDiv);
         }
     }
 
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
index 406fda74a..8590095d7 100644
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@@ -297,3 +297,24 @@
     position: absolute;
     top: -3000px;
 }
+.node-label-form-row {
+    margin: 5px 0;
+    label {
+        margin-right: 20px;
+        text-align: right;
+        width: 30px;
+    }
+    button {
+        margin-left: 10px;
+    }
+    input {
+        width: calc(100% - 100px);
+    }
+}
+.node-label-form-none {
+    span {
+        padding-left: 50px;
+        width: 100px;
+        color: #999;
+    }
+}