Merge pull request #3170 from node-red/switch-rule-type

Copy previous rule type when adding rule to switch node

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -783,14 +783,14 @@
                     var typeChanged = !!previousType;
 
                     if (typeChanged) {
-                        if (previousType.options) {
+                        if (previousType.options && opt.hasValue !== true) {
                             this.oldValues[previousType.value] = this.input.val();
                         } else if (previousType.hasValue === false) {
                             this.oldValues[previousType.value] = this.input.val();
                         } else {
                             this.oldValues["_"] = this.input.val();
                         }
-                        if (opt.options || opt.hasValue === false) {
+                        if ((opt.options && opt.hasValue !== true) || opt.hasValue === false) {
                             this.input.val(this.oldValues.hasOwnProperty(opt.value)?this.oldValues[opt.value]:(opt.default||[]).join(","))
                         } else {
                             this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||""))
@@ -1069,6 +1069,9 @@
         },
         disabled: function() {
             return this.uiSelect.attr("disabled") === "disabled";
+        },
+        focus: function() {
+            this.input.focus();
         }
     });
 })(jQuery);

packages/node_modules/@node-red/nodes/core/function/10-switch.html

@@ -17,11 +17,11 @@
 <script type="text/html" data-template-name="switch">
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
+        <input type="text" id="node-input-name" style="width: calc(100% - 105px)" data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row">
         <label for="node-input-property"><i class="fa fa-ellipsis-h"></i> <span data-i18n="switch.label.property"></span></label>
-        <input type="text" id="node-input-property" style="width: 70%"/>
+        <input type="text" id="node-input-property" style="width: calc(100% - 105px)"/>
         <input type="hidden" id="node-input-outputs"/>
     </div>
     <div class="form-row node-input-rule-container-row">
@@ -66,6 +66,7 @@
         {v:"else",t:"switch.rules.else",kind:'O'}
     ];
 
+    var previousValueType = {value:"prev",label:RED._("node-red:switch.previous"),hasValue:false};
     function clipValueLength(v) {
         if (v.length > 15) {
             return v.substring(0,15)+"...";
@@ -86,6 +87,72 @@
         }
         return clipValueLength(v);
     }
