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 🧹 #### 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) - `<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 ⛑️ #### Bugfixes ⛑️

View file

@ -248,20 +248,31 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
} }
if n.LayoutOptions.Padding == DefaultOpts.Padding { if n.LayoutOptions.Padding == DefaultOpts.Padding {
// Default labelHeight := 0
paddingTop := 50
if obj.LabelHeight != nil { 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)) contentBox := geo.NewBox(geo.NewPoint(0, 0), float64(n.Width), float64(n.Height))
shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value] shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[obj.Attributes.Shape.Value]
s := shape.NewShape(shapeType, contentBox) 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]", n.LayoutOptions.Padding = fmt.Sprintf("[top=%d,left=50,bottom=50,right=50]",
paddingTop, // Default padding
go2.Max(int(math.Ceil(paddingTop)), 50),
) )
} }
} else { } else {

View file

@ -79,6 +79,14 @@ func testStable(t *testing.T) {
border-radius: 20 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 "y": 12
}, },
"width": 701, "width": 701,
"height": 1812, "height": 1835,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -52,7 +52,7 @@
"y": 612 "y": 612
}, },
"width": 525, "width": 525,
"height": 1067, "height": 1090,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -90,7 +90,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 203, "x": 203,
"y": 939 "y": 962
}, },
"width": 334, "width": 334,
"height": 690, "height": 690,
@ -131,7 +131,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 253, "x": 253,
"y": 989 "y": 1012
}, },
"width": 193, "width": 193,
"height": 166, "height": 166,
@ -172,7 +172,7 @@
"type": "text", "type": "text",
"pos": { "pos": {
"x": 303, "x": 303,
"y": 1084 "y": 1107
}, },
"width": 16, "width": 16,
"height": 21, "height": 21,
@ -212,7 +212,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 339, "x": 339,
"y": 1039 "y": 1062
}, },
"width": 57, "width": 57,
"height": 66, "height": 66,
@ -253,7 +253,7 @@
"type": "text", "type": "text",
"pos": { "pos": {
"x": 358, "x": 358,
"y": 1331 "y": 1354
}, },
"width": 80, "width": 80,
"height": 21, "height": 21,
@ -293,7 +293,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 367, "x": 367,
"y": 1513 "y": 1536
}, },
"width": 63, "width": 63,
"height": 66, "height": 66,
@ -337,7 +337,7 @@
"y": 662 "y": 662
}, },
"width": 150, "width": 150,
"height": 192, "height": 215,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -375,7 +375,7 @@
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 162, "x": 162,
"y": 712 "y": 735
}, },
"width": 50, "width": 50,
"height": 92, "height": 92,
@ -416,7 +416,7 @@
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 285, "x": 285,
"y": 721 "y": 732
}, },
"width": 74, "width": 74,
"height": 74, "height": 74,
@ -645,19 +645,19 @@
"route": [ "route": [
{ {
"x": 311, "x": 311,
"y": 1105 "y": 1128
}, },
{ {
"x": 311, "x": 311,
"y": 1291 "y": 1314
}, },
{ {
"x": 385.16666666666663, "x": 385.16666666666663,
"y": 1291 "y": 1314
}, },
{ {
"x": 385.16666666666663, "x": 385.16666666666663,
"y": 1331 "y": 1354
} }
], ],
"animated": false, "animated": false,
@ -693,11 +693,11 @@
"route": [ "route": [
{ {
"x": 398.5, "x": 398.5,
"y": 1352 "y": 1375
}, },
{ {
"x": 398.5, "x": 398.5,
"y": 1513 "y": 1536
} }
], ],
"animated": false, "animated": false,
@ -733,19 +733,19 @@
"route": [ "route": [
{ {
"x": 212, "x": 212,
"y": 854 "y": 877
}, },
{ {
"x": 212, "x": 212,
"y": 894 "y": 917
}, },
{ {
"x": 321, "x": 321,
"y": 894 "y": 917
}, },
{ {
"x": 321, "x": 321,
"y": 989 "y": 1012
} }
], ],
"animated": false, "animated": false,
@ -841,7 +841,7 @@
}, },
{ {
"x": 403.5, "x": 403.5,
"y": 939 "y": 962
} }
], ],
"animated": false, "animated": false,
@ -977,15 +977,15 @@
}, },
{ {
"x": 486, "x": 486,
"y": 1291 "y": 1314
}, },
{ {
"x": 411.8333333333333, "x": 411.8333333333333,
"y": 1291 "y": 1314
}, },
{ {
"x": 411.8333333333333, "x": 411.8333333333333,
"y": 1331 "y": 1354
} }
], ],
"animated": false, "animated": false,
@ -1069,15 +1069,15 @@
"route": [ "route": [
{ {
"x": 342.8333333333333, "x": 342.8333333333333,
"y": 1629 "y": 1652
}, },
{ {
"x": 342.8333333333333, "x": 342.8333333333333,
"y": 1724 "y": 1747
}, },
{ {
"x": 627, "x": 627,
"y": 1724 "y": 1747
}, },
{ {
"x": 627, "x": 627,
@ -1125,15 +1125,15 @@
"route": [ "route": [
{ {
"x": 162, "x": 162,
"y": 854 "y": 877
}, },
{ {
"x": 162, "x": 162,
"y": 1774 "y": 1797
}, },
{ {
"x": 654, "x": 654,
"y": 1774 "y": 1797
}, },
{ {
"x": 654, "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 "y": 3469
}, },
"width": 327, "width": 327,
"height": 166, "height": 229,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -623,7 +623,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 129, "x": 129,
"y": 3519 "y": 3582
}, },
"width": 63, "width": 63,
"height": 66, "height": 66,
@ -1045,7 +1045,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 212, "x": 212,
"y": 3519 "y": 3582
}, },
"width": 62, "width": 62,
"height": 66, "height": 66,
@ -1221,7 +1221,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 294, "x": 294,
"y": 3519 "y": 3582
}, },
"width": 62, "width": 62,
"height": 66, "height": 66,
@ -1262,7 +1262,7 @@
"type": "parallelogram", "type": "parallelogram",
"pos": { "pos": {
"x": 267, "x": 267,
"y": 3710 "y": 3773
}, },
"width": 115, "width": 115,
"height": 66, "height": 66,
@ -1796,7 +1796,7 @@
}, },
{ {
"x": 160.58333333333331, "x": 160.58333333333331,
"y": 3519 "y": 3582
} }
], ],
"animated": false, "animated": false,
@ -2188,7 +2188,7 @@
}, },
{ {
"x": 243.08333333333331, "x": 243.08333333333331,
"y": 3519 "y": 3582
} }
], ],
"animated": false, "animated": false,
@ -2364,7 +2364,7 @@
}, },
{ {
"x": 325.08333333333337, "x": 325.08333333333337,
"y": 3519 "y": 3582
} }
], ],
"animated": false, "animated": false,
@ -2400,11 +2400,11 @@
"route": [ "route": [
{ {
"x": 325.0833333333333, "x": 325.0833333333333,
"y": 3585 "y": 3648
}, },
{ {
"x": 325, "x": 325,
"y": 3710 "y": 3773
} }
], ],
"animated": false, "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 "y": 213
}, },
"width": 294, "width": 294,
"height": 166, "height": 272,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -90,7 +90,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 119, "x": 119,
"y": 263 "y": 369
}, },
"width": 80, "width": 80,
"height": 66, "height": 66,
@ -131,7 +131,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 132, "x": 132,
"y": 454 "y": 560
}, },
"width": 54, "width": 54,
"height": 66, "height": 66,
@ -332,7 +332,7 @@
}, },
{ {
"x": 145.66666666666669, "x": 145.66666666666669,
"y": 263 "y": 369
} }
], ],
"animated": false, "animated": false,
@ -368,11 +368,11 @@
"route": [ "route": [
{ {
"x": 159, "x": 159,
"y": 329 "y": 435
}, },
{ {
"x": 159, "x": 159,
"y": 454 "y": 560
} }
], ],
"animated": false, "animated": false,
@ -420,7 +420,7 @@
}, },
{ {
"x": 172.33333333333334, "x": 172.33333333333334,
"y": 263 "y": 369
} }
], ],
"animated": false, "animated": false,
@ -468,7 +468,7 @@
}, },
{ {
"x": 182, "x": 182,
"y": 212 "y": 213
} }
], ],
"animated": false, "animated": false,
@ -508,7 +508,7 @@
}, },
{ {
"x": 286, "x": 286,
"y": 281 "y": 326
} }
], ],
"animated": false, "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 "y": 12
}, },
"width": 1388, "width": 1388,
"height": 328, "height": 438,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -49,7 +49,7 @@
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 62, "x": 62,
"y": 76 "y": 131
}, },
"width": 228, "width": 228,
"height": 200, "height": 200,
@ -90,7 +90,7 @@
"type": "diamond", "type": "diamond",
"pos": { "pos": {
"x": 112, "x": 112,
"y": 144 "y": 199
}, },
"width": 128, "width": 128,
"height": 64, "height": 64,
@ -134,7 +134,7 @@
"y": 62 "y": 62
}, },
"width": 414, "width": 414,
"height": 228, "height": 338,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -172,7 +172,7 @@
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 453, "x": 453,
"y": 112 "y": 222
}, },
"width": 128, "width": 128,
"height": 128, "height": 128,
@ -213,10 +213,10 @@
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 744, "x": 744,
"y": 94 "y": 123
}, },
"width": 266, "width": 266,
"height": 164, "height": 216,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -254,7 +254,7 @@
"type": "hexagon", "type": "hexagon",
"pos": { "pos": {
"x": 813, "x": 813,
"y": 144 "y": 225
}, },
"width": 128, "width": 128,
"height": 64, "height": 64,
@ -295,10 +295,10 @@
"type": "hexagon", "type": "hexagon",
"pos": { "pos": {
"x": 1030, "x": 1030,
"y": 94 "y": 119
}, },
"width": 320, "width": 320,
"height": 164, "height": 224,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -336,7 +336,7 @@
"type": "oval", "type": "oval",
"pos": { "pos": {
"x": 1126, "x": 1126,
"y": 144 "y": 229
}, },
"width": 128, "width": 128,
"height": 64, "height": 64,
@ -377,7 +377,7 @@
"type": "cloud", "type": "cloud",
"pos": { "pos": {
"x": 1420, "x": 1420,
"y": 84 "y": 194
}, },
"width": 512, "width": 512,
"height": 256, "height": 256,
@ -418,7 +418,7 @@
"type": "cylinder", "type": "cylinder",
"pos": { "pos": {
"x": 1548, "x": 1548,
"y": 1280 "y": 1390
}, },
"width": 256, "width": 256,
"height": 512, "height": 512,
@ -459,7 +459,7 @@
"type": "class", "type": "class",
"pos": { "pos": {
"x": 1276, "x": 1276,
"y": 610 "y": 720
}, },
"width": 800, "width": 800,
"height": 400, "height": 400,
@ -534,7 +534,7 @@
"type": "sql_table", "type": "sql_table",
"pos": { "pos": {
"x": 1276, "x": 1276,
"y": 1862 "y": 1972
}, },
"width": 800, "width": 800,
"height": 400, "height": 400,
@ -718,7 +718,7 @@
"type": "rectangle", "type": "rectangle",
"pos": { "pos": {
"x": 2239, "x": 2239,
"y": 274 "y": 384
}, },
"width": 114, "width": 114,
"height": 66, "height": 66,
@ -759,7 +759,7 @@
"type": "text", "type": "text",
"pos": { "pos": {
"x": 2096, "x": 2096,
"y": 410 "y": 520
}, },
"width": 400, "width": 400,
"height": 800, "height": 800,
@ -799,7 +799,7 @@
"type": "code", "type": "code",
"pos": { "pos": {
"x": 2096, "x": 2096,
"y": 1386 "y": 1496
}, },
"width": 400, "width": 400,
"height": 300, "height": 300,
@ -839,7 +839,7 @@
"type": "code", "type": "code",
"pos": { "pos": {
"x": 2200, "x": 2200,
"y": 1862 "y": 1972
}, },
"width": 191, "width": 191,
"height": 65, "height": 65,
@ -904,11 +904,11 @@
"route": [ "route": [
{ {
"x": 1676, "x": 1676,
"y": 339 "y": 449
}, },
{ {
"x": 1676, "x": 1676,
"y": 610 "y": 720
} }
], ],
"animated": false, "animated": false,
@ -944,11 +944,11 @@
"route": [ "route": [
{ {
"x": 1676, "x": 1676,
"y": 1010 "y": 1120
}, },
{ {
"x": 1676, "x": 1676,
"y": 1280 "y": 1390
} }
], ],
"animated": false, "animated": false,
@ -984,11 +984,11 @@
"route": [ "route": [
{ {
"x": 1676, "x": 1676,
"y": 1792 "y": 1902
}, },
{ {
"x": 1676, "x": 1676,
"y": 1862 "y": 1972
} }
], ],
"animated": false, "animated": false,
@ -1024,11 +1024,11 @@
"route": [ "route": [
{ {
"x": 2296, "x": 2296,
"y": 340 "y": 450
}, },
{ {
"x": 2296, "x": 2296,
"y": 410 "y": 520
} }
], ],
"animated": false, "animated": false,
@ -1064,11 +1064,11 @@
"route": [ "route": [
{ {
"x": 2296, "x": 2296,
"y": 1210 "y": 1320
}, },
{ {
"x": 2296, "x": 2296,
"y": 1386 "y": 1496
} }
], ],
"animated": false, "animated": false,
@ -1104,11 +1104,11 @@
"route": [ "route": [
{ {
"x": 2296, "x": 2296,
"y": 1686 "y": 1796
}, },
{ {
"x": 2296, "x": 2296,
"y": 1862 "y": 1972
} }
], ],
"animated": false, "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