From dea47a6e3db761bb2e2400e6d0e8a5ba9a0dd4e5 Mon Sep 17 00:00:00 2001
From: Thierry Le Gal <thierry.le.gal@gmail.com>
Date: Tue, 3 Mar 2020 18:43:44 +0100
Subject: [PATCH] Improve performance in change node panel

---
 .../nodes/core/function/15-change.html        | 118 +++++++++++++-----
 1 file changed, 89 insertions(+), 29 deletions(-)

diff --git a/packages/node_modules/@node-red/nodes/core/function/15-change.html b/packages/node_modules/@node-red/nodes/core/function/15-change.html
index fc9fa8d84..59d4337c5 100644
--- a/packages/node_modules/@node-red/nodes/core/function/15-change.html
+++ b/packages/node_modules/@node-red/nodes/core/function/15-change.html
@@ -1,5 +1,10 @@
 
 <script type="text/html" data-template-name="change">
+    <style>
+        ol#node-input-rule-container .red-ui-typedInput-container {
+            flex:1;
+        }
+    </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">
@@ -76,11 +81,6 @@
             var replace = this._("change.action.replace");
             var regex = this._("change.label.regex");
 
-            function resizeRule(rule) {
-                var newWidth = rule.width();
-                rule.find('.red-ui-typedInput').typedInput("width",newWidth-130);
-
-            }
             $('#node-input-rule-container').css('min-height','150px').css('min-width','450px').editableList({
                 addItem: function(container,i,opt) {
                     var rule = opt;
@@ -106,10 +106,11 @@
                         overflow: 'hidden',
                         whiteSpace: 'nowrap'
                     });
-                    var row1 = $('<div/>').appendTo(container);
-                    var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
-                    var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
-                    var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
+                    let fragment = document.createDocumentFragment();
+                    var row1 = $('<div/>',{style:"display:flex;"}).appendTo(fragment);
+                    var row2 = $('<div/>',{style:"display:flex;margin-top:8px;"}).appendTo(fragment);
+                    var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(fragment);
+                    var row4 = $('<div/>',{style:"display:flex;margin-top:8px;"}).appendTo(fragment);
 
                     var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
                     var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
@@ -124,41 +125,82 @@
                     $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                         .text(to)
                         .appendTo(row2);
-                    var propertyValue = $('<input/>',{class:"node-input-rule-property-value",type:"text"})
+
+                    function createPropertyValue() {
+                        return $('<input/>',{class:"node-input-rule-property-value",type:"text"})
                         .appendTo(row2)
                         .typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','bin','date','jsonata','env']});
+                    }
 
-                    var row3_1 = $('<div/>').appendTo(row3);
+                    var row3_1 = $('<div/>', {style:"display:flex;"}).appendTo(row3);
                     $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                         .text(search)
                         .appendTo(row3_1);
-                    var fromValue = $('<input/>',{class:"node-input-rule-property-search-value",type:"text"})
+
+                    function createFromValue() {
+                        return $('<input/>',{class:"node-input-rule-property-search-value",type:"text"})
                         .appendTo(row3_1)
                         .typedInput({default:'str',types:['msg','flow','global','str','re','num','bool','env']});
+                    }
 
-                    var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
+                    var row3_2 = $('<div/>',{style:"display:flex;margin-top:8px;"}).appendTo(row3);
                     $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                         .text(replace)
                         .appendTo(row3_2);
-                    var toValue = $('<input/>',{class:"node-input-rule-property-replace-value",type:"text"})
+
+                    function createToValue() {
+                        return $('<input/>',{class:"node-input-rule-property-replace-value",type:"text"})
                         .appendTo(row3_2)
                         .typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','bin','env']});
+                    }
 
                     $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                         .text(to)
                         .appendTo(row4);
-                    var moveValue = $('<input/>',{class:"node-input-rule-property-move-value",type:"text"})
+
+                    function createMoveValue() {
+                        return $('<input/>',{class:"node-input-rule-property-move-value",type:"text"})
                         .appendTo(row4)
                         .typedInput({default:'msg',types:['msg','flow','global']});
+                    }
+
+                    let propertyValue = null;
+                    let fromValue = null;
+                    let toValue = null;
+                    let moveValue = null;
 
                     selectField.on("change", function() {
-                        var width = $("#node-input-rule-container").width();
                         var type = $(this).val();
+                        if (propertyValue) {
+                            propertyValue.typedInput('hide');
+                        }
+                        if (fromValue) {
+                            fromValue.typedInput('hide');
+                        }
+                        if (toValue) {
+                            toValue.typedInput('hide');
+                        }
+                        if (moveValue) {
+                            moveValue.typedInput('hide');
+                        }
+
                         if (type == "set") {
+                            if(!propertyValue) {
+                                propertyValue = createPropertyValue();
+                            }
+                            propertyValue.typedInput('show');
                             row2.show();
                             row3.hide();
                             row4.hide();
                         } else if (type == "change") {
+                            if(!fromValue) {
+                                fromValue = createFromValue();
+                            }
+                            fromValue.typedInput('show');
+                            if(!toValue) {
+                                toValue = createToValue();
+                            }
+                            toValue.typedInput('show');
                             row2.hide();
                             row3.show();
                             row4.hide();
@@ -167,30 +209,48 @@
                             row3.hide();
                             row4.hide();
                         } else if (type == "move") {
+                            if(!moveValue) {
+                                moveValue = createMoveValue();
+                            }
+                            moveValue.typedInput('show');
                             row2.hide();
                             row3.hide();
                             row4.show();
                         }
-                        resizeRule(container);
                     });
 
                     selectField.val(rule.t);
                     propertyName.typedInput('value',rule.p);
                     propertyName.typedInput('type',rule.pt);
-                    propertyValue.typedInput('value',rule.to);
-                    propertyValue.typedInput('type',rule.tot);
-                    moveValue.typedInput('value',rule.to);
-                    moveValue.typedInput('type',rule.tot);
-                    fromValue.typedInput('value',rule.from);
-                    fromValue.typedInput('type',rule.fromt);
-                    toValue.typedInput('value',rule.to);
-                    toValue.typedInput('type',rule.tot);
+                    if (rule.t == "set") {
+                        if(!propertyValue) {
+                            propertyValue = createPropertyValue();
+                        }
+                        propertyValue.typedInput('value',rule.to);
+                        propertyValue.typedInput('type',rule.tot);
+                    }
+                    if (rule.t == "move") {
+                        if(!moveValue) {
+                            moveValue = createMoveValue();
+                        }
+                        moveValue.typedInput('value',rule.to);
+                        moveValue.typedInput('type',rule.tot);
+                    }
+                    if (rule.t == "change") {
+                        if(!fromValue) {
+                            fromValue = createFromValue();
+                        }
+                        fromValue.typedInput('value',rule.from);
+                        fromValue.typedInput('type',rule.fromt);
+                        if (!toValue) {
+                            toValue = createToValue();
+                        }
+                        toValue.typedInput('value',rule.to);
+                        toValue.typedInput('type',rule.tot);
+                    }
                     selectField.change();
-
-                    var newWidth = $("#node-input-rule-container").width();
-                    resizeRule(container);
+                    container[0].appendChild(fragment);
                 },
-                resizeItem: resizeRule,
                 removable: true,
                 sortable: true
             });