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

Merge pull request #187 from alixander/fix-3d

Browse source 
Fix 3D style renders
This commit is contained in:
Alexander Wang 2022-11-23 23:23:59 -08:00 committed by GitHub
commit 1f2bafffda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 361 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -242,6 +242,8 @@ Open sourced under the Mozilla Public License 2.0. See [./LICENSE.txt](./LICENSE
version updates from Github periodically. version updates from Github periodically.
- Does D2 need a browser to run? - Does D2 need a browser to run?
- No, D2 can run entirely server-side. - No, D2 can run entirely server-side.
- What's coming in the next release?
- See [./ci/release/changelogs/next.md](./ci/release/changelogs/next.md).
- I have a question or need help. - I have a question or need help.
- The best way to get help is to ask on [D2 Discord](https://discord.gg/NF6X8K4eDq) - The best way to get help is to ask on [D2 Discord](https://discord.gg/NF6X8K4eDq)
- I have a feature request, proposal, or bug report. - I have a feature request, proposal, or bug report.

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

@ -1,13 +1,10 @@
For v0.0.99 we focused on X, Y and Z. Enjoy!
#### Features 🚀 #### Features 🚀
- Now you can easily do x, y and z #9999 - Arrowhead labels are now supported. [#182](https://github.com/terrastruct/d2/pull/182)
#### Improvements 🔧 #### Improvements 🔧
- Improves something or the other #9999
#### Bugfixes 🔴 #### Bugfixes 🔴
- The svg renderer now displays arrowhead labels fixing #169 - 3D style was missing border and other styles for its top and right faces.
[#187](https://github.com/terrastruct/d2/pull/187)

8
ci/release/changelogs/template.md
View file

@ -1,13 +1,5 @@
For v0.0.99 we focused on X, Y and Z. Enjoy!
#### Features 🚀 #### Features 🚀
- Now you can easily do x, y and z #9999
#### Improvements 🔧 #### Improvements 🔧
- Improves something or the other #9999
#### Bugfixes 🔴 #### Bugfixes 🔴
- Fixes something or the other #9999

11
d2renderers/d2svg/d2svg.go
View file

@ -557,6 +557,9 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
if err != nil { if err != nil {
darkerColor = targetShape.Fill darkerColor = targetShape.Fill
} }
sideShape := targetShape
sideShape.Fill = darkerColor
sideStyle := shapeStyle(sideShape)
var topPolygonPoints []string var topPolygonPoints []string
for _, v := range []d2target.Point{ for _, v := range []d2target.Point{
@ -570,8 +573,8 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y), fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
) )
} }
fmt.Fprintf(writer, `<polygon points="%s" style="fill:%s;"/>`, fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
strings.Join(topPolygonPoints, ""), darkerColor) strings.Join(topPolygonPoints, ""), sideStyle)
var rightPolygonPoints []string var rightPolygonPoints []string
for _, v := range []d2target.Point{ for _, v := range []d2target.Point{
@ -584,8 +587,8 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y), fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
) )
} }
fmt.Fprintf(writer, `<polygon points="%s" style="fill:%s;"/>`, fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
strings.Join(rightPolygonPoints, ""), darkerColor) strings.Join(rightPolygonPoints, ""), sideStyle)
} }
if targetShape.Multiple { if targetShape.Multiple {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`, fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,

32
e2etests/stable_test.go
View file

@ -892,6 +892,38 @@ a -> b: To err is human, to moo bovine {
shape: diamond shape: diamond
} }
} }
`,
},
{
name: "stylish",
script: `
x: {
style: {
opacity: 0.6
fill: orange
stroke: "#53C0D8"
stroke-width: 5
shadow: true
}
}
y: {
style: {
opacity: 0.6
fill: red
3d: true
stroke: black
}
}
x -> y: {
style: {
stroke: green
opacity: 0.5
stroke-width: 2
stroke-dash: 5
}
}
`, `,
}, },
} }

2
e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg vendored
View file

@ -14,7 +14,7 @@ width="371" height="580" viewBox="-100 -100 371 580"><style type="text/css">
} }
]]> ]]>
</style><g class="shape" ><polygon points="0,0 15,-15 186,-15 171,0 0,0 " style="fill:#cad0f8;"/><polygon points="171,0 186,-15 186,111 171,126 " style="fill:#cad0f8;"/><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">rectangle</text><g class="shape" ><polygon points="9,226 24,211 178,211 163,226 9,226 " style="fill:#cad0f8;"/><polygon points="163,226 178,211 178,365 163,380 " style="fill:#cad0f8;"/><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:black">square</text><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /><style type="text/css"><![CDATA[ </style><g class="shape" ><polygon points="0,0 15,-15 186,-15 171,0 0,0 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="171,0 186,-15 186,111 171,126 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">rectangle</text><g class="shape" ><polygon points="9,226 24,211 178,211 163,226 9,226 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="163,226 178,211 178,365 163,380 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:black">square</text><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /><style type="text/css"><![CDATA[
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";
} }

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 325 KiB

2
e2etests/testdata/stable/square_3d/elk/sketch.exp.svg vendored
View file

@ -14,7 +14,7 @@ width="625" height="354" viewBox="-88 -88 625 354"><style type="text/css">
} }
]]> ]]>
</style><g class="shape" ><polygon points="12,26 27,11 198,11 183,26 12,26 " style="fill:#cad0f8;"/><polygon points="183,26 198,11 198,137 183,152 " style="fill:#cad0f8;"/><rect x="12" y="26" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="92.000000" style="text-anchor:middle;font-size:16px;fill:black">rectangle</text><g class="shape" ><polygon points="283,12 298,-3 452,-3 437,12 283,12 " style="fill:#cad0f8;"/><polygon points="437,12 452,-3 452,151 437,166 " style="fill:#cad0f8;"/><rect x="283" y="12" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="360.000000" y="92.000000" style="text-anchor:middle;font-size:16px;fill:black">square</text><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 185.000000 89.000000 L 279.000000 89.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /><style type="text/css"><![CDATA[ </style><g class="shape" ><polygon points="12,26 27,11 198,11 183,26 12,26 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="183,26 198,11 198,137 183,152 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="12" y="26" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="92.000000" style="text-anchor:middle;font-size:16px;fill:black">rectangle</text><g class="shape" ><polygon points="283,12 298,-3 452,-3 437,12 283,12 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="437,12 452,-3 452,151 437,166 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="283" y="12" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="360.000000" y="92.000000" style="text-anchor:middle;font-size:16px;fill:black">square</text><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 185.000000 89.000000 L 279.000000 89.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /><style type="text/css"><![CDATA[
.text-bold { .text-bold {
font-family: "font-bold"; font-family: "font-bold";
} }

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 325 KiB

130
e2etests/testdata/stable/stylish/dagre/board.exp.json vendored Normal file
View file

@ -0,0 +1,130 @@
{
"name": "",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 1,
"y": 0
},
"width": 113,
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeWidth": 5,
"borderRadius": 0,
"fill": "orange",
"stroke": "#53C0D8",
"shadow": true,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "y",
"type": "",
"pos": {
"x": 0,
"y": 226
},
"width": 114,
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "red",
"stroke": "black",
"shadow": false,
"3d": true,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "y",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 0.5,
"strokeDash": 5,
"strokeWidth": 2,
"stroke": "green",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 57,
"y": 126
},
{
"x": 57,
"y": 166
},
{
"x": 57,
"y": 186
},
{
"x": 57,
"y": 226
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null
}
]
}

32
e2etests/testdata/stable/stylish/dagre/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 325 KiB

121
e2etests/testdata/stable/stylish/elk/board.exp.json vendored Normal file
View file

@ -0,0 +1,121 @@
{
"name": "",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 113,
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeWidth": 5,
"borderRadius": 0,
"fill": "orange",
"stroke": "#53C0D8",
"shadow": true,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
},
{
"id": "y",
"type": "",
"pos": {
"x": 225,
"y": 12
},
"width": 114,
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "red",
"stroke": "black",
"shadow": false,
"3d": true,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "y",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 0.5,
"strokeDash": 5,
"strokeWidth": 2,
"stroke": "green",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 125,
"y": 75
},
{
"x": 225,
"y": 75
}
],
"animated": false,
"tooltip": "",
"icon": null
}
]
}

32
e2etests/testdata/stable/stylish/elk/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 325 KiB