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 48c3d01ae..d41a6a426 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 @@ -13,6 +13,7 @@ RED.typeSearch = (function() { var activeFilter = ""; var addCallback; var cancelCallback; + var moveCallback; var typesUsed = {}; @@ -44,10 +45,18 @@ RED.typeSearch = (function() { } } + function moveDialog(dx,dy) { + var pos = dialog.position(); + pos.top = (pos.top + dy)+"px"; + pos.left = (pos.left + dx)+"px"; + dialog.css(pos); + moveCallback(dx,dy); + + } function createDialog() { dialog = $("
",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
",{class:"red-ui-search-container"}).appendTo(dialog); - searchInput = $('').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ + searchInput = $('').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ delay: 50, change: function() { search($(this).val()); @@ -55,7 +64,19 @@ RED.typeSearch = (function() { }); searchInput.on('keydown',function(evt) { var children = searchResults.children(":visible"); - if (children.length > 0) { + if (evt.keyCode === 40 && evt.shiftKey) { + evt.preventDefault(); + moveDialog(0,10); + } else if (evt.keyCode === 38 && evt.shiftKey) { + evt.preventDefault(); + moveDialog(0,-10); + } else if (evt.keyCode === 39 && evt.shiftKey) { + evt.preventDefault(); + moveDialog(10,0); + } else if (evt.keyCode === 37 && evt.shiftKey) { + evt.preventDefault(); + moveDialog(-10,0); + } else if (children.length > 0) { if (evt.keyCode === 40) { // Down if (selected < children.length-1) { @@ -68,7 +89,6 @@ RED.typeSearch = (function() { ensureSelectedIsVisible(); evt.preventDefault(); } else if (evt.keyCode === 38) { - // Up if (selected > 0) { if (selected < children.length) { $(children[selected]).removeClass('selected'); @@ -79,6 +99,7 @@ RED.typeSearch = (function() { ensureSelectedIsVisible(); evt.preventDefault(); } else if ((evt.metaKey || evt.ctrlKey) && evt.keyCode === 13 ) { + evt.preventDefault(); // (ctrl or cmd) and enter var index = Math.max(0,selected); if (index < children.length) { @@ -90,8 +111,12 @@ RED.typeSearch = (function() { addCallback(n.type,true); } $("#red-ui-type-search-input").val("").trigger("keyup"); + setTimeout(function() { + $("#red-ui-type-search-input").focus(); + },100); } } else if (evt.keyCode === 13) { + evt.preventDefault(); // Enter var index = Math.max(0,selected); if (index < children.length) { @@ -99,6 +124,12 @@ RED.typeSearch = (function() { confirm($(children[index]).find(".red-ui-editableList-item-content").data('data')); } } + } else { + if (evt.keyCode === 13 ) { + // Stop losing focus if [Cmd]-Enter is pressed on an empty list + evt.stopPropagation(); + evt.preventDefault(); + } } }); @@ -137,7 +168,7 @@ RED.typeSearch = (function() { if (object.separator) { container.addClass("red-ui-search-result-separator") } - var div = $('',{href:'#',class:"red-ui-search-result"}).appendTo(container); + var div = $('
',{class:"red-ui-search-result"}).appendTo(container); var nodeDiv = $('
',{class:"red-ui-search-result-node"}).appendTo(div); var colour = RED.utils.getNodeColor(object.type,def); @@ -219,6 +250,7 @@ RED.typeSearch = (function() { refreshTypeList(opts); addCallback = opts.add; cancelCallback = opts.cancel; + moveCallback = opts.move; RED.events.emit("type-search:open"); //shade.show(); if ($("#red-ui-main-container").height() - opts.y - 150 < 0) { 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 d3d18bdb4..d959466e8 100755 --- 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 @@ -773,6 +773,15 @@ RED.view = (function() { 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]), filter: filter, + move: function(dx,dy) { + if (ghostNode) { + var pos = d3.transform(ghostNode.attr("transform")).translate; + ghostNode.attr("transform","translate("+(pos[0]+dx)+","+(pos[1]+dy)+")") + point[0] += dx; + point[1] += dy; + rebuildQuickAddLink(); + } + }, cancel: function() { if (quickAddLink) { if (quickAddLink.el) {