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

1 files changed, 8 insertions, 1 deletions

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';