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

unique tooltip svg clipPath id

Browse source
This commit is contained in:
Alexander Wang 2025-01-28 09:16:14 -07:00
parent faefee93cc
commit 050107a67b
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
4 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
d2renderers/d2svg/appendix/appendix.go
View file

@ -17,6 +17,7 @@ import (
"oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/d2themes"
"oss.terrastruct.com/d2/lib/color"
svglib "oss.terrastruct.com/d2/lib/svg"
"oss.terrastruct.com/d2/lib/textmeasure"
"oss.terrastruct.com/util-go/go2"
)
@ -176,13 +177,17 @@ func Append(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []byte) []by
return renderOrder[i].shape.Level < renderOrder[j].shape.Level
})
diagramHash, err := diagram.HashID()
if err != nil {
return nil
}
// replace each rendered svg icon
for _, icon := range renderOrder {
// The clip-path has a unique ID, so this won't replace any user icons
// In the existing SVG, the transform places it top-left, so we adjust
var iconStr string
if icon.isTooltip {
iconStr = d2svg.TooltipIcon
iconStr = fmt.Sprintf(d2svg.TooltipIcon, diagramHash, svglib.SVGID(icon.shape.ID))
} else {
iconStr = d2svg.LinkIcon
}

10
d2renderers/d2svg/d2svg.go
View file

@ -1033,7 +1033,7 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
} else {
drawClass(writer, diagramHash, targetShape, inlineTheme)
}
addAppendixItems(appendixWriter, targetShape, s)
addAppendixItems(appendixWriter, diagramHash, targetShape, s)
fmt.Fprint(writer, `</g>`)
fmt.Fprint(writer, closingTag)
return labelMask, nil
@ -1047,7 +1047,7 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
} else {
drawTable(writer, diagramHash, targetShape, inlineTheme)
}
addAppendixItems(appendixWriter, targetShape, s)
addAppendixItems(appendixWriter, diagramHash, targetShape, s)
fmt.Fprint(writer, `</g>`)
fmt.Fprint(writer, closingTag)
return labelMask, nil
@ -1467,13 +1467,13 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
svg.EscapeText(targetShape.Tooltip),
)
}
addAppendixItems(appendixWriter, targetShape, s)
addAppendixItems(appendixWriter, diagramHash, targetShape, s)
fmt.Fprint(writer, closingTag)
return labelMask, nil
}
func addAppendixItems(writer io.Writer, targetShape d2target.Shape, s shape.Shape) {
func addAppendixItems(writer io.Writer, diagramHash string, targetShape d2target.Shape, s shape.Shape) {
var p1, p2 *geo.Point
if targetShape.Tooltip != "" || targetShape.Link != "" {
bothIcons := targetShape.Tooltip != "" && targetShape.Link != ""
@ -1519,7 +1519,7 @@ func addAppendixItems(writer io.Writer, targetShape d2target.Shape, s shape.Shap
x-appendixIconRadius,
y-appendixIconRadius,
svg.EscapeText(targetShape.Tooltip),
TooltipIcon,
fmt.Sprintf(TooltipIcon, diagramHash, svg.SVGID(targetShape.ID)),
)
}
if targetShape.Link != "" {

4
d2renderers/d2svg/tooltip.svg
View file

@ -1,12 +1,12 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3427_35082111)">
<g clip-path="url(#clip0_3427_35082111-%[1]s-%[2]s)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 19.998V15.998" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 12H16.0098" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3427_35082111">
<clipPath id="clip0_3427_35082111-%[1]s-%[2]s">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 926 B

After

Width:  |  Height:  |  Size: 950 B

6
lib/svg/text.go
View file

@ -2,7 +2,9 @@ package svg
import (
"bytes"
"encoding/base32"
"encoding/xml"
"strings"
)
func EscapeText(text string) string {
@ -10,3 +12,7 @@ func EscapeText(text string) string {
_ = xml.EscapeText(buf, []byte(text))
return buf.String()
}
func SVGID(text string) string {
return strings.TrimRight(base32.StdEncoding.EncodeToString([]byte(text)), "=")
}