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 🧹
|
||||
|
||||
#### 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))
|
||||
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))
|
||||
y1 = go2.Min(y1, int(labelTL.Y))
|
||||
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 }
|
||||
|
||||
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