save

d2renderers/d2svg/appendix/appendix.go

@@ -96,6 +96,16 @@ func AppendTooltips(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []by
 	closingIndex := strings.LastIndex(svg, "</svg>")
 	svg = svg[:closingIndex] + appendix + svg[closingIndex:]
 
+	i := 1
+	for _, s := range diagram.Shapes {
+		if s.Tooltip != "" {
+			// 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
+			svg = strings.Replace(svg, d2svg.TooltipIcon, generateNumberedIcon(i, 0, ICON_RADIUS), 1)
+			i++
+		}
+	}
+
 	return []byte(svg)
 }
 
@@ -120,6 +130,16 @@ func generateTooltipAppendix(diagram *d2target.Diagram, ruler *textmeasure.Ruler
 `, tl.X, br.Y, (br.X - tl.X), strings.Join(tooltipLines, "\n")), maxWidth, totalHeight
 }
 
+func generateNumberedIcon(i, x, y int) string {
+	line := fmt.Sprintf(`<circle cx="%d" cy="%d" r="%d" fill="white" stroke="#DEE1EB" />`,
+		x+ICON_RADIUS, y, ICON_RADIUS)
+
+	line += fmt.Sprintf(`<text class="text-bold" x="%d" y="%d" style="font-size: %dpx;text-anchor:middle;">%d</text>`,
+		x+ICON_RADIUS, y+5, FONT_SIZE, i)
+
+	return line
+}
+
 func generateTooltipLine(i, y int, text string, ruler *textmeasure.Ruler) (string, int, int) {
 	mtext := &d2target.MText{
 		Text:     text,
@@ -129,11 +149,8 @@ func generateTooltipLine(i, y int, text string, ruler *textmeasure.Ruler) (strin
 	dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
 
 	// TODO box-shadow: 0px 0px 32px rgba(31, 36, 58, 0.1);
-	line := fmt.Sprintf(`<circle cx="%d" cy="%d" r="16" fill="transparent" stroke="#DEE1EB" />`,
+	line := fmt.Sprintf(`<g transform="translate(%d %d)">%s</g>`,
-		ICON_RADIUS, y)
+		0, y, generateNumberedIcon(i, 0, 0))
-
-	line += fmt.Sprintf(`<text class="text-bold" x="%d" y="%d" style="font-size: %dpx;text-anchor:middle;">%d</text>`,
-		ICON_RADIUS, y+5, FONT_SIZE, i)
 
 	line += fmt.Sprintf(`<text class="text" x="%d" y="%d" style="font-size: %dpx;">%s</text>`,
 		ICON_RADIUS*3, y, FONT_SIZE, d2svg.RenderText(text, ICON_RADIUS*3, float64(dims.Height)))

d2renderers/d2svg/d2svg.go

@@ -46,7 +46,7 @@ const (
 var multipleOffset = geo.NewVector(10, -10)
 
 //go:embed tooltip.svg
-var tooltipIcon string
+var TooltipIcon string
 
 //go:embed style.css
 var styleCSS string
@@ -842,10 +842,10 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 	}
 
 	if targetShape.Tooltip != "" {
-		fmt.Fprintf(writer, `<g transform="translate(%d %d) scale(2)">%s</g>`,
+		fmt.Fprintf(writer, `<g transform="translate(%d %d)">%s</g>`,
 			targetShape.Pos.X+targetShape.Width-tooltipIconLen/2,
 			targetShape.Pos.Y-tooltipIconLen/2,
-			tooltipIcon,
+			TooltipIcon,
 		)
 		fmt.Fprintf(writer, `<title>%s</title>`, targetShape.Tooltip)
 	}

d2renderers/d2svg/tooltip.svg

@@ -1,13 +1,13 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="9" cy="9" r="8.5" fill="white" stroke="#DEE1EB"/>
+<g clip-path="url(#clip0_3427_35082111)">
-<g clip-path="url(#clip0_3311_35077)">
+<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="M9 14C11.7614 14 14 11.7614 14 9C14 6.23858 11.7614 4 9 4C6.23858 4 4 6.23858 4 9C4 11.7614 6.23858 14 9 14Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/>
+<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="M9 11V9" stroke="#2E3346" 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="M9 7H9.005" stroke="#2E3346" 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_3311_35077">
+<clipPath id="clip0_3427_35082111">
-<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
+<rect width="32" height="32" fill="white"/>
 </clipPath>
 </defs>
 </svg>