@node-red/editor-client 3.1.0-beta.3 → 3.1.0

package/public/red/red.js

@@ -822,7 +822,7 @@ var RED = (function() {
         }
         menuOptions.push({id:"menu-item-help",
             label: RED.settings.theme("menu.menu-item-help.label",RED._("menu.label.help")),
-            href: RED.settings.theme("menu.menu-item-help.url","http://nodered.org/docs")
+            href: RED.settings.theme("menu.menu-item-help.url","https://nodered.org/docs")
         });
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
@@ -4493,8 +4493,8 @@ RED.nodes = (function() {
 
         if (node && node._def.onremove) {
             // Deprecated: never documented but used by some early nodes
-            console.log("Deprecated API warning: node type ",node.type," has an onremove function - should be oneditremove - please report");
-            node._def.onremove.call(n);
+            console.log("Deprecated API warning: node type ",node.type," has an onremove function - should be oneditdelete - please report");
+            node._def.onremove.call(node);
         }
         return {links:removedLinks,nodes:removedNodes};
     }
@@ -17426,9 +17426,10 @@ RED.diagnostics = (function () {
             }
             if (localNode && remoteNode && typeof localNode[d] === "string") {
                 if (/\n/.test(localNode[d]) || /\n/.test(remoteNode[d])) {
-                    $('<button class="red-ui-button red-ui-button-small red-ui-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() {
+                    var textDiff = $('<button class="red-ui-button red-ui-button-small red-ui-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() {
                         showTextDiff(localNode[d],remoteNode[d]);
                     }).appendTo(propertyNameCell);
+                    RED.popover.tooltip(textDiff, RED._("diff.compareChanges"));
                 }
             }
 
@@ -18923,7 +18924,10 @@ RED.keyboard = (function() {
         // One exception is shortcuts that include both Cmd and Ctrl. We don't
         // support them - but we need to make sure we don't block browser-specific
         // shortcuts (such as Cmd-Ctrl-F for fullscreen).
-        if ((evt.ctrlKey || evt.metaKey) && (evt.ctrlKey !== evt.metaKey)) {
+        if (evt.ctrlKey && evt.metaKey) {
+            return null; // dont handle both cmd+ctrl - let browser handle this
+        }
+        if (evt.ctrlKey || evt.metaKey) {
             slot = slot.ctrl;
         }
         if (slot && evt.shiftKey) {
@@ -20620,7 +20624,7 @@ RED.view = (function() {
 
     // Note: these are the permitted status colour aliases. The actual RGB values
     //       are set in the CSS - flow.scss/colors.scss
-    var status_colours = {
+    const status_colours = {
         "red":    "#c00",
         "green":  "#5a8",
         "yellow": "#F9DF31",
@@ -20629,19 +20633,32 @@ RED.view = (function() {
         "gray":   "#d3d3d3"
     }
 
-    var PORT_TYPE_INPUT = 1;
-    var PORT_TYPE_OUTPUT = 0;
+    const PORT_TYPE_INPUT = 1;
+    const PORT_TYPE_OUTPUT = 0;
 
-    var chart;
-    var outer;
+    /**
+     * The jQuery object for the workspace chart `#red-ui-workspace-chart` div element
+     * @type {JQuery<HTMLElement>} #red-ui-workspace-chart HTML Element 
+     */ 
+    let chart;
+    /**
+     * The d3 object `#red-ui-workspace-chart` svg element
+     * @type {d3.Selection<HTMLElement, Any, Any, Any>}
+     */ 
+    let outer;
+    /** 
+     * The d3 object `#red-ui-workspace-chart` svg element (specifically for events)
+     * @type {d3.Selection<d3.BaseType, any, any, any>}
+     */
     var eventLayer;
-    var gridLayer;
-    var linkLayer;
-    var junctionLayer;
-    var dragGroupLayer;
-    var groupSelectLayer;
-    var nodeLayer;
-    var groupLayer;
+
+    /** @type {SVGGElement} */ let gridLayer;
+    /** @type {SVGGElement} */ let linkLayer;
+    /** @type {SVGGElement} */ let junctionLayer;
+    /** @type {SVGGElement} */ let dragGroupLayer;
+    /** @type {SVGGElement} */ let groupSelectLayer;
+    /** @type {SVGGElement} */ let nodeLayer;
+    /** @type {SVGGElement} */ let groupLayer;
     var drag_lines;
 
     const movingSet = (function() {
@@ -20808,11 +20825,21 @@ RED.view = (function() {
         return api
     })()
 
+    const isMac = RED.utils.getBrowserInfo().os === 'mac'
+    // 'Control' is the main modifier key for mouse actions. On Windows,
+    // that is the standard Ctrl key. On Mac that is the Cmd key.
+    function isControlPressed (event) {
+        return (isMac && event.metaKey) || (!isMac && event.ctrlKey)
+    }
 
     function init() {
 
         chart = $("#red-ui-workspace-chart");
         chart.on('contextmenu', function(evt) {
+            if (RED.view.DEBUG) {
+                console.warn("contextmenu", { mouse_mode, event: d3.event });
+            }
+            mouse_mode = RED.state.DEFAULT
             evt.preventDefault()
             evt.stopPropagation()
             RED.contextMenu.show({
@@ -20910,16 +20937,6 @@ RED.view = (function() {
                     touchStartTime = setTimeout(function() {
                         touchStartTime = null;
                         showTouchMenu(obj,pos);
-                        //lasso = eventLayer.append("rect")
-                        //    .attr("ox",point[0])
-                        //    .attr("oy",point[1])
-                        //    .attr("rx",2)
-                        //    .attr("ry",2)
-                        //    .attr("x",point[0])
-                        //    .attr("y",point[1])
-                        //    .attr("width",0)
-                        //    .attr("height",0)
-                        //    .attr("class","nr-ui-view-lasso");
                     },touchLongPressTimeout);
                 }
                 d3.event.preventDefault();
@@ -21552,7 +21569,7 @@ RED.view = (function() {
         })
     }
 
-    function generateLinkPath(origX,origY, destX, destY, sc) {
+    function generateLinkPath(origX,origY, destX, destY, sc, hasStatus = false) {
         var dy = destY-origY;
         var dx = destX-origX;
         var delta = Math.sqrt(dy*dy+dx*dx);
@@ -21569,62 +21586,110 @@ RED.view = (function() {
         } else {
             scale = 0.4-0.2*(Math.max(0,(node_width-Math.min(Math.abs(dx),Math.abs(dy)))/node_width));
         }
+        function genCP(cp) {
+            return ` M ${cp[0]-5} ${cp[1]} h 10 M ${cp[0]} ${cp[1]-5} v 10 `
+        }
         if (dx*sc > 0) {
-            return "M "+origX+" "+origY+
-                " C "+(origX+sc*(node_width*scale))+" "+(origY+scaleY*node_height)+" "+
-                (destX-sc*(scale)*node_width)+" "+(destY-scaleY*node_height)+" "+
-                destX+" "+destY
+            let cp = [
+                [(origX+sc*(node_width*scale)), (origY+scaleY*node_height)],
+                [(destX-sc*(scale)*node_width), (destY-scaleY*node_height)]
+            ]
+            return `M ${origX} ${origY} C ${cp[0][0]} ${cp[0][1]} ${cp[1][0]} ${cp[1][1]} ${destX} ${destY}`
+                //    + ` ${genCP(cp[0])} ${genCP(cp[1])}`
         } else {
+            let topX, topY, bottomX, bottomY
+            let cp
+            let midX = Math.floor(destX-dx/2);
+            let midY = Math.floor(destY-dy/2);          
+            if (Math.abs(dy) < 10) {
+                bottomY = Math.max(origY, destY) + (hasStatus?35:25)
+                let startCurveHeight = bottomY - origY
+                let endCurveHeight = bottomY - destY
+                cp = [
+                    [ origX + sc*15 , origY ],
+                    [ origX + sc*25 , origY + 5 ],
+                    [ origX + sc*25 , origY + startCurveHeight/2 ],
+
+                    [ origX + sc*25 , origY + startCurveHeight - 5 ],
+                    [ origX + sc*15 , origY + startCurveHeight ],
+                    [ origX , origY + startCurveHeight ],
+
+                    [ destX - sc*15, origY + startCurveHeight ],
+                    [ destX - sc*25, origY + startCurveHeight - 5 ],
+                    [ destX - sc*25, destY + endCurveHeight/2 ],
+
+                    [ destX - sc*25, destY + 5 ],
+                    [ destX - sc*15, destY ],
+                    [ destX, destY ],
+                ]
 
-            var midX = Math.floor(destX-dx/2);
-            var midY = Math.floor(destY-dy/2);
-            //
-            if (dy === 0) {
-                midY = destY + node_height;
-            }
-            var cp_height = node_height/2;
-            var y1 = (destY + midY)/2
-            var topX =origX + sc*node_width*scale;
-            var topY = dy>0?Math.min(y1 - dy/2 , origY+cp_height):Math.max(y1 - dy/2 , origY-cp_height);
-            var bottomX = destX - sc*node_width*scale;
-            var bottomY = dy>0?Math.max(y1, destY-cp_height):Math.min(y1, destY+cp_height);
-            var x1 = (origX+topX)/2;
-            var scy = dy>0?1:-1;
-            var cp = [
-                // Orig -> Top
-                [x1,origY],
-                [topX,dy>0?Math.max(origY, topY-cp_height):Math.min(origY, topY+cp_height)],
-                // Top -> Mid
-                // [Mirror previous cp]
-                [x1,dy>0?Math.min(midY, topY+cp_height):Math.max(midY, topY-cp_height)],
-                // Mid -> Bottom
-                // [Mirror previous cp]
-                [bottomX,dy>0?Math.max(midY, bottomY-cp_height):Math.min(midY, bottomY+cp_height)],
-                // Bottom -> Dest
-                // [Mirror previous cp]
-                [(destX+bottomX)/2,destY]
-            ];
-            if (cp[2][1] === topY+scy*cp_height) {
-                if (Math.abs(dy) < cp_height*10) {
-                    cp[1][1] = topY-scy*cp_height/2;
-                    cp[3][1] = bottomY-scy*cp_height/2;
-                }
-                cp[2][0] = topX;
-            }
-            return "M "+origX+" "+origY+
-                " C "+
-                   cp[0][0]+" "+cp[0][1]+" "+
-                   cp[1][0]+" "+cp[1][1]+" "+
-                   topX+" "+topY+
-                " S "+
-                   cp[2][0]+" "+cp[2][1]+" "+
-                   midX+" "+midY+
-               " S "+
-                  cp[3][0]+" "+cp[3][1]+" "+
-                  bottomX+" "+bottomY+
-                " S "+
+                return "M "+origX+" "+origY+
+                    " C "+
+                    cp[0][0]+" "+cp[0][1]+" "+
+                    cp[1][0]+" "+cp[1][1]+" "+
+                    cp[2][0]+" "+cp[2][1]+" "+
+                    " C " +
+                    cp[3][0]+" "+cp[3][1]+" "+
                     cp[4][0]+" "+cp[4][1]+" "+
-                    destX+" "+destY
+                    cp[5][0]+" "+cp[5][1]+" "+
+                    " h "+dx+
+                    " C "+
+                    cp[6][0]+" "+cp[6][1]+" "+
+                    cp[7][0]+" "+cp[7][1]+" "+
+                    cp[8][0]+" "+cp[8][1]+" "+
+                    " C " +
+                    cp[9][0]+" "+cp[9][1]+" "+
+                    cp[10][0]+" "+cp[10][1]+" "+
+                    cp[11][0]+" "+cp[11][1]+" "
+                    // +genCP(cp[0])+genCP(cp[1])+genCP(cp[2])+genCP(cp[3])+genCP(cp[4])
+                    // +genCP(cp[5])+genCP(cp[6])+genCP(cp[7])+genCP(cp[8])+genCP(cp[9])+genCP(cp[10])
+            } else {
+                var cp_height = node_height/2;
+                var y1 = (destY + midY)/2
+                topX = origX + sc*node_width*scale;
+                topY = dy>0?Math.min(y1 - dy/2 , origY+cp_height):Math.max(y1 - dy/2 , origY-cp_height);
+                bottomX = destX - sc*node_width*scale;
+                bottomY = dy>0?Math.max(y1, destY-cp_height):Math.min(y1, destY+cp_height);
+                var x1 = (origX+topX)/2;
+                var scy = dy>0?1:-1;
+                cp = [
+                    // Orig -> Top
+                    [x1,origY],
+                    [topX,dy>0?Math.max(origY, topY-cp_height):Math.min(origY, topY+cp_height)],
+                    // Top -> Mid
+                    // [Mirror previous cp]
+                    [x1,dy>0?Math.min(midY, topY+cp_height):Math.max(midY, topY-cp_height)],
+                    // Mid -> Bottom
+                    // [Mirror previous cp]
+                    [bottomX,dy>0?Math.max(midY, bottomY-cp_height):Math.min(midY, bottomY+cp_height)],
+                    // Bottom -> Dest
+                    // [Mirror previous cp]
+                    [(destX+bottomX)/2,destY]
+                ];
+                if (cp[2][1] === topY+scy*cp_height) {
+                    if (Math.abs(dy) < cp_height*10) {
+                        cp[1][1] = topY-scy*cp_height/2;
+                        cp[3][1] = bottomY-scy*cp_height/2;
+                    }
+                    cp[2][0] = topX;
+                }
+                return "M "+origX+" "+origY+
+                    " C "+
+                    cp[0][0]+" "+cp[0][1]+" "+
+                    cp[1][0]+" "+cp[1][1]+" "+
+                    topX+" "+topY+
+                    " S "+
+                    cp[2][0]+" "+cp[2][1]+" "+
+                    midX+" "+midY+
+                " S "+
+                    cp[3][0]+" "+cp[3][1]+" "+
+                    bottomX+" "+bottomY+
+                    " S "+
+                        cp[4][0]+" "+cp[4][1]+" "+
+                        destX+" "+destY
+
+                // +genCP(cp[0])+genCP(cp[1])+genCP(cp[2])+genCP(cp[3])+genCP(cp[4])
+            }
         }
     }
 
@@ -21658,7 +21723,7 @@ RED.view = (function() {
             lasso = null;
         }
         if (d3.event.touches || d3.event.button === 0) {
-            if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.metaKey || d3.event.ctrlKey) && !(d3.event.altKey || d3.event.shiftKey)) {
+            if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && isControlPressed(d3.event) && !(d3.event.altKey || d3.event.shiftKey)) {
                 // Trigger quick add dialog
                 d3.event.stopPropagation();
                 clearSelection();
@@ -21668,7 +21733,7 @@ RED.view = (function() {
                     clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
                 }
                 showQuickAddDialog({ position: point, group: clickedGroup });
-            } else if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
+            } else if (mouse_mode === 0 && !isControlPressed(d3.event)) {
                 // CTRL not being held
                 if (!d3.event.altKey) {
                     // ALT not held (shift is allowed) Trigger lasso
@@ -21866,6 +21931,7 @@ RED.view = (function() {
                     }
                     historyEvent = {
                         t:'add',
+                        dirty: RED.nodes.dirty(),
                         junctions:[nn]
                     }
                 } else {
@@ -22241,7 +22307,7 @@ RED.view = (function() {
                 var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
 
                 var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
-                drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc));
+                drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc, !!drag_line.node.status));
             }
             d3.event.preventDefault();
         } else if (mouse_mode == RED.state.MOVING) {
@@ -23565,22 +23631,38 @@ RED.view = (function() {
             }
         }
         document.body.style.cursor = "";
+
         if (mouse_mode == RED.state.JOINING || mouse_mode == RED.state.QUICK_JOINING) {
             if (typeof TouchEvent != "undefined" && evt instanceof TouchEvent) {
-                var found = false;
-                RED.nodes.eachNode(function(n) {
-                    if (n.z == RED.workspaces.active()) {
-                        var hw = n.w/2;
-                        var hh = n.h/2;
-                        if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
-                            n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
-                                found = true;
-                                mouseup_node = n;
-                                portType = mouseup_node.inputs>0?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
-                                portIndex = 0;
+                if (RED.view.DEBUG) { console.warn("portMouseUp: TouchEvent", mouse_mode,d,portType,portIndex); }
+                const direction = drag_lines[0].portType === PORT_TYPE_INPUT ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT
+                let found = false;
+                for (let nodeIdx = 0; nodeIdx < activeNodes.length; nodeIdx++) {
+                    const n = activeNodes[nodeIdx];
+                    if (RED.view.tools.isPointInNode(n, mouse_position)) {
+                        found = true;
+                        mouseup_node = n;
+                        // portType = mouseup_node.inputs > 0 ? PORT_TYPE_INPUT : PORT_TYPE_OUTPUT;
+                        portType = direction;
+                        portIndex = 0;
+                        break
+                    }
+                }
+
+                if (!found && drag_lines.length > 0 && !drag_lines[0].virtualLink) {
+                    for (let juncIdx = 0; juncIdx < activeJunctions.length; juncIdx++) {
+                        // NOTE: a junction is 10px x 10px but the target area is expanded to 30wx20h by adding padding to the bounding box
+                        const jNode = activeJunctions[juncIdx];
+                        if (RED.view.tools.isPointInNode(jNode, mouse_position, 20, 10)) {
+                            found = true;
+                            mouseup_node = jNode;
+                            portType = direction;
+                            portIndex = 0;
+                            break
                         }
                     }
-                });
+                }
+
                 if (!found && activeSubflow) {
                     var subflowPorts = [];
                     if (activeSubflow.status) {
@@ -23592,16 +23674,13 @@ RED.view = (function() {
                     if (activeSubflow.out) {
                         subflowPorts = subflowPorts.concat(activeSubflow.out)
                     }
-                    for (var i=0;i<subflowPorts.length;i++) {
-                        var n = subflowPorts[i];
-                        var hw = n.w/2;
-                        var hh = n.h/2;
-                        if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
-                            n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
-                                found = true;
-                                mouseup_node = n;
-                                portType = mouseup_node.direction === "in"?PORT_TYPE_OUTPUT:PORT_TYPE_INPUT;
-                                portIndex = 0;
+                    for (var i = 0; i < subflowPorts.length; i++) {
+                        const sf = subflowPorts[i];
+                        if (RED.view.tools.isPointInNode(sf, mouse_position)) {
+                            found = true;
+                            mouseup_node = sf;
+                            portType = mouseup_node.direction === "in" ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT;
+                            portIndex = 0;
                             break;
                         }
                     }
@@ -23994,7 +24073,7 @@ RED.view = (function() {
             d3.event.preventDefault()
             document.getSelection().removeAllRanges()
             if (d.type != "subflow") {
-                if (/^subflow:/.test(d.type) && (d3.event.ctrlKey || d3.event.metaKey)) {
+                if (/^subflow:/.test(d.type) && isControlPressed(d3.event)) {
                     RED.workspaces.show(d.type.substring(8));
                 } else {
                     RED.editor.edit(d);
@@ -24158,12 +24237,12 @@ RED.view = (function() {
             d.type !== 'junction'
         lastClickNode = mousedown_node;
      
-        if (d.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
+        if (d.selected && isControlPressed(d3.event)) {
             mousedown_node.selected = false;
             movingSet.remove(mousedown_node);
         } else {
             if (d3.event.shiftKey) {
-                if (!(d3.event.ctrlKey||d3.event.metaKey)) {
+                if (!isControlPressed(d3.event)) {
                     clearSelection();
                 }
                 var clickPosition = (d3.event.offsetX/scaleFactor - mousedown_node.x)
@@ -24332,10 +24411,10 @@ RED.view = (function() {
         }
         mousedown_link = d;
 
-        if (!(d3.event.metaKey || d3.event.ctrlKey)) {
+        if (!isControlPressed(d3.event)) {
             clearSelection();
         }
-        if (d3.event.metaKey || d3.event.ctrlKey) {
+        if (isControlPressed(d3.event)) {
             if (!selectedLinks.has(mousedown_link)) {
                 selectedLinks.add(mousedown_link);
             } else {
@@ -24350,7 +24429,7 @@ RED.view = (function() {
         redraw();
         focusView();
         d3.event.stopPropagation();
-        if (!mousedown_link.link && movingSet.length() === 0 && (d3.event.touches || d3.event.button === 0) && selectedLinks.length() === 1 && selectedLinks.has(mousedown_link) && (d3.event.metaKey || d3.event.ctrlKey)) {
+        if (!mousedown_link.link && movingSet.length() === 0 && (d3.event.touches || d3.event.button === 0) && selectedLinks.length() === 1 && selectedLinks.has(mousedown_link) && isControlPressed(d3.event)) {
             d3.select(this).classed("red-ui-flow-link-splice",true);
             var point = d3.mouse(this);
             var clickedGroup = getGroupAt(point[0],point[1]);
@@ -24431,7 +24510,7 @@ RED.view = (function() {
         );
         lastClickNode = g;
 
-        if (g.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
+        if (g.selected && isControlPressed(d3.event)) {
             selectedGroups.remove(g);
             d3.event.stopPropagation();
         } else {
@@ -24631,21 +24710,27 @@ RED.view = (function() {
                 nodeEl.__statusGroup__.style.display = "none";
             } else {
                 nodeEl.__statusGroup__.style.display = "inline";
+                let backgroundWidth = 12
                 var fill = status_colours[d.status.fill]; // Only allow our colours for now
                 if (d.status.shape == null && fill == null) {
+                    backgroundWidth = 0
                     nodeEl.__statusShape__.style.display = "none";
+                    nodeEl.__statusBackground__.setAttribute("x", 17)
                     nodeEl.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")");
                 } else {
                     nodeEl.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")");
                     var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
                     nodeEl.__statusShape__.style.display = "inline";
                     nodeEl.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass);
+                    nodeEl.__statusBackground__.setAttribute("x", 3)
                 }
                 if (d.status.hasOwnProperty('text')) {
                     nodeEl.__statusLabel__.textContent = d.status.text;
                 } else {
                     nodeEl.__statusLabel__.textContent = "";
                 }
+                const textSize = nodeEl.__statusLabel__.getBBox()
+                nodeEl.__statusBackground__.setAttribute('width', backgroundWidth + textSize.width + 6)
             }
             delete d.dirtyStatus;
         }
@@ -25051,17 +25136,30 @@ RED.view = (function() {
                 statusEl.style.display = "none";
                 node[0][0].__statusGroup__ = statusEl;
 
-                var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
-                statusRect.setAttribute("class","red-ui-flow-node-status");
-                statusRect.setAttribute("x",6);
-                statusRect.setAttribute("y",1);
-                statusRect.setAttribute("width",9);
-                statusRect.setAttribute("height",9);
-                statusRect.setAttribute("rx",2);
-                statusRect.setAttribute("ry",2);
-                statusRect.setAttribute("stroke-width","3");
-                statusEl.appendChild(statusRect);
-                node[0][0].__statusShape__ = statusRect;
+                var statusBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                statusBackground.setAttribute("class","red-ui-flow-node-status-background");
+                statusBackground.setAttribute("x",3);
+                statusBackground.setAttribute("y",-1);
+                statusBackground.setAttribute("width",200);
+                statusBackground.setAttribute("height",13);
+                statusBackground.setAttribute("rx",1);
+                statusBackground.setAttribute("ry",1);
+                
+                statusEl.appendChild(statusBackground);
+                node[0][0].__statusBackground__ = statusBackground;
+
+
+                var statusIcon = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                statusIcon.setAttribute("class","red-ui-flow-node-status");
+                statusIcon.setAttribute("x",6);
+                statusIcon.setAttribute("y",1);
+                statusIcon.setAttribute("width",9);
+                statusIcon.setAttribute("height",9);
+                statusIcon.setAttribute("rx",2);
+                statusIcon.setAttribute("ry",2);
+                statusIcon.setAttribute("stroke-width","3");
+                statusEl.appendChild(statusIcon);
+                node[0][0].__statusShape__ = statusIcon;
 
                 var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text");
                 statusLabel.setAttribute("class","red-ui-flow-node-status-label");
@@ -25467,16 +25565,25 @@ RED.view = (function() {
                 contents.appendChild(junctionOutput);
                 junctionOutput.addEventListener("mouseup", portMouseUpProxy);
                 junctionOutput.addEventListener("mousedown", portMouseDownProxy);
-
                 junctionOutput.addEventListener("mouseover", junctionMouseOverProxy);
                 junctionOutput.addEventListener("mouseout", junctionMouseOutProxy);
+                junctionOutput.addEventListener("touchmove", junctionMouseOverProxy);
+                junctionOutput.addEventListener("touchend", portMouseUpProxy);
+                junctionOutput.addEventListener("touchstart", portMouseDownProxy);
+
                 junctionInput.addEventListener("mouseover", junctionMouseOverProxy);
                 junctionInput.addEventListener("mouseout", junctionMouseOutProxy);
+                junctionInput.addEventListener("touchmove", junctionMouseOverProxy);
+                junctionInput.addEventListener("touchend", portMouseUpProxy);
+                junctionInput.addEventListener("touchstart", portMouseDownProxy);
+
                 junctionBack.addEventListener("mouseover", junctionMouseOverProxy);
                 junctionBack.addEventListener("mouseout", junctionMouseOutProxy);
+                junctionBack.addEventListener("touchmove", junctionMouseOverProxy);
 
                 // These handlers expect to be registered as d3 events
                 d3.select(junctionBack).on("mousedown", nodeMouseDown).on("mouseup", nodeMouseUp);
+                d3.select(junctionBack).on("touchstart", nodeMouseDown).on("touchend", nodeMouseUp);
 
                 junction[0][0].appendChild(contents);
             })
@@ -25586,7 +25693,7 @@ RED.view = (function() {
                     //     " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
                     //     (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
                     //     d.x2+" "+d.y2;
-                    var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
+                    var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1, !!(d.source.status || d.target.status));
                     if (/NaN/.test(path)) {
                         path = ""
                     }
@@ -28467,6 +28574,39 @@ RED.view.tools = (function() {
         }
     }
 
+    /**
+     * Determine if a point is within a node
+     * @param {*} node - A Node or Junction node
+     * @param {[Number,Number]} mouse_position The x,y position of the mouse
+     * @param {Number} [marginX=0] - A margin to add or deduct from the x position (to increase the hit area)
+     * @param {Number} [marginY=0] - A margin to add or deduct from the y position (to increase the hit area)
+     * @returns 
+     */
+    function isPointInNode (node, [x, y], marginX, marginY) {
+        marginX = marginX || 0
+        marginY = marginY || 0
+
+        let w = node.w || 10 // junctions dont have any w or h value
+        let h = node.h || 10
+        let x1, x2, y1, y2
+        
+        if (node.type === "junction" || node.type === "group") {
+            // x/y is the top left of the node
+            x1 = node.x
+            y1 = node.y
+            x2 = node.x + w
+            y2 = node.y + h
+        } else {
+            // x/y is the center of the node
+            const [xMid, yMid] =  [w/2, h/2]
+            x1 = node.x - xMid
+            y1 = node.y - yMid
+            x2 = node.x + xMid
+            y2 = node.y + yMid
+        }
+        return (x >= (x1 - marginX) && x <= (x2 + marginX) && y >= (y1 - marginY) && y <= (y2 + marginY))
+    }
+
     return {
         init: function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
@@ -28549,7 +28689,8 @@ RED.view.tools = (function() {
          * @param  {Number} dy
          */
         moveSelection: moveSelection,
-        calculateGridSnapOffsets: calculateGridSnapOffsets
+        calculateGridSnapOffsets: calculateGridSnapOffsets,
+        isPointInNode: isPointInNode
     }
 
 })();
@@ -32010,11 +32151,11 @@ RED.sidebar.context = (function() {
                     var obj = $(propRow.children()[0]);
                     obj.text(k);
                     var tools = $('<span class="button-group"></span>');
-
+                    const urlSafeK = encodeURIComponent(k)
                     var refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
-                        $.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) {
+                        $.getJSON(baseUrl+"/"+urlSafeK+"?store="+v.store, function(data) {
                             if (data.msg !== payload || data.format !== format) {
                                 payload = data.msg;
                                 format = data.format;
@@ -32050,11 +32191,12 @@ RED.sidebar.context = (function() {
                                 $('<button class="red-ui-button primary" data-i18n="common.label.delete"></button>').appendTo(bg).on("click", function(e) {
                                     e.preventDefault();
                                     popover.close();
+                                    const urlSafeK = encodeURIComponent(k)
                                     $.ajax({
-                                        url: baseUrl+"/"+k+"?store="+v.store,
+                                        url: baseUrl+"/"+urlSafeK+"?store="+v.store,
                                         type: "DELETE"
                                     }).done(function(data,textStatus,xhr) {
-                                        $.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) {
+                                        $.getJSON(baseUrl+"/"+urlSafeK+"?store="+v.store, function(data) {
                                             if (data.format === 'undefined') {
                                                 propRow.remove();
                                                 if (container.children().length === 0) {
@@ -32140,15 +32282,17 @@ RED.sidebar.context = (function() {
 RED.palette.editor = (function() {
 
     var disabled = false;
-
+    let catalogues = []
+    const loadedCatalogs = []
     var editorTabs;
-    var filterInput;
-    var searchInput;
-    var nodeList;
-    var packageList;
-    var loadedList = [];
-    var filteredList = [];
-    var loadedIndex = {};
+    let filterInput;
+    let searchInput;
+    let nodeList;
+    let packageList;
+    let fullList = []
+    let loadedList = [];
+    let filteredList = [];
+    let loadedIndex = {};
 
     var typesInUse = {};
     var nodeEntries = {};
@@ -32286,7 +32430,6 @@ RED.palette.editor = (function() {
         }
     }
 
-
     function getContrastingBorder(rgbColor){
         var parts = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)[,)]/.exec(rgbColor);
         if (parts) {
@@ -32493,10 +32636,10 @@ RED.palette.editor = (function() {
     var activeSort = sortModulesRelevance;
 
     function handleCatalogResponse(err,catalog,index,v) {
+        const url = catalog.url
         catalogueLoadStatus.push(err||v);
         if (!err) {
             if (v.modules) {
-                var a = false;
                 v.modules = v.modules.filter(function(m) {
                     if (RED.utils.checkModuleAllowed(m.id,m.version,installAllowList,installDenyList)) {
                         loadedIndex[m.id] = m;
@@ -32513,13 +32656,14 @@ RED.palette.editor = (function() {
                             m.timestamp = 0;
                         }
                         m.index = m.index.join(",").toLowerCase();
+                        m.catalog = catalog;
+                        m.catalogIndex = index;
                         return true;
                     }
                     return false;
                 })
                 loadedList = loadedList.concat(v.modules);
             }
-            searchInput.searchBox('count',loadedList.length);
         } else {
             catalogueLoadErrors = true;
         }
@@ -32528,7 +32672,7 @@ RED.palette.editor = (function() {
         }
         if (catalogueLoadStatus.length === catalogueCount) {
             if (catalogueLoadErrors) {
-                RED.notify(RED._('palette.editor.errors.catalogLoadFailed',{url: catalog}),"error",false,8000);
+                RED.notify(RED._('palette.editor.errors.catalogLoadFailed',{url: url}),"error",false,8000);
             }
             var delta = 250-(Date.now() - catalogueLoadStart);
             setTimeout(function() {
@@ -32540,12 +32684,13 @@ RED.palette.editor = (function() {
 
     function initInstallTab() {
         if (loadedList.length === 0) {
+            fullList = [];
             loadedList = [];
             loadedIndex = {};
             packageList.editableList('empty');
 
             $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading'));
-            var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
+
             catalogueLoadStatus = [];
             catalogueLoadErrors = false;
             catalogueCount = catalogues.length;
@@ -32555,27 +32700,97 @@ RED.palette.editor = (function() {
             $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
-            catalogues.forEach(function(catalog,index) {
-                $.getJSON(catalog, {_: new Date().getTime()},function(v) {
-                    handleCatalogResponse(null,catalog,index,v);
+            loadedCatalogs.length = 0; // clear the loadedCatalogs array
+            for (let index = 0; index < catalogues.length; index++) {
+                const url = catalogues[index];
+                $.getJSON(url, {_: new Date().getTime()},function(v) {
+                    loadedCatalogs.push({ index: index, url: url, name: v.name, updated_at: v.updated_at, modules_count: (v.modules || []).length })
+                    handleCatalogResponse(null,{ url: url, name: v.name},index,v);
                     refreshNodeModuleList();
                 }).fail(function(jqxhr, textStatus, error) {
-                    console.warn("Error loading catalog",catalog,":",error);
-                    handleCatalogResponse(jqxhr,catalog,index);
+                    console.warn("Error loading catalog",url,":",error);
+                    handleCatalogResponse(jqxhr,url,index);
                 }).always(function() {
                     handled++;
                     if (handled === catalogueCount) {
-                        searchInput.searchBox('change');
+                        //sort loadedCatalogs by e.index ascending
+                        loadedCatalogs.sort((a, b) => a.index - b.index)
+                        updateCatalogFilter(loadedCatalogs)
                     }
                 })
-            });
+            }
+        }
+    }
+
+    /**
+     * Refreshes the catalog filter dropdown and updates local variables
+     * @param {[{url:String, name:String, updated_at:String, modules_count:Number}]} catalogEntries
+     */
+    function updateCatalogFilter(catalogEntries, maxRetry = 3) {
+        // clean up existing filters
+        const catalogSelection = $('#red-catalogue-filter-select')
+        if (catalogSelection.length === 0) {
+            // sidebar not yet loaded (red-catalogue-filter-select is not in dom)
+            if (maxRetry > 0) {
+               // console.log("updateCatalogFilter: sidebar not yet loaded, retrying in 100ms")
+                // try again in 100ms
+                setTimeout(() => {
+                    updateCatalogFilter(catalogEntries, maxRetry - 1)
+                }, 100);
+                return;
+            } 
+            return; // give up
+        }
+        catalogSelection.off("change") // remove any existing event handlers
+        catalogSelection.attr('disabled', 'disabled')
+        catalogSelection.empty()
+        catalogSelection.append($('<option>', { value: "loading", text: RED._('palette.editor.loading'), disabled: true, selected: true }));
+        
+        fullList = loadedList.slice()
+        catalogSelection.empty() // clear the select list
+
+        // loop through catalogTypes, and an option entry per catalog
+        for (let index = 0; index < catalogEntries.length; index++) {
+            const catalog = catalogEntries[index];
+            catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
+        }
+        // select the 1st option in the select list
+        catalogSelection.val(catalogSelection.find('option:first').val())
+        
+        // if there is only 1 catalog, hide the select
+        if (catalogEntries.length > 1) {
+            catalogSelection.prepend(`<option value="all">${RED._('palette.editor.allCatalogs')}</option>`)
+            catalogSelection.val('all')
+            catalogSelection.removeAttr('disabled') // permit the user to select a catalog
+        }
+        // refresh the searchInput counter and trigger a change
+        filterByCatalog(catalogSelection.val())
+        searchInput.searchBox('change');
+
+        // hook up the change event handler
+        catalogSelection.on("change", function() {
+            const selectedCatalog = $(this).val();
+            filterByCatalog(selectedCatalog);
+            searchInput.searchBox('change');
+        })
+    }
+
+    function filterByCatalog(selectedCatalog) {
+        if (loadedCatalogs.length <= 1 || selectedCatalog === "all") {
+            loadedList = fullList.slice();
+        } else {
+            loadedList = fullList.filter(function(m) {
+                return (m.catalog.name === selectedCatalog);
+            })
         }
+        refreshFilteredItems();
+        searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
     }
 
     function refreshFilteredItems() {
         packageList.editableList('empty');
         var currentFilter = searchInput.searchBox('value').trim();
-        if (currentFilter === ""){
+        if (currentFilter === "" && loadedList.length > 20){
             packageList.editableList('addItem',{count:loadedList.length})
             return;
         }
@@ -32586,7 +32801,6 @@ RED.palette.editor = (function() {
         if (filteredList.length === 0) {
             packageList.editableList('addItem',{});
         }
-
         if (filteredList.length > 10) {
             packageList.editableList('addItem',{start:10,more:filteredList.length-10})
         }
@@ -32616,6 +32830,7 @@ RED.palette.editor = (function() {
     var updateDenyList = [];
 
     function init() {
+        catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json']
         if (RED.settings.get('externalModules.palette.allowInstall', true) === false) {
             return;
         }
@@ -32793,7 +33008,8 @@ RED.palette.editor = (function() {
             });
 
 
-        nodeList = $('<ol>',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
+        nodeList = $('<ol>',{id:"red-ui-palette-module-list"}).appendTo(modulesTab).editableList({
+            class: "scrollable",
             addButton: false,
             scrollOnAdd: false,
             sort: function(A,B) {
@@ -32924,28 +33140,27 @@ RED.palette.editor = (function() {
                     $('<div>',{class:"red-ui-search-empty"}).text(RED._('search.empty')).appendTo(container);
                 }
             }
-        });
+        })
     }
 
     function createInstallTab(content) {
-        var installTab = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
-
+        const installTab = $('<div>',{class:"red-ui-palette-editor-tab", style: "display: none;"}).appendTo(content);
         editorTabs.addTab({
             id: 'install',
             label: RED._('palette.editor.tab-install'),
             content: installTab
         })
 
-        var toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
-
-        var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
+        const toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
+        
+        const searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
         searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
             .appendTo(searchDiv)
             .searchBox({
                 delay: 300,
                 change: function() {
                     var searchTerm = $(this).val().trim().toLowerCase();
-                    if (searchTerm.length > 0) {
+                    if (searchTerm.length > 0 || loadedList.length < 20) {
                         filteredList = loadedList.filter(function(m) {
                             return (m.index.indexOf(searchTerm) > -1);
                         }).map(function(f) { return {info:f}});
@@ -32955,19 +33170,26 @@ RED.palette.editor = (function() {
                         searchInput.searchBox('count',loadedList.length);
                         packageList.editableList('empty');
                         packageList.editableList('addItem',{count:loadedList.length});
-
                     }
                 }
             });
 
-        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
-        var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
-        var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
-        var sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
-        var sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
+        catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
+ 
+        const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
 
+        $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
+        const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
+        const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-sort-alpha-asc"></i></a>').appendTo(sortGroup);
+        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-calendar"></i></a>').appendTo(sortGroup);
+        RED.popover.tooltip(sortRelevance,RED._("palette.editor.sortRelevance"));
+        RED.popover.tooltip(sortAZ,RED._("palette.editor.sortAZ"));
+        RED.popover.tooltip(sortRecent,RED._("palette.editor.sortRecent"));
 
-        var sortOpts = [
+
+        const sortOpts = [
             {button: sortRelevance, func: sortModulesRelevance},
             {button: sortAZ, func: sortModulesAZ},
             {button: sortRecent, func: sortModulesRecent}
@@ -32985,7 +33207,7 @@ RED.palette.editor = (function() {
             });
         });
 
-        var refreshSpan = $('<span>').appendTo(toolBar);
+        var refreshSpan = $('<span>').appendTo(toolBarActions);
         var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
         refreshButton.on("click", function(e) {
             e.preventDefault();
@@ -32995,7 +33217,8 @@ RED.palette.editor = (function() {
         })
         RED.popover.tooltip(refreshButton,RED._("palette.editor.refresh"));
 
-        packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
+        packageList = $('<ol>').appendTo(installTab).editableList({
+            class: "scrollable",
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -33030,6 +33253,9 @@ RED.palette.editor = (function() {
                     var metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
                     $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
+                    if (loadedCatalogs.length > 1) {
+                        $('<span class="red-ui-palette-module-updated"><i class="fa fa-cubes"></i>' + (entry.catalog.name || entry.catalog.url) + '</span>').appendTo(metaRow);
+                    }
 
                     var duplicateType = false;
                     if (entry.types && entry.types.length > 0) {
@@ -33076,9 +33302,10 @@ RED.palette.editor = (function() {
                 }
             }
         });
+        
 
         if (RED.settings.get('externalModules.palette.allowUpload', true) !== false) {
-            var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
+            var uploadSpan = $('<span class="button-group">').prependTo(toolBarActions);
             var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
 
             var uploadInput = uploadButton.find('input[type="file"]');
@@ -34074,7 +34301,10 @@ RED.editor = (function() {
                     if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
                         oldValues[d] = editing_node[d];
                     } else {
-                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
+                        // Dont clone the group node `nodes` array
+                        if (editing_node.type !== 'group' || d !== "nodes") {
+                            oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
+                        }
                     }
                 }
             }
@@ -35666,7 +35896,7 @@ RED.editor = (function() {
         }
 
         $('<div class="form-row">'+
-            '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
+            '<label for="node-input-show-label" data-i18n="editor.label"></label>'+
             '<span style="margin-right: 2px;"/>'+
             '<input type="checkbox" id="node-input-show-label"/>'+
         '</div>').appendTo(dialogForm);
@@ -45551,6 +45781,7 @@ RED.actionList = (function() {
                 items.push({type:t,def: def, label:getTypeLabel(t,def)});
             }
         });
+        items.push({ type: 'junction', def: { inputs:1, outputs: 1, label: 'junction', type: 'junction'}, label: 'junction' })
         items.sort(sortTypeLabels);
 
         var commonCount = 0;
@@ -46278,7 +46509,7 @@ RED.subflow = (function() {
         for (i=0; i<nodeList.length;i++) {
             if (nodeList[i].g && !includedGroups.has(nodeList[i].g)) {
                 if (containingGroup !== nodeList[i].g) {
-                    RED.notify("Cannot create subflow across multiple groups","error");
+                    RED.notify(RED._("subflow.errors.acrossMultipleGroups"), "error");
                     return;
                 }
             }