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

clicking on link turns it purple

Browse source
This commit is contained in:
Daniel Suh 2024-05-29 21:45:36 -04:00 committed by Alexander Wang
parent 83ca32e4bf
commit 4fc1b95eec
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
3 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
d2renderers/d2svg/d2svg.go
View file

@ -635,16 +635,16 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
textEl := d2themes.NewThemableElement("text", inlineTheme) textEl := d2themes.NewThemableElement("text", inlineTheme)
textEl.X = labelTL.X + float64(connection.LabelWidth)/2 textEl.X = labelTL.X + float64(connection.LabelWidth)/2
textEl.Y = labelTL.Y + float64(connection.FontSize) textEl.Y = labelTL.Y + float64(connection.FontSize)
textEl.Fill = connection.GetFontColor()
textEl.ClassName = fontClass textEl.ClassName = fontClass
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize) textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight)) textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight))
if connection.Link != "" { if connection.Link != "" {
textEl.Fill = "blue" textEl.ClassName += " text-underline text-link"
textEl.ClassName += " text-underline"
fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, svg.EscapeText(connection.Link)) fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, svg.EscapeText(connection.Link))
} else {
textEl.Fill = connection.GetFontColor()
} }
fmt.Fprint(writer, textEl.Render()) fmt.Fprint(writer, textEl.Render())
@ -1602,6 +1602,22 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
}`, }`,
) )
appendOnTrigger(
buf,
source,
[]string{
`text-link`,
},
`
.text-link {
fill: blue;
}
.text-link:visited {
fill: #1a0dab;
}`,
)
appendOnTrigger( appendOnTrigger(
buf, buf,
source, source,

9
e2etests/testdata/txtar/link-on-connections/dagre/sketch.exp.svg vendored
View file

@ -2,6 +2,13 @@
.text-underline { .text-underline {
text-decoration: underline; text-decoration: underline;
} }
.text-link {
fill: blue;
}
.text-link:visited {
fill: #1a0dab;
}
.d2-1855656159 .text-bold { .d2-1855656159 .text-bold {
font-family: "d2-1855656159-font-bold"; font-family: "d2-1855656159-font-bold";
} }
@ -116,7 +123,7 @@
50.000000%, 100.000000% { 50.000000%, 100.000000% {
opacity: 1; opacity: 1;
} }
}]]></style><g style="animation: d2Transition-d2-1855656159-0 2000ms infinite" class="d2-1855656159" width="133" height="442" viewBox="0 -1 133 442"><rect x="0.000000" y="-1.000000" width="133.000000" height="442.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="40.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="40.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="40.000000" y="374.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" 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 points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 66.500000 69.500000 C 66.500000 114.300003 66.500000 138.699997 66.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="66.500000" y="132.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 66.500000 254.500000 C 66.500000 301.299988 66.500000 325.700012 66.500000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="67.000000" y="319.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-1855656159" maskUnits="userSpaceOnUse" x="0" y="-1" width="133" height="442"> }]]></style><g style="animation: d2Transition-d2-1855656159-0 2000ms infinite" class="d2-1855656159" width="133" height="442" viewBox="0 -1 133 442"><rect x="0.000000" y="-1.000000" width="133.000000" height="442.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="40.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="40.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="40.000000" y="374.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="66.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" 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 points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 66.500000 69.500000 C 66.500000 114.300003 66.500000 138.699997 66.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="66.500000" y="132.000000" class="text-italic text-underline text-link" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 66.500000 254.500000 C 66.500000 301.299988 66.500000 325.700012 66.500000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1855656159)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="67.000000" y="319.000000" class="text-italic text-underline text-link" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-1855656159" maskUnits="userSpaceOnUse" x="0" y="-1" width="133" height="442">
<rect x="0" y="-1" width="133" height="442" fill="white"></rect> <rect x="0" y="-1" width="133" height="442" fill="white"></rect>
<rect x="62.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect> <rect x="62.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="62.500000" y="209.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect> <rect x="62.500000" y="209.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

9
e2etests/testdata/txtar/link-on-connections/elk/sketch.exp.svg vendored
View file

@ -2,6 +2,13 @@
.text-underline { .text-underline {
text-decoration: underline; text-decoration: underline;
} }
.text-link {
fill: blue;
}
.text-link:visited {
fill: #1a0dab;
}
.d2-4163031082 .text-bold { .d2-4163031082 .text-bold {
font-family: "d2-4163031082-font-bold"; font-family: "d2-4163031082-font-bold";
} }
@ -116,7 +123,7 @@
50.000000%, 100.000000% { 50.000000%, 100.000000% {
opacity: 1; opacity: 1;
} }
}]]></style><g style="animation: d2Transition-d2-4163031082-0 2000ms infinite" class="d2-4163031082" width="133" height="522" viewBox="12 11 133 522"><rect x="12.000000" y="11.000000" width="133.000000" height="522.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="52.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="52.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="52.000000" y="466.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="504.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" 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 points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 78.500000 82.000000 L 78.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="78.500000" y="164.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 78.500000 307.000000 L 78.500000 462.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="79.000000" y="391.000000" fill="blue" class="text-italic text-underline" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-4163031082" maskUnits="userSpaceOnUse" x="12" y="11" width="133" height="522"> }]]></style><g style="animation: d2Transition-d2-4163031082-0 2000ms infinite" class="d2-4163031082" width="133" height="522" viewBox="12 11 133 522"><rect x="12.000000" y="11.000000" width="133.000000" height="522.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><g id="a"><g class="shape" ><rect x="52.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="52.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="52.000000" y="466.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="78.500000" y="504.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" 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 points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-3488378134" 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 points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 78.500000 82.000000 L 78.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="https://google.com/" xlink:href="https://google.com/"><text x="78.500000" y="164.000000" class="text-italic text-underline text-link" style="text-anchor:middle;font-size:16px">https://google.com/</text></a></g><g id="(b -&gt; c)[0]"><path d="M 78.500000 307.000000 L 78.500000 462.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4163031082)" /><a href="root.layers.d" xlink:href="root.layers.d"><text x="79.000000" y="391.000000" class="text-italic text-underline text-link" style="text-anchor:middle;font-size:16px">root.layers.d</text></a></g><mask id="d2-4163031082" maskUnits="userSpaceOnUse" x="12" y="11" width="133" height="522">
<rect x="12" y="11" width="133" height="522" fill="white"></rect> <rect x="12" y="11" width="133" height="522" fill="white"></rect>
<rect x="74.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect> <rect x="74.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="74.500000" y="261.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect> <rect x="74.500000" y="261.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB