client: graph_view: handle zoom correctly for bubble effect

2 files changed, 39 insertions, 14 deletions

diff --git a/src/client/rz_core.js b/src/client/rz_core.js
index bc2b6eb0..00cfe535 100644
--- a/src/client/rz_core.js
+++ b/src/client/rz_core.js
@@ -24,9 +24,15 @@ var zoomBus = new Bacon.Bus();
 var zoom_property = zoomBus.toProperty(zoomProgress);
 var svgInput;
 
+function updateZoomProgress(val)
+{
+    zoomProgress = val;
+    zoomBus.push(val);
+}
+
 function svg_click_handler(e) {
     if (zoomProgress) {
-        zoomProgress = false;
+        updateZoomProgress(false);
         return;
     }
     if (e.originalEvent.target.nodeName != 'svg') {
@@ -48,9 +54,9 @@ edit_graph = new model_graph.Graph({temporary: true, base: main_graph});
 var initDrawingArea = function () {
 
     function zoom() {
-        zoomProgress = true;
         zoom_g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
         d3.event.sourceEvent.stopPropagation();
+        updateZoomProgress(true);
     }
 
     // TODO: we are listening both on graph.diffBus and selection.selectionChangedBus,
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index d723188b..ed579432 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -154,10 +154,6 @@ function GraphView(spec) {
     }
 
 
-    zoom_property.onValue(function (val) {
-        zoomInProgress = val;
-    });
-
     // Filter. FIXME: move away from here. separate element, connected via bacon property
     if (!temporary) {
         read_checkboxes();
@@ -640,26 +636,44 @@ function GraphView(spec) {
      * @return {x:new_x, y:new_y}
      */
     function apply_node_zoom_obj(d) {
-        var zoom_translate = d.zoom_obj.translate(),
+        return apply_zoom_obj(d.bx, d.by, d.zoom_obj);
+    }
+
+    function apply_zoom_obj(x, y, zoom_obj) {
+        var zoom_translate = zoom_obj.translate(),
+            zx = zoom_translate[0],
+            zy = zoom_translate[1],
+            s = zoom_obj.scale();
+
+        return [x * s + zx, y * s + zy];
+    }
+
+    function apply_reverse_zoom_obj(x, y, zoom_obj) {
+        var zoom_translate = zoom_obj.translate(),
             zx = zoom_translate[0],
             zy = zoom_translate[1],
-            s = d.zoom_obj.scale();
+            s = zoom_obj.scale();
 
-        return [d.bx * s + zx, d.by * s + zy];
+        return [(x - zx) / s, (y - zy) / s];
     }
 
     function bubble_transform(d, bubble_radius) {
         if (bubble_radius == 0) {
             return d;
         }
-        var dx = d.x - cx,
-            dy = d.y - cy,
+        var zoom_center_point = apply_reverse_zoom_obj(cx, cy, zoom_obj),
+            zcx = zoom_center_point[0],
+            zcy = zoom_center_point[1],
+            dx = d.x - zcx,
+            dy = d.y - zcy,
             r = Math.sqrt(dx * dx + dy * dy),
             a = Math.atan2(dy, dx),
-            new_r = r > bubble_radius * 2 ? r : r / 2 + bubble_radius;
+            scale = zoom_obj.scale(),
+            scaled_bubble_radius = bubble_radius / scale;
+            new_r = r > scaled_bubble_radius * 2 ? r : r / 2 + scaled_bubble_radius;
         // FIXME: r == 0 (or close enough)
-        return {x: cx + new_r * Math.cos(a),
-                y: cy + new_r * Math.sin(a)};
+        return {x: zcx + new_r * Math.cos(a),
+                y: zcy + new_r * Math.sin(a)};
     }
 
     function tick(e) {
@@ -770,6 +784,11 @@ function GraphView(spec) {
     if (force_enabled) {
         init_force_layout();
     }
+
+    zoom_property.onValue(function (val) {
+        zoomInProgress = val;
+        tick();
+    });
     return gv;
 }