Merge branch 'dev' into revert-4225-4196-fix-jsonata-env-var-async

packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js

@@ -1305,6 +1305,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); })
@@ -1387,7 +1420,8 @@ RED.view.tools = (function() {
          * @param  {Number} dy
          */
         moveSelection: moveSelection,
-        calculateGridSnapOffsets: calculateGridSnapOffsets
+        calculateGridSnapOffsets: calculateGridSnapOffsets,
+        isPointInNode: isPointInNode
     }
 
 })();

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

@@ -101,7 +101,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",
@@ -110,19 +110,32 @@ RED.view = (function() {
         "gray":   "#d3d3d3"
     }
 
-    var PORT_TYPE_INPUT = 1;
+    const PORT_TYPE_INPUT = 1;
-    var PORT_TYPE_OUTPUT = 0;
+    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;
+    /** @type {SVGGElement} */ let gridLayer;
-    var junctionLayer;
+    /** @type {SVGGElement} */ let linkLayer;
-    var dragGroupLayer;
+    /** @type {SVGGElement} */ let junctionLayer;
-    var groupSelectLayer;
+    /** @type {SVGGElement} */ let dragGroupLayer;
-    var nodeLayer;
+    /** @type {SVGGElement} */ let groupSelectLayer;
-    var groupLayer;
+    /** @type {SVGGElement} */ let nodeLayer;
+    /** @type {SVGGElement} */ let groupLayer;
     var drag_lines;
 
     const movingSet = (function() {
@@ -391,16 +404,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();
@@ -1033,7 +1036,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);
@@ -1050,28 +1053,73 @@ RED.view = (function() {
         } else {
             scale = 0.4-0.2*(Math.max(0,(node_width-Math.min(Math.abs(dx),Math.abs(dy)))/node_width));
         }
-        if (dx*sc > 0) {
+        function genCP(cp) {
-            return "M "+origX+" "+origY+
+            return ` M ${cp[0]-5} ${cp[1]} h 10 M ${cp[0]} ${cp[1]-5} v 10 `
-                " C "+(origX+sc*(node_width*scale))+" "+(origY+scaleY*node_height)+" "+
-                (destX-sc*(scale)*node_width)+" "+(destY-scaleY*node_height)+" "+
-                destX+" "+destY
-        } else {
-
-            var midX = Math.floor(destX-dx/2);
-            var midY = Math.floor(destY-dy/2);
-            //
-            if (dy === 0) {
-                midY = destY + node_height;
         }
+        if (dx*sc > 0) {
+            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 ],
+                ]
+
+                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]+" "+
+                    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
-            var topX =origX + sc*node_width*scale;
+                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);
+                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;
+                bottomX = destX - sc*node_width*scale;
-            var bottomY = dy>0?Math.max(y1, destY-cp_height):Math.min(y1, destY+cp_height);
+                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 = [
+                cp = [
                     // Orig -> Top
                     [x1,origY],
                     [topX,dy>0?Math.max(origY, topY-cp_height):Math.min(origY, topY+cp_height)],
@@ -1106,6 +1154,9 @@ RED.view = (function() {
                     " S "+
                         cp[4][0]+" "+cp[4][1]+" "+
                         destX+" "+destY
+
+                // +genCP(cp[0])+genCP(cp[1])+genCP(cp[2])+genCP(cp[3])+genCP(cp[4])
+            }
         }
     }
 
@@ -1722,7 +1773,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) {
@@ -3046,22 +3097,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;
+                if (RED.view.DEBUG) { console.warn("portMouseUp: TouchEvent", mouse_mode,d,portType,portIndex); }
-                RED.nodes.eachNode(function(n) {
+                const direction = drag_lines[0].portType === PORT_TYPE_INPUT ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT
-                    if (n.z == RED.workspaces.active()) {
+                let found = false;
-                        var hw = n.w/2;
+                for (let nodeIdx = 0; nodeIdx < activeNodes.length; nodeIdx++) {
-                        var hh = n.h/2;
+                    const n = activeNodes[nodeIdx];
-                        if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
+                    if (RED.view.tools.isPointInNode(n, mouse_position)) {
-                            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;
+                        // 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) {
@@ -3073,15 +3140,12 @@ RED.view = (function() {
                     if (activeSubflow.out) {
                         subflowPorts = subflowPorts.concat(activeSubflow.out)
                     }
-                    for (var i=0;i<subflowPorts.length;i++) {
+                    for (var i = 0; i < subflowPorts.length; i++) {
-                        var n = subflowPorts[i];
+                        const sf = subflowPorts[i];
-                        var hw = n.w/2;
+                        if (RED.view.tools.isPointInNode(sf, mouse_position)) {
-                        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;
+                            mouseup_node = sf;
-                                portType = mouseup_node.direction === "in"?PORT_TYPE_OUTPUT:PORT_TYPE_INPUT;
+                            portType = mouseup_node.direction === "in" ? PORT_TYPE_OUTPUT : PORT_TYPE_INPUT;
                             portIndex = 0;
                             break;
                         }
@@ -4112,21 +4176,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;
         }
@@ -4532,17 +4602,30 @@ RED.view = (function() {
                 statusEl.style.display = "none";
                 node[0][0].__statusGroup__ = statusEl;
 
-                var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                var statusBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
-                statusRect.setAttribute("class","red-ui-flow-node-status");
+                statusBackground.setAttribute("class","red-ui-flow-node-status-background");
-                statusRect.setAttribute("x",6);
+                statusBackground.setAttribute("x",3);
-                statusRect.setAttribute("y",1);
+                statusBackground.setAttribute("y",-1);
-                statusRect.setAttribute("width",9);
+                statusBackground.setAttribute("width",200);
-                statusRect.setAttribute("height",9);
+                statusBackground.setAttribute("height",13);
-                statusRect.setAttribute("rx",2);
+                statusBackground.setAttribute("rx",1);
-                statusRect.setAttribute("ry",2);
+                statusBackground.setAttribute("ry",1);
-                statusRect.setAttribute("stroke-width","3");
+                
-                statusEl.appendChild(statusRect);
+                statusEl.appendChild(statusBackground);
-                node[0][0].__statusShape__ = statusRect;
+                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");
@@ -4948,16 +5031,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);
             })
@@ -5067,7 +5159,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 = ""
                     }

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -304,7 +304,11 @@ g.red-ui-flow-node-selected {
         stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
 }
-
+.red-ui-flow-node-status-background {
+    stroke: none;
+    fill: var(--red-ui-view-background);
+    fill-opacity: 0.9;
+}
 .red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;

packages/node_modules/@node-red/nodes/core/network/21-httprequest.js

@@ -23,6 +23,8 @@ module.exports = async function(RED) {
     const { v4: uuid } = require('uuid');
     const crypto = require('crypto');
     const URL = require("url").URL
+    const http = require("http")
+    const https = require("https")
     var mustache = require("mustache");
     var querystring = require("querystring");
     var cookie = require("cookie");
@@ -65,16 +67,27 @@ in your Node-RED user directory (${RED.settings.userDir}).
     function HTTPRequest(n) {
         RED.nodes.createNode(this,n);
         checkNodeAgentPatch();
-        var node = this;
+        const node = this;
-        var nodeUrl = n.url;
+        const nodeUrl = n.url;
-        var isTemplatedUrl = (nodeUrl||"").indexOf("{{") != -1;
+        const isTemplatedUrl = (nodeUrl||"").indexOf("{{") != -1;
-        var nodeMethod = n.method || "GET";
+        const nodeMethod = n.method || "GET";
-        var paytoqs = false;
+        let paytoqs = false;
-        var paytobody = false;
+        let paytobody = false;
-        var redirectList = [];
+        let redirectList = [];
-        var sendErrorsToCatch = n.senderr;
+        const sendErrorsToCatch = n.senderr;
         node.headers = n.headers || [];
-        var nodeHTTPPersistent = n["persist"];
+        const useKeepAlive = n["persist"];
+        let agents = null
+        if (useKeepAlive) {
+            agents = {
+                http: new http.Agent({ keepAlive: true }),
+                https: new https.Agent({ keepAlive: true })
+            }
+            node.on('close', function () {
+                agents.http.destroy()
+                agents.https.destroy()
+            })
+        }
         if (n.tls) {
             var tlsNode = RED.nodes.getNode(n.tls);
         }
@@ -560,12 +573,14 @@ in your Node-RED user directory (${RED.settings.userDir}).
                     opts.agent = {
                         http: new HttpProxyAgent(proxyOptions),
                         https: new HttpsProxyAgent(proxyOptions)
-                    };
+                    }
-
                 } else {
                     node.warn("Bad proxy url: "+ prox);
                 }
             }
+            if (useKeepAlive && !opts.agent) {
+                opts.agent = agents
+            }
             if (tlsNode) {
                 opts.https = {};
                 tlsNode.addTLSOptions(opts.https);

packages/node_modules/@node-red/runtime/lib/flows/Flow.js

@@ -527,10 +527,9 @@ class Flow {
             // Delegate status to any nodes using this config node
             for (let userNode in node.users) {
                 if (node.users.hasOwnProperty(userNode)) {
-                    node.users[userNode]._flow.handleStatus(node,statusMessage,node.users[userNode],true);
+                    handled = node.users[userNode]._flow.handleStatus(node,statusMessage,node.users[userNode],true) || handled;
                 }
             }
-            handled = true;
         } else {
             const candidateNodes = [];
             this.statusNodes.forEach(targetStatusNode => {
@@ -614,10 +613,9 @@ class Flow {
             // Delegate status to any nodes using this config node
             for (let userNode in node.users) {
                 if (node.users.hasOwnProperty(userNode)) {
-                    node.users[userNode]._flow.handleError(node,logMessage,msg,node.users[userNode]);
+                    handled = node.users[userNode]._flow.handleError(node,logMessage,msg,node.users[userNode]) || handled;
                 }
             }
-            handled = true;
         } else {
             const candidateNodes = [];
             this.catchNodes.forEach(targetCatchNode => {