Merge pull request #3612 from node-red/3beta2

Update for 3.0.0-beta.2

CHANGELOG.md

@@ -1,3 +1,38 @@
+#### 3.0.0-beta.2: Beta Release
+
+**Migration from 2.x**
+
+ - The 'slice wires' action has changed from Ctrl-RightMouseButton to Alt-LeftMouseButton
+
+Editor
+
+ - Rework Junctions to be more node like in their event handling (#3607) @knolleary
+ - Change slicing / slice-junction operations over to mouse button 0 (Left Mouse Button) (#3609) @Steve-Mcl
+ - Do not slice-junction link node wires (#3608) @knolleary
+ - Handle many-to-one slicing of wires (#3604) @knolleary
+ - Ensure ACE worker options are set (#3611) @Steve-Mcl
+ - Remove duplicate history add of ungroup event (#3605) @knolleary
+ - use text width instead of number of characters for deciding select fi… (#3603) @HiroyasuNishiyama
+ - Update Japanese info of link call node reflecting update of English info (#3600) @HiroyasuNishiyama
+ - Fix typedInput label not visible on themes (#3580) @bonanitech
+ - Fix project switching when junctions are present (#3595) @Steve-Mcl
+ - Fix junction: when wiring from a regular nodes INPUT, backwards to a junction (#3591) @Steve-Mcl
+ - Fix error initialising flow tab editor (#3585) @Steve-Mcl
+ - Add Japanese translations for v3.0-beta.1 (#3576) @kazuhitoyokoi
+ - Fix image paths where `red/image/typedInput/XXXX.png` should be `red/image/typedInput/XXXX.svg` (#3592) @kazuhitoyokoi
+ - Fix browser console error Uncaught TypeError when searching certain terms (#3584) @Steve-Mcl
+
+Runtime
+
+ - fix error on system-info action (#3589) @HiroyasuNishiyama
+
+Nodes
+
+ - I18n switch rule selector (#3602) @HiroyasuNishiyama
+ - Handle removal of event handlers to allow mqtt client.end() to work (#3594) @PhilDay-CT
+ - update link-call node info according to current behavior (#3597) @HiroyasuNishiyama
+
+
 #### 3.0.0-beta.1: Beta Release
 
 **Migration from 2.x**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -42,14 +42,14 @@
         "cronosjs": "1.7.1",
         "denque": "2.0.1",
         "express": "4.18.1",
-        "express-session": "1.17.2",
+        "express-session": "1.17.3",
         "form-data": "4.0.0",
         "fs-extra": "10.1.0",
         "got": "11.8.3",
         "hash-sum": "2.0.0",
         "hpagent": "1.0.0",
         "https-proxy-agent": "5.0.1",
-        "i18next": "21.6.16",
+        "i18next": "21.8.2",
         "iconv-lite": "0.6.3",
         "is-utf8": "0.2.1",
         "js-yaml": "4.1.0",
@@ -76,7 +76,7 @@
         "semver": "7.3.7",
         "tar": "6.1.11",
         "tough-cookie": "4.0.0",
-        "uglify-js": "3.15.4",
+        "uglify-js": "3.15.5",
         "uuid": "8.3.2",
         "ws": "7.5.6",
         "xml2js": "0.4.23"
@@ -85,8 +85,8 @@
         "bcrypt": "5.0.1"
     },
     "devDependencies": {
-        "dompurify": "2.3.6",
-        "grunt": "1.5.2",
+        "dompurify": "2.3.8",
+        "grunt": "1.5.3",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.4.3",
         "grunt-concurrent": "3.0.0",

packages/node_modules/@node-red/editor-api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,13 +16,13 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "3.0.0-beta.1",
-        "@node-red/editor-client": "3.0.0-beta.1",
+        "@node-red/util": "3.0.0-beta.2",
+        "@node-red/editor-client": "3.0.0-beta.2",
         "bcryptjs": "2.4.3",
         "body-parser": "1.20.0",
         "clone": "2.1.2",
         "cors": "2.8.5",
-        "express-session": "1.17.2",
+        "express-session": "1.17.3",
         "express": "4.18.1",
         "memorystore": "1.6.7",
         "mime": "3.0.0",

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -907,7 +907,8 @@
             "uknownNodes": "Unknown nodes",
             "unusedSubflows": "Unused subflows",
             "hiddenFlows": "Hidden flows",
-            "modifiedNodes": "Modified nodes and flows"
+            "modifiedNodes": "Modified nodes and flows",
+            "thisFlow": "Current flow"
         }
     },
     "expressionEditor": {

packages/node_modules/@node-red/editor-client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

packages/node_modules/@node-red/editor-client/src/ace/mode/nrjavascript_worker.js

@@ -76,7 +76,7 @@ oop.inherits(NRJavaScriptWorker, Mirror);
 
 (function() {
     this.setOptions = function(options) {
-        this.options = {
+        o.options = {
             // undef: true,
             // unused: true,
             esversion: 9,
@@ -98,7 +98,7 @@ oop.inherits(NRJavaScriptWorker, Mirror);
         if (options) {
             for (var opt in options) {
                 if (options.hasOwnProperty(opt)) {
-                    this.options[opt] = options.opt;
+                    o.options[opt] = options[opt];
                 }
             }
         }

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

@@ -108,7 +108,6 @@ RED.search = (function() {
 
     function search(val) {
         var results = [];
-        var keys = [];
         var typeFilter;
         var m = /(?:^| )type:([^ ]+)/.exec(val);
         if (m) {
@@ -122,19 +121,24 @@ RED.search = (function() {
         val = extractFlag(val,"subflow",flags);
         val = extractFlag(val,"hidden",flags);
         val = extractFlag(val,"modified",flags);
-        // uses:<node-id>
-        val = extractValue(val,"uses",flags);
-
-        var hasFlags = Object.keys(flags).length > 0;
-
+        val = extractValue(val,"flow",flags);// flow:active or flow:<flow-id>
+        val = extractValue(val,"uses",flags);// uses:<node-id>
         val = val.trim();
-
+        var hasFlags = Object.keys(flags).length > 0;
+        if (flags.flow && flags.flow.indexOf("current") >= 0) {
+            let idx = flags.flow.indexOf("current");
+            flags.flow[idx] = RED.workspaces.active();//convert active to flow ID
+        }
+        if (flags.flow && flags.flow.length) {
+            flags.flow = [ ...new Set(flags.flow) ]; //deduplicate
+        }
         if (val.length > 0 || typeFilter || hasFlags) {
             val = val.toLowerCase();
             var i;
             var j;
             var list = [];
             var nodes = {};
+            let keys = [];
             if (flags.uses) {
                 keys = flags.uses;
             } else {
@@ -188,6 +192,11 @@ RED.search = (function() {
                                 continue;
                             }
                         }
+                        if (flags.hasOwnProperty("flow")) {
+                            if (flags.flow.indexOf(node.node.z || node.node.id) < 0) {
+                                continue;
+                            }
+                        }
                         if (!typeFilter || node.node.type === typeFilter) {
                             nodes[node.node.id] = nodes[node.node.id] = {
                                 node: node.node,
@@ -592,8 +601,8 @@ RED.search = (function() {
             {label:RED._("search.options.uknownNodes"), value: "type:unknown"},
             {label:RED._("search.options.unusedSubflows"), value:"is:subflow is:unused"},
             {label:RED._("search.options.hiddenFlows"), value:"is:hidden"},
+            {label:RED._("search.options.thisFlow"), value:"flow:current"},
         ]
-
     }
 
     function init() {

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

@@ -93,7 +93,6 @@ RED.view = (function() {
     var selectNodesOptions;
 
     let flashingNodeId;
-    let flashingNodeTimer;
 
     var clipboard = "";
 
@@ -173,7 +172,8 @@ RED.view = (function() {
             length: function() { return set.length},
             get: function(i) { return set[i] },
             forEach: function(func) { set.forEach(func) },
-            nodes: function() { return set.map(function(n) { return n.n })}
+            nodes: function() { return set.map(function(n) { return n.n })},
+            has: function(node) { return setIds.has(node.id) }
         }
         return api;
     })();
@@ -205,11 +205,6 @@ RED.view = (function() {
 
     function init() {
 
-// setTimeout(function() {
-//     function snap(p) { return RED.view.gridSize() * Math.round(p/RED.view.gridSize())}; for (var i = 0;i<10;i++) {
-//     RED.nodes.addJunction({_def:{defaults:{}}, type:'junction', z:"0ccdc1d81f2729cc",id:RED.nodes.id(),x:snap(Math.floor(Math.random()*600)),y:snap(Math.floor(Math.random()*600)), w:0,h:0})
-// } ; RED.view.redraw(true)
-// },2000)
         chart = $("#red-ui-workspace-chart");
 
         outer = d3.select("#red-ui-workspace-chart")
@@ -960,8 +955,9 @@ RED.view = (function() {
     }
 
     function canvasMouseDown() {
-        if (RED.view.DEBUG) { console.warn("canvasMouseDown", mouse_mode); }
-        var point;
+        if (RED.view.DEBUG) { 
+            console.warn("canvasMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -978,45 +974,49 @@ RED.view = (function() {
             selectedLinks.clear();
             updateSelection();
         }
-        if (mouse_mode === 0) {
-            if (lasso) {
-                lasso.remove();
-                lasso = null;
-            }
+        if (mouse_mode === 0 && lasso) {
+            lasso.remove();
+            lasso = null;
         }
-        if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.touches || d3.event.button === 0) && (d3.event.metaKey || d3.event.ctrlKey)) {
-            // Trigger quick add dialog
-            d3.event.stopPropagation();
-            clearSelection();
-            point = d3.mouse(this);
-            var clickedGroup = getGroupAt(point[0],point[1]);
-            if (drag_lines.length > 0) {
-                clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+        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)) {
+                // Trigger quick add dialog
+                d3.event.stopPropagation();
+                clearSelection();
+                const point = d3.mouse(this);
+                var clickedGroup = getGroupAt(point[0], point[1]);
+                if (drag_lines.length > 0) {
+                    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)) {
+                // CTRL not being held
+                if (!d3.event.altKey) {
+                    // ALT not held (shift is allowed) Trigger lasso
+                    if (!touchStartTime) {
+                        const point = d3.mouse(this);
+                        lasso = eventLayer.append("rect")
+                            .attr("ox", point[0])
+                            .attr("oy", point[1])
+                            .attr("rx", 1)
+                            .attr("ry", 1)
+                            .attr("x", point[0])
+                            .attr("y", point[1])
+                            .attr("width", 0)
+                            .attr("height", 0)
+                            .attr("class", "nr-ui-view-lasso");
+                        d3.event.preventDefault();
+                    }
+                } else if (d3.event.altKey) {
+                    //Alt [+shift] held - Begin slicing
+                    clearSelection();
+                    mouse_mode = (d3.event.shiftKey) ? RED.state.SLICING_JUNCTION : RED.state.SLICING;
+                    const point = d3.mouse(this);
+                    slicePath = eventLayer.append("path").attr("class", "nr-ui-view-slice").attr("d", `M${point[0]} ${point[1]}`)
+                    slicePathLast = point;
+                    RED.view.redraw();
+                }
             }
-            showQuickAddDialog({position:point, group:clickedGroup});
-        } else if (mouse_mode === 0 && (d3.event.touches || d3.event.button === 0) && !(d3.event.metaKey || d3.event.ctrlKey)) {
-            // Tigger lasso
-            if (!touchStartTime) {
-                point = d3.mouse(this);
-                lasso = eventLayer.append("rect")
-                .attr("ox",point[0])
-                .attr("oy",point[1])
-                .attr("rx",1)
-                .attr("ry",1)
-                .attr("x",point[0])
-                .attr("y",point[1])
-                .attr("width",0)
-                .attr("height",0)
-                .attr("class","nr-ui-view-lasso");
-                d3.event.preventDefault();
-            }
-        } else if (mouse_mode === 0 && d3.event.button === 2 && (d3.event.metaKey || d3.event.ctrlKey || d3.event.shiftKey)) {
-            clearSelection();
-            mouse_mode = (d3.event.metaKey || d3.event.ctrlKey)?RED.state.SLICING : RED.state.SLICING_JUNCTION;
-            point = d3.mouse(this);
-            slicePath = eventLayer.append("path").attr("class","nr-ui-view-slice").attr("d",`M${point[0]} ${point[1]}`)
-            slicePathLast = point;
-            RED.view.redraw();
         }
     }
 
@@ -1719,7 +1719,9 @@ RED.view = (function() {
 
     function canvasMouseUp() {
         lastClickPosition = [d3.event.offsetX/scaleFactor,d3.event.offsetY/scaleFactor];
-        if (RED.view.DEBUG) { console.warn("canvasMouseUp", mouse_mode); }
+        if (RED.view.DEBUG) { 
+            console.warn("canvasMouseUp", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         var i;
         var historyEvent;
         if (mouse_mode === RED.state.PANNING) {
@@ -1862,7 +1864,7 @@ RED.view = (function() {
             slicePath = null;
             RED.view.redraw(true);
         } else if (mouse_mode == RED.state.SLICING_JUNCTION) {
-            var removedLinks = []
+            var removedLinks = new Set()
             var addedLinks = []
             var addedJunctions = []
 
@@ -1871,8 +1873,14 @@ RED.view = (function() {
                 var sourceId = l.source.id+":"+l.sourcePort
                 groupedLinks[sourceId] = groupedLinks[sourceId] || []
                 groupedLinks[sourceId].push(l)
+
+                groupedLinks[l.target.id] = groupedLinks[l.target.id] || []
+                groupedLinks[l.target.id].push(l)
             });
             var linkGroups = Object.keys(groupedLinks)
+            linkGroups.sort(function(A,B) {
+                return groupedLinks[B].length - groupedLinks[A].length
+            })
             linkGroups.forEach(function(gid) {
                 var links = groupedLinks[gid]
                 var junction = {
@@ -1887,6 +1895,10 @@ RED.view = (function() {
                     inputs: 1,
                     dirty: true
                 }
+                links = links.filter(function(l) { return !removedLinks.has(l) })
+                if (links.length === 0) {
+                    return
+                }
                 links.forEach(function(l) {
                     junction.x += l._sliceLocation.x
                     junction.y += l._sliceLocation.y
@@ -1902,20 +1914,38 @@ RED.view = (function() {
 
                 RED.nodes.addJunction(junction)
                 addedJunctions.push(junction)
-                var newLink = {
-                    source: links[0].source,
-                    sourcePort: links[0].sourcePort,
-                    target: junction
+                let newLink
+                if (gid === links[0].source.id+":"+links[0].sourcePort) {
+                    newLink = {
+                        source: links[0].source,
+                        sourcePort: links[0].sourcePort,
+                        target: junction
+                    }
+                } else {
+                    newLink = {
+                        source: junction,
+                        sourcePort: 0,
+                        target: links[0].target
+                    }
                 }
                 addedLinks.push(newLink)
                 RED.nodes.addLink(newLink)
                 links.forEach(function(l) {
-                    removedLinks.push(l)
+                    removedLinks.add(l)
                     RED.nodes.removeLink(l)
-                    var newLink = {
-                        source: junction,
-                        sourcePort: 0,
-                        target: l.target
+                    let newLink
+                    if (gid === l.target.id) {
+                        newLink = {
+                            source: l.source,
+                            sourcePort: l.sourcePort,
+                            target: junction
+                        }
+                    } else {
+                        newLink = {
+                            source: junction,
+                            sourcePort: 0,
+                            target: l.target
+                        }
                     }
                     addedLinks.push(newLink)
                     RED.nodes.addLink(newLink)
@@ -1937,7 +1967,7 @@ RED.view = (function() {
                     t: 'add',
                     links: addedLinks,
                     junctions: addedJunctions,
-                    removedLinks: removedLinks
+                    removedLinks: Array.from(removedLinks)
                 })
                 RED.nodes.dirty(true)
             }
@@ -3209,52 +3239,16 @@ RED.view = (function() {
         port.classed("red-ui-flow-port-hovered",false);
     }
 
-    function junctionMouseOver(junction, d) {
-        junction.classed("red-ui-flow-junction-hovered",true);
+    function junctionMouseOver(junction, d, portType) {
+        var active = (portType === undefined) ||
+                     (mouse_mode !== RED.state.JOINING && mouse_mode !== RED.state.QUICK_JOINING) ||
+                     (drag_lines.length > 0 && drag_lines[0].portType !== portType && !drag_lines[0].virtualLink)
+        junction.classed("red-ui-flow-junction-hovered", active);
     }
     function junctionMouseOut(junction, d) {
         junction.classed("red-ui-flow-junction-hovered",false);
     }
 
-    function junctionMouseDown(junction, d, evt) {
-        if (RED.view.DEBUG) { console.warn("junctionMouseDown", d); }
-        evt = evt || d3.event;
-        d3.event = evt
-        if (evt === 1) {
-            return;
-        }
-        if (mouse_mode === RED.state.SELECTING_NODE) {
-            evt.stopPropagation();
-            return;
-        }
-        if (mouse_mode == RED.state.QUICK_JOINING) {
-            d3.event.stopPropagation();
-            return;
-        }
-
-        // mousedown_node = d;
-        // mousedown_port_type = portType;
-        // mousedown_port_index = portIndex || 0;
-        if (mouse_mode !== RED.state.QUICK_JOINING && (evt.ctrlKey || evt.metaKey)) {
-            mouse_mode = RED.state.QUICK_JOINING;
-            document.body.style.cursor = "crosshair";
-            showDragLines([{node:d,port:0,portType: PORT_TYPE_OUTPUT}]);
-            $(window).on('keyup',disableQuickJoinEventHandler);
-        } else if (event.button != 2) {
-            nodeMouseDown.call(junction[0][0],d)
-            // clearSelection();
-            // movingSet.add(d);
-            // mousedown_node = d;
-            // mouse_mode = RED.state.MOVING;
-            // var mouse = d3.touches(junction[0][0])[0]||d3.mouse(junction[0][0]);
-            // mouse[0] += d.x-d.w/2;
-            // mouse[1] += d.y-d.h/2;
-            // prepareDrag(mouse);
-        }
-        evt.stopPropagation();
-        evt.preventDefault();
-    }
-
     function prepareDrag(mouse) {
         mouse_mode = RED.state.MOVING;
         // Called when movingSet should be prepared to be dragged
@@ -3414,6 +3408,9 @@ RED.view = (function() {
             return;
         } else if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
+            if (d.type === 'junction') {
+                return
+            }
             if (selectNodesOptions.single) {
                 selectNodesOptions.done(d);
                 return;
@@ -3440,12 +3437,12 @@ RED.view = (function() {
         var now = Date.now();
         clickElapsed = now-clickTime;
         clickTime = now;
-        dblClickPrimed = (lastClickNode == mousedown_node &&
+        dblClickPrimed = lastClickNode == mousedown_node &&
             (d3.event.touches || d3.event.button === 0) &&
             !d3.event.shiftKey && !d3.event.altKey &&
-            clickElapsed < dblClickInterval
-            )
-            lastClickNode = mousedown_node;
+            clickElapsed < dblClickInterval &&
+            d.type !== 'junction'
+        lastClickNode = mousedown_node;
 
         if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) {
             var nodeGroup = RED.nodes.group(d.g);
@@ -3571,9 +3568,9 @@ RED.view = (function() {
                     clearSelection();
                 }
                 var clickPosition = (d3.event.offsetX/scaleFactor - mousedown_node.x)
-                var edgeDelta = (mousedown_node.w/2) - Math.abs(clickPosition);
+                var edgeDelta = ((mousedown_node.w||10)/2) - Math.abs(clickPosition);
                 var cnodes;
-                var targetEdgeDelta = mousedown_node.w > 30 ? 25 : 8;
+                var targetEdgeDelta = mousedown_node.w > 30 ? 25 : (mousedown_node.w > 0 ? 8 : 3);
                 if (edgeDelta < targetEdgeDelta) {
                     if (clickPosition < 0) {
                         cnodes = [mousedown_node].concat(RED.nodes.getAllUpstreamNodes(mousedown_node));
@@ -3718,12 +3715,13 @@ RED.view = (function() {
     function portMouseOverProxy(e) { portMouseOver(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
     function portMouseOutProxy(e) { portMouseOut(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
 
-    function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__) }
+    function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__, this.__portType__) }
     function junctionMouseOutProxy(e) { junctionMouseOut(d3.select(this), this.__data__) }
-    function junctionMouseDownProxy(e) { junctionMouseDown(d3.select(this), this.__data__, e) }
-    function junctionMouseUpProxy(e) { junctionMouseUp(d3.select(this), this.__data__) }
 
     function linkMouseDown(d) {
+        if (RED.view.DEBUG) { 
+            console.warn("linkMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -4872,22 +4870,56 @@ RED.view = (function() {
                 junctionBack.setAttribute("y",-5);
                 junctionBack.setAttribute("width",10);
                 junctionBack.setAttribute("height",10);
-                junctionBack.setAttribute("rx",5);
-                junctionBack.setAttribute("ry",5);
+                junctionBack.setAttribute("rx",3);
+                junctionBack.setAttribute("ry",3);
                 junctionBack.__data__ = d;
                 this.__junctionBack__ = junctionBack;
                 contents.appendChild(junctionBack);
 
+                var junctionInput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionInput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-input");
+                junctionInput.setAttribute("x",-5);
+                junctionInput.setAttribute("y",-5);
+                junctionInput.setAttribute("width",10);
+                junctionInput.setAttribute("height",10);
+                junctionInput.setAttribute("rx",3);
+                junctionInput.setAttribute("ry",3);
+                junctionInput.__data__ = d;
+                junctionInput.__portType__ = PORT_TYPE_INPUT;
+                junctionInput.__portIndex__ = 0;
+                this.__junctionInput__ = junctionOutput;
+                contents.appendChild(junctionInput);
+                junctionInput.addEventListener("mouseup", portMouseUpProxy);
+                junctionInput.addEventListener("mousedown", portMouseDownProxy);
+
+
+                this.__junctionInput__ = junctionInput;
+                contents.appendChild(junctionInput);
+                var junctionOutput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionOutput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-output");
+                junctionOutput.setAttribute("x",-5);
+                junctionOutput.setAttribute("y",-5);
+                junctionOutput.setAttribute("width",10);
+                junctionOutput.setAttribute("height",10);
+                junctionOutput.setAttribute("rx",3);
+                junctionOutput.setAttribute("ry",3);
+                junctionOutput.__data__ = d;
+                junctionOutput.__portType__ = PORT_TYPE_OUTPUT;
+                junctionOutput.__portIndex__ = 0;
+                this.__junctionOutput__ = junctionOutput;
+                contents.appendChild(junctionOutput);
+                junctionOutput.addEventListener("mouseup", portMouseUpProxy);
+                junctionOutput.addEventListener("mousedown", portMouseDownProxy);
+
+                junctionOutput.addEventListener("mouseover", junctionMouseOverProxy);
+                junctionOutput.addEventListener("mouseout", junctionMouseOutProxy);
+                junctionInput.addEventListener("mouseover", junctionMouseOverProxy);
+                junctionInput.addEventListener("mouseout", junctionMouseOutProxy);
                 junctionBack.addEventListener("mouseover", junctionMouseOverProxy);
                 junctionBack.addEventListener("mouseout", junctionMouseOutProxy);
-                junctionBack.addEventListener("mouseup", portMouseUpProxy);
-                junctionBack.addEventListener("mousedown", junctionMouseDownProxy);
 
-                // d3.select(junctionBack).on("mousedown", nodeMouseDown);
-
-                this.__portType__ = PORT_TYPE_INPUT
-                this.__portIndex__ = 0
-// function portMouseUpProxy(e) { portMouseUp(this.__data__,this.__portType__,this.__portIndex__, e); }
+                // These handlers expect to be registered as d3 events
+                d3.select(junctionBack).on("mousedown", nodeMouseDown).on("mouseup", nodeMouseUp);
 
                 junction[0][0].appendChild(contents);
             })
@@ -4896,6 +4928,7 @@ RED.view = (function() {
                 var junction = d3.select(this);
                 this.setAttribute("transform", "translate(" + (d.x) + "," + (d.y) + ")");
                 if (d.dirty) {
+                    junction.classed("red-ui-flow-junction-dragging", mouse_mode === RED.state.MOVING_ACTIVE && movingSet.has(d))
                     junction.classed("selected", !!d.selected)
                     dirtyNodes[d.id] = d;
 
@@ -4936,10 +4969,11 @@ RED.view = (function() {
                     .on("touchstart",linkTouchStart)
                     .on("mousemove", function(d) {
                         if (mouse_mode === RED.state.SLICING) {
+
                             selectedLinks.add(d)
                             l.classed("red-ui-flow-link-splice",true)
                             redraw()
-                        } else if (mouse_mode === RED.state.SLICING_JUNCTION) {
+                        } else if (mouse_mode === RED.state.SLICING_JUNCTION && !d.link) {
                             if (!l.classed("red-ui-flow-link-splice")) {
                                 // Find intersection point
                                 var lineLength = pathLine.getTotalLength();
@@ -5853,27 +5887,26 @@ RED.view = (function() {
         if(typeof node === "string") { node = RED.nodes.node(n); }
         if(!node) { return; }
 
-        const flashingNode = flashingNodeTimer && flashingNodeId && RED.nodes.node(flashingNodeId);
+        const flashingNode = flashingNodeId && RED.nodes.node(flashingNodeId);
         if(flashingNode) {
             //cancel current flashing node before flashing new node
-            clearInterval(flashingNodeTimer);
-            flashingNodeTimer = null;
+            clearInterval(flashingNode.__flashTimer);
+            delete flashingNode.__flashTimer;
             flashingNode.dirty = true;
             flashingNode.highlighted = false;
         }
-
-        flashingNodeTimer = setInterval(function(flashEndTime) {
-            node.dirty = true;
+        node.__flashTimer = setInterval(function(flashEndTime, n) {
+            n.dirty = true;
             if (flashEndTime >= Date.now()) {
-                node.highlighted = !node.highlighted;
+                n.highlighted = !n.highlighted;
             } else {
-                clearInterval(flashingNodeTimer);
-                flashingNodeTimer = null;
-                node.highlighted = false;
+                clearInterval(n.__flashTimer);
+                delete n.__flashTimer;
                 flashingNodeId = null;
+                n.highlighted = false;
             }
             RED.view.redraw();
-        }, 100, Date.now() + 2200)
+        }, 100, Date.now() + 2200, node)
         flashingNodeId = node.id;
         node.highlighted = true;
         RED.view.redraw();

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

@@ -379,11 +379,46 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     white-space: pre;
     @include disable-selection;
 }
+.red-ui-flow-junction-dragging {
+    .red-ui-flow-junction-background {
+        background: red !important
+    }
+}
+.red-ui-flow-junction:not(.red-ui-flow-junction-dragging):hover {
+    .red-ui-flow-junction-background {
+        transform: scale(1.4);
+        stroke-width: 0.6;
+    }
+    .red-ui-flow-junction-port {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    .red-ui-flow-junction-port-input {
+        transform: translate(-10px,0)
+    }
+    .red-ui-flow-junction-port-output {
+        transform: translate(10px,0)
+    }
+}
+.red-ui-flow-junction-port {
+    stroke: $node-border;
+    stroke-width: 1;
+    fill: $node-port-background;
+    cursor: crosshair;
+    transition: transform 0.1s;
+    opacity: 0;
+    pointer-events: none;
+}
 .red-ui-flow-junction-background {
     stroke: $node-border;
     stroke-width: 1;
     fill: $node-port-background;
     cursor: crosshair;
+    transform: scale(1);
+    transition: transform 0.1s;
+    &:hover {
+
+    }
 }
 .red-ui-flow-junction-hovered {
     stroke: $port-selected-color;

packages/node_modules/@node-red/nodes/core/common/21-debug.html

@@ -530,7 +530,6 @@
                         if (type !== 'full') {
                             comp = $("#node-input-typed-complete").typedInput('value');
                         }
-                        console.log('hihi')
                         that.statusType = "auto";
                         that.statusVal = comp;
                     }

packages/node_modules/@node-red/nodes/core/common/60-link.html

@@ -302,7 +302,6 @@
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
-            console.log("link call oneditprepare")
             const updateVisibility = function() {
                 const static = $('#node-input-linkType').val() !== "dynamic";
                 if(static) {

packages/node_modules/@node-red/nodes/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/nodes",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

packages/node_modules/@node-red/registry/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/registry",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,11 +16,11 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "3.0.0-beta.1",
+        "@node-red/util": "3.0.0-beta.2",
         "clone": "2.1.2",
         "fs-extra": "10.1.0",
         "semver": "7.3.7",
         "tar": "6.1.11",
-        "uglify-js": "3.15.4"
+        "uglify-js": "3.15.5"
     }
 }

packages/node_modules/@node-red/runtime/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/runtime",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,8 +16,8 @@
         }
     ],
     "dependencies": {
-        "@node-red/registry": "3.0.0-beta.1",
-        "@node-red/util": "3.0.0-beta.1",
+        "@node-red/registry": "3.0.0-beta.2",
+        "@node-red/util": "3.0.0-beta.2",
         "async-mutex": "0.3.2",
         "clone": "2.1.2",
         "express": "4.18.1",

packages/node_modules/@node-red/util/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/util",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
@@ -16,7 +16,7 @@
     ],
     "dependencies": {
         "fs-extra": "10.1.0",
-        "i18next": "21.6.16",
+        "i18next": "21.8.2",
         "json-stringify-safe": "5.0.1",
         "jsonata": "1.8.6",
         "lodash.clonedeep": "^4.5.0",

packages/node_modules/node-red/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "3.0.0-beta.1",
+    "version": "3.0.0-beta.2",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -31,10 +31,10 @@
         "flow"
     ],
     "dependencies": {
-        "@node-red/editor-api": "3.0.0-beta.1",
-        "@node-red/runtime": "3.0.0-beta.1",
-        "@node-red/util": "3.0.0-beta.1",
-        "@node-red/nodes": "3.0.0-beta.1",
+        "@node-red/editor-api": "3.0.0-beta.2",
+        "@node-red/runtime": "3.0.0-beta.2",
+        "@node-red/util": "3.0.0-beta.2",
+        "@node-red/nodes": "3.0.0-beta.2",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
         "express": "4.18.1",