mirror of https://gitee.com/bigwinds/arangodb
GraphViewer: Impoved layout of multiline labels
This commit is contained in:
parent
7b1a519f81
commit
19003f160f
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
svg.graphViewer text {
|
||||
font: 12px Arial;
|
||||
font: 16px Arial;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -227,8 +227,8 @@ function NodeShaper(parent, flags, idfunc) {
|
|||
};
|
||||
break;
|
||||
case NodeShaper.shapes.RECT:
|
||||
width = shape.width || 120;
|
||||
height = shape.height || 24;
|
||||
width = shape.width || 90;
|
||||
height = shape.height || 36;
|
||||
if (_.isFunction(width)) {
|
||||
translateX = function(d) {
|
||||
return -(width(d) / 2);
|
||||
|
@ -269,12 +269,12 @@ function NodeShaper(parent, flags, idfunc) {
|
|||
var chunks = splitLabel(label(d));
|
||||
d3.select(this).append("tspan")
|
||||
.attr("x", "0")
|
||||
.attr("dy", "0")
|
||||
.attr("dy", "-4")
|
||||
.text(chunks[0]);
|
||||
if (chunks.length === 2) {
|
||||
d3.select(this).append("tspan")
|
||||
.attr("x", "0")
|
||||
.attr("dy", "20")
|
||||
.attr("dy", "16")
|
||||
.text(chunks[1]);
|
||||
}
|
||||
});
|
||||
|
@ -289,12 +289,12 @@ function NodeShaper(parent, flags, idfunc) {
|
|||
var chunks = splitLabel(d._data[label]);
|
||||
d3.select(this).append("tspan")
|
||||
.attr("x", "0")
|
||||
.attr("dy", "0")
|
||||
.attr("dy", "-4")
|
||||
.text(chunks[0]);
|
||||
if (chunks.length === 2) {
|
||||
d3.select(this).append("tspan")
|
||||
.attr("x", "0")
|
||||
.attr("dy", "20")
|
||||
.attr("dy", "16")
|
||||
.text(chunks[1]);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -128,8 +128,8 @@
|
|||
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");
|
||||
expect($("svg #1 rect").attr("width")).toEqual("90");
|
||||
expect($("svg #1 rect").attr("height")).toEqual("36");
|
||||
});
|
||||
|
||||
describe('testing for colours', function() {
|
||||
|
@ -798,11 +798,11 @@
|
|||
|
||||
expect($(spans.get(0)).text()).toEqual("Label with");
|
||||
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)).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() {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
svg#graphViewer text {
|
||||
font: 11px Arial;
|
||||
font: 16px Arial;
|
||||
pointer-events: none;
|
||||
stroke: #000;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue