diff --git a/html/admin/js/graphViewer/graph/zoomManager.js b/html/admin/js/graphViewer/graph/zoomManager.js index ffc3a8807e..7921ba0360 100644 --- a/html/admin/js/graphViewer/graph/zoomManager.js +++ b/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; diff --git a/html/admin/js/graphViewer/jasmine_test/runnerAll.html b/html/admin/js/graphViewer/jasmine_test/runnerAll.html index cd2ebe7c52..b01e81a832 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerAll.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerAll.html @@ -13,6 +13,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/runnerZoomManager.html b/html/admin/js/graphViewer/jasmine_test/runnerZoomManager.html index 8a5d0beca3..64776f4f75 100644 --- a/html/admin/js/graphViewer/jasmine_test/runnerZoomManager.html +++ b/html/admin/js/graphViewer/jasmine_test/runnerZoomManager.html @@ -13,6 +13,7 @@ + diff --git a/html/admin/js/graphViewer/jasmine_test/specZoomManager/zoomManagerSpec.js b/html/admin/js/graphViewer/jasmine_test/specZoomManager/zoomManagerSpec.js index cb9d30f2ae..ba9942ab17 100644 --- a/html/admin/js/graphViewer/jasmine_test/specZoomManager/zoomManagerSpec.js +++ b/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() {