diff --git a/html/admin/js/graphViewer/graph/nodeShaper.js b/html/admin/js/graphViewer/graph/nodeShaper.js index 369b188e34..35ed29eca0 100644 --- a/html/admin/js/graphViewer/graph/nodeShaper.js +++ b/html/admin/js/graphViewer/graph/nodeShaper.js @@ -195,7 +195,7 @@ function NodeShaper(parent, flags, idfunc) { }, parseShapeFlag = function (shape) { - var radius, width, height; + var radius, width, height, translateX, translateY; switch (shape.type) { case NodeShaper.shapes.NONE: addShape = noop; @@ -209,12 +209,28 @@ function NodeShaper(parent, flags, idfunc) { }; break; case NodeShaper.shapes.RECT: - width = shape.width || 20; - height = shape.height || 10; + width = shape.width || 120; + height = shape.height || 24; + if (_.isFunction(width)) { + translateX = function(d) { + return -(width(d) / 2); + } + } else { + translateX = -(width / 2); + } + if (_.isFunction(height)) { + translateY = function(d) { + return -(height(d) / 2); + } + } else { + translateY = -(height / 2); + } addShape = function(node) { node.append("rect") // Display nodes as rectangles .attr("width", width) // Set width - .attr("height", height); // Set height + .attr("height", height) // Set height + .attr("x", translateX) + .attr("y", translateY); }; break; case undefined: @@ -339,7 +355,7 @@ function NodeShaper(parent, flags, idfunc) { if (flags.shape === undefined) { flags.shape = { - type: NodeShaper.shapes.CIRCLE + type: NodeShaper.shapes.RECT }; } diff --git a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js index b60db1b0f2..76dcf7a3eb 100644 --- a/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js +++ b/html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js @@ -117,18 +117,19 @@ expect(clicked[2]).toBeUndefined(); }); - it('should display circles by default', function() { + it('should have correct default values', function() { var node = [{_id: 1}], shaper = new NodeShaper(d3.select("svg")); shaper.drawNodes(node); expect($("svg .node")[0]).toBeDefined(); expect($("svg .node").length).toEqual(1); expect($("svg #1")[0]).toBeDefined(); - expect($("svg circle")[0]).toBeDefined(); - expect($("svg circle").length).toEqual(1); - expect($("svg .node circle")[0]).toBeDefined(); - expect($("svg .node circle").length).toEqual(1); - expect($("svg #1 circle")[0].attributes.r.value).toEqual("25"); + expect($("svg rect")[0]).toBeDefined(); + expect($("svg rect").length).toEqual(1); + expect($("svg .node rect")[0]).toBeDefined(); + expect($("svg .node rect").length).toEqual(1); + expect($("svg #1 rect").attr("width")).toEqual("120"); + expect($("svg #1 rect").attr("height")).toEqual("24"); }); describe('testing for colours', function() { @@ -310,8 +311,8 @@ }); it('should be able to change display formats', function() { - expect($("svg circle").length).toEqual(3); - expect($("svg rect").length).toEqual(0); + expect($("svg circle").length).toEqual(0); + expect($("svg rect").length).toEqual(3); shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}}); expect($("svg circle").length).toEqual(0); expect($("svg rect").length).toEqual(0); @@ -321,6 +322,9 @@ shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}}); expect($("svg circle").length).toEqual(0); expect($("svg rect").length).toEqual(0); + shaper.changeTo({shape: {type: NodeShaper.shapes.CIRCLE}}); + expect($("svg circle").length).toEqual(3); + expect($("svg rect").length).toEqual(0); }); it('should be able to add a click event to existing nodes', function() { @@ -550,33 +554,48 @@ }); it('should be able to use a fixed size', function() { - shaper = new NodeShaper(d3.select("svg"), - { - shape: { - type: NodeShaper.shapes.RECT, - width: 15, - height: 10 - } - }); var nodes = [ {_id: 1}, {_id: 2}, {_id: 3}, {_id: 4}, {_id: 5} - ]; - shaper.drawNodes(nodes); - expect($("svg #1 rect")[0].attributes.width.value).toEqual("15"); - expect($("svg #2 rect")[0].attributes.width.value).toEqual("15"); - expect($("svg #3 rect")[0].attributes.width.value).toEqual("15"); - expect($("svg #4 rect")[0].attributes.width.value).toEqual("15"); - expect($("svg #5 rect")[0].attributes.width.value).toEqual("15"); + ], + width = 15, + height = 10; + shaper = new NodeShaper(d3.select("svg"), + { + shape: { + type: NodeShaper.shapes.RECT, + width: width, + height: height + } + }); - expect($("svg #1 rect")[0].attributes.height.value).toEqual("10"); - expect($("svg #2 rect")[0].attributes.height.value).toEqual("10"); - expect($("svg #3 rect")[0].attributes.height.value).toEqual("10"); - expect($("svg #4 rect")[0].attributes.height.value).toEqual("10"); - expect($("svg #5 rect")[0].attributes.height.value).toEqual("10"); + shaper.drawNodes(nodes); + expect($("svg #1 rect").attr("width")).toEqual(String(width)); + expect($("svg #2 rect").attr("width")).toEqual(String(width)); + expect($("svg #3 rect").attr("width")).toEqual(String(width)); + expect($("svg #4 rect").attr("width")).toEqual(String(width)); + expect($("svg #5 rect").attr("width")).toEqual(String(width)); + + expect($("svg #1 rect").attr("x")).toEqual(String(-(width / 2))); + expect($("svg #2 rect").attr("x")).toEqual(String(-(width / 2))); + expect($("svg #3 rect").attr("x")).toEqual(String(-(width / 2))); + expect($("svg #4 rect").attr("x")).toEqual(String(-(width / 2))); + expect($("svg #5 rect").attr("x")).toEqual(String(-(width / 2))); + + expect($("svg #1 rect").attr("height")).toEqual(String(height)); + expect($("svg #2 rect").attr("height")).toEqual(String(height)); + expect($("svg #3 rect").attr("height")).toEqual(String(height)); + expect($("svg #4 rect").attr("height")).toEqual(String(height)); + expect($("svg #5 rect").attr("height")).toEqual(String(height)); + + expect($("svg #1 rect").attr("y")).toEqual(String(-(height / 2))); + expect($("svg #2 rect").attr("y")).toEqual(String(-(height / 2))); + expect($("svg #3 rect").attr("y")).toEqual(String(-(height / 2))); + expect($("svg #4 rect").attr("y")).toEqual(String(-(height / 2))); + expect($("svg #5 rect").attr("y")).toEqual(String(-(height / 2))); }); @@ -604,19 +623,33 @@ }); shaper.drawNodes(nodes); - expect($("svg #1 rect")[0].attributes.width.value).toEqual("11"); - expect($("svg #2 rect")[0].attributes.width.value).toEqual("12"); - expect($("svg #3 rect")[0].attributes.width.value).toEqual("13"); - expect($("svg #4 rect")[0].attributes.width.value).toEqual("14"); - expect($("svg #5 rect")[0].attributes.width.value).toEqual("15"); + expect($("svg #1 rect").attr("width")).toEqual("11"); + expect($("svg #2 rect").attr("width")).toEqual("12"); + expect($("svg #3 rect").attr("width")).toEqual("13"); + expect($("svg #4 rect").attr("width")).toEqual("14"); + expect($("svg #5 rect").attr("width")).toEqual("15"); - expect($("svg #1 rect")[0].attributes.height.value).toEqual("9"); - expect($("svg #2 rect")[0].attributes.height.value).toEqual("8"); - expect($("svg #3 rect")[0].attributes.height.value).toEqual("7"); - expect($("svg #4 rect")[0].attributes.height.value).toEqual("6"); - expect($("svg #5 rect")[0].attributes.height.value).toEqual("5"); + expect($("svg #1 rect").attr("x")).toEqual(String(-(11 / 2))); + expect($("svg #2 rect").attr("x")).toEqual(String(-(12 / 2))); + expect($("svg #3 rect").attr("x")).toEqual(String(-(13 / 2))); + expect($("svg #4 rect").attr("x")).toEqual(String(-(14 / 2))); + expect($("svg #5 rect").attr("x")).toEqual(String(-(15 / 2))); + + + expect($("svg #1 rect").attr("height")).toEqual("9"); + expect($("svg #2 rect").attr("height")).toEqual("8"); + expect($("svg #3 rect").attr("height")).toEqual("7"); + expect($("svg #4 rect").attr("height")).toEqual("6"); + expect($("svg #5 rect").attr("height")).toEqual("5"); + + expect($("svg #1 rect").attr("y")).toEqual(String(-(9 / 2))); + expect($("svg #2 rect").attr("y")).toEqual(String(-(8 / 2))); + expect($("svg #3 rect").attr("y")).toEqual(String(-(7 / 2))); + expect($("svg #4 rect").attr("y")).toEqual(String(-(6 / 2))); + expect($("svg #5 rect").attr("y")).toEqual(String(-(5 / 2))); }); + }); describe('configured for label', function () {