mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Allow keyboard shortcuts to be scoped to a dom element
This gets rid of the need to enable/disable the keyboard handling at various times. Allows Ctrl-C to work as expected when selecting text in debug/info sidebar. Downside is shortcuts that apply to the workspace (select-all, copy etc) now require the workspace to be focussed.
This commit is contained in:
parent
8e6bba143a
commit
a9bfa4e79b
@ -211,7 +211,7 @@ var RED = (function() {
|
||||
|
||||
RED.deploy.init(RED.settings.theme("deployButton",null));
|
||||
|
||||
RED.keyboard.add(/* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace", /* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
|
||||
RED.comms.connect();
|
||||
|
||||
$("#main-container").show();
|
||||
|
@ -58,10 +58,8 @@ RED.clipboard = (function() {
|
||||
],
|
||||
open: function(e) {
|
||||
$(this).parent().find(".ui-dialog-titlebar-close").hide();
|
||||
RED.keyboard.disable();
|
||||
},
|
||||
close: function(e) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
});
|
||||
|
||||
@ -154,13 +152,13 @@ RED.clipboard = (function() {
|
||||
RED.menu.setDisabled("menu-item-export-library",false);
|
||||
}
|
||||
});
|
||||
RED.keyboard.add(/* e */ 69,{ctrl:true},function(){exportNodes();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* i */ 73,{ctrl:true},function(){importNodes();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace", /* e */ 69,{ctrl:true},function(){exportNodes();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace", /* i */ 73,{ctrl:true},function(){importNodes();d3.event.preventDefault();});
|
||||
|
||||
$('#chart').on("dragenter",function(event) {
|
||||
if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
|
||||
$("#dropTarget").css({display:'table'});
|
||||
RED.keyboard.add(/* ESCAPE */ 27,hideDropTarget);
|
||||
RED.keyboard.add("*", /* ESCAPE */ 27,hideDropTarget);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -639,7 +639,6 @@ RED.editor = (function() {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
}
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
RED.keyboard.disable();
|
||||
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
|
||||
dialogForm.html($("script[data-template-name='"+type+"']").html());
|
||||
var ns;
|
||||
@ -670,7 +669,6 @@ RED.editor = (function() {
|
||||
dialogForm.i18n();
|
||||
},
|
||||
close: function() {
|
||||
RED.keyboard.enable();
|
||||
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
|
||||
RED.view.state(RED.state.DEFAULT);
|
||||
}
|
||||
@ -759,8 +757,6 @@ RED.editor = (function() {
|
||||
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
|
||||
trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
|
||||
|
||||
RED.keyboard.disable();
|
||||
|
||||
var dialogForm = $('<form id="node-config-dialog-edit-form" class="form-horizontal"></form>').appendTo(trayBody);
|
||||
dialogForm.html($("script[data-template-name='"+type+"']").html());
|
||||
dialogForm.find('[data-i18n]').each(function() {
|
||||
@ -830,9 +826,6 @@ RED.editor = (function() {
|
||||
|
||||
},
|
||||
close: function() {
|
||||
if (RED.view.state() != RED.state.EDITING) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
RED.workspaces.refresh();
|
||||
editStack.pop();
|
||||
},
|
||||
@ -1174,7 +1167,6 @@ RED.editor = (function() {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
}
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
RED.keyboard.disable();
|
||||
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
|
||||
dialogForm.html($("script[data-template-name='subflow-template']").html());
|
||||
var ns = "node-red";
|
||||
@ -1218,8 +1210,6 @@ RED.editor = (function() {
|
||||
dialogForm.i18n();
|
||||
},
|
||||
close: function() {
|
||||
RED.keyboard.enable();
|
||||
|
||||
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
|
||||
RED.view.state(RED.state.DEFAULT);
|
||||
}
|
||||
|
@ -15,35 +15,47 @@
|
||||
**/
|
||||
RED.keyboard = (function() {
|
||||
|
||||
var active = true;
|
||||
var handlers = {};
|
||||
|
||||
function resolveKeyEvent(evt) {
|
||||
var slot = handlers;
|
||||
if (evt.ctrlKey || evt.metaKey) {
|
||||
slot = slot.ctrl;
|
||||
}
|
||||
if (slot && evt.shiftKey) {
|
||||
slot = slot.shift;
|
||||
}
|
||||
if (slot && evt.altKey) {
|
||||
slot = slot.alt;
|
||||
}
|
||||
if (slot && slot[evt.keyCode]) {
|
||||
var handler = slot[evt.keyCode];
|
||||
if (handler.scope && handler.scope !== "*") {
|
||||
var target = evt.target;
|
||||
while (target.nodeName !== 'BODY' && target.id !== handler.scope) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
if (target.nodeName === 'BODY') {
|
||||
handler = null;
|
||||
}
|
||||
}
|
||||
return handler;
|
||||
}
|
||||
}
|
||||
d3.select(window).on("keydown",function() {
|
||||
if (!active) { return; }
|
||||
var handler = handlers[d3.event.keyCode];
|
||||
var handler = resolveKeyEvent(d3.event);
|
||||
if (handler && handler.ondown) {
|
||||
if (!handler.modifiers ||
|
||||
((!handler.modifiers.shift || d3.event.shiftKey) &&
|
||||
(!handler.modifiers.ctrl || d3.event.ctrlKey || d3.event.metaKey) &&
|
||||
(!handler.modifiers.alt || d3.event.altKey) )) {
|
||||
handler.ondown();
|
||||
}
|
||||
});
|
||||
d3.select(window).on("keyup",function() {
|
||||
var handler = resolveKeyEvent(d3.event);
|
||||
if (handler && handler.onup) {
|
||||
handler.onup();
|
||||
}
|
||||
});
|
||||
|
||||
d3.select(window).on("keyup",function() {
|
||||
if (!active) { return; }
|
||||
var handler = handlers[d3.event.keyCode];
|
||||
if (handler && handler.onup) {
|
||||
if (!handler.modifiers ||
|
||||
((!handler.modifiers.shift || d3.event.shiftKey) &&
|
||||
(!handler.modifiers.ctrl || d3.event.ctrlKey || d3.event.metaKey) &&
|
||||
(!handler.modifiers.alt || d3.event.altKey) )) {
|
||||
handler.onup();
|
||||
}
|
||||
}
|
||||
});
|
||||
function addHandler(key,modifiers,ondown,onup) {
|
||||
function addHandler(scope,key,modifiers,ondown,onup) {
|
||||
var mod = modifiers;
|
||||
var cbdown = ondown;
|
||||
var cbup = onup;
|
||||
@ -52,12 +64,38 @@ RED.keyboard = (function() {
|
||||
cbdown = modifiers;
|
||||
cbup = ondown;
|
||||
}
|
||||
handlers[key] = {modifiers:mod, ondown:cbdown, onup:cbup};
|
||||
var slot = handlers;
|
||||
if (mod.ctrl) {
|
||||
slot.ctrl = slot.ctrl||{};
|
||||
slot = slot.ctrl;
|
||||
}
|
||||
function removeHandler(key) {
|
||||
delete handlers[key];
|
||||
if (mod.shift) {
|
||||
slot.shift = slot.shift||{};
|
||||
slot = slot.shift;
|
||||
}
|
||||
if (mod.alt) {
|
||||
slot.alt = slot.alt||{};
|
||||
slot = slot.alt;
|
||||
}
|
||||
slot[key] = {scope: scope, ondown:cbdown, onup:cbup};
|
||||
}
|
||||
|
||||
function removeHandler(key,modifiers) {
|
||||
var mod = modifiers || {};
|
||||
var slot = handlers;
|
||||
if (mod.ctrl) {
|
||||
slot = slot.ctrl;
|
||||
}
|
||||
if (slot && mod.shift) {
|
||||
slot = slot.shift;
|
||||
}
|
||||
if (slot && mod.alt) {
|
||||
slot = slot.alt;
|
||||
}
|
||||
if (slot) {
|
||||
delete slot[key];
|
||||
}
|
||||
}
|
||||
|
||||
var dialog = null;
|
||||
|
||||
@ -96,13 +134,7 @@ RED.keyboard = (function() {
|
||||
autoOpen: false,
|
||||
width: "800",
|
||||
title:"Keyboard shortcuts",
|
||||
resizable: false,
|
||||
open: function() {
|
||||
RED.keyboard.disable();
|
||||
},
|
||||
close: function() {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
resizable: false
|
||||
});
|
||||
}
|
||||
|
||||
@ -112,9 +144,6 @@ RED.keyboard = (function() {
|
||||
return {
|
||||
add: addHandler,
|
||||
remove: removeHandler,
|
||||
disable: function(){ active = false;},
|
||||
enable: function(){ active = true; },
|
||||
|
||||
showHelp: showKeyboardHelp
|
||||
}
|
||||
|
||||
|
@ -472,10 +472,8 @@ RED.library = (function() {
|
||||
],
|
||||
open: function(e) {
|
||||
$(this).parent().find(".ui-dialog-titlebar-close").hide();
|
||||
RED.keyboard.disable();
|
||||
},
|
||||
close: function(e) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
});
|
||||
exportToLibraryDialog.children(".dialog-form").append($(
|
||||
|
@ -404,13 +404,6 @@ RED.palette = (function() {
|
||||
});
|
||||
}
|
||||
|
||||
$("#palette-search-input").focus(function(e) {
|
||||
RED.keyboard.disable();
|
||||
});
|
||||
$("#palette-search-input").blur(function(e) {
|
||||
RED.keyboard.enable();
|
||||
});
|
||||
|
||||
$("#palette-search-clear").on("click",function(e) {
|
||||
e.preventDefault();
|
||||
$("#palette-search-input").val("");
|
||||
|
@ -196,7 +196,7 @@ RED.sidebar = (function() {
|
||||
}
|
||||
|
||||
function init () {
|
||||
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();});
|
||||
RED.keyboard.add("*",/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();});
|
||||
showSidebar();
|
||||
RED.sidebar.info.init();
|
||||
RED.sidebar.config.init();
|
||||
|
@ -436,13 +436,26 @@ RED.view = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
RED.keyboard.add(/* z */ 90,{ctrl:true},function(){RED.history.pop();});
|
||||
RED.keyboard.add(/* a */ 65,{ctrl:true},function(){selectAll();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* = */ 187,{ctrl:true},function(){zoomIn();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* - */ 189,{ctrl:true},function(){zoomOut();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* 0 */ 48,{ctrl:true},function(){zoomZero();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* v */ 86,{ctrl:true},function(){importNodes(clipboard);d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace",/* backspace */ 8,function(){deleteSelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace",/* delete */ 46,function(){deleteSelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace",/* c */ 67,{ctrl:true},function(){copySelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace",/* x */ 88,{ctrl:true},function(){copySelection();deleteSelection();d3.event.preventDefault();});
|
||||
|
||||
RED.keyboard.add("workspace",/* z */ 90,{ctrl:true},function(){RED.history.pop();});
|
||||
RED.keyboard.add("workspace",/* a */ 65,{ctrl:true},function(){selectAll();d3.event.preventDefault();});
|
||||
RED.keyboard.add("*",/* = */ 187,{ctrl:true},function(){zoomIn();d3.event.preventDefault();});
|
||||
RED.keyboard.add("*",/* - */ 189,{ctrl:true},function(){zoomOut();d3.event.preventDefault();});
|
||||
RED.keyboard.add("*",/* 0 */ 48,{ctrl:true},function(){zoomZero();d3.event.preventDefault();});
|
||||
RED.keyboard.add("workspace",/* v */ 86,{ctrl:true},function(){importNodes(clipboard);d3.event.preventDefault();});
|
||||
|
||||
RED.keyboard.add("workspace",/* up */ 38, function() { moveSelection(0,-1);d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* up */ 38, {shift:true}, function() { moveSelection(0,-20); d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* down */ 40, function() { moveSelection(0,1);d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* down */ 40, {shift:true}, function() { moveSelection(0,20); d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* left */ 37, function() { moveSelection(-1,0);d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* left */ 37, {shift:true}, function() { moveSelection(-20,0); d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* right */ 39, function() { moveSelection(1,0);d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add("workspace",/* right */ 39, {shift:true}, function() { moveSelection(20,0); d3.event.preventDefault();},endKeyboardMove);
|
||||
}
|
||||
|
||||
function canvasMouseDown() {
|
||||
@ -868,29 +881,6 @@ RED.view = (function() {
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
if (moving_set.length === 0 && selected_link == null) {
|
||||
RED.keyboard.remove(/* backspace */ 8);
|
||||
RED.keyboard.remove(/* delete */ 46);
|
||||
RED.keyboard.remove(/* c */ 67);
|
||||
RED.keyboard.remove(/* x */ 88);
|
||||
} else {
|
||||
RED.keyboard.add(/* backspace */ 8,function(){deleteSelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* delete */ 46,function(){deleteSelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* c */ 67,{ctrl:true},function(){copySelection();d3.event.preventDefault();});
|
||||
RED.keyboard.add(/* x */ 88,{ctrl:true},function(){copySelection();deleteSelection();d3.event.preventDefault();});
|
||||
}
|
||||
if (moving_set.length === 0) {
|
||||
RED.keyboard.remove(/* up */ 38);
|
||||
RED.keyboard.remove(/* down */ 40);
|
||||
RED.keyboard.remove(/* left */ 37);
|
||||
RED.keyboard.remove(/* right*/ 39);
|
||||
} else {
|
||||
RED.keyboard.add(/* up */ 38, function() { if(d3.event.shiftKey){moveSelection( 0,-20)}else{moveSelection( 0,-1);}d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add(/* down */ 40, function() { if(d3.event.shiftKey){moveSelection( 0, 20)}else{moveSelection( 0, 1);}d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add(/* left */ 37, function() { if(d3.event.shiftKey){moveSelection(-20, 0)}else{moveSelection(-1, 0);}d3.event.preventDefault();},endKeyboardMove);
|
||||
RED.keyboard.add(/* right*/ 39, function() { if(d3.event.shiftKey){moveSelection( 20, 0)}else{moveSelection( 1, 0);}d3.event.preventDefault();},endKeyboardMove);
|
||||
}
|
||||
|
||||
var selection = {};
|
||||
|
||||
if (moving_set.length > 0) {
|
||||
@ -903,6 +893,7 @@ RED.view = (function() {
|
||||
}
|
||||
|
||||
function endKeyboardMove() {
|
||||
if (moving_set.length > 0) {
|
||||
var ns = [];
|
||||
for (var i=0;i<moving_set.length;i++) {
|
||||
ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy});
|
||||
@ -912,7 +903,9 @@ RED.view = (function() {
|
||||
RED.history.push({t:'move',nodes:ns,dirty:RED.nodes.dirty()});
|
||||
RED.nodes.dirty(true);
|
||||
}
|
||||
}
|
||||
function moveSelection(dx,dy) {
|
||||
if (moving_set.length > 0) {
|
||||
var minX = 0;
|
||||
var minY = 0;
|
||||
var node;
|
||||
@ -940,7 +933,9 @@ RED.view = (function() {
|
||||
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
function deleteSelection() {
|
||||
if (moving_set.length > 0 || selected_link != null) {
|
||||
var result;
|
||||
var removedNodes = [];
|
||||
var removedLinks = [];
|
||||
@ -1016,6 +1011,7 @@ RED.view = (function() {
|
||||
updateSelection();
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
|
||||
function copySelection() {
|
||||
if (moving_set.length > 0) {
|
||||
@ -2027,7 +2023,7 @@ RED.view = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
RED.keyboard.add(/* ESCAPE */ 27,function(){
|
||||
RED.keyboard.add("*",/* ESCAPE */ 27,function(){
|
||||
RED.keyboard.remove(/* ESCAPE */ 27);
|
||||
clearSelection();
|
||||
RED.history.pop();
|
||||
|
@ -162,10 +162,8 @@ RED.workspaces = (function() {
|
||||
|
||||
],
|
||||
open: function(e) {
|
||||
RED.keyboard.disable();
|
||||
},
|
||||
close: function(e) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
});
|
||||
$( "#node-dialog-delete-workspace" ).dialog({
|
||||
@ -190,10 +188,8 @@ RED.workspaces = (function() {
|
||||
}
|
||||
],
|
||||
open: function(e) {
|
||||
RED.keyboard.disable();
|
||||
},
|
||||
close: function(e) {
|
||||
RED.keyboard.enable();
|
||||
}
|
||||
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user