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 () {