client: graph_view: make nodes tabindex'able sorted top to bottom left to right

2 files changed, 10 insertions, 3 deletions

diff --git a/res/templates/index.html b/res/templates/index.html
index 6fb3aed0..0654dd67 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -68,12 +68,12 @@ var rz_config = { // set as a global variable
     </div>
     <div id="input-box-set-container">
       <div class="input-container" id="input-container__search">
-          <input class="input-bar" id="search" placeholder="Search for nodes or links"/>
+          <input class="input-bar" tabindex="1" id="search" placeholder="Search for nodes or links"/>
           <button tabindex="-1" id="btn_search"></button>
         <div id="search-suggestion" class="suggestion" style="display: none"></div>
       </div>
       <div class="input-container" id="input-container__graph-input">
-          <div contentEditable="true" class="input input-bar" id="textanalyser" placeholder="Add nodes or links" autofocus ></div>
+          <div contentEditable="true" tabindex="2" class="input input-bar" id="textanalyser" placeholder="Add nodes or links" autofocus ></div>
           <button tabindex="-1" id="btn_add"></button>
         <div id="input-suggestion" class="suggestion" style="display: none"></div>
       </div>
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index d4cfb145..68891e5c 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -366,7 +366,6 @@ function GraphView(spec) {
             .append("g")
             .attr('id', function(d){ return d.id; }) // append node id to enable data->visual mapping
             .attr('visibility', 'hidden') // made visible on first tick
-            .attr('tabindex', 0)
             .call(drag);
 
         node.attr('class', function(d) {
@@ -375,6 +374,7 @@ function GraphView(spec) {
             .each(function (d) {
                 d.zoom_obj = zoom_obj; // FIXME new object NodeView pointing to Node and Zoom
             });
+
         // reorder nodes so selected are last, and so rendered last, and so on top.
         // FIXME: with b-ubble removed this is probably broken. actually also before. links are not correctly ordered.
         (function () {
@@ -853,6 +853,13 @@ function GraphView(spec) {
             return "translate(" + (src[0] + dst[0]) / 2 + "," + (src[1] + dst[1]) / 2 + ")";
         });
 
+        // tabindex affects focus change on tab key.
+        // Sort top to bottom left to right
+        node.sort(function (a, b) {
+                return b.py == a.py ? (b.px == a.px ? 0 : (b.px > a.px ? -1 : 1)) : (b.py > a.py ? -1 : 1);
+            })
+            .attr('tabindex', function(d, i) { return i + 100; });
+
         // After initial placement we can make the nodes visible.
         node.attr('visibility', function (d, i) {
                  return node__is_shown(d) ? 'visible' : 'hidden';