GraphViewer: Added fisheye distortion propagation to zoommanager.

html/admin/js/graphViewer/graph/zoomManager.js

@@ -41,10 +41,19 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
   if (g === undefined || g.node === undefined || g.node().tagName !== "G") {
     throw("A group has to be given.");
   }
-  if (nodeShaper === undefined || nodeShaper.activateLabel === undefined) {
+  if (
+    nodeShaper === undefined
+    || nodeShaper.activateLabel === undefined
+    || nodeShaper.changeTo === undefined
+    || nodeShaper.updateNodes === undefined
+  ) {
     throw("The Node shaper has to be given.");
   }
-  if (edgeShaper === undefined || edgeShaper.activateLabel === undefined) {
+  if (
+    edgeShaper === undefined
+    || edgeShaper.activateLabel === undefined
+    || edgeShaper.updateEdges === undefined
+  ) {
     throw("The Edge shaper has to be given.");
   }
   
@@ -56,6 +65,7 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
     currentZoom,
     currentTranslation,
     currentLimit,
+    fisheye,
     currentDistortion,
     currentDistortionRadius,
     baseDist,
@@ -80,6 +90,8 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
     calcDistortionValues = function () {
       currentDistortion = baseDist / currentZoom - 0.99999999; // Always > 0
       currentDistortionRadius = baseDRadius / currentZoom;
+      fisheye.distortion(currentDistortion);
+      fisheye.radius(currentDistortionRadius);
     },
     
     parseConfig = function (conf) {
@@ -99,12 +111,11 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
       
       labelToggle = fontMin / fontMax;
       currentZoom = 1;
-      
+      currentTranslation = [0, 0];
       calcDistortionValues();
       
       currentLimit = calcNodeLimit();
       
-      
       zoom = d3.behavior.zoom()
         .scaleExtent([rMin/rMax, 1])
         .on("zoom", function() {
@@ -119,12 +130,31 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
               + " scale(" + currentZoom + ")");         
        });
       
+    },
+    mouseMoveHandle = function() {
+      var focus = d3.mouse(this);
+      focus[0] -= currentTranslation[0];
+      focus[0] /= currentZoom;
+      focus[1] -= currentTranslation[1];
+      focus[1] /= currentZoom;
+      fisheye.focus(focus);
+      nodeShaper.updateNodes();
+      edgeShaper.updateEdges();
     };
+    
+    
+  
+  fisheye = d3.fisheye.circular();
   
   parseConfig(config);
   
   g.call(zoom);
 
+  nodeShaper.changeTo({
+    distortion: fisheye
+  });
+
+  g.on("mousemove", mouseMoveHandle);
   
   self.translation = function() {
     return null;
@@ -137,28 +167,6 @@ function ZoomManager(width, height, g, nodeShaper, edgeShaper, config) {
   self.scaledMouse = function() {
     return null;
   };
-  
-  self.mouseMoveHandle = function() {
-    // TODO
-    var focus = d3.mouse(this);
-    focus[0] -= currentTranslation[0];
-    focus[0] /= currentZoom;
-    focus[1] -= currentTranslation[1];
-    focus[1] /= currentZoom;
-    
-
-    fisheye.focus(focus);
-
-    node.each(function(d) { d.fisheye = fisheye(d); })
-        .attr("cx", function(d) { return d.fisheye.x; })
-        .attr("cy", function(d) { return d.fisheye.y; })
-        .attr("r", function(d) { return d.fisheye.z * 25; });
-
-    link.attr("x1", function(d) { return d.source.fisheye.x; })
-        .attr("y1", function(d) { return d.source.fisheye.y; })
-        .attr("x2", function(d) { return d.target.fisheye.x; })
-        .attr("y2", function(d) { return d.target.fisheye.y; });
-  };
  
   self.getDistortion = function() {
     return currentDistortion;

html/admin/js/graphViewer/jasmine_test/runnerAll.html

@@ -13,6 +13,7 @@
 
   <!-- include source files here... -->
   <script type="text/javascript" src="../../lib/d3.v3.min.js"></script>
+  <script type="text/javascript" src="../../lib/d3.fisheye.js"></script>
   <script type="text/javascript" src="../../lib/underscore.js"></script>
   <script type="text/javascript" src="../../lib/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="../../lib/bootstrap.js"></script>

html/admin/js/graphViewer/jasmine_test/runnerZoomManager.html

@@ -13,6 +13,7 @@
 
   <!-- include source files here... -->
   <script type="text/javascript" src="../../lib/d3.v3.min.js"></script>
+  <script type="text/javascript" src="../../lib/d3.fisheye.js"></script>
   <script type="text/javascript" src="../../lib/underscore.js"></script>
   <script type="text/javascript" src="../../lib/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="../../lib/bootstrap.js"></script>

html/admin/js/graphViewer/jasmine_test/specZoomManager/zoomManagerSpec.js

@@ -69,17 +69,25 @@
 
     beforeEach(function () {
       svg = document.createElement("svg");
+      svg.id = "outersvg";
       document.body.appendChild(svg);
       g = d3.select("svg").append("g");
       g.attr("id", "svg");
       nodeShaperMock = {
-        activateLabel: function() {}
+        activateLabel: function() {},
+        changeTo: function() {},
+        updateNodes: function() {}
       };
       edgeShaperMock = {
-        activateLabel: function() {}
+        activateLabel: function() {},
+        updateEdges: function() {}
       };
       spyOn(nodeShaperMock, "activateLabel");
+      spyOn(nodeShaperMock, "changeTo");
+      spyOn(nodeShaperMock, "updateNodes");
+      
       spyOn(edgeShaperMock, "activateLabel");
+      spyOn(edgeShaperMock, "updateEdges");
     });
 
     afterEach(function () {
@@ -141,11 +149,6 @@
     
       describe('the interface', function() {
       
-        it('should offer a function handle for the mouse movement', function() {
-          expect(manager.mouseMoveHandle).toBeDefined();
-          expect(manager.mouseMoveHandle).toEqual(jasmine.any(Function));
-        });
-      
         it('should offer a function to get the current scale factor', function() {
           expect(manager.scaleFactor).toBeDefined();
           expect(manager.scaleFactor).toEqual(jasmine.any(Function));
@@ -160,7 +163,7 @@
           expect(manager.scaledMouse).toBeDefined();
           expect(manager.scaledMouse).toEqual(jasmine.any(Function));
         });
-      
+        
         it('should offer a function to get the distortion', function() {
           expect(manager.getDistortion).toBeDefined();
           expect(manager.getDistortion).toEqual(jasmine.any(Function));
@@ -178,7 +181,7 @@
       
       });
     
-      describe('checking the value propagation', function() {
+      describe('the zoom behaviour', function() {
      
         var fontMax,
           fontMin,
@@ -419,6 +422,22 @@
         
         });
       });
+      
+      describe('the distortion behaviour', function() {
+        
+        it('should register fisheye distortion at the node shaper', function() {
+          expect(nodeShaperMock.changeTo).toHaveBeenCalledWith({
+            distortion: jasmine.any(Function)
+          });
+        });
+        
+        it('should update the nodes and edges on mouse move event', function() {
+          helper.simulateMouseEvent("mousemove", "svg");
+          expect(nodeShaperMock.updateNodes).toHaveBeenCalled();
+          expect(edgeShaperMock.updateEdges).toHaveBeenCalled();
+        });
+        
+      });
     });
 
     describe('testing user-defined values', function() {