clicking on link turns it purple
This commit is contained in:
Daniel Suh
Alexander Wang
parent
83ca32e4bf
commit
4fc1b95eec
3 changed files with 35 additions and 5 deletions
|
|
@ -635,16 +635,16 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
|
|||
textEl := d2themes.NewThemableElement("text", inlineTheme)
|
||||
textEl.X = labelTL.X + float64(connection.LabelWidth)/2
|
||||
textEl.Y = labelTL.Y + float64(connection.FontSize)
|
||||
textEl.Fill = connection.GetFontColor()
|
||||
textEl.ClassName = fontClass
|
||||
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
|
||||
textEl.Content = RenderText(connection.Label, textEl.X, float64(connection.LabelHeight))
|
||||
|
||||
if connection.Link != "" {
|
||||
textEl.Fill = "blue"
|
||||
textEl.ClassName += " text-underline"
|
||||
textEl.ClassName += " text-underline text-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())
|
||||
|
|
@ -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(
|
||||
buf,
|
||||
source,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
.text-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.text-link {
|
||||
fill: blue;
|
||||
}
|
||||
|
||||
.text-link:visited {
|
||||
fill: #1a0dab;
|
||||
}
|
||||
.d2-1855656159 .text-bold {
|
||||
font-family: "d2-1855656159-font-bold";
|
||||
}
|
||||
|
|
@ -116,7 +123,7 @@
|
|||
50.000000%, 100.000000% {
|
||||
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 <-> 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 -> 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 <-> 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 -> 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="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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
|
@ -2,6 +2,13 @@
|
|||
.text-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.text-link {
|
||||
fill: blue;
|
||||
}
|
||||
|
||||
.text-link:visited {
|
||||
fill: #1a0dab;
|
||||
}
|
||||
.d2-4163031082 .text-bold {
|
||||
font-family: "d2-4163031082-font-bold";
|
||||
}
|
||||
|
|
@ -116,7 +123,7 @@
|
|||
50.000000%, 100.000000% {
|
||||
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 <-> 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 -> 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 <-> 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 -> 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="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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Loading…
Reference in a new issue