@node-red/editor-client 2.2.0-beta.1 → 2.2.0

package/public/red/red.js

@@ -647,8 +647,7 @@ var RED = (function() {
 
         $(".red-ui-header-toolbar").show();
 
-
-        RED.sidebar.show(":first");
+        RED.sidebar.show(":first", true);
 
         setTimeout(function() {
             loader.end();
@@ -8064,7 +8063,7 @@ RED.utils = (function() {
     window._marked.use({extensions: [descriptionList, description] } );
 
     function renderMarkdown(txt) {
-        var rendered = _marked(txt);
+        var rendered = _marked.parse(txt);
         var cleaned = DOMPurify.sanitize(rendered, {SAFE_FOR_JQUERY: true})
         return cleaned;
     }
@@ -12700,23 +12699,19 @@ RED.tabs = (function() {
                 }
             }
 
-            li.one("transitionend", function(evt) {
-                li.remove();
-                if (tabs[id].pinned) {
-                    pinnedTabsCount--;
-                }
-                if (options.onremove) {
-                    options.onremove(tabs[id]);
-                }
-                delete tabs[id];
-                updateTabWidths();
-                if (collapsibleMenu) {
-                    collapsibleMenu.remove();
-                    collapsibleMenu = null;
-                }
-            })
-            li.addClass("hide-tab");
-            li.width(0);
+            li.remove();
+            if (tabs[id].pinned) {
+                pinnedTabsCount--;
+            }
+            if (options.onremove) {
+                options.onremove(tabs[id]);
+            }
+            delete tabs[id];
+            updateTabWidths();
+            if (collapsibleMenu) {
+                collapsibleMenu.remove();
+                collapsibleMenu = null;
+            }
         }
 
         function findPreviousVisibleTab(li) {
@@ -14825,33 +14820,39 @@ RED.stack = (function() {
 ;RED.actions = (function() {
     var actions = {
 
-    }
+    };
 
-    function addAction(name,handler) {
+    function addAction(name,handler,options) {
         if (typeof handler !== 'function') {
             throw new Error("Action handler not a function");
         }
         if (actions[name]) {
             throw new Error("Cannot override existing action");
         }
-        actions[name] = handler;
+        actions[name] = {
+            handler: handler,
+            options: options,
+        };
     }
     function removeAction(name) {
         delete actions[name];
     }
     function getAction(name) {
-        return actions[name];
+        return actions[name].handler;
     }
     function invokeAction() {
         var args = Array.prototype.slice.call(arguments);
         var name = args.shift();
         if (actions.hasOwnProperty(name)) {
-            actions[name].apply(null, args);
+            var handler = actions[name].handler;
+            handler.apply(null, args);
         }
     }
     function listActions() {
         var result = [];
+        var missing = [];
         Object.keys(actions).forEach(function(action) {
+            var def = actions[action];
             var shortcut = RED.keyboard.getShortcut(action);
             var isUser = false;
             if (shortcut) {
@@ -14859,13 +14860,38 @@ RED.stack = (function() {
             } else {
                 isUser = !!RED.keyboard.getUserShortcut(action);
             }
+            if (!def.label) {
+                var name = action;
+                var options = def.options;
+                var key = options ? options.label : undefined;
+                if (!key) {
+                    key = "action-list." +name.replace(/^.*:/,"");
+                }
+                var label = RED._(key);
+                if (label === key) {
+                    // no translation. convert `name` to description 
+                    label = name.replace(/(^.+:([a-z]))|(-([a-z]))/g, function() {
+                        if (arguments[5] === 0) {
+                            return arguments[2].toUpperCase();
+                        } else {
+                            return " "+arguments[4].toUpperCase();
+                        }
+                    });
+                    missing.push(key);
+                }
+                def.label = label;
+            }
+            //console.log("; missing:", missing);
+
             result.push({
                 id:action,
                 scope:shortcut?shortcut.scope:undefined,
                 key:shortcut?shortcut.key:undefined,
-                user:isUser
-            })
-        })
+                user:isUser,
+                label: def.label,
+                options: def.options,
+            });
+        });
         return result;
     }
     return {
@@ -17690,15 +17716,15 @@ RED.keyboard = (function() {
         "]": 221,
         "{": 219,// <- QWERTY specific
         "}": 221 // <- QWERTY specific
-    }
+    };
     var metaKeyCodes = {
         16: true,
         17: true,
         18: true,
         91: true,
         93: true
-    }
-    var actionToKeyMap = {}
+    };
+    var actionToKeyMap = {};
     var defaultKeyMap = {};
 
     // FF generates some different keycodes because reasons.
@@ -17706,7 +17732,7 @@ RED.keyboard = (function() {
         59:186,
         61:187,
         173:189
-    }
+    };
 
     function migrateOldKeymap() {
         // pre-0.18
@@ -17721,7 +17747,7 @@ RED.keyboard = (function() {
     }
 
     function getUserKey(action) {
-        return RED.settings.get('editor.keymap',{})[action]
+        return RED.settings.get('editor.keymap',{})[action];
     }
 
     function mergeKeymaps(defaultKeymap, themeKeymap) {
@@ -17746,7 +17772,7 @@ RED.keyboard = (function() {
                                 scope:scope,
                                 key:key,
                                 user:false
-                            })
+                            });
                         }
                     }
                 }
@@ -17756,13 +17782,13 @@ RED.keyboard = (function() {
             if (themeKeymap.hasOwnProperty(action)) {
                 if (!themeKeymap[action].key) {
                     // No key for this action - default is no keybinding
-                    delete mergedKeymap[action]
+                    delete mergedKeymap[action];
                 } else {
                     mergedKeymap[action] = [{
                         scope: themeKeymap[action].scope || "*",
                         key: themeKeymap[action].key,
                         user: false
-                    }]
+                    }];
                     if (mergedKeymap[action][0].scope === "workspace") {
                         mergedKeymap[action][0].scope = "red-ui-workspace";
                     }
@@ -17820,7 +17846,7 @@ RED.keyboard = (function() {
             close: function() {
                 RED.menu.refreshShortcuts();
             }
-        })
+        });
     }
 
     function revertToDefault(action) {
@@ -17968,7 +17994,7 @@ RED.keyboard = (function() {
                         scope:scope,
                         key:key,
                         user:false
-                    }
+                    };
                 }
                 if (!ondown) {
                     var userAction = getUserKey(cbdown);
@@ -17991,7 +18017,7 @@ RED.keyboard = (function() {
                 }
             }
         } else {
-            keys.push([key,mod])
+            keys.push([key,mod]);
         }
         var slot = handlers;
         for (i=0;i<keys.length;i++) {
@@ -18014,7 +18040,7 @@ RED.keyboard = (function() {
             //slot[key] = {scope: scope, ondown:cbdown};
         }
         slot.handlers = slot.handlers || [];
-        slot.handlers.push({scope:scope,ondown:cbdown})
+        slot.handlers.push({scope:scope,ondown:cbdown});
         slot.scope = scope;
         slot.ondown = cbdown;
     }
@@ -18031,12 +18057,12 @@ RED.keyboard = (function() {
                 if (parsedKey) {
                     keys.push(parsedKey);
                 } else {
-                    console.log("Unrecognised key specifier:",key)
+                    console.log("Unrecognised key specifier:",key);
                     return;
                 }
             }
         } else {
-            keys.push([key,mod])
+            keys.push([key,mod]);
         }
         var slot = handlers;
         for (i=0;i<keys.length;i++) {
@@ -18058,7 +18084,7 @@ RED.keyboard = (function() {
         }
         if (typeof slot.ondown === "string") {
             if (typeof modifiers === 'boolean' && modifiers) {
-                actionToKeyMap[slot.ondown] = {user: modifiers}
+                actionToKeyMap[slot.ondown] = {user: modifiers};
             } else {
                 delete actionToKeyMap[slot.ondown];
             }
@@ -18074,11 +18100,11 @@ RED.keyboard = (function() {
     function formatKey(key,plain) {
         var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
         formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
-        formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
-        formattedKey = formattedKey.replace(/left/,"&#x2190;")
-        formattedKey = formattedKey.replace(/up/,"&#x2191;")
-        formattedKey = formattedKey.replace(/right/,"&#x2192;")
-        formattedKey = formattedKey.replace(/down/,"&#x2193;")
+        formattedKey = formattedKey.replace(/shift-?/,"&#8679;");
+        formattedKey = formattedKey.replace(/left/,"&#x2190;");
+        formattedKey = formattedKey.replace(/up/,"&#x2191;");
+        formattedKey = formattedKey.replace(/right/,"&#x2192;");
+        formattedKey = formattedKey.replace(/down/,"&#x2193;");
         if (plain) {
             return formattedKey;
         }
@@ -18102,7 +18128,6 @@ RED.keyboard = (function() {
         var container = $(this);
         var object = container.data('data');
 
-
         if (!container.hasClass('keyboard-shortcut-entry-expanded')) {
             endEditShortcut();
 
@@ -18126,7 +18151,7 @@ RED.keyboard = (function() {
                 }
                 $(this).toggleClass("input-error",!valid);
                 okButton.attr("disabled",!valid);
-            })
+            });
 
             var scopeSelect = $('<select><option value="*" data-i18n="keyboard.global"></option><option value="red-ui-workspace" data-i18n="keyboard.workspace"></option></select>').appendTo(scope);
             scopeSelect.i18n();
@@ -18136,7 +18161,7 @@ RED.keyboard = (function() {
             scopeSelect.val(object.scope||'*');
             scopeSelect.on("change", function() {
                 keyInput.trigger("change");
-            })
+            });
 
             var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope);
             var okButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
@@ -18162,10 +18187,13 @@ RED.keyboard = (function() {
                     id:object.id,
                     scope:shortcut?shortcut.scope:undefined,
                     key:shortcut?shortcut.key:undefined,
-                    user:shortcut?shortcut.user:undefined
-                }
+                    user:shortcut?shortcut.user:undefined,
+
+                    label: object.label,
+                    options: object.options,
+                };
                 buildShortcutRow(container,obj);
-            })
+            });
 
             keyInput.trigger("focus");
         }
@@ -18200,7 +18228,7 @@ RED.keyboard = (function() {
                             delete object.scope;
                         } else {
                             keyDiv.parent().removeClass("keyboard-shortcut-entry-unassigned");
-                            keyDiv.append(RED.keyboard.formatKey(key))
+                            keyDiv.append(RED.keyboard.formatKey(key));
                             $("<span>").text(scope).appendTo(scopeDiv);
                             object.key = key;
                             object.scope = scope;
@@ -18213,7 +18241,7 @@ RED.keyboard = (function() {
                         userKeymap[object.id] = {
                             scope:shortcut.scope,
                             key:shortcut.key
-                        }
+                        };
                         RED.settings.set('editor.keymap',userKeymap);
                     }
                 }
@@ -18229,13 +18257,7 @@ RED.keyboard = (function() {
         var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
         container.data('data',object);
 
-        var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function() {
-            if (arguments[5] === 0) {
-                return arguments[2].toUpperCase();
-            } else {
-                return " "+arguments[4].toUpperCase();
-            }
-        });
+        var text = object.label;
         var label = $('<div>').addClass("keyboard-shortcut-entry-text").text(text).appendTo(item);
 
         var user = $('<i class="fa fa-user"></i>').prependTo(label);
@@ -18276,8 +18298,9 @@ RED.keyboard = (function() {
                 } else {
                     filterValue = filterValue.replace(/\s/g,"");
                     shortcutList.editableList('filter', function(data) {
-                        return data.id.toLowerCase().replace(/^.*:/,"").replace("-","").indexOf(filterValue) > -1;
-                    })
+                        var label = data.label.toLowerCase();
+                        return label.indexOf(filterValue) > -1;
+                    });
                 }
             }
         });
@@ -18298,9 +18321,9 @@ RED.keyboard = (function() {
         });
         var shortcuts = RED.actions.list();
         shortcuts.sort(function(A,B) {
-            var Aid = A.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
-            var Bid = B.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
-            return Aid.localeCompare(Bid);
+            var Akey = A.label;
+            var Bkey = B.label;
+            return Akey.localeCompare(Bkey);
         });
         knownShortcuts = new Set();
         shortcuts.forEach(function(s) {
@@ -19663,12 +19686,45 @@ RED.view = (function() {
             },
             tooltip: function(d) {
                 if (d.validationErrors && d.validationErrors.length > 0) {
-                    return RED._("editor.errors.invalidProperties")+"\n  - "+d.validationErrors.join("\n    - ")
+                    return RED._("editor.errors.invalidProperties")+"\n  - "+d.validationErrors.join("\n  - ")
                 }
             },
             show: function(n) { return !n.valid }
         })
 
+        if (RED.settings.get("editor.view.view-store-zoom")) {
+            var  userZoomLevel = parseFloat(RED.settings.getLocal('zoom-level'))
+            if (!isNaN(userZoomLevel)) {
+                scaleFactor = userZoomLevel
+            }
+        }
+
+        var onScrollTimer = null;
+        function storeScrollPosition() {
+            workspaceScrollPositions[RED.workspaces.active()] = {
+                left:chart.scrollLeft(),
+                top:chart.scrollTop()
+            };
+            RED.settings.setLocal('scroll-positions', JSON.stringify(workspaceScrollPositions) )
+        }
+        chart.on("scroll", function() {
+            if (RED.settings.get("editor.view.view-store-position")) {
+                if (onScrollTimer) {
+                    clearTimeout(onScrollTimer)
+                }
+                onScrollTimer = setTimeout(storeScrollPosition, 200);
+            }
+        })
+
+        if (RED.settings.get("editor.view.view-store-position")) {
+            var scrollPositions = RED.settings.getLocal('scroll-positions')
+            if (scrollPositions) {
+                try {
+                    workspaceScrollPositions = JSON.parse(scrollPositions)
+                } catch(err) {
+                }
+            }
+        }
     }
 
 
@@ -20956,6 +21012,7 @@ RED.view = (function() {
     }
     function zoomZero() { zoomView(1); }
 
+
     function zoomView(factor) {
         var screenSize = [chart.width(),chart.height()];
         var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
@@ -20968,6 +21025,9 @@ RED.view = (function() {
 
         RED.view.navigator.resize();
         redraw();
+        if (RED.settings.get("editor.view.view-store-zoom")) {
+            RED.settings.setLocal('zoom-level', factor.toFixed(1))
+        }
     }
 
     function selectNone() {
@@ -22946,28 +23006,89 @@ RED.view = (function() {
             if (activeSubflow) {
                 var subflowOutputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-output").data(activeSubflow.out,function(d,i){ return d.id;});
                 subflowOutputs.exit().remove();
-                var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
+                var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output")
                 outGroup.each(function(d,i) {
-                    d.w=40;
-                    d.h=40;
+                    var node = d3.select(this);
+                    var nodeContents = document.createDocumentFragment();
+
+                    d.h = 40;
+                    d.resize = true;
+                    d.dirty = true;
+
+                    var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    mainRect.__data__ = d;
+                    mainRect.setAttribute("class", "red-ui-flow-subflow-port");
+                    mainRect.setAttribute("rx", 8);
+                    mainRect.setAttribute("ry", 8);
+                    mainRect.setAttribute("width", 40);
+                    mainRect.setAttribute("height", 40);
+                    node[0][0].__mainRect__ = mainRect;
+                    d3.select(mainRect)
+                        .on("mouseup",nodeMouseUp)
+                        .on("mousedown",nodeMouseDown)
+                        .on("touchstart",nodeTouchStart)
+                        .on("touchend",nodeTouchEnd)
+                    nodeContents.appendChild(mainRect);
+
+                    var output_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    output_groupEl.setAttribute("x",0);
+                    output_groupEl.setAttribute("y",0);
+                    node[0][0].__outputLabelGroup__ = output_groupEl;
+
+                    var output_output = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    output_output.setAttribute("class","red-ui-flow-port-label");
+                    output_output.style["font-size"] = "10px";
+                    output_output.textContent = "output";
+                    output_groupEl.appendChild(output_output);
+                    node[0][0].__outputOutput__ = output_output;
+
+                    var output_number = document.createElementNS("http://www.w3.org/2000/svg","text");
+                    output_number.setAttribute("class","red-ui-flow-port-label red-ui-flow-port-index");
+                    output_number.setAttribute("x",0);
+                    output_number.setAttribute("y",0);
+                    output_number.textContent = d.i+1;
+                    output_groupEl.appendChild(output_number);
+                    node[0][0].__outputNumber__ = output_number;
+
+                    var output_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+                    output_border.setAttribute("d","M 40 1 l 0 38")
+                    output_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
+                    output_groupEl.appendChild(output_border);
+                    node[0][0].__outputBorder__ = output_border;
+
+                    nodeContents.appendChild(output_groupEl);
+
+                    var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    text.setAttribute("class","red-ui-flow-port-label");
+                    text.setAttribute("transform","translate(38,0)");
+                    text.setAttribute('style', 'fill : #888');  // hard coded here!
+                    node[0][0].__textGroup__ = text;
+                    nodeContents.append(text);
+
+                    var portEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+                    portEl.setAttribute('transform','translate(-5,15)')
+
+                    var port = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                    port.setAttribute("class","red-ui-flow-port");
+                    port.setAttribute("rx",3);
+                    port.setAttribute("ry",3);
+                    port.setAttribute("width",10);
+                    port.setAttribute("height",10);
+                    portEl.appendChild(port);
+                    port.__data__ = d;
+
+                    d3.select(port)
+                        .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
+                        .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
+                        .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
+                        .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
+                        .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
+                        .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
+
+                    node[0][0].__port__ = portEl
+                    nodeContents.appendChild(portEl);
+                    node[0][0].appendChild(nodeContents);
                 });
-                outGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
-                    // TODO: This is exactly the same set of handlers used for regular nodes - DRY
-                    .on("mouseup",nodeMouseUp)
-                    .on("mousedown",nodeMouseDown)
-                    .on("touchstart",nodeTouchStart)
-                    .on("touchend",nodeTouchEnd)
-
-                outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
-                    .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
-                    .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
-                    .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
-                    .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
-                    .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
-                    .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
-
-                outGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",20).attr("y",12).style("font-size","10px").text("output");
-                outGroup.append("svg:text").attr("class","red-ui-flow-port-label red-ui-flow-port-index").attr("x",20).attr("y",28).text(function(d,i){ return i+1});
 
                 var subflowInputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-input").data(activeSubflow.in,function(d,i){ return d.id;});
                 subflowInputs.exit().remove();
@@ -23020,11 +23141,89 @@ RED.view = (function() {
 
                 subflowOutputs.each(function(d,i) {
                     if (d.dirty) {
-                        var output = d3.select(this);
-                        output.classed("red-ui-flow-node-selected",function(d) { return d.selected; })
-                        output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
-                        output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
+
+                        var port_height = 40;
+
+                        var self = this;
+                        var thisNode = d3.select(this);
+
                         dirtyNodes[d.id] = d;
+
+                        var label = getPortLabel(activeSubflow, PORT_TYPE_OUTPUT, d.i) || "";
+                        var hideLabel = (label.length < 1)
+
+                        var labelParts;
+                        if (d.resize || this.__hideLabel__ !== hideLabel || this.__label__ !== label) {
+                            labelParts = getLabelParts(label, "red-ui-flow-node-label");
+                            if (labelParts.lines.length !== this.__labelLineCount__ || this.__label__ !== label) {
+                                d.resize = true;
+                            }
+                            this.__label__ = label;
+                            this.__labelLineCount__ = labelParts.lines.length;
+
+                            if (hideLabel) {
+                                d.h = Math.max(port_height,(d.outputs || 0) * 15);
+                            } else {
+                                d.h = Math.max(6+24*labelParts.lines.length,(d.outputs || 0) * 15, port_height);
+                            }
+                            this.__hideLabel__ = hideLabel;
+                        }
+
+                        if (d.resize) {
+                            var ow = d.w;
+                            if (hideLabel) {
+                                d.w = port_height;
+                            } else {
+                                d.w = Math.max(port_height,20*(Math.ceil((labelParts.width+50+7)/20)) );
+                            }
+                            if (ow !== undefined) {
+                                d.x += (d.w-ow)/2;
+                            }
+                            d.resize = false;
+                        }
+
+                        this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
+                        // This might be the first redraw after a node has been click-dragged to start a move.
+                        // So its selected state might have changed since the last redraw.
+                        this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
+                        if (mouse_mode != RED.state.MOVING_ACTIVE) {
+                            this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
+                            this.__mainRect__.setAttribute("width", d.w)
+                            this.__mainRect__.setAttribute("height", d.h)
+                            this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
+
+                            if (labelParts) {
+                                // The label has changed
+                                var sa = labelParts.lines;
+                                var sn = labelParts.lines.length;
+                                var textLines = this.__textGroup__.childNodes;
+                                while(textLines.length > sn) {
+                                    textLines[textLines.length-1].remove();
+                                }
+                                for (var i=0; i<sn; i++) {
+                                    if (i===textLines.length) {
+                                        var line = document.createElementNS("http://www.w3.org/2000/svg","text");
+                                        line.setAttribute("class","red-ui-flow-node-label-text");
+                                        line.setAttribute("x",0);
+                                        line.setAttribute("y",i*24);
+                                        this.__textGroup__.appendChild(line);
+                                    }
+                                    textLines[i].textContent = sa[i];
+                                }
+                            }
+
+                            var textClass = "red-ui-flow-node-label"+(hideLabel?" hide":"");
+                            this.__textGroup__.setAttribute("class", textClass);
+                            var yp = d.h / 2 - (this.__labelLineCount__ / 2) * 24 + 13;
+
+                            // this.__textGroup__.classList.remove("red-ui-flow-node-label-right");
+                            this.__textGroup__.setAttribute("transform", "translate(48,"+yp+")");
+
+                            this.__outputBorder__.setAttribute("d","M 40 1 l 0 "+(hideLabel?0:(d.h - 2)));
+                            this.__port__.setAttribute("transform","translate(-5,"+((d.h/2)-5)+")");
+                            this.__outputOutput__.setAttribute("transform","translate(20,"+((d.h/2)-8)+")");
+                            this.__outputNumber__.setAttribute("transform","translate(20,"+((d.h/2)+7)+")");
+                        }
                         d.dirty = false;
                     }
                 });
@@ -25793,6 +25992,15 @@ RED.sidebar = (function() {
     var sidebar_tabs;
     var knownTabs = {};
 
+    // We store the current sidebar tab id in localStorage as 'last-sidebar-tab'
+    // This is restored when the editor is reloaded.
+    // We use sidebar_tabs.onchange to update localStorage. However that will
+    // also get triggered when the first tab gets added to the tabs - typically
+    // the 'info' tab. So we use the following variable to store the retrieved
+    // value from localStorage before we start adding the actual tabs
+    var lastSessionSelectedTab = null;
+
+
     function addTab(title,content,closeable,visible) {
         var options;
         if (typeof title === "string") {
@@ -25968,16 +26176,16 @@ RED.sidebar = (function() {
         RED.events.emit("sidebar:resize");
     }
 
-    function showSidebar(id) {
+    function showSidebar(id, skipShowSidebar) {
         if (id === ":first") {
-            id = RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
+            id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
         }
         if (id) {
             if (!containsTab(id) && knownTabs[id]) {
                 sidebar_tabs.addTab(knownTabs[id]);
             }
             sidebar_tabs.activateTab(id);
-            if (!RED.menu.isSelected("menu-item-sidebar")) {
+            if (!skipShowSidebar && !RED.menu.isSelected("menu-item-sidebar")) {
                 RED.menu.setSelected("menu-item-sidebar",true);
             }
         }
@@ -26001,6 +26209,7 @@ RED.sidebar = (function() {
                 if (tab.toolbar) {
                     $(tab.toolbar).show();
                 }
+                RED.settings.setLocal("last-sidebar-tab", tab.id)
             },
             onremove: function(tab) {
                 $(tab.wrapper).hide();
@@ -26029,7 +26238,9 @@ RED.sidebar = (function() {
             }
         });
         RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
-        showSidebar();
+
+        lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab")
+
         RED.sidebar.info.init();
         RED.sidebar.help.init();
         RED.sidebar.config.init();
@@ -28088,15 +28299,17 @@ RED.sidebar.help = (function() {
             style: "compact",
             delay: 100,
             change: function() {
-                var val = $(this).val().toLowerCase();
-                if (val) {
+                const searchFor = $(this).val().toLowerCase();
+                if (searchFor) {
                     showTOC();
-                    var c = treeList.treeList('filter',function(item) {
+                    treeList.treeList('filter',function(item) {
                         if (item.depth === 0) {
                             return true;
                         }
-                        return (item.nodeType &&  item.nodeType.indexOf(val) > -1) ||
-                               (item.subflowLabel && item.subflowLabel.indexOf(val) > -1)
+                        let found = item.nodeType && item.nodeType.toLowerCase().indexOf(searchFor) > -1;
+                        found = found || item.subflowLabel && item.subflowLabel.toLowerCase().indexOf(searchFor) > -1;
+                        found = found || item.palleteLabel && item.palleteLabel.toLowerCase().indexOf(searchFor) > -1;
+                        return found;
                     },true)
                 } else {
                     treeList.treeList('filter',null);
@@ -28248,17 +28461,21 @@ RED.sidebar.help = (function() {
 
 
         moduleNames.forEach(function(moduleName) {
-            var module = modules[moduleName];
-            var nodeTypes = [];
-
-            var setNames = Object.keys(module.sets);
+            const module = modules[moduleName];
+            const nodeTypes = [];
+            const moduleSets = module.sets;
+            const setNames = Object.keys(moduleSets);
             setNames.forEach(function(setName) {
-                module.sets[setName].types.forEach(function(nodeType) {
+                const moduleSet = moduleSets[setName];
+                moduleSet.types.forEach(function(nodeType) {
                     if ($("script[data-help-name='"+nodeType+"']").length) {
+                        const n =  {_def:RED.nodes.getType(nodeType),type:nodeType}
+                        n.name = getNodePaletteLabel(n);
                         nodeTypes.push({
                             id: "node-type:"+nodeType,
                             nodeType: nodeType,
-                            element:getNodeLabel({_def:RED.nodes.getType(nodeType),type:nodeType})
+                            palleteLabel: n.name,
+                            element: getNodeLabel(n)
                         })
                     }
                 })
@@ -28278,18 +28495,21 @@ RED.sidebar.help = (function() {
         treeList.treeList("data",helpData);
     }
 
-    function getNodeLabel(n) {
-        var div = $('<div>',{class:"red-ui-node-list-item"});
-        var icon = RED.utils.createNodeIcon(n).appendTo(div);
-        var label = n.name;
+    function getNodePaletteLabel(n) {
+        let label = n.name;
         if (!label && n._def && n._def.paletteLabel) {
             try {
                 label = (typeof n._def.paletteLabel === "function" ? n._def.paletteLabel.call(n._def) : n._def.paletteLabel)||"";
             } catch (err) {
             }
         }
-        label = label || n.type;
-        $('<div>',{class:"red-ui-node-label"}).text(n.name||n.type).appendTo(icon);
+        return label || n.type;
+    }
+
+    function getNodeLabel(n) {
+        const div = $('<div>',{class:"red-ui-node-list-item"});
+        const icon = RED.utils.createNodeIcon(n).appendTo(div);
+        $('<div>',{class:"red-ui-node-label"}).text(getNodePaletteLabel(n)).appendTo(icon);
         return div;
     }
 
@@ -32424,9 +32644,10 @@ RED.editor = (function() {
                     editState.changed = true;
                 }
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
-                    var icon = $("#red-ui-editor-node-icon").val()||""
+                    var icon = $("#red-ui-editor-node-icon").val()||"";
                     if (!this.isDefaultIcon) {
-                        if (icon !== node.icon) {
+                        if ((icon !== node.icon) &&
+                            (icon !== "")) {
                             editState.changes.icon = node.icon;
                             node.icon = icon;
                             editState.changed = true;
@@ -32490,14 +32711,14 @@ RED.editor = (function() {
                     if (showLabel) {
                         // Default to show label
                         if (node.l !== false) {
-                            editState.changes.l = node.l
+                            editState.changes.l = node.l;
                             editState.changed = true;
                         }
                         node.l = false;
                     } else {
                         // Node has showLabel:false (eg link nodes)
                         if (node.hasOwnProperty('l') && node.l) {
-                            editState.changes.l = node.l
+                            editState.changes.l = node.l;
                             editState.changed = true;
                         }
                         delete node.l;
@@ -32507,20 +32728,20 @@ RED.editor = (function() {
                     if (showLabel) {
                         // Default to show label
                         if (node.hasOwnProperty('l') && !node.l) {
-                            editState.changes.l = node.l
+                            editState.changes.l = node.l;
                             editState.changed = true;
                         }
                         delete node.l;
                     } else {
                         if (!node.l) {
-                            editState.changes.l = node.l
+                            editState.changes.l = node.l;
                             editState.changed = true;
                         }
                         node.l = true;
                     }
                 }
             }
-        }
+        };
     });
 
     function buildAppearanceForm(container,node) {
@@ -32553,10 +32774,10 @@ RED.editor = (function() {
             var categories = RED.palette.getCategories();
             categories.sort(function(A,B) {
                 return A.label.localeCompare(B.label);
-            })
+            });
             categories.forEach(function(cat) {
                 categorySelector.append($("<option/>").val(cat.id).text(cat.label));
-            })
+            });
             categorySelector.append($("<option/>").attr('disabled',true).text("---"));
             categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
 
@@ -32569,7 +32790,7 @@ RED.editor = (function() {
                     $("#subflow-appearance-input-category").width(250);
                     $("#subflow-appearance-input-custom-category").hide();
                 }
-            })
+            });
 
             $("#subflow-appearance-input-category").val(node.category||"subflows");
             var userCount = 0;
@@ -32593,7 +32814,7 @@ RED.editor = (function() {
         $("#node-input-show-label").toggleButton({
             enabledLabel: RED._("editor.show"),
             disabledLabel: RED._("editor.hide")
-        })
+        });
 
         if (!node.hasOwnProperty("l")) {
             // Show label unless def.showLabel set to false
@@ -32619,7 +32840,7 @@ RED.editor = (function() {
                 "#E9967A", "#F3B567", "#FDD0A2",
                 "#FDF0C2", "#FFAAAA", "#FFCC66",
                 "#FFF0F0", "#FFFFFF"
-            ]
+            ];
 
             RED.editor.colorPicker.create({
                 id: "red-ui-editor-node-color",
@@ -32634,9 +32855,9 @@ RED.editor = (function() {
                 nodeDiv.css('backgroundColor',colour);
                 var borderColor = RED.utils.getDarkerColor(colour);
                 if (borderColor !== colour) {
-                    nodeDiv.css('border-color',borderColor)
+                    nodeDiv.css('border-color',borderColor);
                 }
-            })
+            });
         }
 
 
@@ -32653,7 +32874,7 @@ RED.editor = (function() {
             nodeDiv.css('backgroundColor',colour);
             var borderColor = RED.utils.getDarkerColor(colour);
             if (borderColor !== colour) {
-                nodeDiv.css('border-color',borderColor)
+                nodeDiv.css('border-color',borderColor);
             }
 
             var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
@@ -32681,7 +32902,7 @@ RED.editor = (function() {
 
             RED.popover.tooltip(iconButton, function() {
                 return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
-            })
+            });
             $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
         }
 
@@ -32806,11 +33027,11 @@ RED.editor = (function() {
             });
             rows.sort(function(A,B) {
                 return A.i-B.i;
-            })
+            });
             rows.forEach(function(r,i) {
                 r.r.find("label").text((i+1)+".");
                 r.r.appendTo(outputsDiv);
-            })
+            });
             if (rows.length === 0) {
                 buildLabelRow("output",i,"").appendTo(outputsDiv);
             } else {
@@ -32856,7 +33077,7 @@ RED.editor = (function() {
             clear.on("click", function(evt) {
                 evt.preventDefault();
                 input.val("");
-            })
+            });
         }
         return result;
     }
@@ -32890,6 +33111,12 @@ RED.editor = (function() {
             }
             var v = $(this).val();
             hasNonBlankLabel = hasNonBlankLabel || v!== "";
+
+            // mark changed output port labels as dirty
+            if (node.type === "subflow" && (!node.outputLabels || node.outputLabels[index] !== v)) {
+                node.out[index].dirty = true;
+            }
+
             newValue[index] = v;
         });
 
@@ -32898,6 +33125,12 @@ RED.editor = (function() {
             changes.outputLabels = node.outputLabels;
             node.outputLabels = newValue;
             changed = true;
+
+            // trigger redraw of dirty port labels
+            if (node.type === "subflow") {
+                RED.view.redraw();
+            }
+
         }
         return changed;
     }
@@ -39042,23 +39275,26 @@ RED.clipboard = (function() {
         if (truncated) {
             msg += "_truncated";
         }
-        navigator.clipboard.writeText(value).then(function () {
-            if (element) {
-                var popover = RED.popover.create({
-                    target: element,
-                    direction: 'left',
-                    size: 'small',
-                    content: RED._(msg)
-                });
-                setTimeout(function() {
-                    popover.close();
-                },1000);
-                popover.open();
-            }
-            if (currentFocus) {
-                $(currentFocus).focus();
-            }
-        }).catch(err => { console.error("Failed to copy:",err) });
+        var clipboardHidden = $('<textarea type="text" id="red-ui-clipboard-hidden" tabIndex="-1">').appendTo(document.body);
+        clipboardHidden.val(value).focus().select();
+        var result =  document.execCommand("copy");
+        if (result && element) {
+            var popover = RED.popover.create({
+                target: element,
+                direction: 'left',
+                size: 'small',
+                content: RED._(msg)
+            });
+            setTimeout(function() {
+                popover.close();
+            },1000);
+            popover.open();
+        }
+        clipboardHidden.remove();
+        if (currentFocus) {
+            $(currentFocus).focus();
+        }
+        return result;
     }
 
     function importNodes(nodesStr,addFlow) {
@@ -40656,10 +40892,22 @@ RED.search = (function() {
         }
         l = l||n.label||n.name||n.id||"";
 
-
         var properties = ['id','type','name','label','info'];
-        if (n._def && n._def.defaults) {
-            properties = properties.concat(Object.keys(n._def.defaults));
+        const node_def = n && n._def;
+        if (node_def) {
+            if (node_def.defaults) {
+                properties = properties.concat(Object.keys(node_def.defaults));
+            }
+            if (n.type !== "group" && node_def.paletteLabel && node_def.paletteLabel !== node_def.type) {
+                try {
+                    const label = ("" + (typeof node_def.paletteLabel === "function" ? node_def.paletteLabel.call(node_def) : node_def.paletteLabel)).toLowerCase();
+                    if(label && label !== (""+node_def.type).toLowerCase()) {
+                        indexProperty(n, l, label);
+                    }
+                } catch(err) {
+                    console.warn(`error indexing ${l}`, err);
+                }
+            }
         }
         for (var i=0;i<properties.length;i++) {
             if (n.hasOwnProperty(properties[i])) {
@@ -41298,18 +41546,19 @@ RED.actionList = (function() {
                 createDialog();
             }
             dialog.slideDown(300);
-            searchInput.searchBox('value',v)
+            searchInput.searchBox('value',v);
             searchResults.editableList('empty');
             results = [];
             var actions = RED.actions.list();
             actions.sort(function(A,B) {
-                return A.id.localeCompare(B.id);
+                var Akey = A.label;
+                var Bkey = B.label;
+                return Akey.localeCompare(Bkey);
             });
             actions.forEach(function(action) {
-                action.label = action.id.replace(/:/,": ").replace(/-/g," ").replace(/(^| )./g,function() { return arguments[0].toUpperCase()});
                 action._label = action.label.toLowerCase();
-                searchResults.editableList('addItem',action)
-            })
+                searchResults.editableList('addItem',action);
+            });
             RED.events.emit("actionList:open");
             visible = true;
         }
@@ -43912,6 +44161,13 @@ RED.userSettings = (function() {
         //         {setting:"theme", label:"Theme",options:function(done){ done([{val:'',text:'default'}].concat(RED.settings.theme("themes"))) }},
         //     ]
         // },
+        {
+            title: "menu.label.view.view",
+            options: [
+                {setting:"view-store-zoom",label:"menu.label.view.storeZoom", default: false, toggle:true, onchange: function(val) { if (!val) { RED.settings.removeLocal("zoom-level")}}},
+                {setting:"view-store-position",label:"menu.label.view.storePosition", default: false, toggle:true, onchange: function(val) { if (!val) { RED.settings.removeLocal("scroll-positions")}}},
+            ]
+        },
         {
             title: "menu.label.view.grid",
             options: [
@@ -45299,6 +45555,9 @@ RED.projects = (function() {
                             }
                         }).appendTo(row);
 
+                        row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-open"></div>').hide().appendTo(container);
+                        $('<span style="display: flex; align-items: center;"><input style="padding:0; margin: 0 5px 0 0" checked type="checkbox" id="red-ui-projects-dialog-screen-clear-context"> <label for="red-ui-projects-dialog-screen-clear-context" style="padding:0; margin: 0"> <span data-i18n="projects.create.clearContext"></span></label></span>').appendTo(row).i18n();
+
                         row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(container);
                         $('<label for="red-ui-projects-dialog-screen-create-project-name">'+RED._("projects.create.project-name")+'</label>').appendTo(row);
 
@@ -45588,7 +45847,8 @@ RED.projects = (function() {
                                             };
                                         }
                                     } else if (projectType === 'open') {
-                                        return switchProject(selectedProject.name,function(err,data) {
+                                        var clearContext = $("#red-ui-projects-dialog-screen-clear-context").prop("checked")
+                                        return switchProject(selectedProject.name, clearContext, function(err,data) {
                                             if (err) {
                                                 if (err.code !== 'credentials_load_failed') {
                                                     console.log(RED._("projects.create.unexpected_error"),err)
@@ -45682,7 +45942,7 @@ RED.projects = (function() {
         }
     }
 
-    function switchProject(name,done) {
+    function switchProject(name,clearContext,done) {
         RED.deploy.setDeployInflight(true);
         RED.projects.settings.switchProject(name);
         sendRequest({
@@ -45701,7 +45961,7 @@ RED.projects = (function() {
                     '*': done
                 },
             }
-        },{active:true}).then(function() {
+        },{active:true, clearContext:clearContext}).then(function() {
             dialog.dialog( "close" );
             RED.events.emit("project:change", {name:name});
         }).always(function() {
@@ -45774,7 +46034,7 @@ RED.projects = (function() {
             dialogHeight = 590 - (750 - winHeight);
         }
         $(".red-ui-projects-dialog-box").height(dialogHeight);
-        $(".red-ui-projects-dialog-project-list-inner-container").height(Math.max(500,dialogHeight) - 180);
+        $(".red-ui-projects-dialog-project-list-inner-container").height(Math.max(500,dialogHeight) - 210);
         dialog.dialog('option','title',screen.title||"");
         dialog.dialog("open");
     }