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

GraphViewer: Impoved layout of multiline labels

This commit is contained in:
Michael Hackstein 2013-06-03 15:12:04 +02:00
parent 7b1a519f81
commit 19003f160f
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/admin/css/graphView.css
View File

@ -28,7 +28,7 @@
} }
svg.graphViewer text { svg.graphViewer text {
font: 12px Arial; font: 16px Arial;
pointer-events: none; pointer-events: none;
} }

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

@ -227,8 +227,8 @@ function NodeShaper(parent, flags, idfunc) {
}; };
break; break;
case NodeShaper.shapes.RECT: case NodeShaper.shapes.RECT:
width = shape.width || 120; width = shape.width || 90;
height = shape.height || 24; height = shape.height || 36;
if (_.isFunction(width)) { if (_.isFunction(width)) {
translateX = function(d) { translateX = function(d) {
return -(width(d) / 2); return -(width(d) / 2);
@ -269,12 +269,12 @@ function NodeShaper(parent, flags, idfunc) {
var chunks = splitLabel(label(d)); var chunks = splitLabel(label(d));
d3.select(this).append("tspan") d3.select(this).append("tspan")
.attr("x", "0") .attr("x", "0")
.attr("dy", "0") .attr("dy", "-4")
.text(chunks[0]); .text(chunks[0]);
if (chunks.length === 2) { if (chunks.length === 2) {
d3.select(this).append("tspan") d3.select(this).append("tspan")
.attr("x", "0") .attr("x", "0")
.attr("dy", "20") .attr("dy", "16")
.text(chunks[1]); .text(chunks[1]);
} }
}); });
@ -289,12 +289,12 @@ function NodeShaper(parent, flags, idfunc) {
var chunks = splitLabel(d._data[label]); var chunks = splitLabel(d._data[label]);
d3.select(this).append("tspan") d3.select(this).append("tspan")
.attr("x", "0") .attr("x", "0")
.attr("dy", "0") .attr("dy", "-4")
.text(chunks[0]); .text(chunks[0]);
if (chunks.length === 2) { if (chunks.length === 2) {
d3.select(this).append("tspan") d3.select(this).append("tspan")
.attr("x", "0") .attr("x", "0")
.attr("dy", "20") .attr("dy", "16")
.text(chunks[1]); .text(chunks[1]);
} }
}); });

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

@ -128,8 +128,8 @@
expect($("svg rect").length).toEqual(1); expect($("svg rect").length).toEqual(1);
expect($("svg .node rect")[0]).toBeDefined(); expect($("svg .node rect")[0]).toBeDefined();
expect($("svg .node rect").length).toEqual(1); expect($("svg .node rect").length).toEqual(1);
expect($("svg #1 rect").attr("width")).toEqual("120"); expect($("svg #1 rect").attr("width")).toEqual("90");
expect($("svg #1 rect").attr("height")).toEqual("24"); expect($("svg #1 rect").attr("height")).toEqual("36");
}); });
describe('testing for colours', function() { describe('testing for colours', function() {
@ -798,11 +798,11 @@
expect($(spans.get(0)).text()).toEqual("Label with"); expect($(spans.get(0)).text()).toEqual("Label with");
expect($(spans.get(0)).attr("x")).toEqual("0"); expect($(spans.get(0)).attr("x")).toEqual("0");
expect($(spans.get(0)).attr("dy")).toEqual("0"); expect($(spans.get(0)).attr("dy")).toEqual("-4");
expect($(spans.get(1)).text()).toEqual("many words"); expect($(spans.get(1)).text()).toEqual("many words");
expect($(spans.get(1)).attr("x")).toEqual("0"); expect($(spans.get(1)).attr("x")).toEqual("0");
expect($(spans.get(1)).attr("dy")).toEqual("20"); expect($(spans.get(1)).attr("dy")).toEqual("16");
}); });
it('should automatically cut labels with more then 20 characters', function() { it('should automatically cut labels with more then 20 characters', function() {

2
html/admin/js/graphViewer/style/graphlayout.css
View File

@ -1,5 +1,5 @@
svg#graphViewer text { svg#graphViewer text {
font: 11px Arial; font: 16px Arial;
pointer-events: none; pointer-events: none;
stroke: #000; stroke: #000;
} }