From fb1918d8394017aed5c902396f398e6c1a9cd7bd Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 22 Nov 2019 22:09:09 +0000
Subject: [PATCH] Update quick-add dialog handling for vertical flow

---
 .../editor-client/src/js/ui/typeSearch.js     | 12 ++++-
 .../@node-red/editor-client/src/js/ui/view.js | 53 ++++++++++++-------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
index d41a6a426..b5901acab 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
@@ -384,7 +384,17 @@ RED.typeSearch = (function() {
 
     return {
         show: show,
-        refresh: refreshTypeList,
+        refresh: function(opts) {
+            if (opts.x && opts.y) {
+                if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
+                    opts.y = opts.y - 235;
+                }
+                dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
+            }
+            if (opts.filter) {
+                refreshTypeList(opts);
+            }
+        },
         hide: hide
     };
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index c227fe856..51b4f7f8d 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -842,7 +842,7 @@ RED.view = (function() {
             }
             var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1;
             if (vertical) {
-                quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX,quickAddLink.node.y+sc*quickAddLink.node.h/2,point[0]-sc*node_width/2,point[1],sc));
+                quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX,  quickAddLink.node.y+sc*quickAddLink.node.h/2,point[0],point[1]-(node_height/2),sc));
             }else{
                 quickAddLink.el.attr("d",generateLinkPath(quickAddLink.node.x+sc*quickAddLink.node.w/2,quickAddLink.node.y+portY,point[0]-sc*node_width/2,point[1],sc));
             }
@@ -852,12 +852,14 @@ RED.view = (function() {
         }
 
 
-        var lastAddedX;
+        var lastAddedPos;
         var lastAddedWidth;
 
+        var tsX = d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]);
+        var tsY = d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]);
         RED.typeSearch.show({
-            x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
-            y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
+            x:tsX,
+            y:tsY,
             filter: filter,
             move: function(dx,dy) {
                 if (ghostNode) {
@@ -1033,31 +1035,46 @@ RED.view = (function() {
                 updateActiveNodes();
                 updateSelection();
                 redraw();
-                // At this point the newly added node will have a real width,
-                // so check if the position needs nudging
-                if (lastAddedX !== undefined) {
-                    var lastNodeRHEdge = lastAddedX + lastAddedWidth/2;
-                    var thisNodeLHEdge = nn.x - nn.w/2;
-                    var gap = thisNodeLHEdge - lastNodeRHEdge;
-                    if (gap != gridSize *2) {
-                        nn.x = nn.x + gridSize * 2 - gap;
-                        nn.dirty = true;
-                        nn.x = Math.ceil(nn.x / gridSize) * gridSize;
-                        redraw();
+                if (!vertical) {
+                    // At this point the newly added node will have a real width,
+                    // so check if the position needs nudging
+                    if (lastAddedPos !== undefined) {
+                        var lastNodeRHEdge = lastAddedPos + lastAddedWidth/2;
+                        var thisNodeLHEdge = nn.x - nn.w/2;
+                        var gap = thisNodeLHEdge - lastNodeRHEdge;
+                        if (gap != gridSize *2) {
+                            nn.x = nn.x + gridSize * 2 - gap;
+                            nn.dirty = true;
+                            nn.x = Math.ceil(nn.x / gridSize) * gridSize;
+                            redraw();
+                        }
                     }
                 }
                 if (keepAdding) {
-                    if (lastAddedX === undefined) {
+                    if (lastAddedPos === undefined) {
                         // ghostLink.attr("opacity",1);
                         setTimeout(function() {
                             RED.typeSearch.refresh({filter:{input:true}});
                         },100);
                     }
 
-                    lastAddedX = nn.x;
+                    if (vertical) {
+                        lastAddedPos = nn.y;
+                        if ($("#red-ui-main-container").height()-150 < tsY) {
+                            var delta = tsY - ($("#red-ui-main-container").height()-150);
+                            var st = $("#red-ui-workspace-chart").scrollTop();
+                            $("#red-ui-workspace-chart").scrollTop(st+delta);
+                            tsY -= delta;
+                        }
+                        point[1] = nn.y + nn.h + node_height+gridSize;
+                        tsY += nn.h + node_height+gridSize;
+                        RED.typeSearch.refresh({x:tsX,y:tsY});
+                    } else {
+                        lastAddedPos = nn.x;
+                        point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
+                    }
                     lastAddedWidth = nn.w;
 
-                    point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
                     ghostNode.attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
                     rebuildQuickAddLink();
                 } else {