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 {