GraphViewer: Main graphViewer class is now able to construct a ZoomManager

html/admin/js/graphViewer/graphViewer.js

@@ -1,7 +1,7 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global _*/
 /*global EventDispatcher, ArangoAdapter, JSONAdapter */
-/*global ForceLayouter, EdgeShaper, NodeShaper */
+/*global ForceLayouter, EdgeShaper, NodeShaper, ZoomManager */
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
 ///
@@ -30,8 +30,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 
-function GraphViewer(svg, width, height,
-  adapterConfig, config) {
+function GraphViewer(svg, width, height, adapterConfig, config) {
   
   "use strict";
   // Check if all required inputs are given
@@ -52,8 +51,10 @@ function GraphViewer(svg, width, height,
   }
   
   var self = this,
+    graphContainer,
     nodeContainer,
     edgeContainer,
+    zoomManager,
     fixedSize,
     dispatcher,
     edges = [],
@@ -82,17 +83,27 @@ function GraphViewer(svg, width, height,
         throw "Sorry unknown layout type.";
     }
   },
+  
+  parseZoomConfig = function(config) {
+    if (config) {
+      zoomManager = new ZoomManager(width, height,
+        graphContainer, self.nodeShaper, self.edgeShaper);
+    }
+  },
+  
   parseConfig = function(config) {
     var esConf = config.edgeShaper || {},
       nsConf = config.nodeShaper || {},
-      idFunc = nsConf.idfunc || undefined;
+      idFunc = nsConf.idfunc || undefined,
+      zConf = config.zoom || false;
     
     parseLayouterConfig(config.layouter);
-    edgeContainer = svg.append("svg:g");
+    edgeContainer = graphContainer.append("g");
     self.edgeShaper = new EdgeShaper(edgeContainer, esConf);
-    nodeContainer = svg.append("svg:g");
+    nodeContainer = graphContainer.append("g");
     self.nodeShaper = new NodeShaper(nodeContainer, nsConf, idFunc);
     self.layouter.setCombinedUpdateFunction(self.nodeShaper, self.edgeShaper);
+    parseZoomConfig(zConf);
   };
   
   switch (adapterConfig.type.toLowerCase()) {
@@ -118,6 +129,8 @@ function GraphViewer(svg, width, height,
       throw "Sorry unknown adapter type.";
   }    
   
+  graphContainer = svg.append("g");
+  
   parseConfig(config || {});
     
   self.start = function() {

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerSpec.js

@@ -1,11 +1,11 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
 /*global beforeEach, afterEach */
-/*global describe, it, expect, jasmine */
+/*global describe, it, expect, jasmine, spyOn*/
 /*global waitsFor, runs, waits */
 /*global window, eb, loadFixtures, document */
 /*global $, _, d3*/
 /*global helper*/
-/*global GraphViewer*/
+/*global GraphViewer, EdgeShaper, NodeShaper*/
 
 ////////////////////////////////////////////////////////////////////////////////
 /// @brief Graph functionality
@@ -38,7 +38,7 @@
 describe("Graph Viewer", function() {
   "use strict";
   var viewer,
-  waittime = 200,
+  waittime = 500,
   svg,
   docSVG;
   
@@ -115,7 +115,7 @@ describe("Graph Viewer", function() {
     
   });
   
-  describe('GraphViewer set up correctly', function() {
+  describe('set up correctly', function() {
     
     var viewer, adapterConfig;
     
@@ -234,4 +234,32 @@ describe("Graph Viewer", function() {
     
   });
 
+  describe('set up to support zoom', function() {
+    var viewer, adapterConfig;
+    
+    beforeEach(function() {
+      if (window.ZoomManager === undefined) {
+        window.ZoomManager = {};
+      }
+      spyOn(window, "ZoomManager");
+      adapterConfig = {type: "json", path: "../test_data/"};
+      var config = {
+        zoom: true
+      };
+      viewer = new GraphViewer(svg, 42, 13, adapterConfig, config);
+    });
+    
+    it('should set up the zoom manager', function() {
+      expect(window.ZoomManager).toHaveBeenCalledWith(
+        42,
+        13,
+        jasmine.any(Object),
+        jasmine.any(NodeShaper),
+        jasmine.any(EdgeShaper)
+      );
+    });
+    
+    
+  });
+
 });