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

Merge pull request #189 from alixander/shape-stroke-dash

Browse source 
render: Support stroke-dash on shapes
This commit is contained in:
Alexander Wang 2022-11-24 01:09:26 -08:00 committed by GitHub
commit d084b8d96e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
#### Features 🚀
- Arrowhead labels are now supported. [#182](https://github.com/terrastruct/d2/pull/182)
- `stroke-dash` on shapes is now supported. [#188](https://github.com/terrastruct/d2/issues/188)
#### Improvements 🔧

4
d2renderers/d2svg/d2svg.go
View file

@ -755,6 +755,10 @@ func shapeStyle(shape d2target.Shape) string {
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
if shape.StrokeDash != 0 {
dashSize, gapSize := getStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}

1
e2etests/stable_test.go
View file

@ -909,6 +909,7 @@ x: {
y: {
style: {
stroke-dash: 5
opacity: 0.6
fill: red
3d: true

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

@ -50,7 +50,7 @@
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeDash": 5,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "red",

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

@ -22,7 +22,7 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB

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

@ -50,7 +50,7 @@
"height": 126,
"level": 1,
"opacity": 0.6,
"strokeDash": 0,
"strokeDash": 5,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "red",

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

@ -22,7 +22,7 @@ width="527" height="326" viewBox="-88 -88 527 326"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="225,12 240,-3 354,-3 339,12 225,12 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><polygon points="339,12 354,-3 354,123 339,138 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;"/><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;" /></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
</defs><g class="shape" filter="url(#shadow-filter)" ><rect x="12" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">x</text><g class="shape" ><polygon points="225,12 240,-3 354,-3 339,12 225,12 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="339,12 354,-3 354,123 339,138 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="225" y="12" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="282.000000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">y</text><marker id="mk-1457214650" 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="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 128.500000 75.000000 L 221.000000 75.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB