fix elk container label

This commit is contained in:
Alexander Wang 2023-03-17 21:43:11 -07:00
parent 40c0f4f605
commit c3c60c5bab
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
16 changed files with 929 additions and 445 deletions

View file

@ -2,6 +2,7 @@
#### Improvements 🧹
- `elk` layout containers no longer overlap the label with children. [#1055](https://github.com/terrastruct/d2/pull/1055)
- `<title>` attribute of HTML in watch mode is the base file name, instead of the whole path. [#1054](https://github.com/terrastruct/d2/pull/1054)
#### Bugfixes ⛑️

View file

@ -248,20 +248,31 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
if n.LayoutOptions.Padding == DefaultOpts.Padding {
// Default
paddingTop := 50
labelHeight := 0
if obj.LabelHeight != nil {
paddingTop = go2.Max(paddingTop, *obj.LabelHeight+label.PADDING)
labelHeight = *obj.LabelHeight + label.PADDING
}
if obj.Attributes.Icon != nil && obj.Attributes.Shape.Value != d2target.ShapeImage {
n.Height += 100 + float64(labelHeight)
n.Width += 100
contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(n.Width), float64(n.Height))
shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
s := shape.NewShape(shapeType, contentBox)
iconSize := d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft))
paddingTop = go2.Max(paddingTop, iconSize+label.PADDING*2)
paddingTop := n.Height - s.GetInnerBox().Height
n.Height -= (100 + float64(labelHeight))
n.Width -= 100
iconHeight := 0
if obj.Attributes.Icon != nil && obj.Attributes.Shape.Value != d2target.ShapeImage {
iconHeight = d2target.GetIconSize(s.GetInnerBox(), string(label.InsideTopLeft)) + label.PADDING*2
}
paddingTop += float64(go2.Max(labelHeight, iconHeight))
n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
paddingTop,
// Default padding
go2.Max(int(math.Ceil(paddingTop)), 50),
)
}
} else {

View file

@ -79,6 +79,14 @@ func testStable(t *testing.T) {
border-radius: 20
}
}
`,
},
{
name: "elk_container_height",
script: `i can not see the title: {
shape: cylinder
x
}
`,
},
{

View file

@ -11,7 +11,7 @@
"y": 12
},
"width": 701,
"height": 1812,
"height": 1835,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -52,7 +52,7 @@
"y": 612
},
"width": 525,
"height": 1067,
"height": 1090,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -90,7 +90,7 @@
"type": "rectangle",
"pos": {
"x": 203,
"y": 939
"y": 962
},
"width": 334,
"height": 690,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 253,
"y": 989
"y": 1012
},
"width": 193,
"height": 166,
@ -172,7 +172,7 @@
"type": "text",
"pos": {
"x": 303,
"y": 1084
"y": 1107
},
"width": 16,
"height": 21,
@ -212,7 +212,7 @@
"type": "rectangle",
"pos": {
"x": 339,
"y": 1039
"y": 1062
},
"width": 57,
"height": 66,
@ -253,7 +253,7 @@
"type": "text",
"pos": {
"x": 358,
"y": 1331
"y": 1354
},
"width": 80,
"height": 21,
@ -293,7 +293,7 @@
"type": "rectangle",
"pos": {
"x": 367,
"y": 1513
"y": 1536
},
"width": 63,
"height": 66,
@ -337,7 +337,7 @@
"y": 662
},
"width": 150,
"height": 192,
"height": 215,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -375,7 +375,7 @@
"type": "diamond",
"pos": {
"x": 162,
"y": 712
"y": 735
},
"width": 50,
"height": 92,
@ -416,7 +416,7 @@
"type": "oval",
"pos": {
"x": 285,
"y": 721
"y": 732
},
"width": 74,
"height": 74,
@ -645,19 +645,19 @@
"route": [
{
"x": 311,
"y": 1105
"y": 1128
},
{
"x": 311,
"y": 1291
"y": 1314
},
{
"x": 385.16666666666663,
"y": 1291
"y": 1314
},
{
"x": 385.16666666666663,
"y": 1331
"y": 1354
}
],
"animated": false,
@ -693,11 +693,11 @@
"route": [
{
"x": 398.5,
"y": 1352
"y": 1375
},
{
"x": 398.5,
"y": 1513
"y": 1536
}
],
"animated": false,
@ -733,19 +733,19 @@
"route": [
{
"x": 212,
"y": 854
"y": 877
},
{
"x": 212,
"y": 894
"y": 917
},
{
"x": 321,
"y": 894
"y": 917
},
{
"x": 321,
"y": 989
"y": 1012
}
],
"animated": false,
@ -841,7 +841,7 @@
},
{
"x": 403.5,
"y": 939
"y": 962
}
],
"animated": false,
@ -977,15 +977,15 @@
},
{
"x": 486,
"y": 1291
"y": 1314
},
{
"x": 411.8333333333333,
"y": 1291
"y": 1314
},
{
"x": 411.8333333333333,
"y": 1331
"y": 1354
}
],
"animated": false,
@ -1069,15 +1069,15 @@
"route": [
{
"x": 342.8333333333333,
"y": 1629
"y": 1652
},
{
"x": 342.8333333333333,
"y": 1724
"y": 1747
},
{
"x": 627,
"y": 1724
"y": 1747
},
{
"x": 627,
@ -1125,15 +1125,15 @@
"route": [
{
"x": 162,
"y": 854
"y": 877
},
{
"x": 162,
"y": 1774
"y": 1797
},
{
"x": 654,
"y": 1774
"y": 1797
},
{
"x": 654,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 816 KiB

After

Width:  |  Height:  |  Size: 816 KiB

View file

@ -0,0 +1,130 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "i can not see the title",
"type": "cylinder",
"pos": {
"x": 0,
"y": 41
},
"width": 133,
"height": 125,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "AA4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "i can not see the title",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 241,
"labelHeight": 36,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "i can not see the title.x",
"type": "rectangle",
"pos": {
"x": 40,
"y": 70
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 653 KiB

View file

@ -0,0 +1,130 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "i can not see the title",
"type": "cylinder",
"pos": {
"x": 12,
"y": 12
},
"width": 286,
"height": 229,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "AA4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "i can not see the title",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 241,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "i can not see the title.x",
"type": "rectangle",
"pos": {
"x": 128,
"y": 125
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 2
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 653 KiB

View file

@ -585,7 +585,7 @@
"y": 3469
},
"width": 327,
"height": 166,
"height": 229,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -623,7 +623,7 @@
"type": "rectangle",
"pos": {
"x": 129,
"y": 3519
"y": 3582
},
"width": 63,
"height": 66,
@ -1045,7 +1045,7 @@
"type": "rectangle",
"pos": {
"x": 212,
"y": 3519
"y": 3582
},
"width": 62,
"height": 66,
@ -1221,7 +1221,7 @@
"type": "rectangle",
"pos": {
"x": 294,
"y": 3519
"y": 3582
},
"width": 62,
"height": 66,
@ -1262,7 +1262,7 @@
"type": "parallelogram",
"pos": {
"x": 267,
"y": 3710
"y": 3773
},
"width": 115,
"height": 66,
@ -1796,7 +1796,7 @@
},
{
"x": 160.58333333333331,
"y": 3519
"y": 3582
}
],
"animated": false,
@ -2188,7 +2188,7 @@
},
{
"x": 243.08333333333331,
"y": 3519
"y": 3582
}
],
"animated": false,
@ -2364,7 +2364,7 @@
},
{
"x": 325.08333333333337,
"y": 3519
"y": 3582
}
],
"animated": false,
@ -2400,11 +2400,11 @@
"route": [
{
"x": 325.0833333333333,
"y": 3585
"y": 3648
},
{
"x": 325,
"y": 3710
"y": 3773
}
],
"animated": false,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 814 KiB

After

Width:  |  Height:  |  Size: 814 KiB

View file

@ -52,7 +52,7 @@
"y": 213
},
"width": 294,
"height": 166,
"height": 272,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -90,7 +90,7 @@
"type": "rectangle",
"pos": {
"x": 119,
"y": 263
"y": 369
},
"width": 80,
"height": 66,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 132,
"y": 454
"y": 560
},
"width": 54,
"height": 66,
@ -332,7 +332,7 @@
},
{
"x": 145.66666666666669,
"y": 263
"y": 369
}
],
"animated": false,
@ -368,11 +368,11 @@
"route": [
{
"x": 159,
"y": 329
"y": 435
},
{
"x": 159,
"y": 454
"y": 560
}
],
"animated": false,
@ -420,7 +420,7 @@
},
{
"x": 172.33333333333334,
"y": 263
"y": 369
}
],
"animated": false,
@ -468,7 +468,7 @@
},
{
"x": 182,
"y": 212
"y": 213
}
],
"animated": false,
@ -508,7 +508,7 @@
},
{
"x": 286,
"y": 281
"y": 326
}
],
"animated": false,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 657 KiB

After

Width:  |  Height:  |  Size: 657 KiB

View file

@ -11,7 +11,7 @@
"y": 12
},
"width": 1388,
"height": 328,
"height": 438,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -49,7 +49,7 @@
"type": "oval",
"pos": {
"x": 62,
"y": 76
"y": 131
},
"width": 228,
"height": 200,
@ -90,7 +90,7 @@
"type": "diamond",
"pos": {
"x": 112,
"y": 144
"y": 199
},
"width": 128,
"height": 64,
@ -134,7 +134,7 @@
"y": 62
},
"width": 414,
"height": 228,
"height": 338,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -172,7 +172,7 @@
"type": "oval",
"pos": {
"x": 453,
"y": 112
"y": 222
},
"width": 128,
"height": 128,
@ -213,10 +213,10 @@
"type": "oval",
"pos": {
"x": 744,
"y": 94
"y": 123
},
"width": 266,
"height": 164,
"height": 216,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -254,7 +254,7 @@
"type": "hexagon",
"pos": {
"x": 813,
"y": 144
"y": 225
},
"width": 128,
"height": 64,
@ -295,10 +295,10 @@
"type": "hexagon",
"pos": {
"x": 1030,
"y": 94
"y": 119
},
"width": 320,
"height": 164,
"height": 224,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -336,7 +336,7 @@
"type": "oval",
"pos": {
"x": 1126,
"y": 144
"y": 229
},
"width": 128,
"height": 64,
@ -377,7 +377,7 @@
"type": "cloud",
"pos": {
"x": 1420,
"y": 84
"y": 194
},
"width": 512,
"height": 256,
@ -418,7 +418,7 @@
"type": "cylinder",
"pos": {
"x": 1548,
"y": 1280
"y": 1390
},
"width": 256,
"height": 512,
@ -459,7 +459,7 @@
"type": "class",
"pos": {
"x": 1276,
"y": 610
"y": 720
},
"width": 800,
"height": 400,
@ -534,7 +534,7 @@
"type": "sql_table",
"pos": {
"x": 1276,
"y": 1862
"y": 1972
},
"width": 800,
"height": 400,
@ -718,7 +718,7 @@
"type": "rectangle",
"pos": {
"x": 2239,
"y": 274
"y": 384
},
"width": 114,
"height": 66,
@ -759,7 +759,7 @@
"type": "text",
"pos": {
"x": 2096,
"y": 410
"y": 520
},
"width": 400,
"height": 800,
@ -799,7 +799,7 @@
"type": "code",
"pos": {
"x": 2096,
"y": 1386
"y": 1496
},
"width": 400,
"height": 300,
@ -839,7 +839,7 @@
"type": "code",
"pos": {
"x": 2200,
"y": 1862
"y": 1972
},
"width": 191,
"height": 65,
@ -904,11 +904,11 @@
"route": [
{
"x": 1676,
"y": 339
"y": 449
},
{
"x": 1676,
"y": 610
"y": 720
}
],
"animated": false,
@ -944,11 +944,11 @@
"route": [
{
"x": 1676,
"y": 1010
"y": 1120
},
{
"x": 1676,
"y": 1280
"y": 1390
}
],
"animated": false,
@ -984,11 +984,11 @@
"route": [
{
"x": 1676,
"y": 1792
"y": 1902
},
{
"x": 1676,
"y": 1862
"y": 1972
}
],
"animated": false,
@ -1024,11 +1024,11 @@
"route": [
{
"x": 2296,
"y": 340
"y": 450
},
{
"x": 2296,
"y": 410
"y": 520
}
],
"animated": false,
@ -1064,11 +1064,11 @@
"route": [
{
"x": 2296,
"y": 1210
"y": 1320
},
{
"x": 2296,
"y": 1386
"y": 1496
}
],
"animated": false,
@ -1104,11 +1104,11 @@
"route": [
{
"x": 2296,
"y": 1686
"y": 1796
},
{
"x": 2296,
"y": 1862
"y": 1972
}
],
"animated": false,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 948 KiB

After

Width:  |  Height:  |  Size: 948 KiB