+
+    function exportRule(rule) {
+        var type = rule.find("select").val();
+        var r = {t:type};
+        if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else")) {
+            if ((type === "btwn") || (type === "index")) {
+                r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
+                r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
+                r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
+                r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
+            } else if ((type === "head") || (type === "tail")) {
+                r.v = rule.find(".node-input-rule-num-value").typedInput('value');
+                r.vt = rule.find(".node-input-rule-num-value").typedInput('type');
+            } else if (type === "istype") {
+                r.v = rule.find(".node-input-rule-type-value").typedInput('type');
+                r.vt = rule.find(".node-input-rule-type-value").typedInput('type');
+            } else if (type === "jsonata_exp") {
+                r.v = rule.find(".node-input-rule-exp-value").typedInput('value');
+                r.vt = rule.find(".node-input-rule-exp-value").typedInput('type');
+            } else {
+                r.v = rule.find(".node-input-rule-value").typedInput('value');
+                r.vt = rule.find(".node-input-rule-value").typedInput('type');
+            }
+            if (type === "regex") {
+                r.case = rule.find(".node-input-rule-case").prop("checked");
+            }
+        }
+        return r;
+    }
+
+    function createValueField(row){
+        return $('<input/>',{class:"node-input-rule-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
+    }
+
+    function createNumValueField(row){
+        return $('<input/>',{class:"node-input-rule-num-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'num',types:['flow','global','num','jsonata','env']});
+    }
+
+    function createExpValueField(row){
+        return $('<input/>',{class:"node-input-rule-exp-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'jsonata',types:['jsonata']});
+    }
+
+    function createBtwnValueField(row){
+        return $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
+    }
+
+    function createBtwnValue2Field(row3, andLabel){
+        $('<div/>',{class:"node-input-rule-btwn-label", style:"width: 120px; text-align: right;"}).text(" "+andLabel+" ").appendTo(row3);
+        var row3InputCell = $('<div/>',{style:"flex-grow:1; margin-left: 5px;"}).appendTo(row3);
+        return $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 100%"}).appendTo(row3InputCell).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
+    }
+
+    function createTypeValueField(){
+        return $('<input/>',{class:"node-input-rule-type-value",type:"text",style:"width: 100%;"}).appendTo(row).typedInput({default:'string',types:[
+            {value:"string",label:RED._("common.type.string"),hasValue:false,icon:"red/images/typedInput/az.png"},
+            {value:"number",label:RED._("common.type.number"),hasValue:false,icon:"red/images/typedInput/09.png"},
+            {value:"boolean",label:RED._("common.type.boolean"),hasValue:false,icon:"red/images/typedInput/bool.png"},
+            {value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.png"},
+            {value:"buffer",label:RED._("common.type.buffer"),hasValue:false,icon:"red/images/typedInput/bin.png"},
+            {value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.png"},
+            {value:"json",label:RED._("common.type.jsonString"),hasValue:false,icon:"red/images/typedInput/json.png"},
+            {value:"undefined",label:RED._("common.type.undefined"),hasValue:false},
+            {value:"null",label:RED._("common.type.null"),hasValue:false}
+        ]});
+    }
+
     RED.nodes.registerType('switch', {
         color: "#E2D96E",
         category: 'function',
@@ -127,7 +194,7 @@
         },
         oneditprepare: function() {
             var node = this;
-            var previousValueType = {value:"prev",label:this._("switch.previous"),hasValue:false};
+
 
             $("#node-input-property").typedInput({default:this.propertyType||'msg',types:['msg','flow','global','jsonata','env']});
             var outputCount = $("#node-input-outputs").val("{}");
@@ -135,49 +202,25 @@
             var andLabel = this._("switch.and");
             var caseLabel = this._("switch.ignorecase");
 
-            function resizeRule(rule) {
+            $("#node-input-rule-container").css('min-height','150px').css('min-width','450px').editableList({
-                var newWidth = rule.width();
+                addItem: function(container,i,opt) {
-                var selectField = rule.find("select");
+                    var focusValueField = false;
-                var type = selectField.val()||"";
+                    if (!opt.hasOwnProperty('r')) {
-                var valueField = rule.find(".node-input-rule-value");
+                        opt.r = {};
-                var typeField = rule.find(".node-input-rule-type-value");
+                        if (i > 0) {
-                var numField = rule.find(".node-input-rule-num-value");
+                            var lastRule = $("#node-input-rule-container").editableList('getItemAt',i-1);
-                var expField = rule.find(".node-input-rule-exp-value");
+                            var exportedRule = exportRule(lastRule.element);
-                var keyField = rule.find(".node-input-rule-key-value");
+                            opt.r.vt = exportedRule.vt;
-                var btwnField1 = rule.find(".node-input-rule-btwn-value");
+                            // We could copy the value over as well and preselect it (see the 'activeElement' code below)
-                var btwnField2 = rule.find(".node-input-rule-btwn-value2");
+                            // But not sure that feels right. Is copying over the last value 'expected' behaviour?
-                var selectWidth;
+                            // It would make sense for an explicit 'copy' action, but not sure where the copy button would
-                if (type.length < 4) {
+                            // go for each rule without being wasted space for most users.
-                    selectWidth = 60;
+                            // opt.r.v = exportedRule.v;
-                } else if (type === "regex") {
+                            focusValueField = true;
-                    selectWidth = 147;
-                } else {
-                    selectWidth = 120;
-                }
-                selectField.width(selectWidth);
-                if ((type === "btwn") || (type === "index")) {
-                    btwnField1.typedInput("width",(newWidth-selectWidth-70));
-                    btwnField2.typedInput("width",(newWidth-selectWidth-70));
-                } else if ((type === "head") || (type === "tail")) {
-                    numField.typedInput("width",(newWidth-selectWidth-70));
-                } else if (type === "jsonata_exp") {
-                    expField.typedInput("width",(newWidth-selectWidth-70));
-                } else if (type === "istype") {
-                    typeField.typedInput("width",(newWidth-selectWidth-70));
-                } else {
-                    if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else") {
-                        // valueField.hide();
-                    } else {
-                        valueField.typedInput("width",(newWidth-selectWidth-70));
-                    }
                         }
                     }
 
-            $("#node-input-rule-container").css('min-height','150px').css('min-width','450px').editableList({
+                    opt.element = container;
-                addItem: function(container,i,opt) {
-                    if (!opt.hasOwnProperty('r')) {
-                        opt.r = {};
-                    }
                     var rule = opt.r;
                     if (!rule.hasOwnProperty('t')) {
                         rule.t = 'eq';
@@ -187,12 +230,16 @@
                     }
                     container.css({
                         overflow: 'hidden',
-                        whiteSpace: 'nowrap'
+                        whiteSpace: 'nowrap',
+                        display: "flex",
+                        "align-items":"center"
                     });
-                    var row = $('<div/>').appendTo(container);
+                    var inputRows = $('<div></div>',{style:"flex-grow:1"}).appendTo(container);
-                    var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container);
+                    var row = $('<div></div>',{style:"display: flex;"}).appendTo(inputRows);
-                    var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
+                    var row2 = $('<div/>',{style:"display: flex; padding-top: 5px; padding-left: 175px;"}).appendTo(inputRows);
-                    var selectField = $('<select/>',{style:"width:120px; margin-left: 5px; text-align: center;"}).appendTo(row);
+                    var row3 = $('<div/>',{style:"display: flex; padding-top: 5px; align-items: center"}).appendTo(inputRows);
+
+                    var selectField = $('<select/>',{style:"width:120px; text-align: center;"}).appendTo(row);
                     var group0 = $('<optgroup/>', { label: "value rules" }).appendTo(selectField);
                     for (var d in operators) {
                         if(operators[d].kind === 'V') {
@@ -211,43 +258,8 @@
                         }
                     }
 
-                    function createValueField(){
+                    var rowInputCell = $('<div>',{style:"flex-grow:1; margin-left: 5px;"}).appendTo(row);
-                        return $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
-                    }
 
-                    function createNumValueField(){
-                        return $('<input/>',{class:"node-input-rule-num-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['flow','global','num','jsonata','env']});
-                    }
-
-                    function createExpValueField(){
-                        return $('<input/>',{class:"node-input-rule-exp-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'jsonata',types:['jsonata']});
-                    }
-
-                    function createBtwnValueField(){
-                        return $('<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','env',previousValueType]});
-                    }
-
-                    function createBtwnAndLabel(){
-                        return $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
-                    }
-
-                    function createBtwnValue2Field(){
-                        return $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num','jsonata','env',previousValueType]});
-                    }
-
-                    function createTypeValueField(){
-                        return $('<input/>',{class:"node-input-rule-type-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'string',types:[
-                            {value:"string",label:RED._("common.type.string"),hasValue:false,icon:"red/images/typedInput/az.png"},
-                            {value:"number",label:RED._("common.type.number"),hasValue:false,icon:"red/images/typedInput/09.png"},
-                            {value:"boolean",label:RED._("common.type.boolean"),hasValue:false,icon:"red/images/typedInput/bool.png"},
-                            {value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.png"},
-                            {value:"buffer",label:RED._("common.type.buffer"),hasValue:false,icon:"red/images/typedInput/bin.png"},
-                            {value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.png"},
-                            {value:"json",label:RED._("common.type.jsonString"),hasValue:false,icon:"red/images/typedInput/json.png"},
-                            {value:"undefined",label:RED._("common.type.undefined"),hasValue:false},
-                            {value:"null",label:RED._("common.type.null"),hasValue:false}
-                        ]});
-                    }
 
                     var valueField = null;
                     var numValueField = null;
@@ -257,11 +269,14 @@
                     var btwnValue2Field = null;
                     var typeValueField = null;
 
-                    var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;"}).appendTo(row);
+                    var finalspan = $('<span/>',{style:"margin-left: 5px;"}).appendTo(container);
                     finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> ');
+
                     var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
                     $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);
+
                     selectField.on("change", function() {
+                        var fieldToFocus;
                         var type = selectField.val();
                         if (valueField){
                             valueField.typedInput('hide');
@@ -284,29 +299,35 @@
 
                         if ((type === "btwn") || (type === "index")) {
                             if (!btwnValueField){
-                                btwnValueField = createBtwnValueField();
+                                btwnValueField = createBtwnValueField(rowInputCell);
                             }
                             btwnValueField.typedInput('show');
+                            fieldToFocus = btwnValueField;
                         } else if ((type === "head") || (type === "tail")) {
                             if (!numValueField){
-                                numValueField = createNumValueField();
+                                numValueField = createNumValueField(rowInputCell);
                             }
                             numValueField.typedInput('show');
+                            fieldToFocus = numValueField;
                         } else if (type === "jsonata_exp") {
                             if (!expValueField){
-                                expValueField = createExpValueField();
+                                expValueField = createExpValueField(rowInputCell);
                             }
                             expValueField.typedInput('show');
+                            fieldToFocus = expValueField;
+
                         } else if (type === "istype") {
                             if (!typeValueField){
                                 typeValueField = createTypeValueField();
                             }
                             typeValueField.typedInput('show');
+                            fieldToFocus = typeValueField;
                         } else if (! (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else" )) {
                                 if (!valueField){
-                                    valueField = createValueField();
+                                    valueField = createValueField(rowInputCell);
                                 }
                                 valueField.typedInput('show');
+                                fieldToFocus = valueField;
                         }
                         if (type === "regex") {
                             row2.show();
@@ -315,32 +336,44 @@
                             row2.hide();
                             row3.show();
                             if (!btwnValue2Field){
-                                btwnValue2Field = createBtwnValue2Field();
+                                btwnValue2Field = createBtwnValue2Field(row3, andLabel);
                             }
                             btwnValue2Field.typedInput('show');
                         } else {
                             row2.hide();
                             row3.hide();
                         }
-                        resizeRule(container);
+                        var selectedLabel = selectField.find("option:selected").text();
-
+                        if (selectedLabel.length <= 5) {
+                            selectField.outerWidth(60);
+                        } else if (selectedLabel.length < 12) {
+                            selectField.outerWidth(120);
+                        } else {
+                            selectField.width("auto")
+                        }
+                        fieldToFocus.typedInput("focus");
+                        // Preselect the contents of the element
+                        // if (focusValueField && document.activeElement) {
+                        //     document.activeElement.selectionStart = 0;
+                        //     document.activeElement.selectionEnd = document.activeElement.value.length;
+                        // }
                     });
                     selectField.val(rule.t);
                     if ((rule.t == "btwn") || (rule.t == "index")) {
                         if (!btwnValueField){
-                            btwnValueField = createBtwnValueField();
+                            btwnValueField = createBtwnValueField(rowInputCell);
                         }
                         btwnValueField.typedInput('value',rule.v);
                         btwnValueField.typedInput('type',rule.vt||'num');
 
                         if (!btwnValue2Field){
-                            btwnValue2Field = createBtwnValue2Field();
+                            btwnValue2Field = createBtwnValue2Field(row3, andLabel);
                         }
                         btwnValue2Field.typedInput('value',rule.v2);
                         btwnValue2Field.typedInput('type',rule.v2t||'num');
                     } else if ((rule.t === "head") || (rule.t === "tail")) {
                         if (!numValueField){
-                            numValueField = createNumValueField();
+                            numValueField = createNumValueField(row);
                         }
                         numValueField.typedInput('value',rule.v);
                         numValueField.typedInput('type',rule.vt||'num');
@@ -352,13 +385,13 @@
                         typeValueField.typedInput('type',rule.vt);
                     } else if (rule.t === "jsonata_exp") {
                         if (!expValueField){
-                            expValueField = createExpValueField();
+                            expValueField = createExpValueField(row);
                         }
                         expValueField.typedInput('value',rule.v);
                         expValueField.typedInput('type',rule.vt||'jsonata');
                     } else if (typeof rule.v != "undefined") {
                         if (!valueField){
-                            valueField = createValueField();
+                            valueField = createValueField(rowInputCell);
                         }
                         valueField.typedInput('value',rule.v);
                         valueField.typedInput('type',rule.vt||'str');
@@ -389,7 +422,6 @@
                     });
                     outputCount.val(JSON.stringify(currentOutputs));
                 },
-                resizeItem: resizeRule,
                 sortItems: function(rules) {
                     var currentOutputs = JSON.parse(outputCount.val()||"{}");
                     var rules = $("#node-input-rule-container").editableList('items');
@@ -414,34 +446,7 @@
             var node = this;
             node.rules = [];
             rules.each(function(i) {
-                var ruleData = $(this).data('data');
+                node.rules.push(exportRule($(this)));
-                var rule = $(this);
-                var type = rule.find("select").val();
-                var r = {t:type};
-                if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "empty" || type === "nempty" || type === "else")) {
-                    if ((type === "btwn") || (type === "index")) {
-                        r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
-                        r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
-                        r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
-                        r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
-                    } else if ((type === "head") || (type === "tail")) {
-                        r.v = rule.find(".node-input-rule-num-value").typedInput('value');
-                        r.vt = rule.find(".node-input-rule-num-value").typedInput('type');
-                    } else if (type === "istype") {
-                        r.v = rule.find(".node-input-rule-type-value").typedInput('type');
-                        r.vt = rule.find(".node-input-rule-type-value").typedInput('type');
-                    } else if (type === "jsonata_exp") {
-                        r.v = rule.find(".node-input-rule-exp-value").typedInput('value');
-                        r.vt = rule.find(".node-input-rule-exp-value").typedInput('type');
-                    } else {
-                        r.v = rule.find(".node-input-rule-value").typedInput('value');
-                        r.vt = rule.find(".node-input-rule-value").typedInput('type');
-                    }
-                    if (type === "regex") {
-                        r.case = rule.find(".node-input-rule-case").prop("checked");
-                    }
-                }
-                node.rules.push(r);
             });
             this.propertyType = $("#node-input-property").typedInput('type');
         },

packages/node_modules/@node-red/nodes/core/function/15-change.html

@@ -7,7 +7,7 @@
     </style>
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
+        <input type="text" id="node-input-name" style="width: calc(100% - 105px)"  data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row" style="margin-bottom:0;">
         <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>