diff --git a/d2renderers/d2svg/appendix/appendix.go b/d2renderers/d2svg/appendix/appendix.go
index 368bbefc0..28c5d0f22 100644
--- a/d2renderers/d2svg/appendix/appendix.go
+++ b/d2renderers/d2svg/appendix/appendix.go
@@ -19,10 +19,11 @@ import (
)
const (
- PAD_TOP = 50
- PAD_SIDES = 40
- FONT_SIZE = 16
- SPACER = 20
+ PAD_TOP = 50
+ PAD_SIDES = 40
+ FONT_SIZE = 16
+ 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(``,
- 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
}
]]>`, d2fonts.FontEncodings[d2fonts.SourceSansPro.Font(0, d2fonts.FONT_STYLE_REGULAR)])
}
+ if !strings.Contains(svg, `font-family: "font-bold"`) {
+ appendix += fmt.Sprintf(``, d2fonts.FontEncodings[d2fonts.SourceSansPro.Font(0, d2fonts.FONT_STYLE_BOLD)])
+ }
closingIndex := strings.LastIndex(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(``,
- 0, y)
+ ICON_RADIUS, y)
line += fmt.Sprintf(`%d`,
- 0, y+5, 16, i)
+ ICON_RADIUS, y+5, FONT_SIZE, i)
line += fmt.Sprintf(`%s`,
- 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
}
diff --git a/d2renderers/d2svg/appendix/appendix_test.go b/d2renderers/d2svg/appendix/appendix_test.go
index bb26a4372..a589498cf 100644
--- a/d2renderers/d2svg/appendix/appendix_test.go
+++ b/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'
+ }
+}
`,
},
}
diff --git a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
new file mode 100644
index 000000000..66530c536
--- /dev/null
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
@@ -0,0 +1,87 @@
+
+
\ No newline at end of file
diff --git a/d2renderers/d2svg/appendix/testdata/basic/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
similarity index 99%
rename from d2renderers/d2svg/appendix/testdata/basic/sketch.exp.svg
rename to d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
index f88e30ee3..126c22303 100644
--- a/d2renderers/d2svg/appendix/testdata/basic/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
@@ -2,7 +2,7 @@