client: graph_view: handle keyboard events when svg nodes are focused

enter to open edit, space and shift-space to select/append.

4 files changed, 61 insertions, 6 deletions

diff --git a/src/client/consts.js b/src/client/consts.js
index 1c426695..b20ce9ce 100644
--- a/src/client/consts.js
+++ b/src/client/consts.js
@@ -25,5 +25,7 @@ define(function() {
         VK_DOWN: 40,
         VK_ESCAPE: 27,
         VK_TAB: 9,
+        VK_SPACE: 32,
+        VK_ENTER: 13,
     };
 });
diff --git a/src/client/keyshortcuts.js b/src/client/keyshortcuts.js
index 92f4182b..4e85df2f 100644
--- a/src/client/keyshortcuts.js
+++ b/src/client/keyshortcuts.js
@@ -11,11 +11,23 @@ function get_rz_core()
     return rz_core;
 }
 
+function get_graph_view(element)
+{
+    var dict = get_rz_core().root_element_id_to_graph_view;
+
+    while (undefined !== element && null !== element && undefined === dict[element.id]) {
+        element = element.parentElement;
+    }
+    return element !== undefined && element !== null ? dict[element.id] : undefined;
+}
+
 function install() {
     document.body.onkeydown = function(e) {
         var key = ((e.key && String(e.key))
                    || (e.charCode && String.fromCharCode(e.charCode))
-                   || (e.which && String.fromCharCode(e.which))).toLowerCase();
+                   || (e.which && String.fromCharCode(e.which))).toLowerCase(),
+            handled = false,
+            graph_view = get_graph_view(e.target);
 
         if (e.altKey && e.ctrlKey && 'i' === key) {
             $('#textanalyser').focus();
@@ -25,12 +37,19 @@ function install() {
         }
         if (e.ctrlKey && 'a' === key && e.target === document.body) {
             selection.update(get_rz_core().main_graph.nodes(), false);
-            e.preventDefault();
-            e.stopPropagation();
+            handled = true;
         }
         if (e.ctrlKey && 'z' === key && e.target.nodeName !== 'INPUT') {
             // TODO: rz_core.main_graph.undo();
         }
+        // SVG elements cannot handle any keys directly - pass the key to them in this case
+        if (undefined !== graph_view) {
+            graph_view.keyboard_handler(e);
+        }
+        if (handled) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
     };
 }
 return {
diff --git a/src/client/rz_core.js b/src/client/rz_core.js
index ee67152a..826f04b5 100644
--- a/src/client/rz_core.js
+++ b/src/client/rz_core.js
@@ -13,7 +13,8 @@ var addednodes = [],
     main_graph,
     edit_graph,
     main_graph_view,
-    edit_graph_view;
+    edit_graph_view,
+    root_element_id_to_graph_view;
 
 // "CSS" for SVG elements. Reused for editing elements.
 var node_text_dx = 15,
@@ -222,9 +223,14 @@ function update_view__graph(relayout)
     edit_graph_view.update_view(relayout);
 }
 
+root_element_id_to_graph_view = {};
+root_element_id_to_graph_view[main_graph_view.root_element.id] =  main_graph_view;
+root_element_id_to_graph_view[edit_graph_view.root_element.id] = edit_graph_view;
+
 return {
     main_graph: main_graph,
     edit_graph: edit_graph,
+    root_element_id_to_graph_view: root_element_id_to_graph_view,
     main_graph_view: main_graph_view,
     edit_graph_view: edit_graph_view,
     load_from_json: function(result) {
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index 68891e5c..0016acda 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -25,9 +25,10 @@
  * which resulted in overly complex (read: undefined/buggy) code.
  */
 
-define(['d3', 'Bacon_wrapper', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble', 'model/types'],
-function(d3 ,  Bacon         ,  util ,  selection      ,  view_helpers,  model_diff  ,  view,        view_bubble,   model_types) {
+define(['d3', 'Bacon_wrapper', 'consts', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble', 'model/types'],
+function(d3 ,  Bacon         ,  consts,   util ,  selection      ,  view_helpers,  model_diff  ,  view,        view_bubble,   model_types) {
 
+// aliases
 var obj_take = util.obj_take;
 
 /* debugging helper */
@@ -791,6 +792,32 @@ function GraphView(spec) {
                 y: zcy + new_r * Math.sin(a)};
     }
 
+    function handle_space(e, node) {
+        (e.shiftKey? selection.invert : selection.update)([node]);
+    }
+
+    function handle_enter(e, node) {
+        showNodeInfo(node);
+    }
+
+    var keyboard_handlers = _.object([
+        [consts.VK_SPACE, handle_space],
+        [consts.VK_ENTER, handle_enter],
+    ]);
+
+    function keyboard_handler(e) {
+        var target_node = graph.find_node__by_id(e.target.id);
+
+        if (null === target_node ||
+            undefined === keyboard_handlers[e.keyCode]) {
+            return;
+        }
+        keyboard_handlers[e.keyCode](e, target_node);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    gv.keyboard_handler = keyboard_handler;
+
     /**
      * Recomputes all link and node locations according to force layout and
      * bubble animation.
@@ -875,6 +902,7 @@ function GraphView(spec) {
     vis.attr("id", graph_name);
     vis.append("g").attr("id", "link-group");
     vis.append("g").attr("id", "selected-link-group");
+    gv.root_element = vis[0][0];
 
     drag = d3.behavior.drag()
              .origin(function(d) { return d; })