Add inputLabels and outputLabels to node defn + Update Change node

editor/js/ui/view.js

@@ -1485,19 +1485,37 @@ RED.view = (function() {
 
     }
 
+    function getPortLabel(node,portType,portIndex) {
+        var result;
+        var portLabels = (portType === PORT_TYPE_INPUT)?node._def.inputLabels:node._def.outputLabels;
+        if (typeof portLabels === 'string') {
+            result = portLabels;
+        } else if (typeof portLabels === 'function') {
+            try {
+                result = portLabels.call(node,portIndex);
+            } catch(err) {
+                console.log("Definition error: "+node.type+"."+((portType === PORT_TYPE_INPUT)?"inputLabels":"outputLabels"),err);
+                result = null;
+            }
+        } else if ($.isArray(portLabels)) {
+            result = portLabels[portIndex];
+        }
+        return result;
+    }
     function portMouseOver(port,d,portType,portIndex) {
         clearTimeout(portLabelHoverTimeout);
         var active = (mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== portType));
-        if (active) {
+        if (active && ((portType === PORT_TYPE_INPUT && d._def.inputLabels) || (portType === PORT_TYPE_OUTPUT && d._def.outputLabels))) {
             portLabelHoverTimeout = setTimeout(function() {
+                var tooltip = getPortLabel(d,portType,portIndex);
+                if (!tooltip) {
+                    return;
+                }
                 var pos = getElementPosition(port.node());
                 portLabelHoverTimeout = null;
                 portLabelHover = vis.append("g")
                     .attr("transform","translate("+(pos[0]+(portType===PORT_TYPE_INPUT?-2:12))+","+(pos[1]+5)+")")
                     .attr("class","port_tooltip");
-
-
-                var tooltip = ["You can have a label","and you can have a label","you can alllll\nhave a label"][portIndex];
                 var lines = tooltip.split("\n");
                 var labelWidth = 0;
                 var labelHeight = 4;
@@ -1526,8 +1544,6 @@ RED.view = (function() {
                         .attr("text-anchor",portType===PORT_TYPE_INPUT?"end":"start")
                         .text(l)
                 });
-
-                // console.log(port,d,portType,portIndex);
             },500);
         }
         port.classed("port_hovered",active);

nodes/core/logic/10-switch.html

@@ -43,6 +43,38 @@
 </script>
 
 <script type="text/javascript">
+(function() {
+    var operators = [
+        {v:"eq",t:"=="},
+        {v:"neq",t:"!="},
+        {v:"lt",t:"<"},
+        {v:"lte",t:"<="},
+        {v:"gt",t:">"},
+        {v:"gte",t:">="},
+        {v:"btwn",t:"switch.rules.btwn"},
+        {v:"cont",t:"switch.rules.cont"},
+        {v:"regex",t:"switch.rules.regex"},
+        {v:"true",t:"switch.rules.true"},
+        {v:"false",t:"switch.rules.false"},
+        {v:"null",t:"switch.rules.null"},
+        {v:"nnull",t:"switch.rules.nnull"},
+        {v:"else",t:"switch.rules.else"}
+    ];
+
+    function clipValueLength(v) {
+        if (v.length > 15) {
+            return v.substring(0,15)+"...";
+        }
+        return v;
+    }
+    function getValueLabel(t,v) {
+        if (t === 'str') {
+            return '"'+clipValueLength(v)+'"';
+        } else if (t === 'msg' || t==='flow' || t==='global') {
+            return t+"."+clipValueLength(v);
+        }
+        return clipValueLength(v);
+    }
     RED.nodes.registerType('switch', {
         color: "#E2D96E",
         category: 'function',
@@ -56,6 +88,24 @@
         },
         inputs: 1,
         outputs: 1,
+        outputLabels: function(index) {
+            var rule = this.rules[index];
+            var label = "";
+            if (rule) {
+                for (var i=0;i<operators.length;i++) {
+                    if (operators[i].v === rule.t) {
+                        label = /^switch/.test(operators[i].t)?this._(operators[i].t):operators[i].t
+                        break;
+                    }
+                }
+                if (rule.t === 'btwn') {
+                    label += " "+getValueLabel(rule.vt,rule.v)+" & "+getValueLabel(rule.v2t,rule.v2);
+                } else if (rule.t !== 'true' && rule.t !== 'false' && rule.t !== 'null' && rule.t !== 'nnull' && rule.t !== 'else' ) {
+                    label += " "+getValueLabel(rule.vt,rule.v);
+                }
+                return label;
+            }
+        },
         icon: "switch.png",
         label: function() {
             return this.name||"switch";
@@ -65,22 +115,7 @@
             var previousValueType = {value:"prev",label:this._("inject.previous"),hasValue:false};
 
             $("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata']});
-            var operators = [
+
-                {v:"eq",t:"=="},
-                {v:"neq",t:"!="},
-                {v:"lt",t:"<"},
-                {v:"lte",t:"<="},
-                {v:"gt",t:">"},
-                {v:"gte",t:">="},
-                {v:"btwn",t:this._("switch.rules.btwn")},
-                {v:"cont",t:this._("switch.rules.cont")},
-                {v:"regex",t:this._("switch.rules.regex")},
-                {v:"true",t:this._("switch.rules.true")},
-                {v:"false",t:this._("switch.rules.false")},
-                {v:"null",t:this._("switch.rules.null")},
-                {v:"nnull",t:this._("switch.rules.nnull")},
-                {v:"else",t:this._("switch.rules.else")}
-            ];
 
             var andLabel = this._("switch.and");
             var caseLabel = this._("switch.ignorecase");
@@ -127,7 +162,7 @@
                     var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
                     var selectField = $('<select/>',{style:"width:120px; margin-left: 5px; text-align: center;"}).appendTo(row);
                     for (var d in operators) {
-                        selectField.append($("<option></option>").val(operators[d].v).text(operators[d].t));
+                        selectField.append($("<option></option>").val(operators[d].v).text(/^switch/.test(operators[d].t)?node._(operators[d].t):operators[d].t));
                     }
                     var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num','jsonata',previousValueType]});
                     var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata',previousValueType]});
@@ -254,4 +289,5 @@
             $("#node-input-rule-container").editableList('height',height);
         }
     });
+})();
 </script>