frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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:
Nick O'Leary 2016-05-08 22:50:55 +01:00
parent 8e6bba143a
commit a9bfa4e79b
9 changed files with 208 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editor/js/main.js
View File

@ -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();

8
editor/js/ui/clipboard.js
View File

@ -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);
}
});

10
editor/js/ui/editor.js
View File

@ -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);
}

111
editor/js/ui/keyboard.js
View File

@ -15,35 +15,47 @@
**/
RED.keyboard = (function() {
var active = true;
var handlers = {};
d3.select(window).on("keydown",function() {
if (!active) { return; }
var handler = handlers[d3.event.keyCode];
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();
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() {
var handler = resolveKeyEvent(d3.event);
if (handler && handler.ondown) {
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,15 +64,41 @@ 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;
}
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) {
delete handlers[key];
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;
function showKeyboardHelp() {
if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
return;
@ -96,25 +134,16 @@ RED.keyboard = (function() {
autoOpen: false,
width: "800",
title:"Keyboard shortcuts",
resizable: false,
open: function() {
RED.keyboard.disable();
},
close: function() {
RED.keyboard.enable();
}
resizable: false
});
}
dialog.dialog("open");
}
return {
add: addHandler,
remove: removeHandler,
disable: function(){ active = false;},
enable: function(){ active = true; },
showHelp: showKeyboardHelp
}

2
editor/js/ui/library.js
View File

@ -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($(

7
editor/js/ui/palette.js
View File

@ -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("");

4
editor/js/ui/sidebar.js
View File

@ -102,7 +102,7 @@ RED.sidebar = (function() {
sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartWidth = $("#workspace").width();
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 7;
@ -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();

268
editor/js/ui/view.js
View File

@ -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,118 +893,124 @@ RED.view = (function() {
}
function endKeyboardMove() {
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});
delete moving_set[i].ox;
delete moving_set[i].oy;
}
RED.history.push({t:'move',nodes:ns,dirty:RED.nodes.dirty()});
RED.nodes.dirty(true);
}
function moveSelection(dx,dy) {
var minX = 0;
var minY = 0;
var node;
for (var i=0;i<moving_set.length;i++) {
node = moving_set[i];
if (node.ox == null && node.oy == null) {
node.ox = node.n.x;
node.oy = node.n.y;
}
node.n.x += dx;
node.n.y += dy;
node.n.dirty = true;
minX = Math.min(node.n.x-node.n.w/2-5,minX);
minY = Math.min(node.n.y-node.n.h/2-5,minY);
}
if (minX !== 0 || minY !== 0) {
for (var n = 0; n<moving_set.length; n++) {
node = moving_set[n];
node.n.x -= minX;
node.n.y -= minY;
}
}
redraw();
}
function deleteSelection() {
var result;
var removedNodes = [];
var removedLinks = [];
var removedSubflowOutputs = [];
var removedSubflowInputs = [];
var subflowInstances = [];
var startDirty = RED.nodes.dirty();
var startChanged = false;
if (moving_set.length > 0) {
var ns = [];
for (var i=0;i<moving_set.length;i++) {
var node = moving_set[i].n;
node.selected = false;
if (node.type != "subflow") {
if (node.x < 0) {
node.x = 25
}
var removedEntities = RED.nodes.remove(node.id);
removedNodes.push(node);
removedNodes = removedNodes.concat(removedEntities.nodes);
removedLinks = removedLinks.concat(removedEntities.links);
} else {
if (node.direction === "out") {
removedSubflowOutputs.push(node);
} else if (node.direction === "in") {
removedSubflowInputs.push(node);
}
node.dirty = true;
}
ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy});
delete moving_set[i].ox;
delete moving_set[i].oy;
}
if (removedSubflowOutputs.length > 0) {
result = RED.subflow.removeOutput(removedSubflowOutputs);
if (result) {
removedLinks = removedLinks.concat(result.links);
}
}
// Assume 0/1 inputs
if (removedSubflowInputs.length == 1) {
result = RED.subflow.removeInput();
if (result) {
removedLinks = removedLinks.concat(result.links);
}
}
var instances = RED.subflow.refresh(true);
if (instances) {
subflowInstances = instances.instances;
}
moving_set = [];
if (removedNodes.length > 0 || removedSubflowOutputs.length > 0 || removedSubflowInputs.length > 0) {
RED.nodes.dirty(true);
}
}
if (selected_link) {
RED.nodes.removeLink(selected_link);
removedLinks.push(selected_link);
RED.history.push({t:'move',nodes:ns,dirty:RED.nodes.dirty()});
RED.nodes.dirty(true);
}
var historyEvent = {
t:'delete',
nodes:removedNodes,
links:removedLinks,
subflowOutputs:removedSubflowOutputs,
subflowInputs:removedSubflowInputs,
subflow: {
instances: subflowInstances
},
dirty:startDirty
};
RED.history.push(historyEvent);
}
function moveSelection(dx,dy) {
if (moving_set.length > 0) {
var minX = 0;
var minY = 0;
var node;
selected_link = null;
updateActiveNodes();
updateSelection();
redraw();
for (var i=0;i<moving_set.length;i++) {
node = moving_set[i];
if (node.ox == null && node.oy == null) {
node.ox = node.n.x;
node.oy = node.n.y;
}
node.n.x += dx;
node.n.y += dy;
node.n.dirty = true;
minX = Math.min(node.n.x-node.n.w/2-5,minX);
minY = Math.min(node.n.y-node.n.h/2-5,minY);
}
if (minX !== 0 || minY !== 0) {
for (var n = 0; n<moving_set.length; n++) {
node = moving_set[n];
node.n.x -= minX;
node.n.y -= minY;
}
}
redraw();
}
}
function deleteSelection() {
if (moving_set.length > 0 || selected_link != null) {
var result;
var removedNodes = [];
var removedLinks = [];
var removedSubflowOutputs = [];
var removedSubflowInputs = [];
var subflowInstances = [];
var startDirty = RED.nodes.dirty();
var startChanged = false;
if (moving_set.length > 0) {
for (var i=0;i<moving_set.length;i++) {
var node = moving_set[i].n;
node.selected = false;
if (node.type != "subflow") {
if (node.x < 0) {
node.x = 25
}
var removedEntities = RED.nodes.remove(node.id);
removedNodes.push(node);
removedNodes = removedNodes.concat(removedEntities.nodes);
removedLinks = removedLinks.concat(removedEntities.links);
} else {
if (node.direction === "out") {
removedSubflowOutputs.push(node);
} else if (node.direction === "in") {
removedSubflowInputs.push(node);
}
node.dirty = true;
}
}
if (removedSubflowOutputs.length > 0) {
result = RED.subflow.removeOutput(removedSubflowOutputs);
if (result) {
removedLinks = removedLinks.concat(result.links);
}
}
// Assume 0/1 inputs
if (removedSubflowInputs.length == 1) {
result = RED.subflow.removeInput();
if (result) {
removedLinks = removedLinks.concat(result.links);
}
}
var instances = RED.subflow.refresh(true);
if (instances) {
subflowInstances = instances.instances;
}
moving_set = [];
if (removedNodes.length > 0 || removedSubflowOutputs.length > 0 || removedSubflowInputs.length > 0) {
RED.nodes.dirty(true);
}
}
if (selected_link) {
RED.nodes.removeLink(selected_link);
removedLinks.push(selected_link);
RED.nodes.dirty(true);
}
var historyEvent = {
t:'delete',
nodes:removedNodes,
links:removedLinks,
subflowOutputs:removedSubflowOutputs,
subflowInputs:removedSubflowInputs,
subflow: {
instances: subflowInstances
},
dirty:startDirty
};
RED.history.push(historyEvent);
selected_link = null;
updateActiveNodes();
updateSelection();
redraw();
}
}
function copySelection() {
@ -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();

4
editor/js/ui/workspaces.js
View File

@ -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();
}
});