frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add shift-cursor handling for moving quick-add dialog

Browse Source
This commit is contained in:
Nick O'Leary
2019-06-06 17:17:44 +01:00
parent 457ec86c25
commit 7d27df1b97
2 changed files with 45 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js vendored
View File

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

9
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

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