Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GraphViewer: By default a rect node is now displayed for better readability of text

This commit is contained in:
Michael Hackstein 2013-05-31 09:07:52 +02:00
parent 5d2008d4bb
commit 195856216c
2 changed files with 92 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
html/admin/js/graphViewer/graph/nodeShaper.js
View File

@ -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
};
}

109
html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js
View File

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