Add shift-cursor handling for moving quick-add dialog

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 = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
-        searchInput = $('<input type="text" id="red-ui-type-search-input" autofocus>').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
+        searchInput = $('<input type="text" id="red-ui-type-search-input">').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 = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
+                var div = $('<div>',{class:"red-ui-search-result"}).appendTo(container);
 
                 var nodeDiv = $('<div>',{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) {

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) {