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

use a group when a shape has multiple paths

Browse source
This commit is contained in:
Gavin Nishizawa 2022-11-09 11:45:26 -08:00
parent 3d9c35d244
commit c5f047805f
6 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
d2renderers/d2svg/d2svg.go
View file

@ -520,8 +520,16 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" %s/>`, pathData, style, shadowAttr) fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" %s/>`, pathData, style, shadowAttr)
} }
} }
for _, pathData := range s.GetSVGPathData() {
fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" %s/>`, pathData, style, shadowAttr) paths := s.GetSVGPathData()
if len(paths) == 1 {
fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" %s/>`, paths[0], style, shadowAttr)
} else {
fmt.Fprintf(writer, `<g class="shape" style="%s" %s>`, style, shadowAttr)
for _, pathData := range paths {
fmt.Fprintf(writer, `<path class="shape" d="%s"/>`, pathData)
}
fmt.Fprintf(writer, `</g>`)
} }
} }

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

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

Before

Width:  |  Height:  |  Size: 333 KiB

After

Width:  |  Height:  |  Size: 333 KiB

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

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

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 338 KiB

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

@ -12,7 +12,7 @@ width="634" height="652" viewBox="-100 -100 634 652"><style type="text/css">
stroke-linejoin: round; stroke-linejoin: round;
} }
]]> ]]>
</style><rect class="shape" x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:black">aaa</text><path class="shape" d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><path class="shape" d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:black">ddd</text><path class="shape" d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:black">eee</text><path class="shape" d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:black">bbb</text><rect class="shape" x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:black">ccc</text><mask id="mask-3626742025" maskUnits="userSpaceOnUse" x="105.000000" y="174.000000" width="23.000000" height="104.000000"> </style><rect class="shape" x="0" y="0" width="251" height="452" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="125.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:black">aaa</text><g class="shape" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" ><path class="shape" d="M 301 74 C 301 50 360.85 50 367.5 50 C 374.15 50 434 50 434 74 V 152 C 434 176 374.15 176 367.5 176 C 360.85 176 301 176 301 152 V 74 Z"/><path class="shape" d="M 301 74 C 301 98 360.85 98 367.5 98 C 374.15 98 434 98 434 74"/></g><text class="text-bold" x="367.500000" y="128.000000" style="text-anchor:middle;font-size:16px;fill:black">ddd</text><path class="shape" d="M 301 384.5231 L 301 276 L 431 276 L 431 384.5231 C 409.3333 361.2206 387.6667 361.2206 366 384.5231 C 344.3333 407.8256 322.6667 407.8256 301 384.5231 Z" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="366.000000" y="342.000000" style="text-anchor:middle;font-size:16px;fill:black">eee</text><path class="shape" d="M 50 276 V 357 H 116 V 402 L 146 357 H 182 V 276 H 50 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="116.000000" y="319.500000" style="text-anchor:middle;font-size:16px;fill:black">bbb</text><rect class="shape" x="72" y="50" width="128" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="136.000000" y="116.000000" style="text-anchor:middle;font-size:16px;fill:black">ccc</text><mask id="mask-3626742025" maskUnits="userSpaceOnUse" x="105.000000" y="174.000000" width="23.000000" height="104.000000">
<rect x="105.000000" y="174.000000" width="23.000000" height="104.000000" fill="white"></rect> <rect x="105.000000" y="174.000000" width="23.000000" height="104.000000" fill="white"></rect>
<rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect> <rect x="105.000000" y="215.000000" width="23" height="21" fill="black"></rect>
</mask><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#mask-3626742025)" /><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:black">111</text><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><mask id="mask-2957989372" maskUnits="userSpaceOnUse" x="145.000000" y="162.000000" width="168.000000" height="153.000000"> </mask><path d="M 124.500993 177.969391 C 117.769912 216.000000 116.000000 236.000000 116.000000 274.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" mask="url(#mask-3626742025)" /><text class="text-italic" x="116.500000" y="231.000000" style="text-anchor:middle;font-size:16px;fill:black">111</text><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.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="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><mask id="mask-2957989372" maskUnits="userSpaceOnUse" x="145.000000" y="162.000000" width="168.000000" height="153.000000">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 469 KiB

After

Width:  |  Height:  |  Size: 469 KiB

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

@ -788,7 +788,7 @@ width="1317" height="1854" viewBox="-100 -100 1317 1854"><style type="text/css">
.md .contains-task-list:dir(rtl) .task-list-item-checkbox { .md .contains-task-list:dir(rtl) .task-list-item-checkbox {
margin: 0 -1.6em 0.25em 0.2em; margin: 0 -1.6em 0.25em 0.2em;
} }
</style><rect class="shape" x="0" y="0" width="1117" height="1654" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="558.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:black">aa</text><rect class="shape" x="40" y="50" width="776" height="1554" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="428.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:black">bb</text><rect class="shape" x="915" y="652" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="972.000000" y="718.000000" style="text-anchor:middle;font-size:16px;fill:black">ll</text><path class="shape" d="M 902 450 C 902 426 960.95 426 967.5 426 C 974.05 426 1033 426 1033 450 V 528 C 1033 552 974.05 552 967.5 552 C 960.95 552 902 552 902 528 V 450 Z" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><path class="shape" d="M 902 450 C 902 474 960.95 474 967.5 474 C 974.05 474 1033 474 1033 450" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="967.500000" y="504.000000" style="text-anchor:middle;font-size:16px;fill:black">mm</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="867.000000" y="1429.000000" width="18" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>nn</p> </style><rect class="shape" x="0" y="0" width="1117" height="1654" style="fill:#E3E9FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="558.500000" y="33.000000" style="text-anchor:middle;font-size:28px;fill:black">aa</text><rect class="shape" x="40" y="50" width="776" height="1554" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="428.000000" y="79.000000" style="text-anchor:middle;font-size:24px;fill:black">bb</text><rect class="shape" x="915" y="652" width="114" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="972.000000" y="718.000000" style="text-anchor:middle;font-size:16px;fill:black">ll</text><g class="shape" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" ><path class="shape" d="M 902 450 C 902 426 960.95 426 967.5 426 C 974.05 426 1033 426 1033 450 V 528 C 1033 552 974.05 552 967.5 552 C 960.95 552 902 552 902 528 V 450 Z"/><path class="shape" d="M 902 450 C 902 474 960.95 474 967.5 474 C 974.05 474 1033 474 1033 450"/></g><text class="text-bold" x="967.500000" y="504.000000" style="text-anchor:middle;font-size:16px;fill:black">mm</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="867.000000" y="1429.000000" width="18" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>nn</p>
</div></foreignObject></g><rect class="shape" x="945" y="1378" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="1006.500000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">oo</text><rect class="shape" x="80" y="878" width="510" height="676" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="335.000000" y="903.000000" style="text-anchor:middle;font-size:20px;fill:black">cc</text><path class="shape" d="M 106 100 L 256 100 L 256 145.2 L 473 145.2 L 473 326 L 106 326 Z" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="289.500000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:black">ii</text><ellipse class="shape" cx="704.000000" cy="1441.000000" rx="63.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="704.000000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">kk</text><rect class="shape" x="120" y="928" width="355" height="226" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="297.500000" y="949.000000" style="text-anchor:middle;font-size:16px;fill:black">dd</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="409.000000" y="1254.000000" width="17" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>gg</p> </div></foreignObject></g><rect class="shape" x="945" y="1378" width="123" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="1006.500000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">oo</text><rect class="shape" x="80" y="878" width="510" height="676" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="335.000000" y="903.000000" style="text-anchor:middle;font-size:20px;fill:black">cc</text><path class="shape" d="M 106 100 L 256 100 L 256 145.2 L 473 145.2 L 473 326 L 106 326 Z" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="289.500000" y="125.000000" style="text-anchor:middle;font-size:20px;fill:black">ii</text><ellipse class="shape" cx="704.000000" cy="1441.000000" rx="63.000000" ry="63.000000" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="704.000000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">kk</text><rect class="shape" x="120" y="928" width="355" height="226" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="297.500000" y="949.000000" style="text-anchor:middle;font-size:16px;fill:black">dd</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="409.000000" y="1254.000000" width="17" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>gg</p>
</div></foreignObject></g><rect class="shape" x="356" y="1378" width="123" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="417.500000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">hh</text><path class="shape" d="M 300.5 276 C 300.0519 276 299.7532 275.8362 299.4545 275.5085 L 243.4481 214.2289 C 242.8507 213.5735 242.8507 212.5904 243.4481 211.935 L 299.4545 150.4915 C 300.0519 149.8361 300.948 149.8361 301.5454 150.4915 L 357.5519 211.9349 C 358.1493 212.5903 358.1493 213.5734 357.5519 214.2288 L 301.5455 275.5085 C 301.2468 275.8362 300.9481 276 300.5 276 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="300.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:black">jj</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="232.000000" y="1029.000000" width="16" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>ee</p> </div></foreignObject></g><rect class="shape" x="356" y="1378" width="123" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="417.500000" y="1444.000000" style="text-anchor:middle;font-size:16px;fill:black">hh</text><path class="shape" d="M 300.5 276 C 300.0519 276 299.7532 275.8362 299.4545 275.5085 L 243.4481 214.2289 C 242.8507 213.5735 242.8507 212.5904 243.4481 211.935 L 299.4545 150.4915 C 300.0519 149.8361 300.948 149.8361 301.5454 150.4915 L 357.5519 211.9349 C 358.1493 212.5903 358.1493 213.5734 357.5519 214.2288 L 301.5455 275.5085 C 301.2468 275.8362 300.9481 276 300.5 276 Z" style="fill:#CFD2DD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="300.500000" y="216.000000" style="text-anchor:middle;font-size:16px;fill:black">jj</text><g><foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" x="232.000000" y="1029.000000" width="16" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="md"><p>ee</p>
</div></foreignObject></g><rect class="shape" x="308" y="978" width="117" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="366.500000" y="1044.000000" style="text-anchor:middle;font-size:16px;fill:black">ff</text><mask id="mask-3834907066" maskUnits="userSpaceOnUse" x="238.000000" y="1051.000000" width="173.000000" height="214.000000"> </div></foreignObject></g><rect class="shape" x="308" y="978" width="117" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /><text class="text-bold" x="366.500000" y="1044.000000" style="text-anchor:middle;font-size:16px;fill:black">ff</text><mask id="mask-3834907066" maskUnits="userSpaceOnUse" x="238.000000" y="1051.000000" width="173.000000" height="214.000000">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 813 KiB

After

Width:  |  Height:  |  Size: 813 KiB

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

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

Before

Width:  |  Height:  |  Size: 488 KiB

After

Width:  |  Height:  |  Size: 488 KiB