save

d2renderers/d2svg/appendix/appendix.go

@@ -19,10 +19,11 @@ import (
 )
 
 const (
-	PAD_TOP   = 50
+	PAD_TOP     = 50
-	PAD_SIDES = 40
+	PAD_SIDES   = 40
-	FONT_SIZE = 16
+	FONT_SIZE   = 16
-	SPACER    = 20
+	SPACER      = 20
+	ICON_RADIUS = 16
 )
 
 var viewboxRegex = regexp.MustCompile(`viewBox=\"([0-9\- ]+)\"`)
@@ -47,15 +48,14 @@ func AppendTooltips(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []by
 
 	tl, br := diagram.BoundingBox()
 	seperator := fmt.Sprintf(`<line x1="%d" y1="%d" x2="%d" y2="%d" stroke="#0A0F25" />`,
-		tl.X-PAD_SIDES, br.Y+PAD_TOP, go2.IntMax(w+PAD_SIDES, br.Y)+PAD_SIDES, br.Y+PAD_TOP)
+		tl.X-PAD_SIDES, br.Y+PAD_TOP, go2.IntMax(w, br.X)+PAD_SIDES, br.Y+PAD_TOP)
 	appendix = seperator + appendix
 
 	w -= viewboxPadLeft
 	w += PAD_SIDES * 2
 	if viewboxWidth < w {
-		viewboxWidth = w + PAD_SIDES
+		viewboxWidth = w
 	}
-	viewboxWidth += PAD_SIDES
 
 	viewboxHeight += h + PAD_TOP
 
@@ -81,6 +81,17 @@ func AppendTooltips(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []by
 }
 ]]></style>`, d2fonts.FontEncodings[d2fonts.SourceSansPro.Font(0, d2fonts.FONT_STYLE_REGULAR)])
 	}
+	if !strings.Contains(svg, `font-family: "font-bold"`) {
+		appendix += fmt.Sprintf(`<style type="text/css"><![CDATA[
+.text-bold {
+	font-family: "font-bold";
+}
+@font-face {
+	font-family: font-bold;
+	src: url("%s");
+}
+]]></style>`, d2fonts.FontEncodings[d2fonts.SourceSansPro.Font(0, d2fonts.FONT_STYLE_BOLD)])
+	}
 
 	closingIndex := strings.LastIndex(svg, "</svg>")
 	svg = svg[:closingIndex] + appendix + svg[closingIndex:]
@@ -113,22 +124,19 @@ func generateTooltipLine(i, y int, text string, ruler *textmeasure.Ruler) (strin
 	mtext := &d2target.MText{
 		Text:     text,
 		FontSize: FONT_SIZE,
-		IsBold:   false,
-		IsItalic: false,
-		Language: "",
 	}
 
 	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" />`,
-		0, y)
+		ICON_RADIUS, y)
 
 	line += fmt.Sprintf(`<text class="text-bold" x="%d" y="%d" style="font-size: %dpx;text-anchor:middle;">%d</text>`,
-		0, y+5, 16, i)
+		ICON_RADIUS, y+5, FONT_SIZE, i)
 
 	line += fmt.Sprintf(`<text class="text" x="%d" y="%d" style="font-size: %dpx;">%s</text>`,
-		32, y, FONT_SIZE, d2svg.RenderText(text, 32, float64(dims.Height)))
+		ICON_RADIUS*3, y, FONT_SIZE, d2svg.RenderText(text, ICON_RADIUS*3, float64(dims.Height)))
 
-	return line, dims.Width, dims.Height
+	return line, dims.Width + ICON_RADIUS*3, dims.Height
 }

d2renderers/d2svg/appendix/appendix_test.go

@@ -29,10 +29,52 @@ func TestAppendix(t *testing.T) {
 
 	tcs := []testCase{
 		{
-			name: "basic",
+			name: "tooltip_wider_than_diagram",
 			script: `x: { tooltip: Total abstinence is easier than perfect moderation }
 y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
 x -> y
+`,
+		},
+		{
+			name: "diagram_wider_than_tooltip",
+			script: `shape: sequence_diagram
+
+customer
+issuer
+store: { tooltip: Like starbucks or something }
+acquirer: { tooltip: I'm not sure what this is }
+network
+customer bank
+store bank
+
+customer: {shape: person}
+customer bank: {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/858/858170.png
+}
+store bank: {
+  shape: image
+  icon: https://cdn-icons-png.flaticon.com/512/858/858170.png
+}
+
+initial transaction: {
+  customer -> store: 1 banana please
+  store -> customer: '$10 dollars'
+}
+customer.internal -> customer.internal: "thinking: wow, inflation"
+customer.internal -> customer bank: checks bank account
+customer bank -> customer.internal: 'Savings: $11'
+customer."An error in judgement is about to occur"
+customer -> store: I can do that, here's my card
+payment processor behind the scenes: {
+  store -> acquirer: Run this card
+  acquirer -> network: Process to card issuer
+  simplified: {
+    network -> issuer: Process this payment
+    issuer -> customer bank: '$10 debit'
+    acquirer -> store bank: '$10 credit'
+  }
+}
 `,
 		},
 	}