client/graph_view: zen_mode zooming and layouting change

on zen mode entry:
- start layout
- automatic centering mode: every tick adjust the scale and translation
  to fit the visible nodes

if user drags or wheels out
  cancel automatic centering mode
  (layout keeps updating regardless)

implementation details: additional state 'zen_mode__auto_center' and
additional handlers for wheel and mousedown. Better to have a single
flow in the future:

{mouse wheel event, mouse down event) -> update zen_mode__auto_center (or have implicit
state via bacon) -> d3 zoom behavior

1 files changed, 27 insertions, 1 deletions

diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index 6e09f742..f8482d60 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -178,7 +178,10 @@ function GraphView(spec) {
         vis,
         deliverables,
         filter_states,
+
         zen_mode = false,
+        zen_mode__auto_center = false,
+
         // FIXME - want to use parent_element
         w,
         h,
@@ -331,6 +334,13 @@ function GraphView(spec) {
         ).skip(1).onValue(transformOnSelection);
     }
 
+    selection.selectionChangedBus.onValue(function () {
+        if (zen_mode) {
+            zen_mode__auto_center = true;
+            layout__reset(1.0);
+        }
+    });
+
     function showNodeInfo(node) {
         util.assert(!temporary, "cannot showNodeInfo on a temporary graph");
         item_info.show(graph, node)
@@ -1308,6 +1318,14 @@ function GraphView(spec) {
         });
     }
 
+    function layout__tick__callback()
+    {
+        if (zen_mode && zen_mode__auto_center) {
+            center_on_selection_related();
+        }
+        pushRedraw();
+    }
+
     function layout__reset(alpha) {
         alpha = alpha | 0.1;
         layout.nodes_links(nodes__visible(), links__visible())
@@ -1326,7 +1344,7 @@ function GraphView(spec) {
         });
         layout = new_layout
             .size([w, h])
-            .on("tick", pushRedraw)
+            .on("tick", layout__tick__callback)
             .on("end", record_position_to_local_storage)
             .nodes_links(nodes__visible(), links__visible())
             .restore()
@@ -1352,6 +1370,13 @@ function GraphView(spec) {
         tick();
     });
 
+    function disable_zen_mode_auto_center() {
+        zen_mode__auto_center = false;
+    }
+    // [!] hack, should take control of these event listeners and feed them to the zoom behaviour
+    parent_element[0][0].parentElement.addEventListener('wheel', disable_zen_mode_auto_center);
+    parent_element[0][0].parentElement.addEventListener('mousedown', disable_zen_mode_auto_center);
+
     function center_on_selection_related() {
         nodes__user_visible(selection.related(), true, 100 /* ms, duration of animation */);
     }
@@ -1366,6 +1391,7 @@ function GraphView(spec) {
         layout.nodes_links(nodes__visible(), links__visible());
         layout.zen_mode(value);
         update_view(true);
+        zen_mode__auto_center = zen_mode;
     }
     gv.zen_mode__set = zen_mode__set;
     gv.zen_mode__toggle = function () {