d2render: fix bounding box of 3d shapes with outside labels
This commit is contained in:
Alexander Wang
parent
91167c25db
commit
c90a35ccaa
7 changed files with 662 additions and 0 deletions
|
|
@ -3,3 +3,5 @@
|
||||||
#### Improvements 🧹
|
#### Improvements 🧹
|
||||||
|
|
||||||
#### Bugfixes ⛑️
|
#### Bugfixes ⛑️
|
||||||
|
|
||||||
|
- Render: fixes edge case of a 3d shape with outside label being cut off [#2132](https://github.com/terrastruct/d2/pull/2132)
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,18 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) {
|
||||||
)
|
)
|
||||||
|
|
||||||
labelTL := labelPosition.GetPointOnBox(s.GetBox(), label.PADDING, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight))
|
labelTL := labelPosition.GetPointOnBox(s.GetBox(), label.PADDING, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight))
|
||||||
|
if targetShape.ThreeDee {
|
||||||
|
offset := THREE_DEE_OFFSET
|
||||||
|
if targetShape.Type == ShapeHexagon {
|
||||||
|
offset /= 2
|
||||||
|
}
|
||||||
|
if strings.HasPrefix(targetShape.LabelPosition, "OUTSIDE_RIGHT") {
|
||||||
|
labelTL.X += float64(offset)
|
||||||
|
}
|
||||||
|
if strings.HasPrefix(targetShape.LabelPosition, "OUTSIDE_TOP") {
|
||||||
|
labelTL.Y -= float64(offset)
|
||||||
|
}
|
||||||
|
}
|
||||||
x1 = go2.Min(x1, int(labelTL.X))
|
x1 = go2.Min(x1, int(labelTL.X))
|
||||||
y1 = go2.Min(y1, int(labelTL.Y))
|
y1 = go2.Min(y1, int(labelTL.Y))
|
||||||
x2 = go2.Max(x2, int(labelTL.X)+targetShape.LabelWidth)
|
x2 = go2.Max(x2, int(labelTL.X)+targetShape.LabelWidth)
|
||||||
|
|
|
||||||
184
e2etests/testdata/themes/3d-sides/dagre/board.exp.json
generated
vendored
Normal file
184
e2etests/testdata/themes/3d-sides/dagre/board.exp.json
generated
vendored
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"isFolderOnly": false,
|
||||||
|
"fontFamily": "SourceCodePro",
|
||||||
|
"shapes": [
|
||||||
|
{
|
||||||
|
"id": "beats",
|
||||||
|
"type": "rectangle",
|
||||||
|
"pos": {
|
||||||
|
"x": 10,
|
||||||
|
"y": 20
|
||||||
|
},
|
||||||
|
"width": 1522,
|
||||||
|
"height": 308,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 2,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "B4",
|
||||||
|
"fillPattern": "dots",
|
||||||
|
"stroke": "B1",
|
||||||
|
"shadow": false,
|
||||||
|
"3d": true,
|
||||||
|
"multiple": false,
|
||||||
|
"double-border": true,
|
||||||
|
"tooltip": "",
|
||||||
|
"link": "",
|
||||||
|
"icon": null,
|
||||||
|
"iconPosition": "",
|
||||||
|
"blend": false,
|
||||||
|
"fields": null,
|
||||||
|
"methods": null,
|
||||||
|
"columns": null,
|
||||||
|
"label": "BEATS",
|
||||||
|
"fontSize": 28,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": false,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 82,
|
||||||
|
"labelHeight": 36,
|
||||||
|
"labelPosition": "OUTSIDE_TOP_CENTER",
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "beats.Explanation",
|
||||||
|
"type": "rectangle",
|
||||||
|
"pos": {
|
||||||
|
"x": 40,
|
||||||
|
"y": 50
|
||||||
|
},
|
||||||
|
"width": 1462,
|
||||||
|
"height": 248,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 0,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "B5",
|
||||||
|
"fillPattern": "dots",
|
||||||
|
"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": "BEATS IS A FAMILY OF \"DATA SHIPPERS,\" DISTINCT SERVICES THAT SEND A SINGLE TYPE OF DATA FROM MACHINES",
|
||||||
|
"fontSize": 24,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": false,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 1452,
|
||||||
|
"labelHeight": 31,
|
||||||
|
"labelPosition": "INSIDE_TOP_CENTER",
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "beats.Explanation.Image",
|
||||||
|
"type": "image",
|
||||||
|
"pos": {
|
||||||
|
"x": 707,
|
||||||
|
"y": 110
|
||||||
|
},
|
||||||
|
"width": 128,
|
||||||
|
"height": 128,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 2,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "N7",
|
||||||
|
"stroke": "B1",
|
||||||
|
"shadow": false,
|
||||||
|
"3d": false,
|
||||||
|
"multiple": false,
|
||||||
|
"double-border": false,
|
||||||
|
"tooltip": "",
|
||||||
|
"link": "",
|
||||||
|
"icon": {
|
||||||
|
"Scheme": "https",
|
||||||
|
"Opaque": "",
|
||||||
|
"User": null,
|
||||||
|
"Host": "www.pngkey.com",
|
||||||
|
"Path": "/png/full/75-752805_elastic-beats-logo-png-transparent-design.png",
|
||||||
|
"RawPath": "",
|
||||||
|
"OmitHost": false,
|
||||||
|
"ForceQuery": false,
|
||||||
|
"RawQuery": "",
|
||||||
|
"Fragment": "",
|
||||||
|
"RawFragment": ""
|
||||||
|
},
|
||||||
|
"iconPosition": "INSIDE_MIDDLE_CENTER",
|
||||||
|
"blend": false,
|
||||||
|
"fields": null,
|
||||||
|
"methods": null,
|
||||||
|
"columns": null,
|
||||||
|
"label": "",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": true,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 0,
|
||||||
|
"labelHeight": 0,
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 3
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
131
e2etests/testdata/themes/3d-sides/dagre/sketch.exp.svg
vendored
Normal file
131
e2etests/testdata/themes/3d-sides/dagre/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
184
e2etests/testdata/themes/3d-sides/elk/board.exp.json
generated
vendored
Normal file
184
e2etests/testdata/themes/3d-sides/elk/board.exp.json
generated
vendored
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"isFolderOnly": false,
|
||||||
|
"fontFamily": "SourceCodePro",
|
||||||
|
"shapes": [
|
||||||
|
{
|
||||||
|
"id": "beats",
|
||||||
|
"type": "rectangle",
|
||||||
|
"pos": {
|
||||||
|
"x": 12,
|
||||||
|
"y": 27
|
||||||
|
},
|
||||||
|
"width": 1547,
|
||||||
|
"height": 333,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 2,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "B4",
|
||||||
|
"fillPattern": "dots",
|
||||||
|
"stroke": "B1",
|
||||||
|
"shadow": false,
|
||||||
|
"3d": true,
|
||||||
|
"multiple": false,
|
||||||
|
"double-border": true,
|
||||||
|
"tooltip": "",
|
||||||
|
"link": "",
|
||||||
|
"icon": null,
|
||||||
|
"iconPosition": "",
|
||||||
|
"blend": false,
|
||||||
|
"fields": null,
|
||||||
|
"methods": null,
|
||||||
|
"columns": null,
|
||||||
|
"label": "BEATS",
|
||||||
|
"fontSize": 28,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": false,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 82,
|
||||||
|
"labelHeight": 36,
|
||||||
|
"labelPosition": "INSIDE_TOP_CENTER",
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "beats.Explanation",
|
||||||
|
"type": "rectangle",
|
||||||
|
"pos": {
|
||||||
|
"x": 54,
|
||||||
|
"y": 69
|
||||||
|
},
|
||||||
|
"width": 1462,
|
||||||
|
"height": 248,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 0,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "B5",
|
||||||
|
"fillPattern": "dots",
|
||||||
|
"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": "BEATS IS A FAMILY OF \"DATA SHIPPERS,\" DISTINCT SERVICES THAT SEND A SINGLE TYPE OF DATA FROM MACHINES",
|
||||||
|
"fontSize": 24,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": false,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 1452,
|
||||||
|
"labelHeight": 31,
|
||||||
|
"labelPosition": "INSIDE_TOP_CENTER",
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "beats.Explanation.Image",
|
||||||
|
"type": "image",
|
||||||
|
"pos": {
|
||||||
|
"x": 721,
|
||||||
|
"y": 129
|
||||||
|
},
|
||||||
|
"width": 128,
|
||||||
|
"height": 128,
|
||||||
|
"opacity": 1,
|
||||||
|
"strokeDash": 0,
|
||||||
|
"strokeWidth": 2,
|
||||||
|
"borderRadius": 0,
|
||||||
|
"fill": "N7",
|
||||||
|
"stroke": "B1",
|
||||||
|
"shadow": false,
|
||||||
|
"3d": false,
|
||||||
|
"multiple": false,
|
||||||
|
"double-border": false,
|
||||||
|
"tooltip": "",
|
||||||
|
"link": "",
|
||||||
|
"icon": {
|
||||||
|
"Scheme": "https",
|
||||||
|
"Opaque": "",
|
||||||
|
"User": null,
|
||||||
|
"Host": "www.pngkey.com",
|
||||||
|
"Path": "/png/full/75-752805_elastic-beats-logo-png-transparent-design.png",
|
||||||
|
"RawPath": "",
|
||||||
|
"OmitHost": false,
|
||||||
|
"ForceQuery": false,
|
||||||
|
"RawQuery": "",
|
||||||
|
"Fragment": "",
|
||||||
|
"RawFragment": ""
|
||||||
|
},
|
||||||
|
"iconPosition": "INSIDE_MIDDLE_CENTER",
|
||||||
|
"blend": false,
|
||||||
|
"fields": null,
|
||||||
|
"methods": null,
|
||||||
|
"columns": null,
|
||||||
|
"label": "",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontFamily": "mono",
|
||||||
|
"language": "",
|
||||||
|
"color": "N1",
|
||||||
|
"italic": false,
|
||||||
|
"bold": true,
|
||||||
|
"underline": false,
|
||||||
|
"labelWidth": 0,
|
||||||
|
"labelHeight": 0,
|
||||||
|
"zIndex": 0,
|
||||||
|
"level": 3
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
131
e2etests/testdata/themes/3d-sides/elk/sketch.exp.svg
vendored
Normal file
131
e2etests/testdata/themes/3d-sides/elk/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -340,6 +340,24 @@ api server -> logs: 持続する
|
||||||
logs: ログ { shape: page; style.multiple: true }
|
logs: ログ { shape: page; style.multiple: true }
|
||||||
|
|
||||||
network.data processor -> api server
|
network.data processor -> api server
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3d-sides",
|
||||||
|
themeID: &d2themescatalog.Terminal.ID,
|
||||||
|
script: `
|
||||||
|
beats: Beats {
|
||||||
|
Explanation: Beats is a family of "data shippers," distinct services that send a single type of data from machines {
|
||||||
|
grid-columns: 1
|
||||||
|
style.stroke-width: 0
|
||||||
|
Image: "" {
|
||||||
|
icon: https://www.pngkey.com/png/full/75-752805_elastic-beats-logo-png-transparent-design.png
|
||||||
|
shape: image
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
style.3d: true
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue