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

render arrowhead labels

Browse source
This commit is contained in:
Gavin Nishizawa 2022-11-23 20:14:46 -08:00
parent 88bc8fec84
commit 79c1b9d285
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
5 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
d2renderers/d2svg/d2svg.go
View file

@ -447,6 +447,44 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
renderText(connection.Label, x, float64(connection.LabelHeight)),
)
}
length := geo.Route(connection.Route).Length()
if connection.SrcLabel != "" {
// TODO use arrowhead label dimensions
size := float64(connection.FontSize)
position := 0.
if length > 0 {
position = size / length
}
srcLabelTL := label.UnlockedTop.GetPointOnRoute(connection.Route, float64(connection.StrokeWidth), position, size, size)
textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", connection.FontSize, "black")
x := srcLabelTL.X + size/2
y := srcLabelTL.Y + float64(connection.FontSize)
fmt.Fprintf(writer, `<text class="text-italic" x="%f" y="%f" style="%s">%s</text>`,
x, y,
textStyle,
renderText(connection.SrcLabel, x, size),
)
}
if connection.DstLabel != "" {
// TODO use arrowhead label dimensions
size := float64(connection.FontSize)
position := 1.
if length > 0 {
position -= size / length
}
dstLabelTL := label.UnlockedTop.GetPointOnRoute(connection.Route, float64(connection.StrokeWidth), position, size, size)
textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", connection.FontSize, "black")
x := dstLabelTL.X + size/2
y := dstLabelTL.Y + float64(connection.FontSize)
fmt.Fprintf(writer, `<text class="text-italic" x="%f" y="%f" style="%s">%s</text>`,
x, y,
textStyle,
renderText(connection.DstLabel, x, size),
)
}
}
func renderOval(tl *geo.Point, width, height float64, style string) string {

9
e2etests/testdata/stable/arrowhead_adjustment/dagre/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: 328 KiB

After

Width:  |  Height:  |  Size: 471 KiB

9
e2etests/testdata/stable/arrowhead_adjustment/elk/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: 328 KiB

After

Width:  |  Height:  |  Size: 471 KiB

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

@ -17,7 +17,7 @@ width="401" height="552" viewBox="-144 -100 401 552"><style type="text/css">
</style><g class="shape" ><rect x="0" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:black">a</text><g class="shape" ><rect x="0" y="226" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="56.500000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:black">b</text><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="-44.000000" y="106.000000" width="201.000000" height="140.000000">
<rect x="-44.000000" y="106.000000" width="201.000000" height="140.000000" fill="white"></rect>
<rect x="-44.000000" y="166.000000" width="201" height="21" fill="black"></rect>
</mask><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:black">To err is human, to moo bovine</text><style type="text/css"><![CDATA[
</mask><path d="M 56.500000 128.000000 C 56.500000 166.000000 56.500000 186.000000 56.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="56.500000" y="182.000000" style="text-anchor:middle;font-size:16px;fill:black">To err is human, to moo bovine</text><text class="text-italic" x="70.500000" y="150.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="70.500000" y="218.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 468 KiB

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

@ -17,7 +17,7 @@ width="827" height="326" viewBox="-88 -88 827 326"><style type="text/css">
</style><g class="shape" ><rect x="12" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="68.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">a</text><g class="shape" ><rect x="526" y="12" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="582.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:black">b</text><marker id="mk-1247258845" markerWidth="24.200000" markerHeight="18.000000" refX="20.800000" refY="9.000000" viewBox="0.000000 0.000000 24.200000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="white" stroke="#0D32B2" stroke-width="2" points="0.000000,9.000000 11.000000,2.250000 22.000000,9.000000 11.000000,16.200000" /> </marker><mask id="mask-1985426896" maskUnits="userSpaceOnUse" x="101.000000" y="55.000000" width="449.000000" height="40.000000">
<rect x="101.000000" y="55.000000" width="449.000000" height="40.000000" fill="white"></rect>
<rect x="225.000000" y="65.000000" width="201" height="21" fill="black"></rect>
</mask><path d="M 127.000000 75.000000 L 522.000000 75.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="325.500000" y="81.000000" style="text-anchor:middle;font-size:16px;fill:black">To err is human, to moo bovine</text><style type="text/css"><![CDATA[
</mask><path d="M 127.000000 75.000000 L 522.000000 75.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-1247258845)" mask="url(#mask-1985426896)" /><text class="text-italic" x="325.500000" y="81.000000" style="text-anchor:middle;font-size:16px;fill:black">To err is human, to moo bovine</text><text class="text-italic" x="141.000000" y="69.000000" style="text-anchor:middle;font-size:16px;fill:black">1</text><text class="text-italic" x="510.000000" y="69.000000" style="text-anchor:middle;font-size:16px;fill:black">*</text><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 KiB

After

Width:  |  Height:  |  Size: 468 KiB