Merge pull request #2094 from alixander/connection-style-fill

d2render: connection style fill

ci/release/changelogs/next.md

@@ -12,6 +12,7 @@
 - Compiler: Error on multi-line labels in `sql_table` shapes [#2057](https://github.com/terrastruct/d2/pull/2057)
 - Sequence diagram: Image shape actors can use spans and notes [#2056](https://github.com/terrastruct/d2/issues/2056)
 - Globs: Filters work with default values (e.g. `&opacity: 1` will capture everything without opacity explicitly set) [#2090](https://github.com/terrastruct/d2/pull/2090)
+- Render: connection label fills have a bit of padding and border-radius for better aesthetics [#2094](https://github.com/terrastruct/d2/pull/2094)
 
 #### Bugfixes ⛑️
 

d2renderers/d2sketch/sketch_test.go

@@ -1323,6 +1323,27 @@ C <-> D: triangle {
   }
 }`,
 		},
+		{
+			name: "connection-style-fill",
+			script: `
+shape: sequence_diagram
+customer
+employee
+rental
+item
+
+(* -> *)[*].style.fill: black
+(* -> *)[*].style.font-color: white
+
+customer -> employee: "rent(this, i, p)"
+employee -> rental: "new(this, i, p)"
+rental -> employee
+employee -> rental: isValid()
+rental -> item: isRentable(c)
+item -> customer: is(Adult)
+customer -> item: true
+`,
+		},
 	}
 	runa(t, tcs)
 }

d2renderers/d2svg/d2svg.go

@@ -623,8 +623,9 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		}
 		if connection.Fill != color.Empty {
 			rectEl := d2themes.NewThemableElement("rect")
-			rectEl.X, rectEl.Y = labelTL.X, labelTL.Y
-			rectEl.Width, rectEl.Height = float64(connection.LabelWidth), float64(connection.LabelHeight)
+			rectEl.Rx = 10
+			rectEl.X, rectEl.Y = labelTL.X-4, labelTL.Y-3
+			rectEl.Width, rectEl.Height = float64(connection.LabelWidth)+8, float64(connection.LabelHeight)+6
 			rectEl.Fill = connection.Fill
 			fmt.Fprint(writer, rectEl.Render())
 		}