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) { parseShapeFlag = function (shape) {
var radius, width, height; var radius, width, height, translateX, translateY;
switch (shape.type) { switch (shape.type) {
case NodeShaper.shapes.NONE: case NodeShaper.shapes.NONE:
addShape = noop; addShape = noop;
@ -209,12 +209,28 @@ function NodeShaper(parent, flags, idfunc) {
}; };
break; break;
case NodeShaper.shapes.RECT: case NodeShaper.shapes.RECT:
width = shape.width || 20; width = shape.width || 120;
height = shape.height || 10; 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) { addShape = function(node) {
node.append("rect") // Display nodes as rectangles node.append("rect") // Display nodes as rectangles
.attr("width", width) // Set width .attr("width", width) // Set width
.attr("height", height); // Set height .attr("height", height) // Set height
.attr("x", translateX)
.attr("y", translateY);
}; };
break; break;
case undefined: case undefined:
@ -339,7 +355,7 @@ function NodeShaper(parent, flags, idfunc) {
if (flags.shape === undefined) { if (flags.shape === undefined) {
flags.shape = { 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(); expect(clicked[2]).toBeUndefined();
}); });
it('should display circles by default', function() { it('should have correct default values', function() {
var node = [{_id: 1}], var node = [{_id: 1}],
shaper = new NodeShaper(d3.select("svg")); shaper = new NodeShaper(d3.select("svg"));
shaper.drawNodes(node); shaper.drawNodes(node);
expect($("svg .node")[0]).toBeDefined(); expect($("svg .node")[0]).toBeDefined();
expect($("svg .node").length).toEqual(1); expect($("svg .node").length).toEqual(1);
expect($("svg #1")[0]).toBeDefined(); expect($("svg #1")[0]).toBeDefined();
expect($("svg circle")[0]).toBeDefined(); expect($("svg rect")[0]).toBeDefined();
expect($("svg circle").length).toEqual(1); expect($("svg rect").length).toEqual(1);
expect($("svg .node circle")[0]).toBeDefined(); expect($("svg .node rect")[0]).toBeDefined();
expect($("svg .node circle").length).toEqual(1); expect($("svg .node rect").length).toEqual(1);
expect($("svg #1 circle")[0].attributes.r.value).toEqual("25"); expect($("svg #1 rect").attr("width")).toEqual("120");
expect($("svg #1 rect").attr("height")).toEqual("24");
}); });
describe('testing for colours', function() { describe('testing for colours', function() {
@ -310,8 +311,8 @@
}); });
it('should be able to change display formats', function() { it('should be able to change display formats', function() {
expect($("svg circle").length).toEqual(3); expect($("svg circle").length).toEqual(0);
expect($("svg rect").length).toEqual(0); expect($("svg rect").length).toEqual(3);
shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}}); shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}});
expect($("svg circle").length).toEqual(0); expect($("svg circle").length).toEqual(0);
expect($("svg rect").length).toEqual(0); expect($("svg rect").length).toEqual(0);
@ -321,6 +322,9 @@
shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}}); shaper.changeTo({shape: {type: NodeShaper.shapes.NONE}});
expect($("svg circle").length).toEqual(0); expect($("svg circle").length).toEqual(0);
expect($("svg rect").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() { 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() { 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 = [ var nodes = [
{_id: 1}, {_id: 1},
{_id: 2}, {_id: 2},
{_id: 3}, {_id: 3},
{_id: 4}, {_id: 4},
{_id: 5} {_id: 5}
]; ],
shaper.drawNodes(nodes); width = 15,
expect($("svg #1 rect")[0].attributes.width.value).toEqual("15"); height = 10;
expect($("svg #2 rect")[0].attributes.width.value).toEqual("15"); shaper = new NodeShaper(d3.select("svg"),
expect($("svg #3 rect")[0].attributes.width.value).toEqual("15"); {
expect($("svg #4 rect")[0].attributes.width.value).toEqual("15"); shape: {
expect($("svg #5 rect")[0].attributes.width.value).toEqual("15"); type: NodeShaper.shapes.RECT,
width: width,
height: height
}
});
expect($("svg #1 rect")[0].attributes.height.value).toEqual("10"); shaper.drawNodes(nodes);
expect($("svg #2 rect")[0].attributes.height.value).toEqual("10"); expect($("svg #1 rect").attr("width")).toEqual(String(width));
expect($("svg #3 rect")[0].attributes.height.value).toEqual("10"); expect($("svg #2 rect").attr("width")).toEqual(String(width));
expect($("svg #4 rect")[0].attributes.height.value).toEqual("10"); expect($("svg #3 rect").attr("width")).toEqual(String(width));
expect($("svg #5 rect")[0].attributes.height.value).toEqual("10"); 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); shaper.drawNodes(nodes);
expect($("svg #1 rect")[0].attributes.width.value).toEqual("11"); expect($("svg #1 rect").attr("width")).toEqual("11");
expect($("svg #2 rect")[0].attributes.width.value).toEqual("12"); expect($("svg #2 rect").attr("width")).toEqual("12");
expect($("svg #3 rect")[0].attributes.width.value).toEqual("13"); expect($("svg #3 rect").attr("width")).toEqual("13");
expect($("svg #4 rect")[0].attributes.width.value).toEqual("14"); expect($("svg #4 rect").attr("width")).toEqual("14");
expect($("svg #5 rect")[0].attributes.width.value).toEqual("15"); expect($("svg #5 rect").attr("width")).toEqual("15");
expect($("svg #1 rect")[0].attributes.height.value).toEqual("9"); expect($("svg #1 rect").attr("x")).toEqual(String(-(11 / 2)));
expect($("svg #2 rect")[0].attributes.height.value).toEqual("8"); expect($("svg #2 rect").attr("x")).toEqual(String(-(12 / 2)));
expect($("svg #3 rect")[0].attributes.height.value).toEqual("7"); expect($("svg #3 rect").attr("x")).toEqual(String(-(13 / 2)));
expect($("svg #4 rect")[0].attributes.height.value).toEqual("6"); expect($("svg #4 rect").attr("x")).toEqual(String(-(14 / 2)));
expect($("svg #5 rect")[0].attributes.height.value).toEqual("5"); 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 () { describe('configured for label', function () {