Use ctrl-click on wire to splice node in place

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

@@ -358,7 +358,7 @@ RED.view = (function() {
 
                 var spliceLink = $(ui.helper).data("splice");
                 if (spliceLink) {
-                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
+                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
                     RED.nodes.removeLink(spliceLink);
                     var link1 = {
                         source:spliceLink.source,
@@ -695,7 +695,29 @@ RED.view = (function() {
         }
         if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
             if (d3.event.metaKey || d3.event.ctrlKey) {
+                d3.event.stopPropagation();
+                showQuickAddDialog(d3.mouse(this));
+            }
+        }
+        if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
+            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();
+            }
+        }
+    }
+
+    function showQuickAddDialog(point,spliceLink) {
         var ox = point[0];
         var oy = point[1];
 
@@ -706,7 +728,6 @@ RED.view = (function() {
             // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue')
         }
 
-                d3.event.stopPropagation();
         var mainPos = $("#red-ui-main-container").position();
 
         if (mouse_mode !== RED.state.QUICK_JOINING) {
@@ -750,6 +771,8 @@ RED.view = (function() {
                 quickAddLink.virtualLink = true;
             }
             hideDragLines();
+        } else if (spliceLink) {
+            filter = {input:true, output:true}
         }
         var rebuildQuickAddLink = function() {
             if (!quickAddLink) {
@@ -818,6 +841,7 @@ RED.view = (function() {
                 if (showLabel !== undefined && !/^link (in|out)$/.test(nn._def.type) && !nn._def.defaults.hasOwnProperty("l")) {
                     nn.l = showLabel;
                 }
+                if (!spliceLink) {
                     if (quickAddLink) {
                         var drag_line = quickAddLink;
                         var src = null,dst,src_port;
@@ -920,7 +944,25 @@ RED.view = (function() {
                             }
                         }
                     }
-
+                } else {
+                    resetMouseVars();
+                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
+                    RED.nodes.removeLink(spliceLink);
+                    var link1 = {
+                        source:spliceLink.source,
+                        sourcePort:spliceLink.sourcePort,
+                        target: nn
+                    };
+                    var link2 = {
+                        source:nn,
+                        sourcePort:0,
+                        target: spliceLink.target
+                    };
+                    RED.nodes.addLink(link1);
+                    RED.nodes.addLink(link2);
+                    historyEvent.links = [link1,link2];
+                    historyEvent.removedLinks = [spliceLink];
+                }
                 RED.history.push(historyEvent);
                 RED.nodes.add(nn);
                 RED.editor.validateNode(nn);
@@ -970,24 +1012,6 @@ RED.view = (function() {
         updateSelection();
         redraw();
     }
-        }
-        if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
-            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();
-            }
-        }
-    }
 
     function canvasMouseMove() {
         var i;
@@ -3205,6 +3229,10 @@ RED.view = (function() {
                         redraw();
                         focusView();
                         d3.event.stopPropagation();
+                        if (d3.event.metaKey || d3.event.ctrlKey) {
+                            l.classed("red-ui-flow-link-splice",true);
+                            showQuickAddDialog(d3.mouse(this), selected_link);
+                        }
                     })
                     .on("touchstart",function(d) {
                         if (mouse_mode === RED.state.SELECTING_NODE) {