Return of the bubble. Fixes #253

2 files changed, 43 insertions, 12 deletions

diff --git a/src/client/view/bubble.js b/src/client/view/bubble.js
new file mode 100644
index 00000000..70dc5d09
--- /dev/null
+++ b/src/client/view/bubble.js
@@ -0,0 +1,28 @@
+define(["jquery", "Bacon"], function ($, Bacon) {
+function Bubble(raw_parent, radius) {
+    var xmlns = "http://www.w3.org/2000/svg";
+    var g = document.createElementNS(xmlns, 'g');
+    var circle = document.createElementNS(xmlns, 'circle');
+
+    var setTransformToCenter = function (elem) {
+        var width = $(document.body).innerWidth();
+        var height = $(document.body).innerHeight();
+
+        elem.setAttribute('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+    }
+
+    g.appendChild(circle);
+    raw_parent.appendChild(g);
+    setTransformToCenter(g);
+    circle.className.baseVal = 'circle bubble';
+    circle.id = 'bubble';
+
+    radius.onValue(function (r) {
+        setTransformToCenter(g);
+        circle.setAttribute("r", r);
+    })
+}
+return {
+    Bubble:Bubble
+}
+});
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index d191df90..f8180495 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -25,8 +25,8 @@
  * which resulted in overly complex (read: undefined/buggy) code.
  */
 
-define(['d3', 'Bacon', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view'],
-function(d3 ,  Bacon ,  util ,  selection      ,  view_helpers,  model_diff  ,  view) {
+define(['d3', 'Bacon', 'util', 'view/selection', 'view/helpers', 'model/diff', 'view/view', 'view/bubble'],
+function(d3 ,  Bacon ,  util ,  selection      ,  view_helpers,  model_diff  ,  view, view_bubble) {
 
 /* debugging helper */
 function enableDebugViewOfDiffs(graph)
@@ -126,16 +126,19 @@ function GraphView(spec) {
     //
     // Animation target is set by stream, and initialized if not already
     if (spec.bubble_property) {
-        spec.bubble_property
-            .skipDuplicates()
-            .onValue(function (r) {
-                var now = (new Date()).getTime();
-                gv.layout_animation.bubble_radius.target = r;
-                gv.layout_animation.bubble_radius.start = gv.bubble_radius;
-                gv.layout_animation.starttime = now;
-                gv.layout_animation.endtime = now + 300; // FIXME: use constant change?
-                start_layout_animation();
-            });
+        if (temporary) {
+            view_bubble.Bubble(parent_element[0][0], spec.bubble_property);
+        } else {
+            spec.bubble_property
+                .onValue(function (r) {
+                    var now = (new Date()).getTime();
+                    gv.layout_animation.bubble_radius.target = r;
+                    gv.layout_animation.bubble_radius.start = gv.bubble_radius;
+                    gv.layout_animation.starttime = now;
+                    gv.layout_animation.endtime = now + 300; // FIXME: use constant change?
+                    start_layout_animation();
+                });
+        }
     }
 
     graph.diffBus.onValue(function (diff) {