luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

elk fit labels, center contents

Browse source
This commit is contained in:
Alexander Wang 2023-03-15 13:03:49 -07:00
parent 5c7bb9062f
commit e36f2f946b
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
16 changed files with 615 additions and 616 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ci/release/changelogs/next.md
View file

@ -10,6 +10,8 @@
- `elk` layouts have less bends in the routes. [#1033](https://github.com/terrastruct/d2/pull/1033)
- `elk` layouts center nodes better. [#1028](https://github.com/terrastruct/d2/pull/1028)
- `elk` layouts have nicer margins between node boundaries and edges. [#1028](https://github.com/terrastruct/d2/pull/1028)
- `elk` layouts container contents are centered within. [#1038](https://github.com/terrastruct/d2/pull/1038)
- `elk` layouts container dimensions fit label. [#1038](https://github.com/terrastruct/d2/pull/1038)
- `sketch` draws connections with less roughness, which especially improves look of corner bends in ELK. [#1014](https://github.com/terrastruct/d2/pull/1014)
- CSS in SVGs are diagram-specific, which means you can embed multiple D2 diagrams on a web page without fear of style conflicts. [#1016](https://github.com/terrastruct/d2/pull/1016)

18
d2layouts/d2elklayout/layout.go
View file

@ -110,6 +110,7 @@ type elkOpts struct {
ConsiderModelOrder string `json:"elk.layered.considerModelOrder.strategy,omitempty"`
NodeSizeConstraints string `json:"elk.nodeSize.constraints,omitempty"`
ContentAlignment string `json:"elk.contentAlignment,omitempty"`
NodeSizeMinimum string `json:"elk.nodeSize.minimum,omitempty"`
ConfigurableOpts
@ -148,6 +149,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
HierarchyHandling: "INCLUDE_CHILDREN",
FixedAlignment: "BALANCED",
ConsiderModelOrder: "NODES_AND_EDGES",
NodeSizeConstraints: "MINIMUM_SIZE",
ContentAlignment: "H_CENTER V_CENTER",
ConfigurableOpts: ConfigurableOpts{
Algorithm: opts.Algorithm,
NodeSpacing: opts.NodeSpacing,
@ -227,8 +230,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
FixedAlignment: "BALANCED",
EdgeNode: edge_node_spacing,
ConsiderModelOrder: "NODES_AND_EDGES",
// Why is it (height, width)? I have no clue, but it works.
NodeSizeMinimum: fmt.Sprintf("(%d, %d)", int(math.Ceil(height)), int(math.Ceil(width))),
NodeSizeConstraints: "MINIMUM_SIZE",
ContentAlignment: "H_CENTER V_CENTER",
ConfigurableOpts: ConfigurableOpts{
NodeSpacing: opts.NodeSpacing,
EdgeNodeSpacing: opts.EdgeNodeSpacing,
@ -236,11 +239,12 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
Padding: opts.Padding,
},
}
// Only set if specified.
// There's a bug where if it's the node label dimensions that set the NodeSizeMinimum,
// then suddenly it's reversed back to (width, height). I must be missing something
if obj.Attributes.Width != nil || obj.Attributes.Height != nil {
n.LayoutOptions.NodeSizeConstraints = "MINIMUM_SIZE"
switch elkGraph.LayoutOptions.Direction {
case "DOWN", "UP":
n.LayoutOptions.NodeSizeMinimum = fmt.Sprintf("(%d, %d)", int(math.Ceil(height)), int(math.Ceil(width)))
case "RIGHT", "LEFT":
n.LayoutOptions.NodeSizeMinimum = fmt.Sprintf("(%d, %d)", int(math.Ceil(width)), int(math.Ceil(height)))
}
if n.LayoutOptions.Padding == DefaultOpts.Padding {

BIN
e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf vendored
View file

Binary file not shown.

3
e2etests/stable_test.go
View file

@ -103,7 +103,8 @@ func testStable(t *testing.T) {
}
}
online portal: {
# long label to expand
online portal: ONLINE PORTALLLL {
ui: { shape: hexagon }
}

4
e2etests/testdata/stable/elk_shim/dagre/board.exp.json generated vendored
View file

@ -194,7 +194,7 @@
"fields": null,
"methods": null,
"columns": null,
"label": "online portal",
"label": "ONLINE PORTALLLL",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
@ -202,7 +202,7 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 128,
"labelWidth": 198,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,

166
e2etests/testdata/stable/elk_shim/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 806 KiB

After

Width:  |  Height:  |  Size: 806 KiB

48
e2etests/testdata/stable/elk_shim/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 12,
"y": 311
},
"width": 540,
"width": 603,
"height": 892,
"opacity": 1,
"strokeDash": 0,
@ -174,7 +174,7 @@
"x": 322,
"y": 366
},
"width": 180,
"width": 243,
"height": 169,
"opacity": 1,
"strokeDash": 0,
@ -194,7 +194,7 @@
"fields": null,
"methods": null,
"columns": null,
"label": "online portal",
"label": "ONLINE PORTALLLL",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
@ -202,7 +202,7 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 128,
"labelWidth": 198,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
@ -212,7 +212,7 @@
"id": "network.online portal.ui",
"type": "hexagon",
"pos": {
"x": 372,
"x": 403,
"y": 416
},
"width": 80,
@ -335,7 +335,7 @@
"id": "user",
"type": "person",
"pos": {
"x": 286,
"x": 317,
"y": 12
},
"width": 130,
@ -376,7 +376,7 @@
"id": "api server",
"type": "rectangle",
"pos": {
"x": 534,
"x": 597,
"y": 59
},
"width": 116,
@ -417,7 +417,7 @@
"id": "logs",
"type": "page",
"pos": {
"x": 632,
"x": 695,
"y": 311
},
"width": 73,
@ -643,19 +643,19 @@
"labelPercentage": 0,
"route": [
{
"x": 329,
"x": 361,
"y": 99
},
{
"x": 329.33333333333337,
"x": 360.83333333333337,
"y": 165
},
{
"x": 222.83333333333334,
"x": 238.58333333333334,
"y": 165
},
{
"x": 222.83333333333334,
"x": 238.58333333333334,
"y": 361
}
],
@ -691,11 +691,11 @@
"labelPercentage": 0,
"route": [
{
"x": 399,
"x": 430,
"y": 99
},
{
"x": 399,
"x": 430,
"y": 416
}
],
@ -731,19 +731,19 @@
"labelPercentage": 0,
"route": [
{
"x": 563,
"x": 626,
"y": 125
},
{
"x": 563,
"x": 626,
"y": 266
},
{
"x": 425.33333333333337,
"x": 456.83333333333337,
"y": 266
},
{
"x": 425,
"x": 457,
"y": 416
}
],
@ -779,19 +779,19 @@
"labelPercentage": 0,
"route": [
{
"x": 621,
"x": 684,
"y": 125
},
{
"x": 621,
"x": 684,
"y": 165
},
{
"x": 668.5,
"x": 731.5,
"y": 165
},
{
"x": 669,
"x": 732,
"y": 311
}
],
@ -835,11 +835,11 @@
"y": 1248
},
{
"x": 592,
"x": 655,
"y": 1248
},
{
"x": 592,
"x": 655,
"y": 125
}
],

174
e2etests/testdata/stable/elk_shim/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 805 KiB

After

Width:  |  Height:  |  Size: 805 KiB

10
e2etests/testdata/stable/font_sizes_containers_large/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 12,
"y": 12
},
"width": 464,
"width": 497,
"height": 572,
"opacity": 1,
"strokeDash": 0,
@ -48,7 +48,7 @@
"id": "ninety nine.sixty four",
"type": "rectangle",
"pos": {
"x": 62,
"x": 78,
"y": 142
},
"width": 364,
@ -89,7 +89,7 @@
"id": "ninety nine.sixty four.thirty two",
"type": "rectangle",
"pos": {
"x": 112,
"x": 128,
"y": 228
},
"width": 264,
@ -130,7 +130,7 @@
"id": "ninety nine.sixty four.thirty two.sixteen",
"type": "rectangle",
"pos": {
"x": 162,
"x": 178,
"y": 278
},
"width": 164,
@ -171,7 +171,7 @@
"id": "ninety nine.sixty four.thirty two.sixteen.eight",
"type": "rectangle",
"pos": {
"x": 212,
"x": 228,
"y": 328
},
"width": 64,

160
e2etests/testdata/stable/font_sizes_containers_large/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 654 KiB

After

Width:  |  Height:  |  Size: 654 KiB

10
e2etests/testdata/stable/font_sizes_containers_large_right/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 12,
"y": 12
},
"width": 464,
"width": 497,
"height": 572,
"opacity": 1,
"strokeDash": 0,
@ -48,7 +48,7 @@
"id": "ninety nine.sixty four",
"type": "rectangle",
"pos": {
"x": 62,
"x": 78,
"y": 142
},
"width": 364,
@ -89,7 +89,7 @@
"id": "ninety nine.sixty four.thirty two",
"type": "rectangle",
"pos": {
"x": 112,
"x": 128,
"y": 228
},
"width": 264,
@ -130,7 +130,7 @@
"id": "ninety nine.sixty four.thirty two.sixteen",
"type": "rectangle",
"pos": {
"x": 162,
"x": 178,
"y": 278
},
"width": 164,
@ -171,7 +171,7 @@
"id": "ninety nine.sixty four.thirty two.sixteen.eight",
"type": "rectangle",
"pos": {
"x": 212,
"x": 228,
"y": 328
},
"width": 64,

160
e2etests/testdata/stable/font_sizes_containers_large_right/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 654 KiB

After

Width:  |  Height:  |  Size: 654 KiB

60
e2etests/testdata/todo/container_label_edge_adjustment/elk/board.exp.json generated vendored
View file

@ -7,7 +7,7 @@
"id": "a",
"type": "rectangle",
"pos": {
"x": 12,
"x": 41,
"y": 12
},
"width": 53,
@ -48,10 +48,10 @@
"id": "b",
"type": "cloud",
"pos": {
"x": 39,
"x": 12,
"y": 213
},
"width": 180,
"width": 294,
"height": 166,
"opacity": 1,
"strokeDash": 0,
@ -89,7 +89,7 @@
"id": "b.c",
"type": "rectangle",
"pos": {
"x": 89,
"x": 119,
"y": 263
},
"width": 80,
@ -130,7 +130,7 @@
"id": "d",
"type": "rectangle",
"pos": {
"x": 102,
"x": 132,
"y": 454
},
"width": 54,
@ -171,7 +171,7 @@
"id": "e",
"type": "rectangle",
"pos": {
"x": 85,
"x": 114,
"y": 12
},
"width": 53,
@ -212,7 +212,7 @@
"id": "f",
"type": "rectangle",
"pos": {
"x": 158,
"x": 187,
"y": 12
},
"width": 51,
@ -253,7 +253,7 @@
"id": "g",
"type": "rectangle",
"pos": {
"x": 229,
"x": 258,
"y": 12
},
"width": 54,
@ -319,19 +319,19 @@
"labelPercentage": 0,
"route": [
{
"x": 38.5,
"x": 68.33333333333337,
"y": 78
},
{
"x": 38.5,
"x": 68.33333333333337,
"y": 168
},
{
"x": 115.8333333333333,
"x": 145.66666666666669,
"y": 168
},
{
"x": 115.8333333333333,
"x": 145.66666666666669,
"y": 263
}
],
@ -367,11 +367,11 @@
"labelPercentage": 0,
"route": [
{
"x": 129.16666666666663,
"x": 159,
"y": 329
},
{
"x": 129.16666666666663,
"x": 159,
"y": 454
}
],
@ -407,19 +407,19 @@
"labelPercentage": 0,
"route": [
{
"x": 111.5,
"x": 141.33333333333337,
"y": 78
},
{
"x": 111.5,
"x": 141.33333333333337,
"y": 118
},
{
"x": 142.49999999999997,
"x": 172.33333333333334,
"y": 118
},
{
"x": 142.49999999999997,
"x": 172.33333333333334,
"y": 263
}
],
@ -455,20 +455,20 @@
"labelPercentage": 0,
"route": [
{
"x": 183.5,
"x": 213.33333333333337,
"y": 78
},
{
"x": 183.5,
"x": 213.33333333333337,
"y": 118
},
{
"x": 152.49999999999997,
"x": 182.33333333333334,
"y": 118
},
{
"x": 153,
"y": 214
"x": 182,
"y": 212
}
],
"animated": false,
@ -503,20 +503,12 @@
"labelPercentage": 0,
"route": [
{
"x": 256,
"x": 285.83333333333337,
"y": 78
},
{
"x": 256,
"y": 168
},
{
"x": 162.49999999999997,
"y": 168
},
{
"x": 163,
"y": 219
"x": 286,
"y": 281
}
],
"animated": false,

160
e2etests/testdata/todo/container_label_edge_adjustment/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 657 KiB

After

Width:  |  Height:  |  Size: 657 KiB

62
e2etests/testdata/todo/shape_set_width_height/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 12,
"y": 12
},
"width": 1072,
"width": 1388,
"height": 328,
"opacity": 1,
"strokeDash": 0,
@ -49,10 +49,10 @@
"type": "oval",
"pos": {
"x": 62,
"y": 94
"y": 76
},
"width": 228,
"height": 164,
"height": 200,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -133,7 +133,7 @@
"x": 310,
"y": 62
},
"width": 228,
"width": 414,
"height": 228,
"opacity": 1,
"strokeDash": 0,
@ -171,7 +171,7 @@
"id": "containers.diamond container.circle",
"type": "oval",
"pos": {
"x": 360,
"x": 453,
"y": 112
},
"width": 128,
@ -212,10 +212,10 @@
"id": "containers.oval container",
"type": "oval",
"pos": {
"x": 558,
"x": 744,
"y": 94
},
"width": 228,
"width": 266,
"height": 164,
"opacity": 1,
"strokeDash": 0,
@ -253,7 +253,7 @@
"id": "containers.oval container.hexagon",
"type": "hexagon",
"pos": {
"x": 608,
"x": 813,
"y": 144
},
"width": 128,
@ -294,10 +294,10 @@
"id": "containers.hexagon container",
"type": "hexagon",
"pos": {
"x": 806,
"x": 1030,
"y": 94
},
"width": 228,
"width": 320,
"height": 164,
"opacity": 1,
"strokeDash": 0,
@ -335,7 +335,7 @@
"id": "containers.hexagon container.oval",
"type": "oval",
"pos": {
"x": 856,
"x": 1126,
"y": 144
},
"width": 128,
@ -376,7 +376,7 @@
"id": "cloud",
"type": "cloud",
"pos": {
"x": 1104,
"x": 1420,
"y": 84
},
"width": 512,
@ -417,7 +417,7 @@
"id": "tall cylinder",
"type": "cylinder",
"pos": {
"x": 1232,
"x": 1548,
"y": 1280
},
"width": 256,
@ -458,7 +458,7 @@
"id": "class",
"type": "class",
"pos": {
"x": 960,
"x": 1276,
"y": 610
},
"width": 800,
@ -533,7 +533,7 @@
"id": "users",
"type": "sql_table",
"pos": {
"x": 960,
"x": 1276,
"y": 1862
},
"width": 800,
@ -717,7 +717,7 @@
"id": "container",
"type": "rectangle",
"pos": {
"x": 1923,
"x": 2239,
"y": 274
},
"width": 114,
@ -758,7 +758,7 @@
"id": "text",
"type": "text",
"pos": {
"x": 1780,
"x": 2096,
"y": 410
},
"width": 400,
@ -798,7 +798,7 @@
"id": "code",
"type": "code",
"pos": {
"x": 1780,
"x": 2096,
"y": 1386
},
"width": 400,
@ -838,7 +838,7 @@
"id": "small code",
"type": "code",
"pos": {
"x": 1884,
"x": 2200,
"y": 1862
},
"width": 191,
@ -903,11 +903,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1360,
"x": 1676,
"y": 339
},
{
"x": 1360,
"x": 1676,
"y": 610
}
],
@ -943,11 +943,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1360,
"x": 1676,
"y": 1010
},
{
"x": 1360,
"x": 1676,
"y": 1280
}
],
@ -983,11 +983,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1360,
"x": 1676,
"y": 1792
},
{
"x": 1360,
"x": 1676,
"y": 1862
}
],
@ -1023,11 +1023,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1980,
"x": 2296,
"y": 340
},
{
"x": 1980,
"x": 2296,
"y": 410
}
],
@ -1063,11 +1063,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1980,
"x": 2296,
"y": 1210
},
{
"x": 1980,
"x": 2296,
"y": 1386
}
],
@ -1103,11 +1103,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1980,
"x": 2296,
"y": 1686
},
{
"x": 1980,
"x": 2296,
"y": 1862
}
],

194
e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 948 KiB

After

Width:  |  Height:  |  Size: 948 KiB